早在4月初谷歌瀏覽器的測(cè)試版AndroidP 及PC版本的部分曝光信息中已經(jīng)可以看出环揽，谷歌在探索新的material design視覺(jué)風(fēng)格，即傳聞中的Material Design 2.0. 基于MD的設(shè)計(jì)規(guī)范與原則芍殖，在部分視覺(jué)元素和模塊上進(jìn)行修正以契合新的用戶(hù)需求、流行趨勢(shì)。
IOS用戶(hù)和安卓用戶(hù)各占半壁江山的情況下蛤售，一些互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)師和開(kāi)發(fā)人員為謀求開(kāi)發(fā)效率和平臺(tái)設(shè)計(jì)語(yǔ)言及視覺(jué)呈現(xiàn)的統(tǒng)一，逐漸將IOS設(shè)計(jì)語(yǔ)言與MD語(yǔ)言打通妒潭，互相吸收借鑒悴能，形成了不以平臺(tái)設(shè)計(jì)語(yǔ)言做枷鎖的更加自主的設(shè)計(jì)模式，雳灾，包括以用戶(hù)為核心的服務(wù)設(shè)計(jì)模式及根據(jù)產(chǎn)品本身構(gòu)建的個(gè)性化設(shè)計(jì)模式漠酿。
不同于我們這些平臺(tái)設(shè)計(jì)語(yǔ)言的應(yīng)用者，谷歌官方的設(shè)計(jì)師作為整個(gè)MD設(shè)計(jì)語(yǔ)言的構(gòu)建者需要戴上鐐銬完成一些創(chuàng)新改版谎亩。需要繼承設(shè)計(jì)語(yǔ)言的核心原則炒嘲，更要在跨平臺(tái)的情況下保證UI的統(tǒng)一可辨識(shí)以區(qū)分不同平臺(tái)的設(shè)計(jì)風(fēng)格。概括來(lái)說(shuō)匈庭，我們?cè)跒楫a(chǎn)品做設(shè)計(jì)時(shí)只需要在跨平臺(tái)做到the same夫凸。而谷歌設(shè)計(jì)師更需要同時(shí)做到 the same 和different。the same 指的是MD語(yǔ)言風(fēng)格的自我統(tǒng)一嚎花，而different是指與其他平臺(tái)設(shè)計(jì)語(yǔ)言的區(qū)分寸痢。
因此當(dāng)我看到全新 chrome 的UI時(shí)，即驚艷又感動(dòng)紊选。這次10周年版本融合了當(dāng)下的流行設(shè)計(jì)趨勢(shì)啼止，以黑白灰的色塊分割代替舊式的線(xiàn)條分割道逗，將之前過(guò)于尖銳的直角優(yōu)化為向ios靠攏的圓角設(shè)計(jì)等等。關(guān)于視覺(jué)改版的細(xì)節(jié)會(huì)在后面詳細(xì)說(shuō)明献烦。想談一下這次改版會(huì)收獲的各種評(píng)價(jià)滓窍。其中將會(huì)有很大一批評(píng)價(jià)是此類(lèi)：“谷歌MD模仿IOS設(shè)計(jì)風(fēng)格”、“圓角設(shè)計(jì)IOS都用了幾年了”巩那。這使我想起了老羅在錘子發(fā)布會(huì)所講的吏夯。老羅說(shuō)他們嘗試幾十款手機(jī)home鍵的設(shè)計(jì)，從矩形到五角星橢圓形等等即横。事實(shí)證明噪生，圓形是最佳的外觀(guān)選擇。很多人會(huì)罵我們抄襲iphone东囚，但我們不后悔跺嗽。為了真正優(yōu)秀的產(chǎn)品而犧牲名聲或者其他，這是一名優(yōu)秀設(shè)計(jì)師的素養(yǎng)页藻。超脫于平臺(tái)設(shè)計(jì)語(yǔ)言桨嫁，把視野放遠(yuǎn)放開(kāi)闊，最終呈現(xiàn)出這樣以用戶(hù)為中心的優(yōu)秀視覺(jué)和體驗(yàn)份帐。
接下來(lái)將從視覺(jué)和交互體驗(yàn)兩個(gè)方面闡述本次谷歌瀏覽器改版的細(xì)節(jié)璃吧。
視覺(jué)
Chrome改版后的UI給人第一感覺(jué)是四個(gè)字：純凈自然。得益于其在導(dǎo)航欄UI上的優(yōu)化废境。谷歌官方提到本次優(yōu)化項(xiàng)包括更圓潤(rùn)的形狀畜挨、新的色板、新的圖標(biāo)彬坏。更圓潤(rùn)的形狀意指其圓角設(shè)計(jì)朦促，這一改變進(jìn)一步打通了IOS和MD兩種設(shè)計(jì)語(yǔ)言。而新的色板和圖標(biāo)主要應(yīng)用于谷歌主頁(yè)的UI界面栓始，對(duì)于筆者這種使用用Muzli插件的人來(lái)說(shuō)务冕，感受并不是很明顯。
作為瀏覽器所呈現(xiàn)的視覺(jué)內(nèi)核更多是導(dǎo)航欄幻赚，而本次的UI優(yōu)化核心也是基于導(dǎo)航欄的redesign禀忆。概括來(lái)說(shuō)，此次改版視覺(jué)向共有兩個(gè)優(yōu)化點(diǎn)落恼。
一：內(nèi)容分割——用黑白灰色塊代替分割線(xiàn)
去線(xiàn)留白是目前愈發(fā)流行的內(nèi)容分割設(shè)計(jì)趨勢(shì)箩退，比較典型的如Airbnb，其目的在于通過(guò)間距留白對(duì)內(nèi)容進(jìn)行分割佳谦，舍棄了線(xiàn)條分割的樣式戴涝，減少其他元素的關(guān)鍵信息獲取的干擾，屬于對(duì)格式塔原則的基本運(yùn)用，但呈現(xiàn)出的視覺(jué)效果純粹干凈啥刻，體驗(yàn)上也能提高關(guān)鍵信息的傳達(dá)效率奸鸯。
新版chrome在去除線(xiàn)條的基礎(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ǔ)言中的運(yùn)用
在最早的chrome中實(shí)際上已經(jīng)較克制的運(yùn)用了圓角設(shè)計(jì)雁竞，但于整個(gè)視覺(jué)來(lái)說(shuō)占比較低钦椭，只應(yīng)用于書(shū)簽和功能按鈕的hover態(tài)上，且只使用了微圓角來(lái)緩解過(guò)于尖銳的矩形邊角碑诉，（見(jiàn)圖右）而在核心交互元素——標(biāo)簽tab上繼續(xù)使用的無(wú)圓角設(shè)計(jì)（接近無(wú)彪腔，實(shí)際上有1到2像素的圓角，但不易感知）进栽。
最新版的chrome證實(shí)了今年四月份的內(nèi)測(cè)版本的真實(shí)性德挣，并且在谷歌官方的各種糾結(jié)斟酌中正式推出，可見(jiàn)當(dāng)時(shí)內(nèi)測(cè)反響應(yīng)當(dāng)是不錯(cuò)的快毛。參考下圖右側(cè)格嗅，其圓共有兩個(gè)樣式。
樣式一：即8PX圓角唠帝，應(yīng)用場(chǎng)景是標(biāo)簽tab及展開(kāi)的下拉菜單屯掖。
樣式二：滿(mǎn)圓角，應(yīng)用于書(shū)簽和交互按鈕的hover態(tài)襟衰。（這里將交互按鈕的圓形hover態(tài)歸納為正方形的滿(mǎn)圓角狀態(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ú)論在用戶(hù)是在有明確網(wǎng)址的情況下還是在模糊搜索的場(chǎng)景下陷嘴，只需要一次觸發(fā)即可完成操作映砖。進(jìn)一步縮短了用戶(hù)抵達(dá)核心訴求的路徑。
舊版本用戶(hù)執(zhí)行的搜索路徑如下圖所示灾挨。根據(jù)自身需求進(jìn)行判斷并選擇對(duì)應(yīng)的最佳路徑邑退，這期間有一段路徑需要用戶(hù)去進(jìn)行判斷接下來(lái)使用的搜索方式，可能是輸入地址劳澄，也可能是在主搜索框輸入模糊的內(nèi)容關(guān)鍵詞地技。
而在新版本中，用戶(hù)可以省去行為-判斷這一路徑秒拔，而是直接無(wú)意識(shí)的使用萬(wàn)能搜索框來(lái)執(zhí)行搜索行為莫矗。
這個(gè)改版乍一看很雞肋，對(duì)確實(shí)很雞肋砂缩∽餮瑁考慮到首頁(yè)有辣么大的一個(gè)主搜索框绍申，用戶(hù)沒(méi)必要再重新去適應(yīng)使用一個(gè)之前不存在的頂部模糊搜索框于购，而且用戶(hù)長(zhǎng)期以來(lái)養(yǎng)成的習(xí)慣恐怕很難在短時(shí)間改變，即在頂部導(dǎo)航欄輸入地址野哭，在中間主搜索框輸入內(nèi)容双吆。所以只談谷歌搜索的主頁(yè)眨唬，頂部地址輸入框結(jié)合搜索框是一個(gè)很雞肋無(wú)意義的改版。
但我們把視野放寬好乐，會(huì)發(fā)現(xiàn)chrome中用戶(hù)停留最短的恰好是搜索主頁(yè)匾竿，用戶(hù)真正停留的場(chǎng)景是各式各樣的網(wǎng)站，在瀏覽其他網(wǎng)站（非google搜索主頁(yè)）的場(chǎng)景下蔚万，用戶(hù)有強(qiáng)搜索需求時(shí)可以以更便捷的方式來(lái)完成目的岭妖，這就是Omnibox存在的意義，不足之處在于反璃，在Omnibox執(zhí)行搜索后沒(méi)有為搜索結(jié)果創(chuàng)建新的標(biāo)簽頁(yè)区转，因此之前頁(yè)面的內(nèi)容會(huì)被搜索內(nèi)容替換。
IOS版本chrome 操作欄位置變動(dòng)
理所當(dāng)然版扩，IOS端操作欄養(yǎng)成的固有習(xí)慣不容易被打破废离，舊版本的頂部操作欄估計(jì)會(huì)讓不少I(mǎi)OS用戶(hù)又愛(ài)又恨，IOS平臺(tái)倡導(dǎo)更加易用的交互設(shè)計(jì)礁芦，底部菜單欄操作起來(lái)更加高效便捷蜻韭。之前chrome為保證設(shè)計(jì)語(yǔ)言的的統(tǒng)一性在IOS平臺(tái)仍然保留了頂部交互的設(shè)計(jì)悼尾，實(shí)則略微自私，而現(xiàn)在肖方，我們可以看到他們?yōu)橛脩?hù)體驗(yàn)所作出的努力和犧牲闺魏，在官方宣傳片中也刻意放大這一優(yōu)化點(diǎn)，意指我們還是那個(gè)注重用戶(hù)體驗(yàn)的設(shè)計(jì)團(tuán)隊(duì)俯画，即便你是對(duì)手平臺(tái)的用戶(hù)析桥，我們也會(huì)像親兒子那樣愛(ài)著你。
以上是我總結(jié)的部分我所關(guān)注的版本優(yōu)化項(xiàng)艰垂，感謝閱讀泡仗。
