重新設計Chrome桌面

像素級別的設計

在2016年9月初，新的Chrome Core UI重新設計，或稱為“Chrome MD”（用於材質設計））在Windows上推出，作為第53次更新的一部分。這是新設計的三個階段部署的最後一步，它開始於51與Chrome操作系統和Linux，其次是macOS在52。Windows是這個過程的頂點，而Chrome從未完成，感覺到我喜歡回顧這個過程的恰當時機幾乎需要2年時間，希望能夠提供一些對您有用的細節和經驗。

發文背景

作為視覺設計師，我已經在Chrome和Chrome操作系統上工作了將近5年。在我將瀏覽器和操作系統之間的時間分開的同時，過去一年裡，我一直在逐漸轉型為ChromeOS的全職職務。

早在2012年，作為一個新的Chrome團隊成員，我的第一個大項目之一就是重新設計的Chrome Core UI兼容高分辨率顯示器，如第一臺Macbook Pro Retina和第一款Chromebook Pixel，這是運行Google版本的視網膜顯示。Chromebook Pixel將於2013年2月發佈，之後就是Macbook Pro。

作為一個員工來說，這些經驗讓我瞭解了Chrome瀏覽器設計的複雜性。也是迄今為止所做的所有設計決策在效率上了明顯的提高。

我們當時的目標不僅是為了使新設計在即將到來的新的屏幕分辨率和密度比（1x和2x）上生效，而且通過這個過程組織我們的工作流程和知識儲庫來重新思考和促進我們與工程協作的方式。

Chrome的設計過程越來越需要越來越多的證據，這就需要這個需求。Chrome誕生以來快速增長的速度並沒有太多的時間來清理垃圾郵件。我們越前進，越來越多地重複我們以前的工作，造成工作延遲和設計問題。

經過幾個月的工作，隨著新設計的普通分辨率屏幕的發佈，新版本高清圖出來了。就是這個樣子：

我藉此機會把我們整個資產庫的庫存（桌面的1200位位圖）組織起來，以便將來可以更快地移動。這將會來臨。

該設計將在相同的狀態下或多或少地保持4年，至2016年4月為Chrome操作系統版本的Chrome材質設計的日期。

時間和規劃

現在，Chrome正在支持高分辨率屏幕，而且我們的過程已經被淘汰，並且變得非常有效率，現在是將重點轉移到移動設備的時候了。

當時（2013年初），Chrome尚未成為Android上的默認瀏覽器，沒有平板電腦版本，並且剛剛在iOS上發佈。

移動端成為我們在2013年初和Chrome Android材料設計革新2015年的主要焦點，但並不意味著桌面方面沒有發生任何改變。

有趣的事情發生了，我們開始將桌面/筆記本電腦場景轉變為觸摸屏不再是移動設備的獨家屬性，而且還是諸如筆記本電腦之類的更有效的平臺之一。雖然在過去幾年中有一些嘗試，但這是第一次在筆記本電腦上使用觸摸屏的選擇似乎是現實中的的而不是一種探索。

我第一次使用Chromebook像素，但是另一件讓我感興趣的事情就是Windows 8，他們非常堅定地致力於在新的混合外形上提供一個非常輿論界面，而Surface作為主流旗艦。

第一款Chromebook Pixel（2013）具有高分辨率觸摸屏

第一個微軟表面和Windows 8“Metro模式”。

操作系統的雙重性以及可觸摸和不可觸摸設備的非常易於使用的界面的選擇讓我考慮到Chrome UI在這種環境中的位置和方向。

我們已經不得不使用第一款Chromebook Pixel及其觸摸屏來面對這種類型的問題，但選擇依靠觸摸屏來進行內容滾動和輔助交互，而不是主要的輸入方式。像素作為一個非常實驗性的和“對於愛好者”的設備的定位允許我們花時間去思考它，為什麼和我們的UI應該受到怎樣的影響。

過了一段時間，我們決定創造出將成為今天“混合模式”的前身：Touch-view。

Touch-view是普通Core UI的一個修改，允許核心元素間隔更多，限制用戶觸摸錯誤的數量。

部署在某些Chromebook和Windows 8上。

這是一個有趣的實驗，雖然沒有持續很長時間，Windows上的觸控視圖正在迅速取消，Windows 8本身也被重新考慮到將要成為Windows 10的情況，足以讓人瞥見什麼是即將到來的“混合”或“可轉換”設備的民主化，以及平板電腦和筆記本電腦之間的線條緩慢但穩定的模糊。

適應即將到來和不斷增長的設備類別：混合設備

蘋果公司宣佈推出優勝美地，其UI界面縮小了MacOS和iOS7之間的差距，而Lollipop即將推出，採用新的Google視覺設計語言：材料設計。

設計風格正在演變，而公司正在遵循自己的指導方針，一個共同的主題正在出現：“Sokuomorphic”時代正在結束，取而代之的是一個以更輕的空間為特色的“更輕”的用戶界面，減少使用強烈的陰影和多少我們通常被稱為“平面設計時代”。

Windows有其“現代UI”，蘋果其“iOS UI”和Google的“材質設計”。作為這個更新週期的一部分，Chrome收到了其移動產品，iOS和Android的改版。

我們對我們的強大陰影，亮點和噪音的影響告別了我們的梯度。我們削減了我們的標籤，並選擇了一組符合Google設計指南的圖標。新的Chrome在這裡...還沒有在桌面上

新的Chrome MD平板電腦

桌面UI的未來正在慢慢形成，更清楚的意見正在形成。Windows和Google一方面試圖找出一個能夠同時處理所有屏幕尺寸和格式的設計系統，另一方面，蘋果在每個平臺和每個格式的基礎上都有意見的佈局方向（觸摸iOS，不接觸Mac系統）。

Chrome的桌面重新設計過程即將來臨，即將來臨兩年。

混合佈局類型

我在Chrome工作期間不得不照顧的一件不尋常的事情，大多數設計師處理的都是資源管理。有一個原因我以前提到在桌面上組織我們〜1200位圖資源。除了它是非常有趣的（/），這是跨平臺工作的必要條件。

從前端工程角度看，Chrome分佈在4個框架/代碼庫中：Windows共享的視圖，Chrome操作系統和Linux（我們構建UI的框架），MacOS上的Cocoa，Android的Java，以及Obj-C / Swift for iOS版。

為了保持理智和實現更好的長期資源管理，我們儘量跨平臺分享盡可能多的設計資源。

例如Windows，Chrome OS和Mac共享許多常見的視覺效果。它們的實現可能不同，但是位圖是一樣的。

在移動設備上，Android和iOS的Chrome在許多方面是不同的，我們也嘗試設計和設想跨平臺的資源。Chrome的平板電腦是一個很好的例子。無論您是在iPad還是Android平板電腦上推出Chrome，它們看起來都非常相似。

當然，平臺的資源數量很多，但這個共享元素的固體系統達到極限，當你必須處理乘數和形式因素（或佈局類型）時，它變得棘手。

在考慮混合動力之前，景觀看起來如下：

您可以看到，有一組2種佈局類型：觸摸和非觸摸。在這兩種佈局類型中，有2個核心乘法器（1x和2x），每個平臺的擴展總數為5到6個乘法器：

- 100,150,200,300,400移動

- 100,125,150,180,200,225對於桌面（在Windows的極端情況下）

這是創造的很多乘數和資源，所以我們最終依賴於奇乘數的縮放，創造不及理想的渲染。

在這種情況下，隨著對可觸摸和可轉換設備的攀升需求，我們將不得不為可轉換設備找到解決方案，靈感來自於我們將命名為“混合”的觸控視圖，為現有結構增加了更多複雜性：

這有可能創造一套新的出口和管理資源，推動我們目前的位圖過程遠遠超出其限制。

這是程式化渲染。

新佈局類型，新進程

Chrome“混合模式”最初是針對Chomebooks設計的，靈感來自於我們以前的工作：“觸摸視圖”。這一次，我們需要創建Hybrid作為重新設計工作的一部分，而不是添加到已經存在的UI中。

為此，我們需要兩件事情：

• 設計靈活，可以處理常規模式和混合模式。常規模式最初將部署在我們用戶群中絕大多數的部分。

• 一種創建，導出和實施我們的資產的方式，可以優雅地擴展桌面廣泛的佈局類型和PPI格局。

我們第二個問題的解決方案是通過Peter Kasting，Evan Stade和Terry Anderson（項目技術負責人）的努力。

我最初並不相信，渲染形狀（尤其是Chrome選項卡）和圖標完全以編程方式將達到我們可以使用.png傳遞的細節水平。我錯了。

Chrome正在使用Skia圖形庫。經過幾次嘗試，彼得能夠完美地呈現關鍵的Chrome元素，如標籤和多功能框，而不使用任何類型的位圖。在他身邊，Evan創建了一個轉換器，可以將.svg代碼轉換為Skia代碼。.svg將基本上作為一個藍圖，一組用於代碼呈現的指令。

然後將工程設計過程定義如下：

設計人員將創建任何大小的.svg，作為Skia代碼呈現的模板。這適用於形狀和圖標。然後，工程師將採用此模板，並使用Skia在Chrome中實現。

以下是標籤的原理圖：

標籤由一個.svg填充，另一個用於筆畫。然後，工程師將使用.svg代碼，並將其路徑更改為SKIA代碼，添加適當的著色和不透明度。

這是一個代碼預覽，其中包含一個圖標的示例，使用自動轉換工具Evan放在一起：

這種技術導致Chrome中位圖數量的大幅下降，從1200到... 0。

請記住，所有變體的按鈕現在通過代碼處理，有效地刪除了懸停/按壓狀態的任何重複，以及任何需要直接在資產上應用顏色。所有這些都將在代碼中處理。

與直接使用.svg相比，優點和巨大優點在於，我們能夠以每個PPI為基礎來控制每個元素的渲染。這意味著如果需要，我們可以創建一個與1x略有不同的圖標。這是一個巨大的交易，因為桌面仍然主要是1x。此外，我們還可以控制十進制乘法器的渲染，如1.5，1.25等。使Chrome看起來和我們可以得到所有奇怪的PPI配置一樣好。

有了這個新的令人敬畏的工具和流程，現在是設計和實現新的UI的時候了。

視覺一致性和設計細節

桌面UI的重新設計並不是從頭開始，而是彌合了我們在移動設備上的新設計語言與老化的桌面視覺效果之間的差距。

一直以來，我認為所有Chrome視覺設計師的想法都是：“什麼是Chrome，Chrome？

Chrome有什麼讓Chrome成為現實，但與此同時，我們的角色就是消失，贊成內容，換句話說就是存在，而不是在於。

當您考慮我們的Core UI的關鍵要素是標籤和圖標。Chrome手機已經在平板電腦上使用了新的尖銳邊框邊緣，並且還使用了從“材質”設計指導原則衍生的新圖標系統。在這方面，我們的目標是：

• 使新的標籤形狀在桌面上生活

• 帶來一組新的圖標，從MD使用桌面大小派生

• 調整和簡化我們的調色板和我們的主題系統。

  獎金：將新的“黑暗”隱身到桌面

• 啟動二級UI元素的更新，如按鈕，工具欄，氣泡等...

• 為可轉換設備創建更可觸摸的Chrome版本

• 制定一套與第三方操作系統一致性的規則

• 儘可能實施MD動作

一般佈局和UI佔用空間

設計Chrome的Core佈局時，需要記住的一個關鍵問題是：UI佔用空間。這是我們用來顯示我們的UI的像素的確切數量，換句話說，我們從內容中刪除的像素數量。

當沒有顯示書籤欄時，MD前設計的高度在Chrome操作系統和MacOS（包括窗口框架）上為73px，Windows上為78px（包括框架）。

窗口上的本機框架比其ChromeOS和macOS對等體高。它使得框架更容易點擊並抓住更大的腳印的代價。請參閱下面的Windows下的macOS與Windows的比較，MD前：

以前版本的Chrome工具欄佈局是在高PPI屏幕不存在的情況下創建的，因此它被優化為以100％的比例渲染，使用奇數，因此您可以將元素置於整個像素上。

需要做的第一件事是使用均勻的網格，以便在各種乘法器中載入佈局將更容易。與奇數的設計網格相比，這樣一來，圖標將更頻繁地落在像素網格上。

材料設計以8點為基準。我們使用的一半：4pt。

以4pt的增量設置網格和定位元素極大地有助於平衡，保持佈局，圖像和排版一致。為了實現平衡，我們將UI分成兩部分：tabs + window frame / Toolbar。

這是常規UI的外觀：

正如您可以在Chrome操作系統上的Chrome MD的這個200％（或@ 2x）預覽中看到的，工具欄分為36pt的兩部分。每個核心元素落在4pt網格上。

標籤是28pt，等於多功能框高度。我們在標籤和框架頂部之間留出8pt的頂部填充。

如果仔細觀察，您可能已經注意到，在這個預覽中，多功能框筆畫在網格上沒有對齊。原因是我們使用1px作為線重，而不管PPI，創建一個更輕的UI，筆畫更薄。

這種技術的缺點是，你總是需要記住，應該由較厚的2像素筆畫填充的空間現在是一個空的空間。

您可能還注意到，我們通過在工具欄底部添加1pt來渲染筆畫，而不是為了平衡原因而插入筆畫，有效地將1pt添加到36pt + 36pt的總高度。

左邊是我們的混合UI。

對於混合，我們保持框架填充（8pt），同時增加標籤和工具欄佔地面積4pt。結果是40 + 40佈局更加間隔。

您可能會想知道為什麼我們不會簡單地匹配Android或iOS觸控目標的建議（分別為48和44），使事情可以觸摸。我們實際上試過這個，但是反對混合動力公司想要實現的。

我們的目標是在全觸摸和非觸摸之間的妥協妥協。平衡我們的目標，儘量減少用戶觸摸錯誤，而不會影響筆記本電腦佈局預期的生產力。

在桌面設備上，每個像素的數量，在筆記本電腦上傳送平板電腦UI是不成問題的。

以下是Chrome前MD，Chrome MD正常佈局，混合版和終於平板電腦之間的比較，全部呈現在200％（Android的xhdpi）。

實際上，包括窗口框架在內的MD正常佈局佔用面積比其前面的Chrome瀏覽器/ MacOS之前的高出2像素（71比73）。然而，因為我們在窗口框架中將UI提高了3px，而不是窗口框架，我們可以有效地提高UI的5像素（60比65）。

一個像素對於Chrome而言是非常有價值的。

在重新設計的情況下，所有尺寸的決定都受到以下因素的影響：UI遺產，採用新網格和整體UI平衡。

這個邏輯也適用於圖標...

影像學

對於要使用的圖標集，很快就做出了選擇。

我們需要修改我們眾多的核心ui圖標以及分佈在產品中的所有功能圖標，並且Material design圖標庫提供了這一點。這樣，他們也將完全符合我們的移動設備上的圖標，包括iOS和Android。

但是，仍然存在一個問題：網格大小。基於24x24pt的網格並不適合我們計劃創建的相當濃縮的UI（甚至包括混合）。畢竟，他們被設想為移動。

我們需要導出一個適合我們新的普通和混合UI的網格。

要做到這一點，並且匹配我們的4pt網格，我們使用了以下預覽中所述的基於16x16pt的圖標。

我們將容器從24pt減少到16pt，並在初始內部填充時增加了一些靈活性：根據Chrome圖標網格的圖標，將2pt更改為1pt至2pt。這種靈活填充的原因是，考慮到我們將要使用的各種圖標，有些可能需要額外的空間來使其路徑以小尺寸在視覺上工作。

這種直接減少33％的優勢是我們將能夠直接使用材質圖標。這將大大提高我們的圖標傳遞時間，並增加擴展能力...以某些圖標呈現出網格為代價，因此稍微模糊。

雖然這在二級圖標上是很好的，但我們所有最突出的圖標必須被正確渲染，並且像素一樣可以完美。為此，我們將重新（創建）它們，以避免任何離網像素，特別是在較低的PPI上。請參閱下面的“返回”圖標“

如您所見，由於我們可以控制任何給定的PP上的渲染，所以我們可以刪除縮放引起的圖標模糊。

我們也將圖標線的重量略微變薄（100％為2像素，距離最初的2像素為100像素的像素為100像素，在200％中為4像素），因為我認為重量稍微過高。這樣，它們在我們的UI中更加優雅和平衡。

這種為我們的資產提供靈活性和控制權的技術真正降低了視覺維護成本。依靠一個已經存在的巨大資產，對我們的功能團隊來說也是一個巨大的節省時間，能夠更快地迭代其功能圖標，而無需等待設計師創建自定義圖標。最後，它帶來了移動和桌面的一致性。

由於這些是以編程方式呈現的，所以我們也刪除了所有的顏色狀態重複，所有我們必須提供的是一個黑色的.svg，並在代碼中繪製所需的顏色。

程序化渲染的一個很好的附加功能是，我們可以在需要時剪切和標記圖標（例如阻止擴展和權限），而不是將阻止和未阻止的變體導出為單獨的位圖。

參見下面的過程：

以下是具有彩色和標記版本的新統一圖像系統的預覽。這讓您瞭解整個系統的感覺。

現在圖標創建過程已經消除了。讓我們看看它們在用戶界面中的合適性。

觸摸目標和佈局

由於這些圖標基於16x16pt佈局，完全符合早先確定的4pt網格，將它們放在UI中並將其間隔開來只是為了確定正常和混合模式的觸摸/點擊目標的適當大小。

在正常模式下，我們去了28x28pt的觸控目標，持有16x16pt的圖標。當然，所有Chrome正常佈局中的以下間距是一致的，無論平臺如何。

以下是Chrome瀏覽器中的Chrome：

對於混合，必須讓我們希望UI增長多少讓步。我們希望為用戶提供更多空間，同時保持緊湊的佈局，這說明為什麼有些元素必須中斷網格，如下所示。

由於我們仍在嘗試這種佈局背後的理論，所以我們比較保守。在製作這個佈局時，我一直重複的是，用戶不應該只用鼠標感到太不舒服，它不應該浪費空間。

我們首先著重提高我們已經確定了最痛苦的元素的高度：標籤和多功能框。

我們將它們從28增加到32pt。此外，我們使用一種技術，將標籤的觸摸區域增加到框架本身，增加了8pt的額外觸摸目標大小。

雖然圖標保持了他們的28x28pt觸摸目標，我們將他們的周邊邊距增加到8pt，給UI增加空間，減少用戶觸摸錯誤。同樣的原則適用於多功能框（擴展名和權限）以及擴展名圖標中的圖標。

您可以注意到，當間距改變時，圖標保持完全相同的大小。我們使用16x16pt的圖像。這最大限度地減少了需要維護的設計資產的數量，從而使長期的可擴展性以及特徵迭代更容易。

看看完整的混合核心用戶界面如下圖所示。

從頭開始設想一個佈局是一個相當容易的部分，幾年後再回來，不會迷失，淹沒是最初的規劃和組織取得成功的原因。

將所有圖標調整為相同尺寸，極大地簡化了我們的維護和設計過程，使設計更加統一和優雅。

以前，非MD圖標是在幾年的時間內創建的，這使得很難保持一致的大小。這一次，我們甚至將我們的擴展圖標要求更新為16x16pt，而不是以前的19x19pt。我們還重新定義了徽章的工作原理，遵循與封鎖權限相同的裁剪技術。

最後，對於喜歡總是顯示書籤欄的用戶，我們也進行了調整，因此不會對這兩個版面造成不平衡或過大的影響。

請參閱下面的例子，Mac為正常佈局，Windows和Chrome OS for Hybrid。

Mac追加28pt到其正常的足跡，以匹配工具欄按鈕28x28pt點擊目標。

正常或混合的Windows和Chrome操作系統的操作略有不同。

我們附加了一個24pt的高書籤欄，以平衡Windows框架的額外高度。由於ChromeOS使用與Windows相同的實現，因此它繼承了相同的測量。

由於我們還在ChromeOS上嘗試使用此佈局。時間會告訴如果瞄準觸摸和非觸摸之間的正確平衡將有所回報。

這就是為什麼直到我們在Windows平臺上更好地瞭解我們的用戶習慣和需求，我們將默認為所有Windows設備發佈正常的佈局。默認情況下，ChromeOS觸摸式設備將獲得混合。

如果您想自己嘗試，只需前往chrome標誌部分（chrome：// flags），並將“瀏覽器頂部chrome”中的UI Layout設置為“Touch”。

多功能框，結果下拉和安全指標

我們的多功能框和下拉式佈局設計有兩個租戶：

• 強調安全狀態。

• 快速訪問您需要訪問的信息或URL。

多功能框可能是Chrome的最重要功能。這是我們的用戶通向Google搜索結果，網絡以及自己的書籤和歷史的門戶。它也是我們唯一可以強烈表明域的安全狀態的地方，有效地通過主動阻止，被動指示和教育來有效地保護我們的用戶免受無數網絡威脅。

為此，視覺設計師Max Walker一直與Chrome UX的領導者Alex Ainslie和Chrome安全性合作，為我們的多功能框添加了一個新的，改進的安全指標系統，如下所示：

• 我們通過信息按鈕替換了默認的“頁面”圖標，邀請用戶點擊它來編輯站點權限，並瞭解他們所在域的安全狀態。非加密的HTTP頁面屬於此類別。

• 安全或“綠色鎖定”狀態現在只適用於安全的HTTPS站點。此舉獎勵使用加密的安全域。

• 您可能會記得，幾年前Chrome在黃色的安全狀態。這一次，所有破壞https或出現威脅的網站都標記為紅色。當Google知道該域名是一個網絡釣魚網站時，我們也完全阻止其訪問。

Max將認證的排版與URL文本對齊，並使用我們的新配色方案。他也修改了我們的鎖，給他們一個光明的樣子。

與此直接關係的是多功能框下拉列表，或者輸入查詢時獲得的結果的容器。在這次改革的背景下，下拉沒有大幅度改變。我們改變了圖像與配色方案，但我們工作的核心在於兩個變化：混合的新佈局，更重要的是內聯答案。

在線答案，也稱為“建議中的答案”本質上是Google或Chrome，在您實際點擊“輸入”以驗證查詢之前，您將顯示您要查找的信息。例如，當您在多功能框中輸入“los ang”時，Chrome會提示您：

現在有了建議的答案，如果我們確定要找到你正在尋找的答案，我們將其顯示為結果的一部分。如下圖所示，它不僅適用於天氣，還適用於快速查詢，股票搜索以及計算。

這是正常佈局中這個查詢的樣子：

這裡與混合佈局中的另一個查詢（庫存查詢）的區別在於，具有提高的觸摸能力的行高。

無論平臺如何，桌面上的多功能框下拉列表總是提供非常緊的行。它是信息密度，清晰度和易用性之間的平衡，使用戶儘可能快地從查詢到結果。

就像其他Core UI功能一樣，混合動力還是通過增加每行的高度同時保持高信息密度來減少用戶觸摸錯誤，以避免用戶眼睛的太多旅行，因此更多的訪問內容的時間。

顏色和可及性

超越佈局密度，另一個具有很大影響的元素是顏色。

用於桌面的Chrome MD經歷了Chrome for Android的相同突變。我們需要一個更統一的顏色指南以及一致和更重要的可訪問的配色方案。

當然，當您打開Chrome時，您注意到的最突出的變化就是Core UI的顏色變化本身。

平衡核心UI的顏色是一個需要一些微妙的任務，超過我以為會開始。

Core UI由三個關鍵元素組成：

• 由OS本身創建的框架在每個平臺的基礎上發生變化

• 活動選項卡和工具欄。其中包括附加到ommibox和控件的選定選項卡

• 不活動的選項卡。

為了運作良好，這三件事情需要適當的對比。不容易解決的問題是如何將設計帶到更平坦，更現代的外觀上，對對比度進行過多的折中。

我們需要考慮的另一件事是主題。相對於移動，桌面支持主題。我們需要考慮到這一點，如果可能，改進它。

最後，我個人最喜歡的，我們想讓隱身模式真的有所不同，而不是僅僅提出框架，我們想完全改變它的全球主題，使它變得非常黑暗，就像它的移動對手一樣。

以下是兩種模式的Chrome三級結構：

我們的Core UI顏色系統如下：

Mac和Chrome操作系統是非常簡單的，因為我們直接控制OS幀的顏色，只需在mac上添加背景模糊。

Windows有點棘手，因為用戶或系統可以設置幾乎任何顏色的框架顏色。因此，我們繼續了我們一直在做的事情，玩弄不透明度，將我們的顏色與系統顯示的顏色混合在一起。

請參見下面的比較，而Mac和Chrome操作系統不活動的標籤使用不透明的著色，我們將非活動選項卡的填充和新的選項卡按鈕減少到Windows上的78％。

為了平衡新的色彩主題，我們嚴重依賴中風的使用。由於筆畫的重量不受PPI的影響，因此它們的不透明度已被調整了很多，以至於它們在1x中看起來不太暗，或者在2x中太亮。這適用於正常和無痕模式。

輔助功能一直是Chrome的DNA的一部分，無論是在內容方面與A11Y達標或在UI端。

在過去的兩年中，這一努力越來越強。誠然，在視覺方面，我們的配色方案需要一個新的通行證，使它更簡單和符合WCAG 2.0規則，以獲得良好的對比度。

我們確保我們所有的排版和圖像都達到至少AA級或4.5：1的對比度：

直接相關的是，我們的編程渲染使我們能夠根據對比度動態地繪製圖標，這不僅意味著為Chrome創建的主題會更好，而且可訪問性也將得到改善。

如下圖所示，安裝主題“ Dark Theme V3 ”使圖標切換到白色，下拉菜單自動切換到暗模式。

這是我們從編程渲染和隱身模式實現中獲得的直接好處。

運動

運動是人們在描述“材料設計”時所想到的重要組成部分，特別是在移動設備上。這種形狀因素的良好運動設計真的可以讓應用程序發光，並使用戶更有效地使用它。如果您沒有過度的操作，您作為設計師可以通過微妙的提示和輿論界定的界面移動來提供愉悅以及指導和空間意識。

但是當談到臺式機及其鼠標鍵盤優先，大屏幕環境時，這是一個略有不同的故事。

桌面是一個平臺，您可能會通過使用生產力工具獲得更多的時間，而不是移動的時間，而不是快速，即時或更多的精益移動體驗。

就像我們希望觸摸和非觸摸平臺在其範式和屬性中更加一致的，似乎有必要和參與移動設備的事情可能會成為一個煩惱，如果不是您在桌面上嘗試完成的任務的障礙。

Chrome桌面一直關注效率和執行速度。沒有任何動作妨礙您完成任務，這就是為什麼大多數UI表面沒有任何延遲或最少的運動出現。

以我們的多功能框下拉列表為例，起初有點運動可能看起來很好，但是當您每天訪問超過一百次時，您很快就會憎恨我們離開您的時間更多的時間顯示一個假想的滑動動畫與淡入淡出。

這就是為什麼我們立即出現，就像我們的菜單一樣。

那麼在如此敵對的運動平臺上，你如何得到一些“物質設計的喜悅”呢？那麼你嘗試將它添加到不會受到影響的用戶界面中，這就是為什麼我們在我們的按鈕上玩漣漪效果的原因。

桌面設備上的點擊動作非常多，當您將混合設備的觸控功能與之融合時，還有更多的功能。有些州甚至不存在於移動設備上。他們如下：

• 懸停狀態

• 活動狀態

• 單擊/點擊（onClick-release）

• 單擊/點擊激活（按鈕在發佈時進入“活動”狀態）

• 長時間點擊/點擊激活（對於元素只顯示長時間點擊/點擊的選項）

我們基於我們所有的關於材料設計波紋的動作。從點擊或點擊位置發展出一種簡單的顏色。

由於懸停狀態在MD規範中不存在，我們首先要做的是將其與波紋相結合。我們使波紋從平坦的懸停狀態爆發，向外推開邊界。在沒有活動狀態的簡單懸浮+單擊的情況下，它看起來像這樣：

這是我們的工具欄中的樣子：

對於“ 單擊活動 ”和“ 長按/按下 ”，我們需要將波紋與按鈕的常用最終狀態（活動狀態）相結合，該狀態是類似於我們的懸停狀態的灰色圓角矩形。

為了做到這一點，我們與材料設計團隊合作，探索一些變化的影響。這是一個移動探索：

應用於桌面，為了一鍵激活，我們保持波紋擴張的擴展，但一旦紋波到達最遠點，我們將其變成一個正方形，而不是讓它爆裂。看起來像這樣：

在長按/自來水主動很相似，只是這次我們減緩波動的擴張。

最後我們的書籤欄實施了洪水波紋。這種波紋是一個擴展的橢圓填滿了一個包含的區域。在我們的例子中，我們將波紋與懸停狀態相結合，以創建我們書籤的活動狀態，如下所示：

快速筆記，我們決定不對macOS帶來漣漪效應，因為它們在這個平臺上感覺不到位。我們在這裡選擇了OS一致性

在工程方面，Ben Ruthig在桌面平臺上從頭開始重新構建漣漪系統。

在設計方面，初步運動預覽和規格使用炒作3迅速整合在一起。

您上面看到的視頻是使用此工具完成的。這種類型的原型的非常高級的性質使我們能夠快速跳轉真實代碼，而不是花費在原型上循環的週期。我們使用原型作為一般方向，而不是一個明確的規格。由於代碼從Web到C大不相同，所以直接的工程投入和初步試用是非常寶貴的。

對於這種類型的運動工程，工程師是真正的設計師。

下一步是什麼

在完成了實現準備的Core UI的規範和模擬之後，我在Chrome的次要版本中加了一點。

我們在該類別中包括不直接可見的每個Chrome元素，例如菜單，對話框，泡泡，按鈕，信息欄，查找頁面和下載框架。有些可能已經推出，有些可能即將推出：

我不會在這裡展示，不會破壞未來的更新，但如果您是一個狂熱的Chrome用戶，您可能已經啟用了幾個標誌，表明Chrome團隊正在努力為二級用戶界面帶來一個優質的新體驗Chrome內頁，如下所示：

由於我在Chrome瀏覽器中的參與以這個Core UI項目結束，我很高興看到Chrome團隊在桌面和移動設備上使用Chrome的未來。

經驗教訓和初始發佈反饋

作為結束語，我想分享一些在這個項目中學到的經驗教訓，以及一些內部和外部的發佈反應，希望這些在您的項目中對您有所幫助。

工程師是偉大的設計師

我們在設計界談論了設計師如何以及為什麼要編寫代碼。對這件事情有很多不同的看法，它來自於對設計師的作用沒有簡單的定義。

不過，我們談論的是相反的：工程師的設計？

最終，他們是製造商，在一定程度上，你的產品的“設計師”，使它成為真正的東西。有時候，作為一個設計師，我覺得我們所做的一切都是試圖“偽造”或“模仿”最終的結果。切實追求儘可能快的嘗試在真實的環境中，在真實的代碼，是至關重要的。

在這個項目中，我的很多假設被工程師打破了，這些工程師不僅為表格帶來了更好的解決方案，而且更好地執行並重復了我可以做的設計。我更具體地考慮了程序化渲染（由Peter Kasting倡導的努力）和運動設計（Ben Ruthig的領導）。他們的代碼知識對於獲得設計權力至關重要，而不僅僅是改變設計，改變了項目的性質，從UI的視覺改造到核心重寫。

每個人都是設計師。想法不限於角色。如果您有足夠的工作與積極性和聘請工程師合作，您可能會意識到有時候他們可能是一個比你更好的設計師。

提前成為一名工程師

在這種情況下，他們是馬上參與，是設計和構想過程的一個組成部分。正如我前面提到的，他們通過更好的工程解決方案提供更好的設計的動力使產品成為今天。保持不斷的溝通是使正確設計成為現實的關鍵。

您不一定需要了解如何編寫代碼，更重要的是要了解所做的人。

知道什麼時候準確，學習什麼時候鬆動

提供非常精確的規範工作是必要的，但是在某些情況下，讓您的初步工作可以開放反饋，新的想法可以將您的設計帶到另一個層面。只要您的最終設計符合其原始目標或意圖，讓其他人進入您的流程並改進您的設計。

小心變化厭惡

當您重新設計產品時，特別是如果它已經存在了一段時間，您將會遇到很多人遇到的問題：改變厭惡。現在要小心，有時你的設計可能實際上是壞的，但是在很多情況下，改變某些東西的簡單行為足以引發用戶的中度到極端的反應。

這是非常難以接受和非常難打。對於這種重新設計，添加一些像素引發冗長的討論或辯論。

我不會撒謊，我沒有奇蹟解決方案，但有一些你可以做的事情，以減少變化厭惡：

• 與您的觀眾溝通 總是有一個準備好解釋你的願景的人，誰可能想聽到它，特別是如果他們是你的利益相關者。

• 留住課程 堅決相信你所做的選擇是非常有益的。不要固執，但要保持自信。

• 準備好 當有人想要討論你的一些設計決策時，要準備用事實，研究（可能的話）或過去的經驗來補充。如果您發現自己處於無法回覆的情況，您可能會發現他們的反饋值得考慮。

• 瞭解一些事情需要時間。可能是最令人沮喪的，我遇到的最麻煩的是一些事情只需要時間來改變。產品越大，可能需要的時間越長。在小勝利中找到幸福，並瞭解您的產品從未完成。

管理你的期望

當更新開始推出時，我收到的最難的反饋是：“就這樣嗎？在我看來，這是一個很好的反饋。這個項目花了時間，而不是視覺革命。我喜歡認為，如果你仔細研究細節，你可能會開始看到我們對它的關注和關心。

這個重新設計項目帶來的最大的改進是引擎蓋子。這是最重要的工程成就。

我希望隨著時間的推移，我們的團隊和用戶都會感受到這種好處，因為Chrome在我們所支持的平臺上從未如此靈活和一致。

通過自己的眼睛找到工作滿意度和結果比通過別人尋求驗證更重要。如果你是真正的和誠實滿意的是什麼，你做的事。你很好。