关于16:9屏幕网页设计的思考

大多数情况下,当我们看到宽屏应用时,分辨率只是比董事会上的水平高出了一些。1024x768笔记本电脑的输出为1280x800,1600x1200显示器的输出为1920x1200,以此类推。垂直尺寸仍然可用。

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

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

这不仅限于将网站缩小到移动设备上,而且还可以在HDTV的全屏浏览器上适应和适应各种元素,或者只需在尺寸较小、类似于上网本的平板电脑上填充内容并使其外观良好即可。

我个人仍然不理解传统的“流畅”布局的使用,在这种布局中,中心文本列可以毫不犹豫地扩展到2000像素,除了在Web中。 应用 您可以使用Excel格式的数据矩阵来显示,或者使用大图像而不是实际的文本内容。就我个人而言,我遇到过太多这样的网站,它们的利润也太小,如果我扩大浏览器,即使在1920全宽的情况下,利润也不会增加,而且仍然太小——一个设计师给我强加了一个不舒服的利润,我无法通过不使用浏览器的开发工具更改网站的CSS来解决这个问题。^^

对我来说,响应式设计的第一步是采用臭名昭著的960px固定宽度,这是我非常喜欢的,当视野变小时,它可以分三步适应。这使它在小型设备上一直到手机屏幕都很舒适。然而,我目前面临的挑战是将设计范围扩大到1200像素左右,在那里东西变得太宽,不适合我的口味,还需要做另一个元素重新流动-但许多网站甚至没有任何内容可用于此…

作为用户 和 设计师,我讨厌固定宽度的网站。很多网站可以变成流动的,但不是因为它是“简单的出路”。然后遵循各种合理化,以支持这种观点(双关语的意图)。

新闻快报:短线长度是一个神话,可以追溯到早期的报纸研究。见 this summary 了解细节,做出自己的判断。

有些人可能看不到非常宽的行(我个人并不认为这是一个问题),但是大约900px的固定布局有三列,每行大约有8到10个字。

我一直试图通过查看一个网站的人口统计数据(例如,通过谷歌分析)和查看谁倾向于访问来设计合理的大小调整…

16:9如果你考虑的话,屏幕在垂直方向上并不受限制。根据我对这些显示器的经验,它们的本地分辨率通常是1920x1080。垂直空间仍然大于大多数分辨率(1024x768、1280x1024等)。

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

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

1. 尽量避免水平滚动。大多数人的鼠标滚轮只有一个方向。水平滚动通常被认为是非常恼人的。现在通常可以接受垂直滚动。
2. 长段落中的列大小很重要。我通常会推荐15-20个单词的宽度,但可以随意尝试。来自alphadogg的链接是一个有趣的阅读,但我不得不说,在Web开发中很难用“英寸”这个词。单词或字符可能是更好的衡量标准,这将引导我进入下一个项目:
3. 宽度使用相对单位。这使您在大多数情况下保持一定的单词宽度。
4. 有用提示:相对单位的问题是页面可以扩展到页面宽度之外。在大多数浏览器中,您可以通过在CSS中指定90%左右的最大宽度属性来控制这一点。因此,当某个人的显示器上的文字很大时,他们仍然不需要水平滚动。

同样,不建议在大多数情况下只将内容流到浏览器宽度的100%。我认为随着显示器越来越大,无论如何,最大化浏览器窗口的人会少得多。

除了其他评论…

大多数用户还没有使用宽屏显示器。更重要的是,许多使用宽屏显示器的用户并没有最大化他们的Web浏览器。

现在我不太担心旧屏幕,只要800px不够,我就很容易切换到1000px。但是,您不应该有意设计更宽的分辨率,例如1920x1080分辨率。拥有此类屏幕的用户数量并不多。即使不是这样,过宽的设计也会影响可用性。阅读水平伸展到1500像素的文本不是很好。

要考虑的一件事是应用程序的姿态。它是一个主权应用程序吗?在这个应用程序中,用户需要花一段时间全神贯注于它?我最近在我们的web应用程序中重新设计了一个页面,允许用户将其翻译成其他语言。在本例中,用户将要“潜入”应用程序的这一部分一段时间,因此我去掉了通常的导航元素,这将分散注意力,以便为手头的任务提供更多的不动产。

在这种情况下,用户群仅限于我公司内部的人,我知道他们都有宽屏显示器,所以很容易做出扩大范围的决定。总的来说,我想说的是,我们仍然应该为非宽屏显示器设计,但在有显著优势的情况下,使设计能够利用额外的空间。我见过一些页面是为常规屏幕设计的,但是使用javascript来检测页面是否更宽,如果更宽,则重新排列一些页面元素。这样,默认配置总是可用的,但是拥有宽屏幕和JavaScript的用户将更好地利用他们的空间。

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

设计您的站点,使其成为 内容 这很重要,而不是它的样子。然后,您可以提供供用户选择的备用CSS样式表。

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

请不要这样。

设计为4:3,最大宽度为800到900像素。

我使用的许多计算机(几乎和我工作中的每台计算机一样)是4:3。只有我的笔记本电脑是16:9(实际上我想是16:10,但足够近)。

我不喜欢我的网络浏览器像显示器一样宽,这是浪费空间。你看不到那么宽的文字。在我的桌面4:3液晶显示器(我现在正在使用)上,宽度是14“。你看不到14英寸宽的文字,眼睛看不到它在哪一行。这是一种可怕的疼痛。大多数网站都限制真实内容的宽度。StackOverflow的主要内容栏对我来说大约是8“,一个很好的阅读尺寸。

所以当你16:9的时候,情况会更糟。而不是14“你可能有16个”。太大了。那么你怎么处理这些空间呢?你不能只放文本,除非你想有两篇文章并排(像两个报纸专栏),我怀疑你想这样做。这意味着你只需要用无关紧要的废话填满它。更多的侧边栏,更多的广告栏。基本上你是在强迫内容填满空间。

不是每个人都能跑1920x1080。并不是每个人都能最大限度地利用他们的网络浏览器。用不重要的列填充我几乎一半的屏幕对我没有吸引力。

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

因此,我总是使用固定宽度的设计。我的当前监视器有一个43cm宽的活动区域。此页的线条高度为5毫米。如果使用流体设计,则比例线长度/线高度将是不可接受的84。
在30英寸的显示器上情况更糟。

我坚持为大多数人开发,他们仍然使用4:3的监视器。如果我想创建16:9的特定内容,我可能会提供一个指向“增强的宽屏显示器”版本的链接,有点像DVD背面的标签,当时并非所有内容都是变形的。

这里有一个链接指向另一个问题 可以 包含一些有用的信息。

book-recommendation-web-user-interface-design

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

另外,不要假设所有这些新的宽屏显示器都被正确使用。我已经看到了很多设置,其中监视器在其本机分辨率下没有被使用。人们要么不知道有什么不对,要么欣赏超大字符,即使它使事情有点模糊。

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

我总是用964px作为网站的宽度。近似值,因站点而异,但考虑到垂直滚动条,我将其保持在1024px以下。对于800px宽的屏幕来说,这个站点并不是太大,但是它的大小足以在1024和1280px宽的屏幕上看起来很漂亮。

在我的经验中,我发现即使是使用相当大的宽屏的用户(我自己有两个22英寸(1680x1050英寸)的屏幕),我仍然更喜欢固定宽度的布局,其可读性大约为1024倍宽。

我非常不喜欢阅读大跨度的文本,我喜欢把它保持在“书的宽度”。我发现大多数网站都很吸引人,并且拥有大量的用户群,这些网站的规模都在这些范围内。

希望这有帮助。

这个 巨大的 大多数网络用户仍然使用标准的非宽屏显示器(请参阅下面的统计数据和我的评论),所以我会为他们设计。我个人对1024x768分辨率进行了优化。

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

作为宽屏显示器的普通用户,我不想看到设计师把他们的网站扩大。我运行24英寸宽屏幕(1920x1200),当我浏览网页时,通常会同时运行两个浏览器。如果有的话,最好是把一些网站缩小一点。大多数网站的运行速度可以达到960像素,但当我不得不将一个网站打开得更宽或滚动查看所有内容时,这很烦人。

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