谷歌Chrome与Edge联合发布全新浏览器UI设计交互体验

商业战场上，没有永远的伙伴，也没有永远的敌人。这句话用来形容谷歌Chrome和微软Edge的状态，是再合适不过了。

早在微软最初宣布放弃自家IE内核转投谷歌Chromium阵营时，谷歌还专门发文表示了热烈欢迎。

此后，双方的合作倒也还算顺利，微软工程师们还经常给谷歌Chromium提出新功能和改进。

但自从全新Edge正式上线后，我们立即见证了它迅速走红的全过程，这个过程中，谷歌浏览器也扮演了一个十分重要的角色。

比如，在Edge用户访问谷歌浏览器插件商店时，突然加入安全提醒，同时诱导Edge用户切换到Chrome浏览器。

虽然这个“安全事故”后来被微软打脸后不了了之了，但Chrome浏览器和Edge的明争暗斗一直都没停过。

不过无论如何，Edge最终还是使用的Chromium内核，因此和谷歌彻底翻脸是永远不可能的。

就在3月中旬，谷歌刚宣布停止更新Chrome新版本发布，Edge也不得不随之停止了新版本推送。

有趣的是，微软宣布停更没多久，谷歌又大张旗鼓地表示“我们又要恢复浏览器更新了”。

得知此事后，3月30号，微软官方发布了一篇新博客，名字赫然叫《换成微软Edge浏览器的10个理由》。看起来像是对于谷歌浏览器作出的新反击。

就在大家嗅到的火药味愈来愈浓的时候，突然又一个消息传来——Chrome和Edge再度合作了！

这一次，它们将联手推出新的浏览器UI设计以提高用户交互体验。

3月31日，据Chromium最新官方博客显示，Google Chrome团队和微软Edge团队从去年开始合作，以进行主体化和改进Chromium内核浏览器上的内置表单控件的功能，增强表单控件和链接之类的交互元素体验。

这次的新UI改进计划可以总结为“一致且易于感知”，即采用新主题的HTML控件在设计上更加现代及平面化，包括按钮、下拉菜单、复选框等HTML控件的UI。

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

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

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

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

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

除了改进默认样式外，两个团队还调整了表单控件的可访问性和增强的触摸支持。 主要表现在以下几方面：

一、更清晰的对焦环

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

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

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

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

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

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

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

二、增加多输入显示器的点击目标大小

在过去的几年中，平板电脑，和支持触摸的笔记本电脑等多输入设备的数量有所增加，这意味着触摸成为台式机的重要考虑因素。

但是，许多现有的窗体控件在设计时并未考虑多输入表面。它们可能在移动设备上效果很好，但是点击目标太小而无法在触摸屏笔记本电脑上使用。

为了改善触摸屏的功能，更新后的控件现在将具有更好的弹出效果，更大的敲击目标，并支持滚动时的滑动和惯性：

三、新的取色器

以前，网页取色元素不能完全通过键盘访问，这意味着依赖键盘或切换设备的用户无法使用它。

现在，新的取色器可以通过键盘完全访问，并包括其他修饰键（在Mac上为Control或Command）。这些改进使用户一次可以跳十个颜色值。

这些更改已在Chromium版的Edge浏览器上可用，在Chrome 81上启用需要开启以下flag标记：

1、访问chrome://flags/#form-controls-refresh；

2、下拉菜单改为Enable；

3、重启浏览器。

重新设计的控件将于5月中旬在macOS、Windows和Chrome OS版本的Chrome 83上可用，晚些时候Android版也将进行类似的改进。