早在4月初谷歌浏览器的测试版AndroidP 及PC版本的部分曝光信息中已经可以看出，谷歌在探索新的material design视觉风格，即传闻中的Material Design 2.0. 基于MD的设计规范与原则，在部分视觉元素和模块上进行修正以契合新的用户需求、流行趋势。

IOS用户和安卓用户各占半壁江山的情况下，一些互联网产品设计师和开发人员为谋求开发效率和平台设计语言及视觉呈现的统一，逐渐将IOS设计语言与MD语言打通，互相吸收借鉴，形成了不以平台设计语言做枷锁的更加自主的设计模式，，包括以用户为核心的服务设计模式及根据产品本身构建的个性化设计模式。

不同于我们这些平台设计语言的应用者，谷歌官方的设计师作为整个MD设计语言的构建者需要戴上镣铐完成一些创新改版。需要继承设计语言的核心原则，更要在跨平台的情况下保证UI的统一可辨识以区分不同平台的设计风格。概括来说，我们在为产品做设计时只需要在跨平台做到the same。而谷歌设计师更需要同时做到 the same 和different。the same 指的是MD语言风格的自我统一，而different是指与其他平台设计语言的区分。

因此当我看到全新 chrome 的UI时，即惊艳又感动。这次10周年版本融合了当下的流行设计趋势，以黑白灰的色块分割代替旧式的线条分割，将之前过于尖锐的直角优化为向ios靠拢的圆角设计等等。关于视觉改版的细节会在后面详细说明。想谈一下这次改版会收获的各种评价。其中将会有很大一批评价是此类：“谷歌MD模仿IOS设计风格”、“圆角设计IOS都用了几年了”。这使我想起了老罗在锤子发布会所讲的。老罗说他们尝试几十款手机home键的设计，从矩形到五角星椭圆形等等。事实证明，圆形是最佳的外观选择。很多人会骂我们抄袭iphone，但我们不后悔。为了真正优秀的产品而牺牲名声或者其他，这是一名优秀设计师的素养。超脱于平台设计语言，把视野放远放开阔，最终呈现出这样以用户为中心的优秀视觉和体验。

---

接下来将从视觉和交互体验两个方面阐述本次谷歌浏览器改版的细节。

视觉

Chrome改版后的UI给人第一感觉是四个字：纯净自然。得益于其在导航栏UI上的优化。谷歌官方提到本次优化项包括更圆润的形状、新的色板、新的图标。更圆润的形状意指其圆角设计，这一改变进一步打通了IOS和MD两种设计语言。而新的色板和图标主要应用于谷歌主页的UI界面，对于笔者这种使用用Muzli插件的人来说，感受并不是很明显。

作为浏览器所呈现的视觉内核更多是导航栏，而本次的UI优化核心也是基于导航栏的redesign。概括来说，此次改版视觉向共有两个优化点。

一：内容分割——用黑白灰色块代替分割线

去线留白是目前愈发流行的内容分割设计趋势，比较典型的如Airbnb，其目的在于通过间距留白对内容进行分割，舍弃了线条分割的样式，减少其他元素的关键信息获取的干扰，属于对格式塔原则的基本运用，但呈现出的视觉效果纯粹干净，体验上也能提高关键信息的传达效率。

新版chrome 旧版chrome

新版chrome在去除线条的基础上对导航栏区域分割的配色进行了新的计算。导航区域主要用于承载各式标签，而这些标签共有三个状态，分别是

regular：导航栏的颜色及默认标签的颜色；

hover：鼠标移入标签的颜色，属于反馈；

选中：即点击选中标签后的效果

除此之外，chrome在导航栏配色上进行两个方面的优化。

第一点是为旧式的0色相的纯灰加入了2个饱和度的蓝色。融入颜色后的灰度色块更加生动有活力，同时也影响了明暗度，使新版chrome的导航栏更加鲜亮，干净。

旧导航配色

第二点是调整明度配比。所有标签的明度基于旧式的色值提高了五个点。因此选中态呈现的是最高亮的纯白色，而hover态和默认态度整体提亮，从而减少灰度使界面更简洁干净。

新导航配色

圆角在MD设计语言中的运用

在最早的chrome中实际上已经较克制的运用了圆角设计，但于整个视觉来说占比较低，只应用于书签和功能按钮的hover态上，且只使用了微圆角来缓解过于尖锐的矩形边角，（见图右）而在核心交互元素——标签tab上继续使用的无圆角设计（接近无，实际上有1到2像素的圆角，但不易感知）。

最新版的chrome证实了今年四月份的内测版本的真实性，并且在谷歌官方的各种纠结斟酌中正式推出，可见当时内测反响应当是不错的。参考下图右侧，其圆共有两个样式。

样式一：即8PX圆角，应用场景是标签tab及展开的下拉菜单。

样式二：满圆角，应用于书签和交互按钮的hover态。（这里将交互按钮的圆形hover态归纳为正方形的满圆角状态）

圆角应用

交互体验

交互体验向我主要讲两个方向。

PC chrome新定义的导航栏搜索框：Omnibox。

和IOS版本chrome的操作栏的位置变动。

chrome新定义的导航栏搜索框：Omnibox

官方介绍如下：大意为更加智能的搜索框。

Omnibox官方介绍

Chrome的Omnibox将搜索框与地址输入框合二为一,实际上简化了所有搜索性质的操作，用一个入口衔接了两个场景的搜索需求，即无论在用户是在有明确网址的情况下还是在模糊搜索的场景下，只需要一次触发即可完成操作。进一步缩短了用户抵达核心诉求的路径。

旧版本用户执行的搜索路径如下图所示。根据自身需求进行判断并选择对应的最佳路径，这期间有一段路径需要用户去进行判断接下来使用的搜索方式，可能是输入地址，也可能是在主搜索框输入模糊的内容关键词。

而在新版本中，用户可以省去行为-判断这一路径，而是直接无意识的使用万能搜索框来执行搜索行为。

这个改版乍一看很鸡肋，对确实很鸡肋。考虑到首页有辣么大的一个主搜索框，用户没必要再重新去适应使用一个之前不存在的顶部模糊搜索框，而且用户长期以来养成的习惯恐怕很难在短时间改变，即在顶部导航栏输入地址，在中间主搜索框输入内容。所以只谈谷歌搜索的主页，顶部地址输入框结合搜索框是一个很鸡肋无意义的改版。

但我们把视野放宽，会发现chrome中用户停留最短的恰好是搜索主页，用户真正停留的场景是各式各样的网站，在浏览其他网站（非google搜索主页）的场景下，用户有强搜索需求时可以以更便捷的方式来完成目的，这就是Omnibox存在的意义，不足之处在于，在Omnibox执行搜索后没有为搜索结果创建新的标签页，因此之前页面的内容会被搜索内容替换。

IOS版本chrome 操作栏位置变动

理所当然，IOS端操作栏养成的固有习惯不容易被打破，旧版本的顶部操作栏估计会让不少IOS用户又爱又恨，IOS平台倡导更加易用的交互设计，底部菜单栏操作起来更加高效便捷。之前chrome为保证设计语言的的统一性在IOS平台仍然保留了顶部交互的设计，实则略微自私，而现在，我们可以看到他们为用户体验所作出的努力和牺牲，在官方宣传片中也刻意放大这一优化点，意指我们还是那个注重用户体验的设计团队，即便你是对手平台的用户，我们也会像亲儿子那样爱着你。

以上是我总结的部分我所关注的版本优化项，感谢阅读。