首页->

UE设计中可变字体和宽屏布局:采用数据驱动的渐进增强功能

UE视界网    (1)  (1)

2019-11-24 12:56:55

网站主页现在合并了可变字体和宽屏布局-2项技术调整,可改善受支持设备上部分用户的用户体验。


我们最近更新了我们的网站主页,除了更改内容和视觉设计之外,我们还进行了两项主要的技术更改:为宽屏用户添加新的布局以及使用可变字体。这些更改是逐步的增强,因为它们仅影响使用特定类型设备的用户。


由于这些更改实施起来也很复杂,因此,我们仅在查看我们的网站流量以确定哪些访问者将从中受益以及这些更改是否值得我们的业务资源后,才决定采用这些更改。


宽屏断点

在2006年,我们建议为1024像素宽的视口设计布局。但是,在当今的高分辨率屏幕上,这种方法可以使许多用户在内容的两面都留有几英寸的未使用空间,即使是在13英寸的小型笔记本电脑上也是如此。为了决定是否投资创建宽屏布局,我们看了一下网站分析,发现77%的会话是在宽度超过1100像素的浏览器窗口上进行的。


1574571283248_5.png

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

为了支持这些用户,新主页将调整为大屏幕。(在撰写本文时,只有主页会调整;在接下来的几个月中,我们还将将该功能扩展到其他页面。)


1574571305267_1.png

左:在宽屏上查看时,许多网站在页面内容的两侧都显示空白。右图:针对宽屏进行了优化的响应式设计可以调整以使用浪费的空间来显示其他内容(在这种情况下,是文章和事件信息)。这些屏幕截图的宽度为1580像素。

可变字体

用户希望网站看起来不错,但他们也讨厌加载缓慢的网站。不幸的是,许多用于增强视觉吸引力的设计策略导致页面渲染缓慢。这个难题很常见:您要优先考虑什么,何时进行权衡?


在字体方面,美学和性能之间的权衡尤为明显:以自定义字体呈现文本可以显着增加视觉吸引力,但由于浏览器加载自定义字体文件需要额外的时间,因此存在延迟。当您的文本需要不同的粗细(例如粗体或浅粗体)时,延迟会更大,因为每种粗细都涉及单独的字体文件下载。字体文件压缩和缓存有帮助,但是这些技术不能完全解决问题。


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


这次,我们发现了一个新的解决方案:可变字体,它允许使用单个字体文件,但可以调整字符的粗细。在 Adobe,Apple,Google和Microsoft的共同努力下,可变字体于2016年9月推出。在短短两年内,浏览器对可变字体的支持从2%增加到70%。


1574571387539_2.gif

可变字体使您可以下载单个字体文件,并在浏览器中将其调整为粗字体或轻字体。此示例演示了Adobe的Source Sans可变字体的粗细和轻巧。(图片来源:https :  //v-fonts.com/)

我们查阅了自己的网络分析,发现对我们的受众而言,采用率甚至超过了70%:目前,nngroup.com上的会话中有80%是在支持可变字体的浏览器上进行的,并且我们希望这个数字很快会进一步增加, Firefox for Windows将实现其对此功能的计划支持。来自不支持可变字体的浏览器的20%流量会出现回退,包括浏览器安全的字体和一种自定义字体,就像我们的旧站点以前那样。(我们感谢Adobe将Source Sans Pro作为开源可变字体发布,并感谢Richard Rutter的文章,该文章关于使用后备实现可变字体非常有帮助。)


按受众群体大小划分优先级

此处描述的每个更改都会使大约80%的用户受益。但是其他20%的用户呢?在确定设计方案的优先级并进行权衡时,重要的是要同时考虑受影响的受众群体的规模以及对每个群体的影响的严重性。如果更改对少数用户产生了非常负面的影响(假设少数实际上是您的目标受众的一部分),那么使大多数用户受益的更改可能就不值得。


让我们考虑一下网络历史,当时20%的用户仍在使用慢速拨号调制解调器。您想使用一个不错的大人物形象,即使对于宽带用户来说,延迟可以忽略不计,但对于这些拨号用户,页面加载时间却增加了1分钟。不要这样 对20%的用户的罚款太大了。同样,以80%的用户可以查看的格式分发文档,但是根本无法打开的用户中有20%的用户分发该文档是不明智的。


在这两个示例(以及更多示例)中,将使80%的用户受益的增强功能最终会给其余20%的用户带来严重的痛苦。


幸运的是,宽屏布局和可变字体不属于此类。是的,80%的用户将看到一个外观更好的网站,但是20%的用户仍将看到一个外观更好的网站。他们不会发生任何可怕的事情-实际上,他们的经历将和以前一样。后备解决方案的存在使帮助80%而不损害20%的可行性大为不同。


结论

我们以保守的设计方法而闻名。我们老实说:在20年的用户研究中,我们观察到太多的设计风尚没有帮助,甚至有损于最终用户的体验。


但是,谨慎对待趋势并不意味着要拒绝所有创新。我们对加入哪些潮流很挑剔,只选择提供真正用户体验价值的趋势。对于大屏幕用户而言,更少的滚动和更多的内容无疑是赢家。尽管可变字体尚未得到广泛采用,但我们相信这项创新技术将继续存在,因为它获得了业界的大力支持,并且在外观和性能上都具有明显优势。


这些示例仅说明了分析可以推动有意义的调整以改善用户体验的几种方法。无论是新技术还是广泛的断点,在决定值得在哪里投入您的设计和开发资源之前,请先查看您自己网站的分析。


责任编辑:网络UESJ网:   UE视界网,未经授权不得转载
关键词 >> 设计模式,视觉设计

还可以输入0个字

(审核后展示)
打开目录