如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

Chrome瀏覽器10周年特別版已經(jīng)上線了，有很多重大的更新內(nèi)容。

Chrome 有了更加圓潤的外觀，新圖標(biāo)和跨平臺的新色調(diào)。Google 還對用戶界面進(jìn)行了更改，以提高您的工作效率。例如，他們已將工具欄移動到 iOS 的底部，簡化了地址欄中的提示，菜單和 URL。還有更多更新的內(nèi)容，請自行去官網(wǎng)看看。

是不是很酷，反正我很喜歡這次更新的 UI界面，顏色和圓角都是喜歡的點(diǎn)。那這套設(shè)計(jì)是怎么來的？接下來的文章將帶你走進(jìn) Chrome 設(shè)計(jì)背后的故事。

Chrome Omnibox的版本迭代之路（Unboxing Chrome，Redesigning the omnibox）

譯者注：Omnibox 是位于瀏覽器頂部的一款通用工具條，用戶可以在 Omnibox 中輸入網(wǎng)站地址或搜索關(guān)鍵字，或者同時輸入這兩者，Chrome 會自動執(zhí)行用戶希望的操作。這個詞在下文中將不再翻譯，屬于功能性的名詞，用英文更準(zhǔn)確。

為了慶祝 Chrome 在2018年9月的10歲生日，我們對瀏覽器界面進(jìn)行了徹底的重新設(shè)計(jì)，對設(shè)計(jì)流程也進(jìn)行了徹底的優(yōu)化。盡管 Chrome 一直都是開源的，但我還是想分享更多關(guān)于其中的設(shè)計(jì)故事，以希望其他人能從中學(xué)到東西。

一、認(rèn)識盒子

我經(jīng)常被問到一些問題，比如「為什么 Chrome 需要設(shè)計(jì)師？」我的同事 Sebastien 在他的 Medium 帖子中優(yōu)雅的描述了這一點(diǎn)，他說：

我收到最難的反饋就是，「只是這樣不就行了嗎？」

隱藏在問題的背后往往是，瀏覽器應(yīng)該像下面那個樣子就夠用了：

這張圖可以說已經(jīng)很像在 PC電腦上的瀏覽器效果了，盡管是面對20億用戶，這樣似乎也能正常工作。那為什么需要重新設(shè)計(jì)呢？

因?yàn)殡[藏在這個盒子里面的內(nèi)容是世界上最復(fù)雜，最安全的搜索和渲染引擎。

我們希望給它一個機(jī)會，去改變?nèi)澜鐬g覽器的設(shè)計(jì)。

二、盒子簡史

要了解我們?nèi)绾巫叩浇裉?，可能需要我們回頭仔細(xì)看看：

△ 第一個盒子

這個0.5dp的漸變描邊，22％不透明度投影及1dp圓角半徑的盒子樣式只為說明一件事：用戶能知道自己可以在其中輸入內(nèi)容。

為什么？因?yàn)檫^去電腦只是連接到顯示器和鍵盤，整個屏幕基本上都是文本。但當(dāng)有了鼠標(biāo)之后，就需要明確哪個區(qū)域是可點(diǎn)擊的。因?yàn)轱@示器只能繪制方塊像素，所以「文本輸入框」誕生了。

△ 初代盒子

隨著瀏覽器的推出，這個盒子開始具有顯示位置或「統(tǒng)一資源定位器（URL）」的雙重功能——因此得名「地址欄」。

在2008年，當(dāng) Chrome 首次發(fā)布時，我們的主要設(shè)計(jì)原則是盡可能減少認(rèn)知成本。因此，我們合并了谷歌的搜索框和地址欄，并添加了4dp投影和下拉菜單，使得搜索體驗(yàn)更好——取了個名字叫「omnibox」。

△ 2008

當(dāng)瀏覽器第一次出現(xiàn)在移動設(shè)備上時，界面空間非常有限，所以我們精心設(shè)計(jì)了每個像素，以便盡可能的占用更少的空間。我們使用了1dp的內(nèi)陰影代替投影，并保證界面在灰色底下保持協(xié)調(diào)。

△ 2012

自那之后，網(wǎng)絡(luò)環(huán)境變得更加復(fù)雜，設(shè)備也更加智能化。我們開始關(guān)心一些更復(fù)雜的情形下會發(fā)生什么，比如：當(dāng)一個網(wǎng)站被黑客入侵并清除用戶個人信息時，當(dāng)突然斷開網(wǎng)絡(luò)時，當(dāng)用戶想回到一周前訪問過的網(wǎng)站但又不記得網(wǎng)站時。

在過去的10年里，全世界成千上萬的工程師（包括 Google 在內(nèi)）都在思考這類問題，并全心全意地尋找解決方案，幫助用戶瀏覽這個呈指數(shù)級變化的網(wǎng)絡(luò)。

移動網(wǎng)絡(luò)的快速發(fā)展也帶來了大量的新用戶，他們其中很多都是第一次在手機(jī)上上網(wǎng)，以前他們從未見過這個盒子，他們也不知道可以從這個盒子中找到任意想要找的東西。

我必須承認(rèn)，在我開始在這里工作之前，我連 Chrome 一半的功能都不知道。例如，可以左右滑動工具欄用來切換選項(xiàng)，或者下滑查看所有選項(xiàng)卡。

△ 向下滑動工具欄查看選項(xiàng)卡的小技巧

類似這樣的功能特性都是很隱蔽的，因?yàn)槲覀儚膩聿幌肟桃獾慕o用戶去推銷我們的功能。事實(shí)上，我們在瀏覽器中做的設(shè)計(jì)大多是無形的，以確保我們產(chǎn)品的核心價值「不是 Chrome，而是內(nèi)容本身」。這是一個我非常喜歡的原則，這也是我加入這個項(xiàng)目的原因之一。

作為一個內(nèi)向的人，有一個優(yōu)勢是會在設(shè)計(jì)上也試圖盡可能的不張揚(yáng)。產(chǎn)品本身似乎也反映了我對設(shè)計(jì)的看法：

保護(hù)用戶與內(nèi)容之間的神圣空間——不要分散用戶的注意力。

就像 Beatrice Warde 將排版視為「水晶酒杯」一樣，我將 Chrome 僅視為「水晶顯示器」。

我錯了。隨著網(wǎng)絡(luò)環(huán)境的改變，其他第三方軟件開始偽裝成 Chrome 來竊取信息，甚至是詐騙用戶。

以前，我們不介意是否有人會從一大堆瀏覽器中選擇 Chrome，但現(xiàn)在它已經(jīng)開始影響我們用戶的安全了。

因此，我們第一次開始質(zhì)疑需不需要那么隱形。

三、千面盒子

當(dāng)我第一次和工程師們坐在一起，想要更好的了解我們的瀏覽器是如何構(gòu)建時，這是一個大坑，沒有任何東西能讓我為接下來的事情做好準(zhǔn)備。

這在我15年設(shè)計(jì)經(jīng)驗(yàn)中從未有過的。

我們在超過6個 Android 版本中，支持超過40種語言，甚至連 Roboto Medium 不支持的語言，我們都做了很好的適配。我們還允許開發(fā)人員將工具欄的顏色更改為幾乎任何顏色，同時還保持可訪問性以支持 web應(yīng)用生態(tài)系統(tǒng)。

我們的 UI 也能適應(yīng)不同像素密度設(shè)備并能保證具有相似的觸摸大小，并且無論設(shè)備的內(nèi)存容量或制造商都能平穩(wěn)運(yùn)行。

在你與它交互之前，這個盒子有超過2000種不同排列方式。

一旦你輕敲、輸入、滾動、滑動或者與它語音，瀏覽器的布局排列就會發(fā)生各種變化。

當(dāng)你打字時，我們確保你看到的鍵盤是你熟悉的那個；當(dāng)你分享一個網(wǎng)站時，我們也會顯示你在手機(jī)上的常用選項(xiàng)。

△ 我們設(shè)計(jì)的一些操作模式（黑色水平線表示分屏模式）

我們的靜態(tài)盒子有2000個排列，然后在包含所有動態(tài)交互的情況下能成倍的增加到20000個以上。

看起來有點(diǎn)多？其實(shí)并不是。

因?yàn)槲覀兿胍_保每個人都能很順利的訪問互聯(lián)網(wǎng)，不管他們從哪里進(jìn)來的。

四、95種灰度配色

即使在我們的團(tuán)隊(duì)中，也沒有人知道這個框中有多少種不同的文本樣式。因?yàn)?Chrome 的迭代過程已經(jīng)超過了10年，我們有一堆零散或過時的源文件。

因此，盡可能的回溯審查（主要是為了確保不會破壞數(shù)十億人的 UI界面），我們?yōu)槊糠N文本樣式遍歷每一行代碼，并在字號、字重、顏色和透明度方面繪制出數(shù)百種變化。

盡管幾年前就已經(jīng)把我們的 UI規(guī)范化了，但是我們沒有關(guān)于如何使用這些規(guī)范的指導(dǎo)，比如像14sp Roboto 的字體，我們就有超過14種不同的顏色。

我們總共使用了超過95種不同深淺的灰色。

如果不查看上下文，就不可能決定使用哪一個。即使是最小的更改也可能打破易訪問性的標(biāo)準(zhǔn)，但其實(shí)我想知道我們實(shí)際上需要的最小顏色數(shù)。

將近半年后，終于有了答案，結(jié)果是8個。

然后，我們對 UI中的每個圖標(biāo)都做了相同的設(shè)計(jì)，所有115個圖標(biāo)——仔細(xì)選擇哪些是 Material（如菜單圖標(biāo)），哪些是 Chrome 特定的（如匿名圖標(biāo)），哪些是特定于平臺的（如復(fù)制/粘貼），還不包括選定，按下和禁用狀態(tài)。

此外，一些圖標(biāo)被翻轉(zhuǎn)為從右到左的形式，因此總數(shù)實(shí)際上接近400+。

五、設(shè)計(jì)優(yōu)化永遠(yuǎn)止境

在盯著灰色盒子看了幾個月后，如果我說前面堆積如山的工作其實(shí)并不可怕，那就真的是在吹牛了。

盲目自信，讓我覺得我可以獨(dú)自完成所有的事情。但我越努力，就越明顯地發(fā)現(xiàn)這個問題并沒有隨著簡單的重新設(shè)計(jì)而消失。

我們需要徹底的檢查整個設(shè)計(jì)過程，以確?，F(xiàn)有和未來的 UI 保持一致。

這很難，因?yàn)橐?Chrome 在Google規(guī)范（如賬戶登錄流程），Material規(guī)范（如按鈕和圖標(biāo)），本地UI（如鍵盤）和Chrome品牌元素（如斷網(wǎng)時的小恐龍）之間保持平衡。

所以，我向我們的工程師們尋求幫助，令人驚訝的是，他們對規(guī)范問題的放大表示歡迎。這個問題其實(shí)也讓他們很難審查代碼，因?yàn)槠脚_約束和特性變化意味著難以回退和各種不一致。事實(shí)上，我們的工程師 Ted Choc 甚至雇了人來支持我們的努力，他們其實(shí)也很想搞定這個問題。（我的愿望實(shí)現(xiàn)了！）

為了讓你知道我們的 Eng團(tuán)隊(duì)是多么的了不起，Ted 的使命宣言中寫的就是「Chrome移動端超級棒！」

有了新獲得的支持，我們開始構(gòu)建基于代碼庫共享組件的可視化規(guī)范。其他應(yīng)用「免費(fèi)」獲得的 Material 組件必須經(jīng)過定制，以滿足 Chrome 的所有（2000個）排列。幾乎是從零開始，所以我們需要找到一種可擴(kuò)展的方法來劃分所有這些差異。

結(jié)果如下：

我們的第一個版本（M54）截圖——在我們的界面中會映射每種顏色、文字、圖標(biāo)和組件。

六、設(shè)計(jì)速度

幾個月來，我們只是在刪除整理東西，清理多年累積的設(shè)計(jì)和工程債務(wù)?，F(xiàn)在我們有了一個干凈的界面和一個組件庫系統(tǒng)，我們已經(jīng)準(zhǔn)備好開始設(shè)計(jì)了。

讓我們回到我們在前面第一次遇到的盒子。1號盒子放在一個更大的灰色盒子里，我們稱之為「工具欄」。

△ 第二個盒子

工具欄將瀏覽器UI 從內(nèi)容和系統(tǒng)UI 中分離出來，當(dāng)你點(diǎn)擊白色框時，它將填充灰色框，并顯示下面的另一個灰色框。

△ 第三個盒子

在這里，我們可以展示我們在幕后所做的一切，試圖使 Chrome 盡可能地發(fā)揮作用。但是為什么所有這些盒子都要調(diào)整大小并從一種狀態(tài)改變到另一種狀態(tài)呢？

△ 第一個盒子的不同形式

當(dāng)某些東西在屏幕之間發(fā)生變化時，就很難識別或記住。

如果 UI 在用戶與它交互時發(fā)生了變化，他們會將變化理解為以后可能有用的信息。例如，如果圖像消失在圖標(biāo)中，你可能需要記住該圖標(biāo)，以防你想再次打開該圖像。

這增加了理解用戶界面和決定需要保留哪些信息的短暫認(rèn)知負(fù)擔(dān)。

我們?nèi)サ袅怂械囊曈X噪音像素，讓你更快地進(jìn)行認(rèn)知過程，而不僅僅是為了讓它看起來更賞心悅目。

即使每座城市都能節(jié)省1秒鐘的時間，那也會有200萬秒或者23.14天。想想看，人們可以在額外的23天內(nèi)做些什么！（譯者注：不大明白作者這里怎么算的，可能意思是說要提升效率。）

為了演示，讓我們看看去掉文字和圖標(biāo)之后的工具欄：

你是否注意到你的眼睛在屏幕上移動了多少來處理不同的元素？

現(xiàn)在讓我們來看一下同一個屏幕，只去掉了顏色和陰影：

從什么都沒有的時候開始練習(xí)，或者我們所說的「白色建筑」，意味著每一個元素都必須被考慮。包括這個在我們的 UI 上靜靜地做了這么多年的盒子：

△ 第四種盒子

幸運(yùn)的是，我們認(rèn)識了第四種盒子的創(chuàng)造者，并且得到了 Android 團(tuán)隊(duì)的大力支持，可以根據(jù)內(nèi)容來改變顏色（又一個6個月的旅程，值得一提）。

但是，讓我們繼續(xù)討論第二框的其他內(nèi)容：圖標(biāo)，這些圖標(biāo)都帶有另外兩個隱形框。

描述了圖像資源的「邊界框」

△ 看不見的5號盒子

「觸摸目標(biāo)」描述了點(diǎn)擊區(qū)域

△ 看不見的6號盒子

因?yàn)椤?點(diǎn)菜單」圖標(biāo)視覺上更窄，它有一個更小的點(diǎn)擊區(qū)域。但如果單純讓可點(diǎn)擊區(qū)域保持統(tǒng)一，就會造成視覺上的不平衡，造成圖標(biāo)之間不均勻的間隙。

所以我們不得不妥協(xié)，稍微打破了 Material規(guī)范，讓它更容易點(diǎn)擊和視覺平衡。

是的，我花了整整一個星期的時間盯著看不見的盒子，會有人注意到嗎？很可能不會，值得嗎？值得，有2000000倍的效果啊。

七、用一個盒子來規(guī)范它們

在我通過遍歷 UI 中的所有文本、顏色和圖標(biāo)建立了足夠的信心之后，我準(zhǔn)備處理 omnibox。

我們想找到一種方法來巧妙地強(qiáng)化 Chrome 的品牌——考慮到我們的 logo 很少出現(xiàn)在我們的 UI 中，我猜想這會是一個挑戰(zhàn)。我做了幾十個看起來很有希望的設(shè)計(jì)，卻發(fā)現(xiàn)沒有一個是可行的，因?yàn)樗鼈兌既狈τ辛Φ闹С掷碛伞?

所以，我回到我們的核心品牌，認(rèn)真地看了看我們的標(biāo)識。我注意到的第一個視覺特征是小寫的「c」。