18

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

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

您如何应对这种发展?你是更水平地展开还是坚持旧的布局?这真的不是问题吗?

更新

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

  • 我认为 4:3 格式可能仍然是最广泛使用的格式,但我希望这种情况会有所改变。

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

  • 就我而言,大多数网络应用程序都涉及信息或数据输入的搜索和显示(其中一些可能涉及大而复杂的表单)。这主要是我关心的数据输入应用程序。也许 AJAX 和选项卡式控件可能是一种前进的方式。

4

19 回答 19

14

当我们查看宽屏采用率时,大多数情况下分辨率只是水平增加。1024x768 笔记本电脑变成 1280x800,1600x1200 显示器变成 1920x1200 等等。垂直尺寸仍然照常可用。

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

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

这不仅限于将网站缩小到移动设备上,而且还可以将元素调整并适应高清电视上的全屏浏览器 - 或者只是在具有类似于上网本的尺寸的较小平板电脑上填充并看起来不错.

我个人仍然不理解使用传统的“流体”布局,其中中心文本列可以毫不犹豫地扩展到 2000 像素,除非在 Web应用程序中,您需要显示类似 excel 的数据矩阵或大图像而不是实际的文本内容。就我个人而言,我偶然发现了太多这样的网站,它们的边距也太小了,如果我加宽浏览器,即使在 1920 宽度下,边距也不会增加,而且仍然太小——设计师给我施加了一个不舒服的边距我无法通过使用浏览器的开发工具更改网站的 CSS 来修复它^^

对我来说,响应式设计的第一步是采用我非常喜欢的臭名昭著的 960 像素固定宽度,并在视图较小时分三步进行调整。这使得它在较小的设备上一直很愉快,一直到手机屏幕。然而,我目前的挑战是将设计扩大到 1200 像素左右,因为我的口味太宽了,需要进行另一个元素重排 - 但许多网站甚至没有任何内容可以用于此目的......

于 2009-02-05T15:14:29.387 回答
12

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

新闻快讯:短行长度是一个可以追溯到早期报纸研究的神话。有关详细信息,请参阅此摘要并做出您自己的判断。

很宽的行可能对某些人来说是不可读的(我个人认为这不是什么大问题),但大约 900 像素的三列固定布局也是如此,这样每行大约有 8 到 10 个单词。

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

于 2009-02-05T15:28:05.960 回答
6

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

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

于 2009-02-05T15:09:43.890 回答
6

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

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

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

于 2009-02-05T16:19:04.220 回答
5

除了其他评论...

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

于 2009-02-05T15:29:19.873 回答
3

这些天我不太担心旧屏幕,每当 800 像素不够时,我很容易切换到 1000 像素。但是,您不应该故意设计更宽的东西,例如 1920x1080 分辨率。拥有这种屏幕的用户数量并不多。即使不是这样,太宽的设计也会影响可用性。阅读水平拉伸到〜1500px的文本并不是很好。

于 2009-02-05T15:10:51.377 回答
3

要考虑的一件事是您的应用程序的状态。它是一个主权应用程序,用户需要在一段时间内将全部注意力集中在它上面吗?我最近在我们的 Web 应用程序中重新设计了一个页面,它允许用户执行其他语言的翻译。在这种情况下,用户将“潜入”应用程序的这一部分一段时间,所以我去掉了通常会分散注意力的导航元素,以便为手头的任务留出更多空间。

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

于 2009-02-05T17:12:02.723 回答
2

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

于 2009-02-05T15:35:57.567 回答
1

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

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

于 2009-02-05T17:19:20.557 回答
1

请不要。

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

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

我不喜欢我的网络浏览器和我的显示器一样宽,这是浪费空间。您无法阅读那么宽的文本。在我的桌面 4:3 LCD(我现在正在使用)上,宽度是 14 英寸。你无法阅读 14 英寸宽的文本,眼睛会忘记它在哪一行。这是一种可怕的痛苦。大多数网站都会限制真实内容的宽度。StackOverflow 的主要内容栏对我来说大约是 8 英寸,阅读量很大。

所以当你去 16:9 时,情况会变得更糟。现在你可能有 16 英寸而不是 14 英寸。那是巨大的。那么你如何处理所有这些空间?你不能只放文本,除非你想并排放置两篇文章(比如两个报纸专栏),我怀疑你想这样做。这意味着你只是用不重要的废话来填充它。更多侧边栏,更多广告栏。基本上你是在强迫内容填充空间。

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

于 2009-02-05T17:21:49.927 回答
1

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

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

于 2009-03-05T08:09:48.197 回答
0

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

于 2009-02-05T15:10:02.220 回答
0

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

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

于 2009-02-05T15:13:29.047 回答
0

这是另一个 SO question 的链接,其中可能包含一些有用的信息。

书籍推荐网络用户界面设计

于 2009-02-05T16:00:08.813 回答
0

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

此外,不要假设所有这些新的宽屏显示器都在正确使用。我见过不少显示器没有以其原始分辨率使用的设置。人们要么不知道有什么不对,要么他们欣赏超大字符,即使它使事情变得有点模糊。

于 2009-02-05T17:36:07.933 回答
0

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

于 2009-02-05T18:17:05.213 回答
0

我总是使用 964px 作为网站的宽度。近似值,因站点而异,但考虑到垂直滚动条,我将其保持在 1024 像素以下。这利用了该网站对于 800 像素宽的屏幕来说并不过大,但在 1024 和 1280 像素宽的屏幕上看起来不错。

根据我的经验,我发现即使用户使用相当大的宽屏(我自己有双 22" (1680x1050) 屏幕),我仍然更喜欢固定宽度布局,大约 1024 像素宽以提高可读性。

我非常不喜欢阅读非常大的文本,我喜欢将其保持在“书本宽度”。我觉得很有吸引力并且拥有庞大用户群的大多数网站都在这些规模左右。

希望这可以帮助。

于 2009-02-06T08:09:10.837 回答
0

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

于 2009-02-07T14:56:45.053 回答
0

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

于 2009-03-05T07:32:40.500 回答