谷歌Chrome 83正式版更新了这几个重要UI设计!

5月24日谷歌发布了Chrome 83正式版,相信大家都已经用上了。


今年4月,火药味渐浓的Chrome、Edge两家浏览器,突然官宣联手合作,给了用户一个措手不及。


Google Chrome团队和微软Edge团队表示,它们早就从去年开始合作了,此次将联手推出新的浏览器UI设计以提高用户交互体验。


这次它们针对Chromium内核浏览器上的内置表单控件的功能进行了优化,增强了表单控件和链接之类的交互元素体验。


谷歌Chrome 83正式版更新了这几个重要UI设计! 最新 图1张


根据昨日谷歌开发者论坛上的官方博客显示,目前,Google Chrome 83已经更新了默认表单样式。


不仅使设备之间样式更加统一,而且在微软的合作下,带来了更好的触控、无障碍、键盘定位支持。


谷歌Chrome 83正式版更新了这几个重要UI设计! 最新 图2张


以下,就是此次更新所带来的的具体内容:




一、表单控件



众所周知,我们平时在上网时,经常会和一些网页上的复选框、下拉菜单等元素进行交互。


但是,本机表单控件的一个问题是,其样式不一致。


谷歌Chrome 83正式版更新了这几个重要UI设计! 最新 图3张


这就导致较旧的控件(例如<button>和<select>)的样式与用户的操作系统是匹配的,但如今网站更新的、时下流行的表单控件样式却无法与之适配。


所以,在浏览器中,这会导致控件出现“匹配不当”的情况,令开发人员不得不花费更多时间和代码来定制默认设置。


在过去的一年中,Chrome与Edge团队合作,就是为了解决这个默认样式的问题(下图左侧为旧版本,右侧为改进后的新版本)。


谷歌Chrome 83正式版更新了这几个重要UI设计! 最新 图4张




二、对焦环



对焦环(focus indicator)又叫焦点环,它是一项重要的辅助功能,可帮助习惯使用键盘的人们识别与之交互的元素。


如下图所示,焦点环在Chrome浏览器中表现为一个蓝色的轮廓。


谷歌Chrome 83正式版更新了这几个重要UI设计! 最新 图5张


以前,Chromium内核浏览器都使用的这种浅色单色轮廓指示聚焦的元素。


谷歌Chrome 83正式版更新了这几个重要UI设计! 最新 图6张


但是,如果聚焦的元素恰好在相似颜色的背景上,就很难分辨清楚了:


谷歌Chrome 83正式版更新了这几个重要UI设计! 最新 图7张


现在的全新UI设计中,增加了一个更明显的对焦环,可以更好地帮助用户识别交互元素。


新设计的特点是带有黑色细环和白色轮廓的圆圈,确保了它在黑白背景上均可见。


这一点将自动改善许多站点上的键盘体验,而开发人员无需编写任何新代码。


谷歌Chrome 83正式版更新了这几个重要UI设计! 最新 图8张




三、进行中的



按照此前的计划,除了以上内容,谷歌和微软还计划在浏览器内进行增加多输入显示器的点击目标大小、新的取色器。


其中,新的取色器可以通过键盘完全访问。不过这些都还在开发测试中,目前暂时不能与大家见面了。


谷歌Chrome 83正式版更新了这几个重要UI设计! 最新 图9张


如果你想看到新的表单控件和对焦环,请更新Chrome浏览器到83.0.4103.61版本即可。


谷歌Chrome 83正式版更新了这几个重要UI设计! 最新 图10张

文章来源:扩展迷,有删改


说完了,“在看”在哪里?
谷歌Chrome 83正式版更新了这几个重要UI设计! 最新 图11张


谷歌Chrome 83正式版更新了这几个重要UI设计! 最新 图12张

文章转载自微信公众号:胡萝卜周