您对 16:9 屏幕网页设计的想法
我设计的网络应用程序主要供同事和客户在桌面上使用（不是 PDA、电话等）。 随着越来越多的用户配备 16:9 型屏幕，传统的屏幕布局不再符合人体工程学。
例如，较长的垂直导航栏可能无法完全适合，或者可能需要滚动复杂的表单才能移动到下一个输入字段。
您如何应对这一发展？ 您是更加水平地展开还是坚持旧的布局？ 难道这真的不是一个问题吗？
更新
感谢您的所有回复。 我发现它们很有用。 以下是我的一些想法：
我认为 4:3 格式可能仍然是使用最广泛的格式，但我希望这种情况会改变。
此外，我在公司访问的大多数用户都将其窗口最大化（真的！），因此调整浏览器大小以适应内容的想法对此没有帮助。
就我而言，大多数网络应用程序都涉及信息的搜索和显示或数据输入（其中一些可能涉及大型且复杂的表单）。 我主要关心的是数据输入应用程序。 也许 AJAX 和选项卡式控件可能是一种前进的方式。
I design web apps mainly for desktop use (not PDAs, phones etc) by co-workers and customers. As more users become equipped with 16:9-type screens the traditional screen layouts are no longer ergonomic.
For example, a long vertical navi bar might not fit completely or a complex form might need to be scrolled in order to move to the next input field.
How are you coping with this development? Are you spreading out more horizontally or sticking with the old layouts? Is it not really a problem?
UPDATE
Thanks for all the replies. I have found them useful. Here are some thoughts which occurred to me:
I take the point that the 4:3 format may still be the most widely used, but I expect that to change.
Also, most users I visit here in the company have all their windows maximised (really!) so the idea of sizing the browser to fit the content doesn't help there.
In my case, most web apps involve search and display of information or data entry (some of which can involve large and complex forms). It's mainly the data entry apps which I'm concerned about. Perhaps AJAX and Tabbed controls might be a way forward there.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（19）
当我们观察宽屏的采用时，大多数情况下，分辨率只是在水平方向上增加了。 1024x768 笔记本电脑变为 1280x800，1600x1200 显示器变为 1920x1200 等等。 垂直尺寸仍然照常可用。
现在是我更新这个答案以适应人们上网方式、地点和方式的变化的时候了。 我倾向于响应式设计，这种设计在一定程度上是流畅的，但由于媒体查询和其他有用的技术，设计师可以更好地控制演示重流，同时仍然能够适应任何视图/屏幕尺寸。
当可用视图小于一定限制时调整和折叠内容，并将文本保持在最大行宽但扩展和重新排列其他元素是我已经开始做的事情。
这不仅限于将网站缩小到移动设备，还可以将元素调整并适合高清电视上的全屏浏览器，或者只是在尺寸类似于上网本的较小平板电脑上填充并看起来不错。
我个人仍然不理解传统的“流体”布局的使用，其中中心文本列可以毫不犹豫地扩展到 2000 像素，除了在网络应用程序中，你有类似 excel 的数据矩阵显示或大图像而不是实际文本内容。 就我个人而言，我偶然发现了太多这样的网站，这些网站的边距也太小，如果我加宽浏览器，即使在 1920 宽度下，边距也不会增加，而且仍然太小 - 设计师给我强加了令人不舒服的边距我无法通过浏览器的开发工具更改网站的 CSS 来解决这个问题 ^^
对我来说，响应式设计的第一步是采用我非常喜欢的臭名昭著的 960px 固定宽度，并让它在以下三个步骤中进行调整：视野更小。 这使得它在较小的设备上一直到手机屏幕上都令人愉悦。 然而，我当前的挑战是将设计扩大到 1200 像素左右，其中内容对于我的口味来说太宽了，并且需要完成另一个元素重新流动 - 但许多网站缺乏任何内容甚至无法用于此目的......
Mostly the resolution has just increased horisontally over the board when we look at widescreen adoption. 1024x768 laptops go 1280x800, 1600x1200 displays go 1920x1200 and so on. The vertical size is still available as usual.
It's time I update this answer to adapt to the changes on how, where and with what people surf the web. I'm tending towards responsive designs which are fluid to a certain degree but thanks to media queries and other useful techniques gives the designer a lot more control over presentation re-flow, while still have the capability to adapt to any view/screen size.
Adapting and collapsing content when the available view is less than a certain limit, and keeping text at a maximum line width but expanding and re-arranging other elements are things I've started to do.
This is not only limited to shrinking a site to a mobile device, but also to adapt and fit elements onto a fullscreen browser on an HDTV - or simply to fill up and look good on a smaller tablet with an off-size akin to a netbook.
I still don't personally understand the use of traditional "fluid" layouts where a center text column could expand to 2000 pixels without hesitation, except for in web applications where you have excel-like matrices of data to display or a large image rather than actual text content. Personally I've stumbled on too many such sites where the margin is also too small, and if I widen the browser, the margin doesn't increase even at full 1920 width and is still too small - a designer imposed an uncomfortable margin on me and I can't fix it by less than changing the site's CSS with the browser's dev tools ^^
The first steps in a responsive design to me was to take the infamous 960px fixed width I love so much and have it adapt in three steps when the view was smaller. This made it pleasant on smaller devices all the way to a phone screen. However, my current challenge is widening the design past around the 1200px mark where stuff gets too wide for my taste and another element re-flow needs to be done - but many sites lacks any content to even use for that...
作为用户和设计师，我讨厌固定宽度的网站。 许多网站都可以变得流畅，但事实并非如此，因为这是“最简单的出路”。 然后是各种适合（双关语）支持该观点的合理化。
新闻快讯：短行长度是一个可以追溯到早期报纸研究的神话。 请参阅此摘要了解详细信息并做出自己的判断。
非常宽的行可能对某些人来说难以阅读（我个人认为这不是一个大问题），但是大约 900px 的三列固定布局也是如此，这样每行大约有八到十个单词。
我一直尝试通过查看网站的人口统计数据（例如，通过 Google Analytics）并查看谁倾向于访问来设计合理的大小调整...
As a user and designer, I hate fixed-width sites. Lots of sites could be made fluid, but are not because it's "the easy way out". Then follows all sorts of rationalizations that are fitted (pun intended) to support that view.
Newsflash: Short line lengths is a myth that dates to early newspaper research. See this summary for details and make your own judgment.
Very wide lines may be unreadable to some (I don't find that as much of an issue, personally), but so are ~900px fixed layouts with three columns, such that each line is about eight to ten words.
I've always tried to design for reasonable resizing by looking at the demographics of a site (for example, via Google Analytics) and seeing who tends to visit...
如果你仔细想想，16:9 屏幕在垂直方向上并没有真正受到限制。 根据我使用这些显示器的经验，它们的原始分辨率通常为 1920x1080。 垂直空间仍然大于大多数分辨率（1024x768、1280x1024 等）。
不过，我已经开始编写液体布局来处理水平空间。 一些网页设计师喜欢坚持使用 960px 固定宽度。 这完全取决于您想要向用户呈现的内容。
16:9 screens are not really restricted vertically if you think about it. In my experience with these monitors, their native resolutions are typically 1920x1080. The vertical space is still larger than most resolutions (1024x768, 1280x1024, etc..)
I have however started writing liquid layouts to handle the horizontal space. Some web designers like to stick with 960px fixed width. It all depends on what you are trying to present to the user.
以下是我作为用户以及网页设计师和开发人员推荐的一些原则：
再次强调，大多数时候不建议简单地将内容流到浏览器宽度的 100%。 我认为，随着显示器变得越来越大，无论如何，您会看到最大化浏览器窗口的人会少得多。
Here are some principles I would recommend as a user but also as a web designer and developer:
Again it is not recommended simply to flow content to 100% of the browser width most of the time. And I think as displays get larger, you'll see a lot fewer people maximizing browser windows anyway.
除了其他评论之外......
大多数用户还没有使用宽屏显示器。 更重要的是，许多使用宽屏显示器的用户并未将其网络浏览器最大化。
In addition to the other comments...
Most users are not using widescreen monitors yet. More importantly, many users who DO use widescreen monitors do not have their web browsers maximized.
现在我不太担心旧屏幕，每当 800 像素不够时，我都会轻松切换到 1000 像素。 但是，您不应故意设计更宽的分辨率，例如 1920x1080 分辨率。 拥有此类屏幕的用户数量并不多。 即使事实并非如此，太宽的设计也会影响可用性。 阅读水平拉伸到约 1500 像素的文本并不是很好。
I do not worry much about old screens these days and whenever 800px is not enough I easily switch to 1000px. However you should not design intentionally for something wider, like 1920x1080 resolutions. The number of users with such screens is not that much. Even if it were not the case, too wide designs affect usability. Read texts stretched horizontally to ~1500px is not really nice.
需要考虑的一件事是应用程序的姿势。 它是一个主权应用程序，用户需要在一段时间内将全部注意力集中在它上面吗？ 我最近重新设计了我们的网络应用程序中的一个页面，该页面允许用户执行其他语言的翻译。 在这种情况下，用户将“潜入”应用程序的这一部分一段时间，因此我删除了通常会分散注意力的导航元素，以便为手头的任务留出更多空间。
在这种情况下，用户群仅限于我公司内部的人员，我知道他们都拥有宽屏显示器，因此很容易做出使用宽屏的决定。 一般来说，我想说，人们仍然应该为非宽屏显示器进行设计，但在有显着优势的情况下，使设计能够利用额外的空间。 我见过一些为常规屏幕布局的页面，但使用 JavaScript 来检测页面是否更宽，如果是，则重新排列一些页面元素。 这样，默认配置始终可用，但使用宽屏幕和 JavaScript 的用户可以更好地利用他们的空间。
One thing to consider is your application's posture. Is it a sovereign app, where the user would be expected to devote their entire attention to it for a while? I recently redesigned a page in our web app which allows the user to perform translations into other languages. In this case, the user was going to be "diving in" to this part of the application for a while, so I stripped out the usual navigational elements which would be a distraction to allow more real estate for the task at hand.
In this case, the user base was limited to people inside my company, who I knew all had widescreen monitors, so it was easy to make the decision to go wide. In general, I'd say that one should still design for non-widescreen monitors, but in cases where there is a significant advantage, make the design capable of taking advantage of the additional space. I've seen some pages that were laid out for regular screens, but used JavaScript to detect whether the page was wider and rearrange some page elements if it was. That way, the default configuration was always usable, but users with wide screens and JavaScript would get a better use of their space.
我在 30 英寸显示器上进行所有开发，并在 20 英寸显示器上预览，以进行快速健全性检查。 在我最近发布的应用程序中，我让 JS 发回了我的目标受众正在使用的统计数据，然后我返回了许多小于 1024x768 的随机数。 在我收集的大约一百个统计数据中，只有 5 或 6 个用户在大于 1440x900 屏幕的任何设备上全屏运行。
I do all of my development on 30" monitor and preview it on a 20" monitor as a quick sanity check. On a recent application release I did, I had a JS send back the stats of what my target audience was using, and I come back with a a lot of random numbers smaller than 1024x768. Of the hundred or so stats I collected, only 5 or 6 users were running full screen on anything larger than a 1440x900 screen.
设计您的网站时，重要的是内容，而不是外观。 然后，您可以提供备用 CSS 样式表供用户选择。
这对于设计师来说有时会更加困难。 例如，使用表格进行布局是行不通的。
Design your site so that it is the content that matters, not how it looks. Then you can provide alternate CSS style sheets for the user to pick from.
This can sometimes be more difficult for the designer. For instance, using tables for layout doesn't work.
请不要。
设计为 4:3，最大宽度可能为 800 到 900 像素。
我使用的许多计算机（就像我工作中的几乎每一台计算机）都是 4:3。 只有我的笔记本电脑是 16:9（实际上我认为是 16:10，但足够接近）。
我不喜欢网络浏览器与显示器一样宽，这是浪费空间。 你无法阅读那么宽的文本。 在我的桌面 4:3 LCD（我现在正在使用）上，宽度为 14 英寸。您无法阅读 14 英寸宽的文本，眼睛无法追踪它所在的行。 这是一种可怕的痛苦。 大多数网站都会限制实际内容的宽度。 StackOverflow 的主要内容栏对我来说大约是 8 英寸，这是一个很好的阅读尺寸。
所以当你使用 16:9 时，情况会变得更糟。现在你可能不再使用 14 英寸，而是使用 16 英寸。那太大了。那么你用所有的内容做什么呢？那个空间？你不能只放置文本，除非你想并排放置两篇文章（就像两个报纸专栏），而我怀疑你想这样做，这意味着你只是用更多的废话填充它。 ，更多的广告栏。基本上，
并不是每个人都使用 1920x1080 的分辨率来填充几乎一半的屏幕，这对我来说并不有吸引力。
Please don't.
Design for 4:3, maybe 800 to 900 pixels wide max.
Many computer I use (like nearly every one at my work) are 4:3. Only my laptop is 16:9 (actually 16:10 I think, but close enough).
I don't like having my web browser as wide as my monitor, it's a waste of space. You can't read text that wide. On my desktop 4:3 LCD (which I'm using right now) the width is 14". You can't read 14" wide text, the eye loses track of which line it's on. It's a horrible pain. Most sites restrict the width of the real content. StackOverflow's main content column for me is about 8", a great reading size.
So when you go 16:9, things get worse. Now instead of the 14" you might have 16". That's huge. So what do you DO with all that space? You can't just put text, unless you want to have two articles side-by-side (like two newspaper columns) and I doubt you want to do that. That means you just fill it with unimportant nonsense. More sidebars, more ad columns. Basically you're forcing content in to fill space.
Not everyone runs 1920x1080. Not everyone keeps their web browser maximized. Filling nearly half my screen with unimportant columns does not appeal to me.
在我的设计课程中，我们有一条经验法则，即线条长度不应大于线条高度的 40 倍。 原因很明显：当您的眼睛追溯到下一行的开头时，您希望确定它是下一行，而不是同一行或下一行加一。
因此我总是使用固定宽度的设计。 我当前的显示器的活动区域宽 43 厘米。 此 SO 页面上的行高为 5 毫米。 如果 SO 使用流体设计，则线长/线高的比率将是不可接受的 84。
在 30 英寸显示器上情况甚至更糟。
In my design course we had a rule-of-thumb that line length should not be greater than 40 times line height. The reason is obvious: when your eyes trace back to the beginning of the next line you want to be sure it is the next line, not the same line again or the next plus one.
For this reason I always use fixed-width design. My current monitor has an active area 43cm wide. Line height on this SO page is 5mm. If SO would use fluid design the ratio line length / line height would be an unacceptable 84.
And things are even worse on 30" monitors.
我坚持为大多数人开发，他们仍然使用 4:3 显示器。 如果我想创建 16:9 特定内容，我可能会提供“增强型宽屏显示器”版本的链接，有点像 DVD 背面的标签，当时并非所有 DVD 都是变形的。
I stick with developing for the majority, which is still using 4:3 monitors. If I wanted to create 16:9-specific content, I'd probably provide a link to the "Enhanced for widescreen monitors" version, sort of like the label on the back of DVDs from the days when not all of them were anamorphic.
这是另一个 SO 问题的链接，其中可能包含一些有用的信息。
图书推荐-web-user-interface-design
Here is a link to another SO question which might contain some useful info.
book-recommendation-web-user-interface-design
不要认为垂直分辨率在宽屏幕上就可以。 1440x900 似乎是一种流行的分辨率，虽然它比 1024x768 大，但它明显比 1280x1024 短。
另外，不要假设所有这些新的宽屏幕显示器都被正确使用。 我见过很多显示器未以其原始分辨率使用的设置。 人们要么没有意识到有什么问题，要么他们欣赏超大的字符，即使它让事情变得有点模糊。
Don't assume vertical resolution is OK on wide screen. 1440x900 seems to be a popular resolution, and while it's bigger than 1024x768, it's noticeably shorter than 1280x1024.
Also, don't assume all those new wide screen monitors are being used properly. I've seen quite a few setups where the monitor is not being used at its native resolution. People either are unaware that anything is wrong, or they appreciate the extra large characters even if it makes things a little fuzzy.
不要忘记，仅仅因为用户拥有宽屏显示器，并不意味着他们的窗口也最大化。
Don't forget that just because a user has a widescreen monitor, it doesn't mean that they have their windows maximized either.
我总是使用 964px 作为网站的宽度。 近似值，因站点而异，但考虑到垂直滚动条，我将其宽度保持在 1024 像素以下。 这利用了该网站对于 800 像素宽屏幕来说不是太大，但在 1024 和 1280 像素宽屏幕上足够大，看起来不错。
根据我的经验，即使用户使用相当大的宽屏（我自己有双 22 英寸（1680x1050）屏幕），我仍然更喜欢固定宽度布局，大约 1024 像素宽以提高可读性。
我非常不喜欢阅读很大的内容文本跨度，我喜欢将其保持在“书本宽度”，我认为有吸引力并且拥有大量用户群的大多数网站都在这些尺寸左右
。
I always use 964px as my width for websites. Approximate, varying from site to site, but I keep it under 1024px wide, taking into consideration vertical scrollbars. This leverages the site is not overly large for an 800px wide screen, but is just big enough to look nice on a 1024, and 1280px wide screens.
I have found in my experience, that even users who use rather large widescreens (I myself having dual 22" (1680x1050) screens, I still prefer a fixed width layout, at approximately 1024px wide for readability.
I very much so dislike reading very large spans of text, and I like to keep it at "book width". Most websites I find attractive, and have a large user base are around these sizes.
Hope this helps.
绝大多数网络用户仍然使用标准的非宽屏显示器（请参阅下面的统计数据和我的评论），因此我会为他们进行设计。 我个人针对 1024x768 分辨率进行优化。
http://www.thecounter.com/stats/2009/January/res。 php
The vast majority of web users are still on standard, non-widescreen monitors (see stats and my comment below), so I'd design for them. I personally optimise for 1024x768 resolution.
http://www.thecounter.com/stats/2009/January/res.php
作为宽屏显示器的常规用户，我不希望看到设计师将他们的网站变得更宽。 我运行 24 英寸宽屏 (1920x1200)，当我浏览网页时，我通常并排运行两个浏览器。 如果有什么不同的话，最好是让一些网站变得更窄一些。 大多数网站在 960 像素下都可以正常运行，但当我必须将网站打开得更宽或滚动才能看到所有内容时，这很烦人。
As a regular user of widescreen monitors, I do not want to see designers making their sites any wider. I run 24 inch widescreens (1920x1200) and when I'm browsing the web I usually run two browsers side by side. If anything, making some sites a little bit narrower would be best. Most sites will run fine in 960 pixels, but it's annoying when I have to pop a site open wider or scroll around to see everything.
请考虑使用 1024x600 屏幕的上网本用户群体的快速增长。 我认为这应该是当前项目的最小设计尺寸。
Please consider the rapidly growing audience of netbook users who are using 1024x600 screens. I think that should be your minimum design size for current projects.