随着技术和硬件的升级,网页设计要考虑的因素也越来越多,移动设备已经接管了网络。因此每个网站设计都会关注这一点,用于确保我们构建的网站是兼容的。我们不断改进我们实现响应式功能的方式,以便它们在小屏幕上完美运行。
虽然这是一项值得的努力,但还有其他屏幕需要考虑。高分辨率也是一个非常重要的考虑因素。很少能找到屏幕分辨率低于 1080p (1920 x 1080) 的新台式机或笔记本电脑设备。4k (3840 × 2160)和 8k (7680 x 4320)显示器提供更多的屏幕空间。利用大屏幕可能是一个挑战。关键在于创建一个既可用又易读的布局。此外,必须注意避免在用户面前放置太多东西而使用户感到不知所措。
如果您希望构建一个利用大屏幕的网站,我们已经汇总了一些通用的经验法则。它们可能不适合所有情况,但会为您提供一些因素,让您在做大之前仔细考虑。
1080p 或 4k 屏幕上的全角文本是一个很大的禁忌。阅读并跟踪您在段落中的位置需要花费太多精力。您拥有的文本越多,用户就越难以消化。因此,文本在宽度有限的容器中效果更好。考虑不超过 900-1200 像素的理想宽度。空白也很重要,因为它允许一些喘息的空间。尝试各种容器大小、边距和填充,以找到最适合您的布局的内容。
在为大屏幕设计时,字体大小也是一个关键因素。增加字体大小有助于文本突出显示,并限制给定行上显示的字符数。最后,考虑增加 CSSline-height属性以获得足够的行间垂直间距。这提高了易读性,并为整体设计增加了一些开放性。
利用额外屏幕空间的一大优势是它为多列布局提供了足够的空间。也许这就是为什么这种技术经常出现在面向新闻的网站上的原因。
使用传统的 1,000 像素网格和由三列或更多列组成的布局,其中的内容往往会受到挤压。比如说,1,800 像素的页面宽度允许列之间有足够的边距。并且在增加字体大小的同时仍然有添加内部列填充的空间。
更宽的页面还可以启用一些高级列配置。例如,考虑占据页面左半部分的“最新新闻”区域 - 配有特色图像。然后,两个 25% 宽度的列在右侧显示其他基于文本的标题。
这可能是大屏幕的完美布局类型。它避免浪费空间,同时可能使用户更容易识别他们感兴趣的内容。更好的是,CSS Grid和媒体查询的组合使您能够适应最大的屏幕分辨率,同时优雅地适应较小的屏幕分辨率。