菜单 关闭

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

通过 凯瑟琳Whitenton莎拉·吉本斯11月25日2018年

简介:神经网络/ g网站主页现在包含变量、字体和布局的宽屏- 2技术调整,改善用户体验的一个子集上的用户支持设备。。


我们最近更新我们的网站主页,而且,除了改变内容和视觉设计,manbetx官方网站手机版我们注册的两个主要技术更改:添加一个新的用户提供宽屏幕布局,并使用一个变量字体。这些变化渐进增强,因为他们只影响用户提供特定类型的设备。。

因为这些变化也是复杂的实现,我们决定采用他们只有在审核我们的网站流量来确定我们的许多游客将受益,如果变化值得我们的业务资源。。

宽屏断点

在2006年,我们推荐manbetx官方网站手机版设计布局视窗1024像素宽。但在今天的高分辨率的屏幕,这种方法可以让许多用户英寸的未使用空间两边的内容——甚至在小13英寸笔记本电脑。决定是否投资于创造的宽屏布局,我们看了看我们的网站分析,意识到77%我们的会议是在浏览器窗口宽超过1100像素。。

为nngroup分析数据。com从7月到2018年9月表明,大约16%的访问者浏览器小于500像素宽;约有7%的浏览器在500年和1100像素宽,剩下的77%的访问者浏览器比1100像素宽。。

为了支持这些用户,新主页适应大屏幕。(在撰写本文时,只有首页调整;在未来的几个月里我们会这个功能延伸到其他页面,。)

左:在大屏幕上,许多网站显示两侧空白页面的内容。右:响应优化设计宽屏幕可以调整使用,浪费manbetx官方网站手机版的空间显示其他内容(在这种情况下,manbetx官网手机登陆文章和事件信息)。这些截图的宽度是1580 px。。

变量的字体

用户想要的网站看起来很好,但他们也讨厌的网站加载速度很慢。不幸的是,许多设计策manbetx官方网站手机版略增强视觉吸引力导致缓慢的页面呈现。这个难题是一种常见的一个:你优先考虑当你权衡?吗?

美学和性能之间的权衡字体时表现得尤为明显:渲染文本在一个定制的字体可以显著增加视觉吸引力,但是有延误由于浏览器加载所需的额外时间自定义字体文件。延迟是更大当你的文本需要不同的权重(如粗体或轻重量),因为每个重量是一个单独的字体文件下载。字体文件压缩和缓存的帮助,但这些技术并不能完全解决问题。。

加快页面加载时间,我们之前使用一个自定义标题字体,和依赖标准网络安全字体对于大多数文本,因为浏览器可以显示正常和大胆的重量而不需要下载任何字体文件。这种方法并不理想,因为这是一个妥协在两个方向:在加载自定义字体和仍然没有达到我们理想的视觉审美(这将更多3定义字体的重量)。。

这次我们发现了一个新的解决方案:变量的字体,这允许使用一个字体文件但调整字符的重量。。2016年9月变量字体了作为Adobe的共同努力下,苹果,谷歌,和微软;在短短2年,,浏览器字体支持变量已经从2%上升到70%。。

变量的字体让你下载一个字体文件和调整它在浏览器重或轻重量。这个例子演示了重型和轻型Sans字体变量权重Adobe的来源。(图片来源:https://v-fonts。com/)

我们咨询了自己的网络分析和发现,为我们的观众,采用比70%甚至更高:目前,80%的nngroup会话。com在浏览器字体支持变量,很快,我们预计这个数字将进一步增加,当Firefox窗口将实现其计划支持这个特性。20%的流量来自浏览器不支持变量字体将看到一个回退,与网络安全字体+ 1自定义字体,作为我们的遗留站点使用。(我们是感激Adobe,释放源无职业作为一个开源变量字体和理查德•拉特谁的篇关于实施变量字体回退非常有帮助。)

优先考虑通过观众的大小

这里所描述的每一个变化约80%的用户受益。但是其他20%的用户呢?当优先级设计选项和制作manbetx官方网站手机版权衡,重要的是要考虑的影响受众群体的大小严重的影响在每个组。改变这一福利大多数用户可能不值得如果对少数用户创建一个非常负面影响(假设少数实际上是你的目标受众的一部分)。。

让我们考虑一个案例从网络的历史,20%的用户仍在使用时缓慢的拨号调制解调器。你想使用一个漂亮的大英雄形象,会增加页面加载时间为这些拨号用户1分钟,尽管宽带用户的延迟可以忽略不计。不要这样做。20%的用户的惩罚将会太大。同样的,这将是不明智的发布文档的格式,80%的用户能够查看,但20%的用户无法打开。。

在这两个例子中(以及更多),得益的增强80%的用户最终将剧痛强加给剩下的20%的用户。。

幸运的是,宽屏布局和字体变量不属于这一类。是的,80%的用户会看到一个更漂亮的网站,但20%的用户仍将看到一个漂亮的网站。会发生什么可怕的——事实上,他们的经验将会完全一样。后备解决方案的所有区别的存在帮助80%的可行性没有伤害的20%。。

结论

我们的保守的设计方法。manbetx官方网站手机版我们经过实意:20年的用户研究,我们已经观察到太多的设计时尚,没有帮助,甚至一些manbetx官方网站手机版伤害——终端用户的体验。。

但谨慎态度趋势并不意味着拒绝所有创新。我们挑剔对于我们加入,选择只提供真正的用户体验价值的趋势万博官网manbetx下载。更少的滚动和更多内容大屏幕用户一个明确的赢家。尽管变量字体尚未广泛采用,我们打赌,这种创新的技术在这里留下来,鉴于其压倒性的行业支持和外观和性能都显而易见的好处。。

这些例子展示几的方法分析可以有意义的调整来改善用户的体验。无论是新技术还是广泛的断点,看看你自己的网站的分析后再决定,值得投资你的设计和开发资源。manbetx官方网站手机版。