菜单 关闭

可变字体和宽屏布局:采用数据驱动的渐进式增强

通过 凯瑟琳·怀特顿莎拉吉本斯11月25日,二千零一十八

总结:现在,NN/G网站主页包含了可变字体和宽屏布局—2项技术调整,可改善受支持设备上一部分用户的用户体验。


我们最近更新了我们的网站主页,而且,除了改变内容和视觉设计外,manbetx官方网站手机版我们结合了两个主要的技术变化:为宽屏用户添加新的布局,并使用可变字体。这些变化是渐进式增强,因为它们只影响具有特定类型设备的用户。

由于这些变更的实施也很复杂,我们决定在审查我们的网站流量后才采用它们,以确定有多少访问者会受益,这些变化是否值得我们的业务资源。

宽屏断点

2006,我们推荐manbetx官方网站手机版为1024像素的视区设计布局宽的。但是现在的高分辨率屏幕,这种方法可以让许多用户在内容的两侧保留几英寸的未使用空间,即使是在一台13英寸的小型笔记本电脑上。决定是否投资创建宽屏布局,我们看了一下我们的网站分析,意识到77%在我们的会话中,浏览器窗口的像素超过1100像素。.

从2018年7月到9月,nngroup.com的分析数据显示,约16%的访问者的浏览器宽度小于500像素;大约7%的浏览器宽度在500到1100像素之间,其余77%的访问者的浏览器宽度超过1100像素。

为了支持这些用户,新主页适应大屏幕。(截至本文,只有主页可以调整;在接下来的几个月里,我们将把这个功能扩展到其他页面,同样如此。

左:在宽屏幕上查看时,许多网站在页面内容的两侧都显示空白。正确:针对宽屏优化的响应式设计可以调整使manbetx官方网站手机版用浪费的空间来显示额外的内容(在本例中,manbetx官网手机登陆文章和事件信息)。这些截图的宽度为1580像素。

可变字体

用户希望网站看起来不错,但他们也讨厌那些缓慢加载.不幸的是,许多增强视manbetx官方网站手机版觉吸引力的设计策略导致页面呈现缓慢。这是一个常见的两难问题:你优先考虑什么,什么时候权衡?

在字体方面,美学和性能之间的权衡尤为明显:以自定义字体呈现文本可以显著提高视觉吸引力,但由于浏览器加载自定义字体文件所需的额外时间,因此会出现延迟。当文本需要不同的权重(如粗体或轻体)时,延迟会更大,因为每个权重都包含一个单独的字体文件下载。字体文件压缩和缓存帮助,但这些技术并不能完全解决问题。

为了加快页面加载时间,我们以前只使用一种自定义字体作为标题,大多数文本都依赖于标准的浏览器安全字体,因为浏览器可以呈现正常和粗体的权重,而不需要下载任何字体文件。这种方法并不理想,因为它在两个方面都是折衷的:必须加载自定义字体,但仍然无法实现理想的视觉美感(需要3个以上的自定义字体权重)。

这次我们发现了一个新的解决方案:可变字体,它允许使用单个字体文件,但可以调整字符的权重。2016年9月推出了可变字体作为Adobe的共同努力,苹果谷歌微软;仅仅两年时间,浏览器支持可变字体从2%增加到70%。

可变字体允许您下载单个字体文件,并在浏览器中将其调整为重磅或轻磅。这个例子演示了Adobe的source sans变量字体的重磅和轻磅。(图像信用:https://v-fonts.com网站/

我们咨询了我们自己的网络分析,发现,对于我们的观众,采用率甚至超过70%:目前,nngroup.com上80%的会话位于支持可变字体的浏览器上,我们预计这个数字很快会进一步增加,当firefox for windows将实现其对该功能的计划支持时。来自不支持可变字体的浏览器的20%流量将出现回退,使用浏览器安全字体加上一个自定义字体,就像我们的传统网站一样。(我们感谢Adobe,用于释放来源Sans Pro作为一种开源变量字体,对于Richard Rutter,谁的关于使用回退实现变量字体的文章非常有用。)

按受众规模排序

这里描述的每一个变化都会让大约80%的用户受益。但是其他20%的用户呢?当优先考虑设计选项和manbetx官方网站手机版权衡,重要的是要同时考虑受影响观众群体的规模以及影响的严重性每组。如果对少数用户造成非常负面的影响(假设少数用户实际上是目标受众的一部分),那么对大多数用户有利的更改可能是不值得的。

让我们考虑一个网络历史的案例,当时20%的用户仍然使用慢速拨号调制解调器。您希望使用一个漂亮的大英雄图像,这将为这些拨号用户增加1分钟的页面加载时间,即使宽带用户可以忽略延迟。不要这样做。对20%的用户的惩罚太大了。同样地,以80%的用户能够查看的格式分发文档是不明智的,但20%的用户根本无法打开。

在这两个例子中(还有更多的例子),80%的用户受益的增强最终会给剩下的20%的用户带来严重的痛苦。

幸运的是,宽屏布局和可变字体不属于此类。对,80%的用户会看到更好看的网站,但是20%的用户仍然会看到一个好看的网站。他们不会发生什么可怕的事-事实上,他们的经历和以前一样。回退解决方案的存在使得在不损害20%的情况下帮助80%的可行性大不相同。

结论

我们以保守的设计方法而闻名。manbetx官方网站手机版我们真的来过这里:在20年的用户研究,我们已经观察到太多的设计时尚没有帮助-甚至伤害-manbetx官方网站手机版最终用户的体验。

但谨慎对待趋势并不意味着拒绝所有创新。我们对加入哪些乐队很挑剔,只选择提供真正用户体验价值的趋势万博官网manbetx下载.对于大屏幕用户来说,滚动少、内容多是一个明显的赢家。尽管可变字体还没有被广泛采用,我们敢打赌这项创新技术将继续存在,鉴于其压倒性的行业支持和明显的好处,外观和性能。

这些例子仅演示了分析可以推动有意义的调整以改善用户体验.无论是新技术还是广泛的断点,在决定把你的设计和开发资源投资到哪里之前,先看看你自己的网站的分析。manbetx官方网站手机版