首页 文章资讯 谷歌Chrome与Edge联合发布全新浏览器UI设计交互体验

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

发布者 : okay

1631

2020-04-07

商业战场上,没有永远的伙伴,也没有永远的敌人。这句话用来形容谷歌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版也将进行类似的改进。

分享

全部评论

    展开更多评论

    扩展迷QQ交流群

    错误提示保存失败
    成功提示保存成功
    close
    qr-code

    为打击盗链困扰,本站已启用公众号验证
    微信扫码关注上方公众号,回复“插件”二字获得验证码,验证码5分钟内全站有效。

    正在验证
    验证成功
    下载遇到问题?请添加QQ群:194738324
    close
    qr-code

    为打击盗链困扰,本站已启用公众号验证
    微信扫码关注上方公众号,回复“脚本”二字获得验证码,验证码5分钟内全站有效。

    正在验证
    验证成功