早在4月初谷歌瀏覽器的測(cè)試版AndroidP 及PC版本的部分曝光信息中已經(jīng)可以看出，谷歌在探索新的material design視覺風(fēng)格，即傳聞中的Material Design 2.0. 基于MD的設(shè)計(jì)規(guī)范與原則，在部分視覺元素和模塊上進(jìn)行修正以契合新的用戶需求、流行趨勢(shì)。
IOS用戶和安卓用戶各占半壁江山的情況下，一些互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)師和開發(fā)人員為謀求開發(fā)效率和平臺(tái)設(shè)計(jì)語言及視覺呈現(xiàn)的統(tǒng)一，逐漸將IOS設(shè)計(jì)語言與MD語言打通，互相吸收借鑒，形成了不以平臺(tái)設(shè)計(jì)語言做枷鎖的更加自主的設(shè)計(jì)模式，，包括以用戶為核心的服務(wù)設(shè)計(jì)模式及根據(jù)產(chǎn)品本身構(gòu)建的個(gè)性化設(shè)計(jì)模式。
不同于我們這些平臺(tái)設(shè)計(jì)語言的應(yīng)用者，谷歌官方的設(shè)計(jì)師作為整個(gè)MD設(shè)計(jì)語言的構(gòu)建者需要戴上鐐銬完成一些創(chuàng)新改版。需要繼承設(shè)計(jì)語言的核心原則，更要在跨平臺(tái)的情況下保證UI的統(tǒng)一可辨識(shí)以區(qū)分不同平臺(tái)的設(shè)計(jì)風(fēng)格。概括來說，我們?cè)跒楫a(chǎn)品做設(shè)計(jì)時(shí)只需要在跨平臺(tái)做到the same。而谷歌設(shè)計(jì)師更需要同時(shí)做到 the same 和different。the same 指的是MD語言風(fēng)格的自我統(tǒng)一，而different是指與其他平臺(tái)設(shè)計(jì)語言的區(qū)分。
因此當(dāng)我看到全新 chrome 的UI時(shí)，即驚艷又感動(dòng)。這次10周年版本融合了當(dāng)下的流行設(shè)計(jì)趨勢(shì)，以黑白灰的色塊分割代替舊式的線條分割，將之前過于尖銳的直角優(yōu)化為向ios靠攏的圓角設(shè)計(jì)等等。關(guān)于視覺改版的細(xì)節(jié)會(huì)在后面詳細(xì)說明。想談一下這次改版會(huì)收獲的各種評(píng)價(jià)。其中將會(huì)有很大一批評(píng)價(jià)是此類：“谷歌MD模仿IOS設(shè)計(jì)風(fēng)格”、“圓角設(shè)計(jì)IOS都用了幾年了”。這使我想起了老羅在錘子發(fā)布會(huì)所講的。老羅說他們嘗試幾十款手機(jī)home鍵的設(shè)計(jì)，從矩形到五角星橢圓形等等。事實(shí)證明，圓形是最佳的外觀選擇。很多人會(huì)罵我們抄襲iphone，但我們不后悔。為了真正優(yōu)秀的產(chǎn)品而犧牲名聲或者其他，這是一名優(yōu)秀設(shè)計(jì)師的素養(yǎng)。超脫于平臺(tái)設(shè)計(jì)語言，把視野放遠(yuǎn)放開闊，最終呈現(xiàn)出這樣以用戶為中心的優(yōu)秀視覺和體驗(yàn)。
接下來將從視覺和交互體驗(yàn)兩個(gè)方面闡述本次谷歌瀏覽器改版的細(xì)節(jié)。
視覺
Chrome改版后的UI給人第一感覺是四個(gè)字：純凈自然。得益于其在導(dǎo)航欄UI上的優(yōu)化。谷歌官方提到本次優(yōu)化項(xiàng)包括更圓潤(rùn)的形狀、新的色板、新的圖標(biāo)。更圓潤(rùn)的形狀意指其圓角設(shè)計(jì)，這一改變進(jìn)一步打通了IOS和MD兩種設(shè)計(jì)語言。而新的色板和圖標(biāo)主要應(yīng)用于谷歌主頁的UI界面，對(duì)于筆者這種使用用Muzli插件的人來說，感受并不是很明顯。
作為瀏覽器所呈現(xiàn)的視覺內(nèi)核更多是導(dǎo)航欄，而本次的UI優(yōu)化核心也是基于導(dǎo)航欄的redesign。概括來說，此次改版視覺向共有兩個(gè)優(yōu)化點(diǎn)。
一：內(nèi)容分割——用黑白灰色塊代替分割線
去線留白是目前愈發(fā)流行的內(nèi)容分割設(shè)計(jì)趨勢(shì)，比較典型的如Airbnb，其目的在于通過間距留白對(duì)內(nèi)容進(jìn)行分割，舍棄了線條分割的樣式，減少其他元素的關(guān)鍵信息獲取的干擾，屬于對(duì)格式塔原則的基本運(yùn)用，但呈現(xiàn)出的視覺效果純粹干凈，體驗(yàn)上也能提高關(guān)鍵信息的傳達(dá)效率。
新版chrome在去除線條的基礎(chǔ)上對(duì)導(dǎo)航欄區(qū)域分割的配色進(jìn)行了新的計(jì)算。導(dǎo)航區(qū)域主要用于承載各式標(biāo)簽，而這些標(biāo)簽共有三個(gè)狀態(tài)，分別是
regular：導(dǎo)航欄的顏色及默認(rèn)標(biāo)簽的顏色；
hover：鼠標(biāo)移入標(biāo)簽的顏色，屬于反饋；
選中：即點(diǎn)擊選中標(biāo)簽后的效果
除此之外，chrome在導(dǎo)航欄配色上進(jìn)行兩個(gè)方面的優(yōu)化。
第一點(diǎn)是為舊式的0色相的純灰加入了2個(gè)飽和度的藍(lán)色。融入顏色后的灰度色塊更加生動(dòng)有活力，同時(shí)也影響了明暗度，使新版chrome的導(dǎo)航欄更加鮮亮，干凈。
第二點(diǎn)是調(diào)整明度配比。所有標(biāo)簽的明度基于舊式的色值提高了五個(gè)點(diǎn)。因此選中態(tài)呈現(xiàn)的是最高亮的純白色，而hover態(tài)和默認(rèn)態(tài)度整體提亮，從而減少灰度使界面更簡(jiǎn)潔干凈。
圓角在MD設(shè)計(jì)語言中的運(yùn)用
在最早的chrome中實(shí)際上已經(jīng)較克制的運(yùn)用了圓角設(shè)計(jì)，但于整個(gè)視覺來說占比較低，只應(yīng)用于書簽和功能按鈕的hover態(tài)上，且只使用了微圓角來緩解過于尖銳的矩形邊角，（見圖右）而在核心交互元素——標(biāo)簽tab上繼續(xù)使用的無圓角設(shè)計(jì)（接近無，實(shí)際上有1到2像素的圓角，但不易感知）。
最新版的chrome證實(shí)了今年四月份的內(nèi)測(cè)版本的真實(shí)性，并且在谷歌官方的各種糾結(jié)斟酌中正式推出，可見當(dāng)時(shí)內(nèi)測(cè)反響應(yīng)當(dāng)是不錯(cuò)的。參考下圖右側(cè)，其圓共有兩個(gè)樣式。
樣式一：即8PX圓角，應(yīng)用場(chǎng)景是標(biāo)簽tab及展開的下拉菜單。
樣式二：滿圓角，應(yīng)用于書簽和交互按鈕的hover態(tài)。（這里將交互按鈕的圓形hover態(tài)歸納為正方形的滿圓角狀態(tài)）
交互體驗(yàn)
交互體驗(yàn)向我主要講兩個(gè)方向。
PC chrome新定義的導(dǎo)航欄搜索框：Omnibox。
和IOS版本chrome的操作欄的位置變動(dòng)。
chrome新定義的導(dǎo)航欄搜索框：Omnibox
官方介紹如下：大意為更加智能的搜索框。
Chrome的Omnibox將搜索框與地址輸入框合二為一,實(shí)際上簡(jiǎn)化了所有搜索性質(zhì)的操作，用一個(gè)入口銜接了兩個(gè)場(chǎng)景的搜索需求，即無論在用戶是在有明確網(wǎng)址的情況下還是在模糊搜索的場(chǎng)景下，只需要一次觸發(fā)即可完成操作。進(jìn)一步縮短了用戶抵達(dá)核心訴求的路徑。
舊版本用戶執(zhí)行的搜索路徑如下圖所示。根據(jù)自身需求進(jìn)行判斷并選擇對(duì)應(yīng)的最佳路徑，這期間有一段路徑需要用戶去進(jìn)行判斷接下來使用的搜索方式，可能是輸入地址，也可能是在主搜索框輸入模糊的內(nèi)容關(guān)鍵詞。
而在新版本中，用戶可以省去行為-判斷這一路徑，而是直接無意識(shí)的使用萬能搜索框來執(zhí)行搜索行為。
這個(gè)改版乍一看很雞肋，對(duì)確實(shí)很雞肋?？紤]到首頁有辣么大的一個(gè)主搜索框，用戶沒必要再重新去適應(yīng)使用一個(gè)之前不存在的頂部模糊搜索框，而且用戶長(zhǎng)期以來養(yǎng)成的習(xí)慣恐怕很難在短時(shí)間改變，即在頂部導(dǎo)航欄輸入地址，在中間主搜索框輸入內(nèi)容。所以只談谷歌搜索的主頁，頂部地址輸入框結(jié)合搜索框是一個(gè)很雞肋無意義的改版。
但我們把視野放寬，會(huì)發(fā)現(xiàn)chrome中用戶停留最短的恰好是搜索主頁，用戶真正停留的場(chǎng)景是各式各樣的網(wǎng)站，在瀏覽其他網(wǎng)站（非google搜索主頁）的場(chǎng)景下，用戶有強(qiáng)搜索需求時(shí)可以以更便捷的方式來完成目的，這就是Omnibox存在的意義，不足之處在于，在Omnibox執(zhí)行搜索后沒有為搜索結(jié)果創(chuàng)建新的標(biāo)簽頁，因此之前頁面的內(nèi)容會(huì)被搜索內(nèi)容替換。
IOS版本chrome 操作欄位置變動(dòng)
理所當(dāng)然，IOS端操作欄養(yǎng)成的固有習(xí)慣不容易被打破，舊版本的頂部操作欄估計(jì)會(huì)讓不少IOS用戶又愛又恨，IOS平臺(tái)倡導(dǎo)更加易用的交互設(shè)計(jì)，底部菜單欄操作起來更加高效便捷。之前chrome為保證設(shè)計(jì)語言的的統(tǒng)一性在IOS平臺(tái)仍然保留了頂部交互的設(shè)計(jì)，實(shí)則略微自私，而現(xiàn)在，我們可以看到他們?yōu)橛脩趔w驗(yàn)所作出的努力和犧牲，在官方宣傳片中也刻意放大這一優(yōu)化點(diǎn)，意指我們還是那個(gè)注重用戶體驗(yàn)的設(shè)計(jì)團(tuán)隊(duì)，即便你是對(duì)手平臺(tái)的用戶，我們也會(huì)像親兒子那樣愛著你。
以上是我總結(jié)的部分我所關(guān)注的版本優(yōu)化項(xiàng)，感謝閱讀。
