您对16:9屏幕的网页设计的想法

时间:2009-02-05 15:03:33

标签: aspect-ratio

我设计的网络应用程序主要供同事和客户使用(不是PDA,手机等)。随着越来越多的用户配备16:9型屏幕,传统的屏幕布局不再符合人体工程学。

例如,长垂直导航栏可能不完全适合,或者可能需要滚动复杂的表单才能移动到下一个输入字段。

你是如何应对这种发展的?你是在水平展开还是坚持旧的布局?这不是一个真正的问题吗?

更新

感谢所有回复。我发现它们很有用。以下是我想到的一些想法:

  • 我认为4:3格式可能仍然是最广泛使用的,但我希望能够改变。

  • 此外,我在公司访问的大多数用户都所有他们的Windows最大化(真的!)所以调整浏览器大小以适应内容的想法并没有帮助。< / p>

  • 在我的情况下,大多数网络应用程序涉及搜索和显示信息或数据输入(其中一些可能涉及大而复杂的表单)。它主要是我关注的数据输入应用程序。也许AJAX和Tabbed控件可能是前进的方式。

19 个答案:

答案 0 :(得分:14)

当我们考虑宽屏采用时,大多数情况下,分辨率刚刚在电路板上增加。 1024x768笔记本电脑转1280x800,1600x1200显示器转1920x1200等等。垂直尺寸仍可照常使用。

现在是时候更新这个答案,以适应人们在网上冲浪的方式,地点和方式的变化。我倾向于在一定程度上具有流畅性的响应式设计,但是由于媒体查询和其他有用的技术,设计师可以更好地控制演示文稿的重新流动,同时仍然能够适应任何视图/屏幕尺寸。

当可用视图小于某个限制时调整和折叠内容,并将文本保持在最大线宽但扩展和重新排列其他元素是我开始做的事情。

这不仅限于将网站缩小到移动设备,还可以将元素调整到高清电视上的全屏浏览器上,或者只是在较小的平板电脑上填充和看起来很好上网本。

我仍然没有亲自理解使用传统的“流畅”布局,其中中心文本列可以毫不犹豫地扩展到2000像素,除了在web 应用程序中你有类似excel的矩阵要显示的数据或大图像而不是实际文本内容。就个人而言,我偶然发现太多这样的网站,其边距也太小,如果我扩大浏览器,即使在1920宽度范围内,边距也不会增加,而且仍然太小 - 设计师给我带来了不舒服的余量我无法通过浏览器的开发工具^^

更改网站的CSS来解决这个问题

对我来说,响应式设计的第一步是采用我喜爱的臭名昭着的960px固定宽度,并在视野较小时让它适应三个步骤。这使得在较小的设备上一直到手机屏幕都很愉快。然而,我目前面临的挑战是将设计范围扩大到1200px左右,因为我的品味太过宽,需要另外一个元素重新流动 - 但很多网站甚至没有任何内容可供使用......

答案 1 :(得分:12)

作为用户设计师,我讨厌固定宽度的网站。许多网站可以变得流畅,但不是因为它是“简单的出路”。然后遵循所有适合的合理化(双关语)以支持该观点。

Newsflash:短线长度是早期报纸研究的一个神话。有关详细信息,请参阅this summary并做出自己的判断。

对于某些人来说,很宽的线路可能是不可读的(我个人认为这个问题并不多),但是有300列的固定布局有三列,这样每条线路大约有8到10个字。 / p>

我一直试图通过查看网站的受众特征(例如,通过Google Analytics)来设计合理的大小调整,并查看谁会访问...

答案 2 :(得分:6)

如果你考虑的话,16:9的屏幕并没有真正垂直限制。根据我使用这些显示器的经验,它们的原始分辨率通常为1920x1080。垂直空间仍然大于大多数分辨率(1024x768,1280x1024等)

然而,我开始编写液体布局来处理水平空间。一些网页设计师喜欢坚持960px的固定宽度。这完全取决于您尝试向用户呈现的内容。

答案 3 :(得分:6)

以下是我作为用户推荐的一些原则,但也作为网页设计师和开发人员:

  1. 尽量避免水平滚动。大多数人都有一个只能向一个方向工作的鼠标滚轮。水平滚动通常被认为非常恼人。垂直滚动现在通常是可以接受的。
  2. 列大小在很长的段落中很重要。我通常建议大约15-20个单词的宽度,但随意尝试。来自alphadogg的链接是一个有趣的读物,但我不得不说在Web开发中很难用“英寸”这个词。单词或字符可能是更好的衡量标准,这使我进入下一个项目:
  3. 使用相对单位表示宽度。这使您可以在大多数情况下将宽度保持在一定数量的单词。
  4. 有用的提示:相对单元的问题是页面可以扩展超过页面的宽度。您可以通过在css中指定max-width属性(大约90%左右)来控制大多数浏览器。因此,当某人的显示器上的文字很大时,他们仍然不必水平滚动。
  5. 同样不建议仅在大多数时间内将内容流式传输到浏览器宽度的100%。我认为随着显示器越来越大,无论如何,你会看到很少人最大化浏览器窗口。

答案 4 :(得分:5)

除了其他评论......

大多数用户尚未使用宽屏显示器。更重要的是,许多使用宽屏显示器的用户没有最大化其网络浏览器。

答案 5 :(得分:3)

这些天我不太担心旧屏幕,只要800px不够,我就可以轻松切换到1000px。但是,你不应该故意设计更宽的东西,比如1920x1080分辨率。拥有此类屏幕的用户数量并不多。即使不是这种情况,太宽的设计也会影响可用性。读取水平拉伸到~1500px的文本并不是很好。

答案 6 :(得分:3)

要考虑的一件事是你的应用程序的姿势。它是一个主权应用程序,用户可能会在一段时间内全神贯注地投入其中吗?我最近在我们的网络应用程序中重新设计了一个页面,允许用户执行其他语言的翻译。在这种情况下,用户将暂时“潜入”应用程序的这一部分,所以我删除了通常的导航元素,这将分散注意力,为手头的任务留出更多的空间。

在这种情况下,用户群仅限于我公司内部的人,我知道他们都有宽屏显示器,因此很容易做出决定。一般来说,我应该说仍然应该为非宽屏显示器设计,但是在有显着优势的情况下,使设计能够利用额外的空间。我已经看到了一些针对常规屏幕布局的页面,但是使用JavaScript来检测页面是否更宽并重新排列某些页面元素(如果是的话)。这样,默认配置始终可用,但具有宽屏幕和JavaScript的用户可以更好地利用其空间。

答案 7 :(得分:2)

我在30英寸显示器上进行所有开发,并在20英寸显示器上进行预览,作为快速检查。在我最近的一个应用程序版本中,我有一个JS发回我的目标受众使用的统计数据,然后我带回了大量小于1024x768的随机数。在我收集的大约一百个统计数据中,只有5或6个用户在1440x900以上的屏幕上全屏运行。

答案 8 :(得分:1)

在我的设计课程中,我们有一个经验法则,即线长度不应大于线高的40倍。原因很明显:当你的眼睛追溯到下一行的开头时,你要确定它是下一行,而不是同一行或下一行。

出于这个原因,我总是使用固定宽度设计。我目前的显示器有一个43厘米宽的活动区域。此SO页面上的线高为5毫米。如果SO将使用流体设计,则比率线长度/线高度将是不可接受的84 30“显示器上的情况更糟。

答案 9 :(得分:1)

请不要。

设计为4:3,最大可能为800到900像素。

我使用的许多电脑(几乎每个人都在工作)是4:3。只有我的笔记本电脑是16:9(实际上我认为16:10,但足够接近)。

我不喜欢我的网络浏览器和我的显示器一样宽,这是浪费空间。你无法阅读那些广泛的文字。在我的桌面4:3 LCD(我现在正在使用)上,宽度为14“。你无法读取14”宽的文字,眼睛无法跟踪它在哪条线上。这是一个可怕的痛苦。大多数网站限制真实内容的宽度。对于我来说,StackOverflow的主要内容列大约是8英寸,读取大小很好。

所以当你16:9时,事情变得更糟。而不是14“你可能有16”。那太大了。那你用这个空间做什么呢?你不能只放文字,除非你想并排两篇文章(比如两个报纸专栏),我怀疑你是不是想这样做。这意味着你只需填写不重要的废话。更多侧边栏,更多广告栏。基本上你是在强迫内容填补空间。

不是每个人都跑1920x1080。不是每个人都保持其网络浏览器最大化。用不重要的列填充近一半的屏幕对我没有吸引力。

答案 10 :(得分:1)

设计您的网站,使其重要的是内容,而不是它的外观。然后,您可以提供备用CSS样式表供用户选择。

对于设计师来说,这有时会更加困难。例如,使用表格进行布局不起作用。

答案 11 :(得分:0)

以下是另一个SO问题的链接,其中可能包含一些有用的信息。

book-recommendation-web-user-interface-design

答案 12 :(得分:0)

广大大多数网络用户仍然使用标准的非宽屏显示器(请参阅下面的统计信息和我的评论),因此我会为他们设计。我个人优化分辨率为1024x768。

http://www.thecounter.com/stats/2009/January/res.php

答案 13 :(得分:0)

不要假设在宽屏幕上垂直分辨率正常。 1440x900似乎是一个流行的分辨率,虽然它比1024x768大,但它明显短于1280x1024。

此外,不要假设所有这些新的宽屏显示器都正常使用。我已经看过很多设置,其中显示器没有以其原始分辨率使用。人们要么没有意识到什么是错的,要么他们欣赏超大字符,即使它使事情变得有点模糊。

答案 14 :(得分:0)

不要忘记,仅仅因为用户拥有宽屏显示器,并不意味着他们的窗户最大化。

答案 15 :(得分:0)

我总是使用964px作为网站的宽度。近似,从站点到站点不同,但我将其保持在1024px宽,考虑垂直滚动条。对于800px宽屏幕来说,这个网站并不过分,但是在1024和1280px宽屏幕上看起来不够大。

根据我的经验,我发现即使是使用相当大的宽屏幕的用户(我自己拥有双22英寸(1680x1050)屏幕),我仍然更喜欢固定宽度的布局,宽度大约为1024px,以便于阅读。

我非常不喜欢阅读非常大的文本范围,我喜欢将它保持在“书宽”。我发现大多数具有吸引力且拥有庞大用户群的网站都是这些规模的。

希望这有帮助。

答案 16 :(得分:0)

作为宽屏显示器的常规用户,我不希望看到设计师使他们的网站更广泛。我运行24英寸宽屏(1920x1200),当我浏览网页时,我经常并排运行两个浏览器。如果有的话,让一些网站变得更窄一点是最好的。大多数网站都能在960像素的情况下运行良好,但是当我不得不打开一个更宽的网站或滚动查看所有内容时,它会很烦人。

答案 17 :(得分:0)

请考虑使用1024x600屏幕的快速增长的上网本用户群。我认为这应该是当前项目的最小设计尺寸。

答案 18 :(得分:0)

我坚持为大多数人开发,仍然使用4:3显示器。如果我想创建特定于16:9的内容,我可能会提供“增强型宽屏显示器”版本的链接,有点像DVD背面的标签,而不是所有这些都是变形的。