如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Chrome瀏覽器10周年特別版已經上線了，有很多重大的更新內容。Chrome 有了更加圓潤的外觀，新圖標和跨平臺的新色調。Google 還對用戶界面進行了更改，以提高您的工作效率。例如，他們已將工具欄移動到 iOS 的底部，簡化了地址欄中的提示，菜單和 URL。還有更多更新的內容，請自行去官網看看。
是不是很酷，反正我很喜歡這次更新的 UI界面，顏色和圓角都是喜歡的點。那這套設計是怎么來的？接下來的文章將帶你走進 Chrome 設計背后的故事。
Chrome Omnibox的版本迭代之路（Unboxing Chrome，Redesigning the omnibox）
譯者注：Omnibox 是位于瀏覽器頂部的一款通用工具條，用戶可以在 Omnibox 中輸入網站地址或搜索關鍵字，或者同時輸入這兩者，Chrome 會自動執行用戶希望的操作。這個詞在下文中將不再翻譯，屬于功能性的名詞，用英文更準確。
為了慶祝 Chrome 在2018年9月的10歲生日，我們對瀏覽器界面進行了徹底的重新設計，對設計流程也進行了徹底的優化。盡管 Chrome 一直都是開源的，但我還是想分享更多關于其中的設計故事，以希望其他人能從中學到東西。
一、認識盒子
我經常被問到一些問題，比如「為什么 Chrome 需要設計師？」我的同事 Sebastien 在他的 Medium 帖子中優雅的描述了這一點，他說：
隱藏在問題的背后往往是，瀏覽器應該像下面那個樣子就夠用了：
這張圖可以說已經很像在 PC電腦上的瀏覽器效果了，盡管是面對20億用戶，這樣似乎也能正常工作。那為什么需要重新設計呢？
我們希望給它一個機會，去改變全世界瀏覽器的設計。
二、盒子簡史
要了解我們如何走到今天，可能需要我們回頭仔細看看：
△ 第一個盒子
這個0.5dp的漸變描邊，22％不透明度投影及1dp圓角半徑的盒子樣式只為說明一件事：用戶能知道自己可以在其中輸入內容。
為什么？因為過去電腦只是連接到顯示器和鍵盤，整個屏幕基本上都是文本。但當有了鼠標之后，就需要明確哪個區域是可點擊的。因為顯示器只能繪制方塊像素，所以「文本輸入框」誕生了。
△ 初代盒子
隨著瀏覽器的推出，這個盒子開始具有顯示位置或「統一資源定位器（URL）」的雙重功能——因此得名「地址欄」。
在2008年，當 Chrome 首次發布時，我們的主要設計原則是盡可能減少認知成本。因此，我們合并了谷歌的搜索框和地址欄，并添加了4dp投影和下拉菜單，使得搜索體驗更好——取了個名字叫「omnibox」。
△ 2008
當瀏覽器第一次出現在移動設備上時，界面空間非常有限，所以我們精心設計了每個像素，以便盡可能的占用更少的空間。我們使用了1dp的內陰影代替投影，并保證界面在灰色底下保持協調。
△ 2012
自那之后，網絡環境變得更加復雜，設備也更加智能化。我們開始關心一些更復雜的情形下會發生什么，比如：當一個網站被黑客入侵并清除用戶個人信息時，當突然斷開網絡時，當用戶想回到一周前訪問過的網站但又不記得網站時。
在過去的10年里，全世界成千上萬的工程師（包括 Google 在內）都在思考這類問題，并全心全意地尋找解決方案，幫助用戶瀏覽這個呈指數級變化的網絡。
移動網絡的快速發展也帶來了大量的新用戶，他們其中很多都是第一次在手機上上網，以前他們從未見過這個盒子，他們也不知道可以從這個盒子中找到任意想要找的東西。
我必須承認，在我開始在這里工作之前，我連 Chrome 一半的功能都不知道。例如，可以左右滑動工具欄用來切換選項，或者下滑查看所有選項卡。
△ 向下滑動工具欄查看選項卡的小技巧
類似這樣的功能特性都是很隱蔽的，因為我們從來不想刻意的給用戶去推銷我們的功能。事實上，我們在瀏覽器中做的設計大多是無形的，以確保我們產品的核心價值「不是 Chrome，而是內容本身」。這是一個我非常喜歡的原則，這也是我加入這個項目的原因之一。
作為一個內向的人，有一個優勢是會在設計上也試圖盡可能的不張揚。產品本身似乎也反映了我對設計的看法：
就像 Beatrice Warde 將排版視為「水晶酒杯」一樣，我將 Chrome 僅視為「水晶顯示器」。
我錯了。隨著網絡環境的改變，其他第三方軟件開始偽裝成 Chrome 來竊取信息，甚至是詐騙用戶。
因此，我們第一次開始質疑需不需要那么隱形。
三、千面盒子
當我第一次和工程師們坐在一起，想要更好的了解我們的瀏覽器是如何構建時，這是一個大坑，沒有任何東西能讓我為接下來的事情做好準備。
我們在超過6個 Android 版本中，支持超過40種語言，甚至連 Roboto Medium 不支持的語言，我們都做了很好的適配。我們還允許開發人員將工具欄的顏色更改為幾乎任何顏色，同時還保持可訪問性以支持 web應用生態系統。
我們的 UI 也能適應不同像素密度設備并能保證具有相似的觸摸大小，并且無論設備的內存容量或制造商都能平穩運行。
在你與它交互之前，這個盒子有超過2000種不同排列方式。
一旦你輕敲、輸入、滾動、滑動或者與它語音，瀏覽器的布局排列就會發生各種變化。
當你打字時，我們確保你看到的鍵盤是你熟悉的那個；當你分享一個網站時，我們也會顯示你在手機上的常用選項。
△ 我們設計的一些操作模式（黑色水平線表示分屏模式）
我們的靜態盒子有2000個排列，然后在包含所有動態交互的情況下能成倍的增加到20000個以上。
看起來有點多？其實并不是。
四、95種灰度配色
即使在我們的團隊中，也沒有人知道這個框中有多少種不同的文本樣式。因為 Chrome 的迭代過程已經超過了10年，我們有一堆零散或過時的源文件。
因此，盡可能的回溯審查（主要是為了確保不會破壞數十億人的 UI界面），我們為每種文本樣式遍歷每一行代碼，并在字號、字重、顏色和透明度方面繪制出數百種變化。
盡管幾年前就已經把我們的 UI規范化了，但是我們沒有關于如何使用這些規范的指導，比如像14sp Roboto 的字體，我們就有超過14種不同的顏色。
如果不查看上下文，就不可能決定使用哪一個。即使是最小的更改也可能打破易訪問性的標準，但其實我想知道我們實際上需要的最小顏色數。
將近半年后，終于有了答案，結果是8個。
然后，我們對 UI中的每個圖標都做了相同的設計，所有115個圖標——仔細選擇哪些是 Material（如菜單圖標），哪些是 Chrome 特定的（如匿名圖標），哪些是特定于平臺的（如復制/粘貼），還不包括選定，按下和禁用狀態。
此外，一些圖標被翻轉為從右到左的形式，因此總數實際上接近400+。
五、設計優化永遠止境
在盯著灰色盒子看了幾個月后，如果我說前面堆積如山的工作其實并不可怕，那就真的是在吹牛了。
盲目自信，讓我覺得我可以獨自完成所有的事情。但我越努力，就越明顯地發現這個問題并沒有隨著簡單的重新設計而消失。
這很難，因為要 Chrome 在Google規范（如賬戶登錄流程），Material規范（如按鈕和圖標），本地UI（如鍵盤）和Chrome品牌元素（如斷網時的小恐龍）之間保持平衡。
所以，我向我們的工程師們尋求幫助，令人驚訝的是，他們對規范問題的放大表示歡迎。這個問題其實也讓他們很難審查代碼，因為平臺約束和特性變化意味著難以回退和各種不一致。事實上，我們的工程師 Ted Choc 甚至雇了人來支持我們的努力，他們其實也很想搞定這個問題。（我的愿望實現了！）
為了讓你知道我們的 Eng團隊是多么的了不起，Ted 的使命宣言中寫的就是「Chrome移動端超級棒！」
有了新獲得的支持，我們開始構建基于代碼庫共享組件的可視化規范。其他應用「免費」獲得的 Material 組件必須經過定制，以滿足 Chrome 的所有（2000個）排列。幾乎是從零開始，所以我們需要找到一種可擴展的方法來劃分所有這些差異。
結果如下：
我們的第一個版本（M54）截圖——在我們的界面中會映射每種顏色、文字、圖標和組件。
六、設計速度
幾個月來，我們只是在刪除整理東西，清理多年累積的設計和工程債務。現在我們有了一個干凈的界面和一個組件庫系統，我們已經準備好開始設計了。
讓我們回到我們在前面第一次遇到的盒子。1號盒子放在一個更大的灰色盒子里，我們稱之為「工具欄」。
△ 第二個盒子
工具欄將瀏覽器UI 從內容和系統UI 中分離出來，當你點擊白色框時，它將填充灰色框，并顯示下面的另一個灰色框。
△ 第三個盒子
在這里，我們可以展示我們在幕后所做的一切，試圖使 Chrome 盡可能地發揮作用。但是為什么所有這些盒子都要調整大小并從一種狀態改變到另一種狀態呢？
△ 第一個盒子的不同形式
當某些東西在屏幕之間發生變化時，就很難識別或記住。
如果 UI 在用戶與它交互時發生了變化，他們會將變化理解為以后可能有用的信息。例如，如果圖像消失在圖標中，你可能需要記住該圖標，以防你想再次打開該圖像。
這增加了理解用戶界面和決定需要保留哪些信息的短暫認知負擔。
即使每座城市都能節省1秒鐘的時間，那也會有200萬秒或者23.14天。想想看，人們可以在額外的23天內做些什么！（譯者注：不大明白作者這里怎么算的，可能意思是說要提升效率。）
為了演示，讓我們看看去掉文字和圖標之后的工具欄：
你是否注意到你的眼睛在屏幕上移動了多少來處理不同的元素？
現在讓我們來看一下同一個屏幕，只去掉了顏色和陰影：
從什么都沒有的時候開始練習，或者我們所說的「白色建筑」，意味著每一個元素都必須被考慮。包括這個在我們的 UI 上靜靜地做了這么多年的盒子：
△ 第四種盒子
幸運的是，我們認識了第四種盒子的創造者，并且得到了 Android 團隊的大力支持，可以根據內容來改變顏色（又一個6個月的旅程，值得一提）。
但是，讓我們繼續討論第二框的其他內容：圖標，這些圖標都帶有另外兩個隱形框。
描述了圖像資源的「邊界框」
△ 看不見的5號盒子
「觸摸目標」描述了點擊區域
△ 看不見的6號盒子
因為「3點菜單」圖標視覺上更窄，它有一個更小的點擊區域。但如果單純讓可點擊區域保持統一，就會造成視覺上的不平衡，造成圖標之間不均勻的間隙。
所以我們不得不妥協，稍微打破了 Material規范，讓它更容易點擊和視覺平衡。
七、用一個盒子來規范它們
在我通過遍歷 UI 中的所有文本、顏色和圖標建立了足夠的信心之后，我準備處理 omnibox。
我們想找到一種方法來巧妙地強化 Chrome 的品牌——考慮到我們的 logo 很少出現在我們的 UI 中，我猜想這會是一個挑戰。我做了幾十個看起來很有希望的設計，卻發現沒有一個是可行的，因為它們都缺乏有力的支持理由。
所以，我回到我們的核心品牌，認真地看了看我們的標識。我注意到的第一個視覺特征是小寫的「c」。
這說明了我們品牌的自然隨性，所以找到一個友好的形狀很重要。我們還使用了與谷歌相同的4種顏色來展示我們的傳承性。事實上，Android、Google 和 Chrome 的標志上都有一個反復出現的形狀。
圓形
圓形是自然形成的形狀，不像矩形，所以他們的視覺認知負擔更小。在倫敦住了兩年之后，我對這個形狀仍然記憶猶新。
當地鐵的名字第一次以矩形的形式出現時，火車上的乘客很難將其與海報廣告區分開來。因此，1912年，他們在地鐵的后面加上了紅色的圓圈，以便更容易找到。 Frank Pick 隨后將圓圈加入了現代著名的標志中。
△ 圖片來自倫敦交通博物館
我覺得這是對我們 omnibox 的一個很好的隱喻。
深入觀察我們的 logo，我特別注意的形狀是這個：
它表達了我們的性格，同時表明這不僅僅是一個「搜索框」或「地址欄」，而是一個全新的，友好的東西。
由于鼠標的引入促成了文本框形狀，而在移動端，又由我們的手指交互進化了我們文本框的形狀，更符合人手的交互操作。
一次偶然的機會，我們還去 de Young 博物館參加 Frank Stella 的展覽，Stella 使用曲線形狀的畫布打破了標準的矩形框架。和我一樣，他也喜歡賽車，在他的作品《Deauville》中，他使用了類似的形狀來暗示速度——Chrome 的核心支柱之一。
我贊同現代主義的觀點，認為傳統的藝術形式對于我們的任務來說已經變得無關緊要和過時了，因此我們將新的視覺設計方向命名為「Modern」。
然后我們探索了數千種設計。
△ 所有Sketch畫板
起初，我采用了與最初在移動端相同的方法，使用1dp描邊似乎是有意義的。但在執行過程中，它很容易迷失在一片白色的、頂部有搜索欄的網站中，邊線在隱身模式下也不能很好地工作，很難與粗粗的輪廓圖標相平衡。
使用 Material 規范投影也感覺不太合適，因為它并沒有解決我們最初看起來只是像一個「搜索框」的問題。底部添加了一個額外的4dp投影，它視覺上看起來很重而且偏離中心。
我們甚至試著把盒子全部移走，但現在元素似乎是隨機放置的，一個像以 URL 為中心的改變會帶來巨大的工作成本。
結果是，我們的同事也在努力使我們的 URL 看起來更干凈，而 Material 2剛剛開始推出。它帶來了更豐富的配色，給我們的形狀賦予更多的生命力。
△ 之前
△ 更新后的顏色和url
事實證明，具有一致的形狀也使得我們的代碼不那么復雜，過渡動畫更少——設計和效率的完美平衡。
現在，我們準備好了進行測試：成千上萬的用戶、數月的實驗和可用性研究，與我們之前的設計相比，它被評為更「友好」、「創新」、「聰明」，而看起來卻毫不「快」或「值得信賴」。
△ M68 to M69
△ 我們為期一年的迭代
雖然我只是花了時間來寫這個盒子，但是其實在 UI 的每一處都有十幾個故事。
△ 我們全新的「Modern」M69 截圖
它是完美的嗎？其實還沒有，但這不是讓我為我們所做的事感到自豪的原因。事實上，我們讓 Chrome 變得更小，下載更快——確保我們構建的每一個像素都為下一個更好的設計師鋪平了道路。
就我個人而言，當我們的用戶研究中的一位參與者說，我知道我們做了一些正確的事情，「這給了我一種更好的平靜感，可能會幫助我一整天。」
不僅是因為他們喜歡這個設計，是因為這也是我看待 Chrome 的方式。
我們花了將近一年的時間仔細研究 UI 中的每個像素，因為我們希望設計包裝與內在質量能夠相匹配——只是希望這次你可能會注意到這不是一個普通的盒子。
藍藍設計( m.73404.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。