您可能访问过一个网站,其设计包含 全宽 浏览器的。您可能已经注意到,当您的眼睛扫描页面的整个宽度时,内容不容易消化。这实际上是众所周知的可读性和用户体验(UX) 问题。
研究于 活版印刷 认知心理学表明,较短的行长度使阅读更容易、更舒适。当文本行太长时,眼睛从一行的末尾跟踪到下一行的开头就会变得更加困难。这可能会导致眼睛疲劳增加并且难以吸收内容。
列使用历史记录
列使用的科学性令人着迷,并且植根于实用性和可读性。
- 历史的角度:报纸窄栏的传统可以追溯到印刷媒体的早期。 17 世纪初,当报纸首次出现时,它们通常使用单一的大报版式印刷。然而,随着报纸的发展,布局发生了变化,包括多个栏目。这种变化部分是由技术限制和经济因素驱动的。当时使用的印刷机在不损失质量的情况下跨宽幅印刷的能力有限,而较窄的栏意味着一页上可以容纳更多文本,从而使报纸的生产更具成本效益。
- 可读性和眼球运动:从科学的角度来看,报纸栏目的宽度与我们的眼睛和大脑处理书面信息的方式密切相关。文本可读性的最佳行长度通常为每行 50-60 个字符左右。
- 栏宽对阅读速度和理解的影响:研究表明,窄栏宽可以提高阅读速度和理解力。这是因为较短的行允许更快的眼球运动和更容易的文本扫描。相比之下,宽栏会减慢阅读速度,因为读者的眼睛必须更大幅度地从一行移动到另一行。
- 适应现代设计:虽然传统报纸的格式保持不变,但数字媒体必须适应不同的屏幕尺寸和阅读习惯。在线报纸和电子阅读器通常提供可调节的栏宽,以适应个人喜好和不同的设备尺寸。
来自报纸专栏设计的原则也影响了网页设计。网站通常使用狭窄的文本栏或网格布局以方便阅读,反映了报纸布局设计数百年的智慧。
浏览器宽度和屏幕分辨率
据统计,最常见的浏览器宽度和屏幕分辨率因设备类型而异。下表显示了最常见的分辨率及其在移动设备、平板电脑和桌面设备上的市场份额百分比:
联络号码 | 平板电脑 | 桌面版 |
---|---|---|
360×800(11.65%) | 768×1024(26.96%) | 1920×1080(22.7%) |
390×844(7.26%) | 810×1080(9.68%) | 1366×768(14.47%) |
414×896(5.66%) | 1280×800(6.76%) | 1536×864(10.41%) |
393×873(5.16%) | 800×1180(5.04%) | 1440×900(6.61%) |
328×926(3.84%) | 962×601(2.99%) | 1600×900(3.8%) |
这些统计数据应该会显着影响网页设计。鉴于屏幕分辨率的多样性,一刀切的方法是不可行的。考虑到通过移动设备 (55.67%) 和桌面 (42.4%) 产生的流量的很大一部分,企业必须投资于移动响应式设计。
超宽屏幕设计可能不是最有效的方法,因为由于文本水平跨度较长,可能会导致阅读体验困难。设计人员通常使用一种标准桌面和移动分辨率来扩展设计,确保跨设备的流畅用户体验。响应式网页设计和移动优先网页设计之间的选择取决于目标受众及其首选设备。
超宽浏览器设计最佳实践
设计用户界面(UI)并确保积极的用户体验(UX)对于超宽显示器涉及几种最佳实践。这些做法旨在优化空间利用、增强可读性并确保导航的便捷性。以下是一些关键准则:
- 响应式设计:确保您的网站或应用程序具有响应能力,能够流畅地适应不同的屏幕尺寸。这对于宽高比与标准屏幕显着不同的超宽显示器至关重要。
- 受控的列宽:限制文本密集内容的文本列的最大宽度。宽栏会使阅读变得困难,因为眼睛必须从一行的末尾到下一行的开头移动很长的距离。
一个好的经验法则是保持列宽能够容纳每行 60-75 个字符。
- 网格的使用:实施网格系统以有效地组织内容。网格有助于创建平衡的布局,并且可用于管理超宽屏幕上的空白。
- 分区:将屏幕划分为不同的区域,以显示不同类型的内容或交互。这有助于用户更直观地导航界面并减少认知负担。
- 侧边栏导航:考虑使用侧边栏进行导航和附加信息。这有效地利用了额外的水平空间,而不影响主要内容区域。
- 分层布局:采用清晰的视觉层次结构来引导用户的眼睛浏览内容。这对于更大的屏幕尤其重要,因为屏幕更大,迷失方向的风险更高。
- 一致的对齐方式:保持整个界面的对齐一致性。在更宽的屏幕上,未对齐的元素可能会更明显并分散注意力。
- 重点内容领域:为重要内容创建重点区域以吸引用户注意力。这可以通过使用对比色、尺寸变化或图形元素来实现。
- 避免水平滚动:水平滚动可能会让人迷失方向,应该避免。设计能够垂直容纳内容的布局,甚至在更宽的屏幕上也是如此。
- 优化可读性:确保优化文本大小、行距和字体选择。太小或狭窄的文本可能难以在大显示屏上阅读。
- 促进多任务处理:由于超宽屏幕提供了更多空间,因此设计便于多任务处理的界面,例如多个打开的窗口或面板。
- 无障碍:牢记可访问性,确保所有用户(无论使用何种设备)都可以有效访问和使用您的网站。
- 跨设备测试:在各种设备(包括超宽显示器)上测试您的设计,以确保其在所有可能的场景中都能扩展并表现良好。
- 使用高分辨率图像:利用在大屏幕上不会出现像素化的高分辨率图像,从而保持界面的视觉质量。
- 平衡空白:明智地使用空白,创建一个不会感觉拥挤但有效利用广阔屏幕空间的布局。
请记住,超宽显示屏的有效 UI/UX 设计的关键不仅仅是扩大元素以填充空间,而是深思熟虑地组织和调整内容以增强用户参与度和体验。
对于某些平均字体大小,75 个字符(包括字符之间的间距)的像素宽度大约如下:
- 10pt字体: 375.0 像素
- 12pt字体: 450.0 像素
- 14pt字体: 525.0 像素
- 16pt字体: 600.0 像素
- 18pt字体: 675.0 像素
- 20pt字体: 750.0 像素
这些计算假设平均字体中的字符宽度大约是其高度的一半,包括字符之间的间距。所以……1920 像素宽的屏幕可能需要分成多个列,以最大限度地提高可读性。
决定使用哪些网站维度应基于目标受众的人口统计数据,包括年龄、性别、位置和收入,因为这些可能决定他们使用的设备。
Google Analytics 4:屏幕分辨率
如果您想查看访问者的后续行为,GA4 可以在 报告 > 用户 > 技术 > 概述.
请务必过滤周末或下班后、活动和转化的数据……您可能会发现根据访问者基于屏幕分辨率进行交互的时间和原因来更好地展示您的内容的见解和机会。