【问题标题】:What is a good maximum content area width for web pages?网页的最大内容区域宽度是多少?
【发布时间】:2010-12-02 08:36:59
【问题描述】:

网页主要内容区域的宽度是否有标准最大值?我想在不影响可用性的情况下最大化屏幕空间。我见过很多网站坚持使用 980 像素或更少。有人有什么建议吗?

【问题讨论】:

    标签: user-interface usability width


    【解决方案1】:

    1000 像素的宽度,是我使用的,适合目前使用的最低 1024x768 分辨率,而浏览器底部没有水平滚动条....

    【讨论】:

      【解决方案2】:

      以 800x600 或 1024x768 分辨率为目标。

      对于 800x600,它约为 750 像素。

      对于 1024x768,它将是 970 像素。

      【讨论】:

        【解决方案3】:

        960 是一个相当普遍的标准,该数字背后的基本原理是,安装在 1024 像素宽的屏幕上将使绝大多数用户无需滚动即可看到内容。请参阅here,了解 100 个网站之一,这些网站可以访问浏览器和用户系统功能统计数据以获得一些初步灵感。

        但最终,您需要了解客户群的结构 - 如果您的网站以 iPhone 为目标,则以 1024 像素宽的屏幕为目标可能不是您最明智的决定。

        【讨论】:

        • 有趣的统计数据。有趣的是,
        【解决方案4】:

        不确定绝对像素值,但我要确保的一件事是文本列不会变得太宽。有许多字符超出阅读理解能力。

        【讨论】:

          【解决方案5】:

          研究,例如引用 here 的研究表明,人们在阅读长行文本时更加困难。这就是我将内容宽度限制为 800 像素左右的原因。

          【讨论】:

          • “长”的定义因人而异。
          • 是的,但研究表明,在眼睛疲劳之前,大约 70 个字符是最大的。
          • 有趣的文章。感谢您的链接和建议!
          • 很遗憾您的链接已损坏。我找到了new link,但遗憾的是,完整文章的链接已损坏。搜索引导我here,但这似乎需要订阅。最后,我发现this 很有帮助。
          【解决方案6】:

          我假设您指的是包装器宽度,因为您提到了 980。

          最理想的解决方案是根本不考虑像素,而是依赖 ems/%s 和缩放,尽可能流畅,以便您的设计适合小型移动设备,并且您的元素高度不是固定的而是自动的。例如:http://www.456bereastreet.com/

          但是,如果您遇到仍然认为像素的网页设计师,并且您确定您将无法让他们尝试制作液体/流体图像,我会说拍摄宽度为 960 像素,这样您在 1024x768 和 IE6/XP 中具有滚动条的足够观看区域,但这实际上取决于您的观众和大多数观众的屏幕分辨率。

          【讨论】:

          • 不幸的是,大多数网站都是使用像素设计的,因此切换到 em 并不是一件容易的事,尽管我同意这将是一个更好的解决方案。目前我认为使用 960px 宽度可能是最好的短期解决方案,从长远来看逐渐转向更流畅的布局。感谢您的建议和链接!
          • 如果单位是ems,你会怎么回答:什么是好的最大宽度值,以 em 为单位?
          • @ChrisW webtypography.net 建议每行 45-75 个字符。我在我的网站上尝试了max-width: 70em;,它看起来很棒。
          【解决方案7】:

          没有“标准”,尤其是在这个 PDA/智能手机/上网本/智能本/信息亭/等等的时代... - 虽然这听起来很陈词滥调,但最好的办法是设计一个流畅的布局,而不是依赖于确切的屏幕尺寸.

          当然,答案可能会根据您的预期/预期用户群而改变(例如,假设 1024 像素的屏幕宽度让您有 980 像素的工作像素 - 并有意识地决定您对支持具有较小屏幕分辨率的任何人不感兴趣)。

          另一个解决方案是允许大小布局自定义,方法是使其类似于门户,用户可以控制 portlet 的布局(ala My Yahoo)。

          【讨论】:

          • 我认为使用最大宽度 (~980px) 是一个好主意,因为我们的大多数用户都是使用台式机和大中型显示器的企业客户。感谢您的反馈!
          【解决方案8】:

          您必须先提出问题。我的观众是谁?

          【讨论】:

          • 不是我要找的答案,而是 +1 是唯一一个指出这一点的人。谢谢!
          猜你喜欢
          • 2011-11-19
          • 1970-01-01
          • 1970-01-01
          • 2014-01-17
          • 2015-03-12
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多