原文來自Medium，作者Hannah Lee
原文鏈接：https://medium.com/@san_toki/unboxing-chrome-f6af7b8161a2
2018年9月，為了紀念Chrome推出10週年，我們（指Google設計團隊，下同）全新設計了用戶界面，嚴格檢查每一步設計流程。雖然Chrome一直保持著開源狀態，但我還是想在這裡分享我們的設計故事，希望其他人可以從中有所借鑑。
方框世界
我經常會遇到諸如“Chrome也需要設計師？”之類的問題，我的同事塞巴斯蒂安在Medium發帖時說得很委婉，
我收到最壞的反饋是“就這？”
這個問題完美地隱含了一個假設——瀏覽器應該是這樣的：
這個圖案很熟悉，看起來就像我電腦上的方框，20億用戶已經習以為常。為什麼要重新設計呢？
因為隱藏在方框中的，是世界上最複雜、最安全的網絡搜索和內核引擎。
我們希望改變世界對瀏覽器的看法。
方框簡史
如何實現呢？讓我們湊近來看：
圖注：1號方框。
0.5dp漸變輪廓，不透明度22％的投影框，精巧的1dp拐角半徑，無不在提醒用戶：在此處鍵入內容。
為什麼？很久之前，電腦只是連接了顯示器的鍵盤，整塊屏幕只用來顯示文本。
但是，有了鼠標之後，就需要點擊該區域。那時顯示器只能繪製方形像素，因此“文本輸入框”誕生了。
圖注：方框原始版本。
瀏覽器出現後，方框多了一重作用：顯示統一資源定位符（URL），因此被命名為“地址欄”。
2008年Chrome首次發佈，當時我們的主要設計原則是降低認知負荷。我們將Google的搜索框與地址欄合併，並增加了帶有4dp投影的細線下拉菜單，便於瀏覽推薦結果，並將其命名為“多功能框”。
圖注：2008年。
當瀏覽器首次應用於移動設備時，屏幕空間非常寶貴，因此我們精心設計了每個像素，儘可能佔用更小的空間。我們改用了1dp的內投影，並設置了灰度。
圖注：2012年。
從那時起，網絡變得越來越複雜，設備也更加智能。我們開始關注，如果網站受到黑客入侵，危及用戶身份怎麼辦？另外，如果突然斷網或者想找到一個星期前訪問過的頁面卻忘記了地址，該怎麼辦？
在過去的10年，全球數千名工程師在研究此類問題，傾注心血尋找解決方案，幫助用戶瞭解瞬息萬變的網絡。
移動瀏覽功能吸引了很多人進行手機上網初體驗。以前，他們從未見過這個方框，同時也缺乏從桌面瀏覽中學到的經驗。
必須承認，在Google工作之前，Chrome有一半的功能我都不瞭解。例如，可以向左或向右滑動工具欄實現選項卡之間的切換，或向下滑動查看所有標籤。
圖注：從工具欄向下滑動查看標籤頁#protips。
這樣的功能如同滄海遺珠，因為我們不想事無鉅細地教導我們的用戶。實際上，隱藏多功能框的設計體現了我們的核心價值觀：內容高於框架。我喜歡這條原則，它也是我加入Google的原因。
性格內向的我希望自己的設計簡單舒服。產品本身似乎體現了我的設計理念：
保護用戶和內容之間的空間，避免引起注意。
就像碧翠斯·沃德將排版視為水晶酒杯，我將Chrome看作水晶屏幕。
但是，我錯得離譜。
隨著網絡環境的變化，第三方開始偽裝成Chrome竊取信息，欺騙用戶。
以前，我們不介意是否有人可以從多個瀏覽器中辨認出Chrome，但現在不同，用戶的安全受到了影響。
我們第一次反省，是否需要讓瀏覽器更顯眼。
方框的2,000面
當我第一次與工程師坐下來商討更好地瞭解多功能框的構建方式時，接下來發生的一切讓我措手不及。
在15年的從業經歷中，我從未設計過類似的產品。
我們支持40種語言，打造6種以上的Android版本。我們允許開發人員將工具欄的顏色更改為任何顏色，同時維持對比度以響應網頁應用生態。
我們對用戶界面也進行了調整，高低像素密度的設備具有相似的觸摸目標，並且無論設備的存儲或製造商處於哪個水平，都能平穩運行。
在用戶與方框交互之前，我們已嘗試超過2,000種排列。
點按、鍵入、滾動、滑動或與之交談後，多功能框還有數千種變換等你探索。
鍵入時，我們確保你使用的是熟悉的鍵盤。分享站點時提供的選項也和手機常規設置相同。
圖注：我們設計的不同外形（黑色水平線代表分屏模式）。
靜態框從2,000種排列增至20,000種，囊括所有交互。
“有點過了”？並非如此。
因為我們要確保無論從哪個渠道而來，人人都可以訪問網頁。
九十五度灰
即使在團隊中，也沒人知道此框內有多少種文本樣式。由於Chrome的歷史超過10年，因此我們的源文件是分散的、不完整的、過時的。
因此，在盡職調查中（主要是為了確保不會破壞數十億用戶的用戶界面），我們對每種文本樣式的每一行代碼進行爬網，並繪製了數百種大小、重量、顏色和透明度的樣式。
當然，幾年前我們已經“數據化”了用戶界面 ，但是對於如何以及何時使用這些數據，我們沒有完備的章程。僅14sp Roboto Regular字體就出現了超過14種“Material（Chrome的設計主題）灰度”。
我們一共使用了超過95種不同的灰度。
如果不考慮具體情境的話，就無法決定把哪個替換掉。即使是最微小的更改也可能會破壞訪問標準。但是我還是想知道我們實際需要的最少顏色數量。
將近半年後，我們得到了答案：8。
然後，我們對用戶界面的每個圖標都執行了相同的操作。共有115種圖標，仔細區別哪些是菜單圖標，哪些是Chrome特有的（如隱身模式），哪些是僅限於平臺的（如複製、粘貼），這還不算以上圖標的選擇、按壓和禁用狀態。
此外，其中一些圖標會根據語言方向翻轉，因此總數實際上接近400個。
生命不息，設計不止
在盯著灰框好幾個月之後，如果我說堆積如山的工作並不令人生畏，那是在撒謊。
我曾經自信地認為單憑自己就能完成重新設計。但是，我越努力，就越發明白，簡單的設計無法解決所有的問題。
我們需要徹底檢查整個設計流程，確保現有和將來的用戶界面保持一致。
這很困難，因為Chrome需要在Google數據（帳戶登錄流）、材料規格（按鈕和圖標）、本機用戶界面（鍵盤）和Chrome品牌元素（斷線小恐龍）之間保持平衡。
我向工程師求助，令人驚訝的是，他們也支持擴大範圍。這使得代碼檢查更加困難，平臺的限制和功能更新意味著大量的迴歸測試和不一致情況的出現。工程負責人泰德·查克甚至僱了專家支持我們的工作。我的願望終於實現了！
有了更多支持，我們著手根據代碼庫構建共享組件的可視化數據。必須對其他應用“免費”的Material組件進行自定義，以適應Chrome的所有排列方式，一切幾乎是從頭開始。所以我們需要找到一種明確的方式量化所有差異。
我們得到了有史以來第一款Chrome便利貼樣式表：
圖注：v1（M54）便利貼樣式表，記錄了用戶界面中的每種顏色、文本、圖標和組件。
速度與設計
幾個月來，我們做的僅僅是刪除了一些東西。清理多年累積的設計和爛尾工程。現在，我們有了乾淨整潔的界面和一套基塊，可以開始“設計”了。
讓我們回到在第1節首次出現的1號方框，把它放在一個較大的灰色框內，稱之為“工具欄”。
圖注：2號方框。
工具欄將用戶界面與內容和系統界面區分開。點擊白框時，它將會覆蓋灰框，並在下面顯示另一個灰色框。聽糊塗了吧？
圖注：3號方框。
我們做的一切是為了讓Chrome儘可能發揮其功能。但是，為什麼所有這些方框都需要調整大小、更改狀態呢？
圖注：1號方框的多個版本。
當界面之間發生變化時，對用戶來說很難辨認。
如果在交互時，用戶界面發生變化，用戶會將這些變化視作可能在之後有用的信息。例如，圖像變為圖標，用戶可能要記住該圖標，以防需要再次打開圖像。
這需要增加認知負擔才能理解界面，確定哪些信息需要保留。
我們刪除了所有的視覺噪音，促進更快的認知處理，美觀不是唯一目的。
即使為每個人節省1秒鐘，乘以Chrome用戶數量，節省的時間也難以想象。
為了便於演示，我們來看看刪除了文本和圖標的工具欄：
你的眼睛需要多久能處理各類元素？
去掉顏色和陰影呢？
從無到有，或從所謂的“白色”開始構建，意味著必須要考慮到所有要素。包括這些年來一直靜靜待在用戶界面上方的方框：
圖注：4號方框。
幸運的是，我們認識4號方框的創建者，並獲得了Android團隊的大力支持，可以根據內容更改顏色（又6個月過去了）。
繼續講一下2號方框的其他部分：圖標。這些圖標分別有兩個隱形框：
1. 描繪圖像資產輪廓的“邊界框”。
圖注：5號隱形框。
2.“觸摸目標”描繪了可以點擊的區域。
圖注：6號隱形框。
由於“3點菜單”圖標較窄，觸摸目標也更小。但是僅讓方框擴大，會造成視覺的不平衡，從而使圖標之間產生不均勻的間隙。
我們不得不妥協並稍微偏離Material規範，使其更易點觸，並實現視覺平衡。
我花了整整一個星期盯著這些看不見的方框。有誰會注意到？多數情況下不會。值得嗎？為每一位用戶，值得！
大一統
通過反覆比對用戶界面中的文本、顏色和圖標，我建立了足夠的信心，準備好處理多功能框了。
我們試圖找到強化Chrome品牌的巧妙方法，鑑於我們的徽標很少出現在用戶界面中，這絕對是一個挑戰。我做了幾十個看似不錯的設計，但後來意識到它們都起不了作用，因為這些設計缺乏內涵。
反覆審視我們的品牌核心，仔細研究了品牌標誌，首先映入眼簾的是小寫的“c”。
這體現了品牌的隨性，所以友好的形狀——圓形必不可少。
與矩形不同，圓形是自然產生的形狀，用戶的視覺認知負荷較小。在倫敦短暫生活的兩年時間裡，這一形狀在我的腦海中仍然記憶猶新。
倫敦地鐵站的名稱最初以矩形符號顯示，乘客很難將其與海報廣告區分開。1912年倫敦人為其添加了紅色圓圈，便於識別。最後由弗蘭克·皮克將圓環整合到了現今廣為人知的圖形裡。
我猛然想起我們的多功能框。
它不僅需要顯示現在的位置，還應該幫助你到達其他目的地。
仔細端詳我們的標誌，引起我注意的是這個形狀：
這就是我們品牌的形狀。
它表達了我們的性格，同時表明這不僅僅是一個“搜索框”或“地址欄”，而是代表新潮、友好的事物。
鼠標的引入曾改變了文本框的形狀，現在我們需要為移動電話的輸入設備——手指，加入一些新元素。
一次偶然的機會，我們參加了笛洋美術館的弗蘭克·斯特拉展。弗蘭克·斯特拉用彎曲的畫布突破了標準的矩形框架。和我一樣，他也喜歡賽車。在《多維爾》一畫中，他用類似的形狀表示速度。
我贊成現代派的觀點，即傳統的藝術形式對於我們的工作而言無意義而且已經過時了，所以我們將新的視覺設計命名為“Modern（現代）”。
我們探索了數千種設計。
圖注：所有素描畫板。
最初，我採用了與移動設備相同的方法。1dp細線似乎合適，但是在執行過程中，卻和頂部的白色搜索欄難以區分。細線在隱身模式下也無法正常顯示，很難與粗輪廓圖標平衡。
我們的一位設計師以為它只是一個線框。
使用Material投影也不太合適，因為它不能解決看起來像“搜索框”的問題。底部的投影增加了4dp，並且垂直居中，顯得更為厚重。
我們甚至嘗試過完全刪除這個方框，但是這些元素就好像是被隨機放置。另外，類似居中放置URL之類的更改會產生大量的成本。
我們的同事也在努力讓URL看起來更整潔，在Material 2才推出不久，他們帶來了更豐富的調色板，為我們的圖形賦予了更多的生命力。
圖注：之前。
圖注：更新顏色和網址後。
一致的形狀不需要過多的過渡動畫，代碼因而更簡潔，從而在設計和效率之間實現了完美的平衡。
現在，我們準備對其進行測試。上萬名用戶歷經數月的實驗和可用性研究，在大家的期待和支持下，新設計被評為更友好、更創新和更智能，同時體驗依然迅速和可靠。
圖注：M68到M69。
圖注：我們長達一年的努力。
儘管我只寫了這一個方框，但用戶界面的每一處，都有很多故事值得分享。
圖注：新的“Modern”M69貼紙。
它完美嗎？並不，這也不是我為我們的工作感到驕傲的原因。我們的成功在於幫助Chrome變得更輕便，減少了下載負擔。我們構建的每個像素，都在為下一位設計師創作更好的作品鋪平道路。
就個人而言，當一位測試者說：
“它帶來了更多的平靜和一天的好心情。”
我知道這麼做是有意義的。
不僅僅是因為他們喜歡新設計，還因為我對Chrome也持有相同的觀點。
我們花了將近一年的時間研究用戶界面中的每個像素，因為小框框裡也有大文章。
閱讀更多 棧外 的文章
