2018年5月9日凌晨1點，谷歌I/O 開發者大會如期在美國加州山景城的海濱露天劇場拉開帷幕，谷歌不僅對 AI 技術進行了更深層次的提升，同時也對 Android 系統進行了更新，谷歌副總裁 Dave Burke 對 Android 的更新進行了開場演講，「在 Android 過去的10中，已經成為了一個開放的系統?！?/p>

隨著 android P 的誕生，谷歌今日宣布了 Material Design 應用程序視覺設計語言的幾項更新。盡管此前傳聞稱有大改，但從剛剛召開的 I/O 2018 開發者大會來看，今年的發力點還是在主題、分享和開發簡易性上。下面就對 Material Design 的更新內容進行解讀。

一、強大的「主題編輯器」

主題編輯器可幫助你制作自己的品牌 UI 組件庫，并提供全局樣式更改方案，可以應用于顏色，形狀和排版。目前可用于 Sketch，通過下載 sketch 插件來進行應用。

1. 自定義主題顏色

通過插件可以設定主色、輔色及背景色和文字顏色，并自動將顏色應用于所有組件。

• 檢查色彩對比以符合無障礙要求；
• 從材質調色板中選擇顏色；
• 使用單一顏色自動生成10個輔助色；
• 使用 symbols 設定全局顏色方便顏色的更改。

2. 設置形狀

• 選擇你的形狀和邊角風格；
• 從彎曲或切割的邊角樣式中進行選擇，并自動將更改應用于全部組件；
• 在材質庫的組件中使用對稱或非對稱形狀進行切換，同時保留在 Material Design 規范中。

3. 字體定義

• 最多可為您的主題添加3種字體；
• 基于 Material 排版，自動調整和優化字體的可讀性；
• 可快速訪問 Google 字體，包括：Roboto，Raleway，Alegreya，Merriweather，Rubik，Oswald等。

4. 探索圖標

• 通過風格化的系統圖標表達您的品牌，提供五個主題和一系列格式，尺寸和密度；
• 從填充、圓潤、銳利、描邊和雙色圖標主題中進行選擇。

5. 開始使用主題編輯器

通過下載并安裝 Material Plugin 開始使用（需要 macOS High Sierra 10.13 或更高版本）

• 該插件提供對 Material 組件庫，Material Theme Editor（可用于Sketch）的訪問，并且可以直接將畫板上傳到 Gallery；
• 在圖庫中，使用材質主題編輯器創建的設計可以自動生成規范并訪問開發者文檔。

Material Plugin 下載地址：https://material.io/tools/theme-editor/

二、新增Material Design設計目標

先讓我們來回顧一下舊版 Material Design 2個設計目標。

1. 舊版 Material Design 設計目標

• 我們希冀創造一種新的視覺設計語言，能夠遵循優秀設計的經典定則，同時還伴有創新理念和新的科技。
• 我們希望創造一種獨一無二的底層系統，在這個系統的基礎之上，構建跨平臺和超越設備尺寸的統一體驗。遵循基本的移動設計定則，同時支持觸摸、語音、鼠標、鍵盤等輸入方式。

2. 新版 Material Design 3大設計目標

新版增加了「定制」目標，與最新推出的主題編輯器個性化的定制功能相吻合。

• 創造：我們希冀創造一種新的視覺設計語言，能夠遵循優秀設計的經典定則，同時還伴有創新理念和新的科技。
• 統一：我們希望創造一種獨一無二的底層系統，在這個系統的基礎之上，構建跨平臺和超越設備尺寸的統一體驗。
• 定制：通過 Material 的視覺語言的延伸，為創新和品牌表達提供統一靈活的設計規范。

三、新增Material Design設計原則

本次更新將原有的材質隱喻、大膽夸張、動效表意3大設計原則擴充為5大設計原則：材質隱喻、大膽夸張、動效表意、靈活、跨平臺，讓我們來做一個對比。

1. 原有 Material Design 3大設計原則

隱喻

通過構建系統化的動效和空間合理化利用，并將兩個理念合二為一，構成了實體隱喻。與眾不同的觸感是實體的基礎，這一靈感來自我們對紙墨的研究，但是我們相信，隨著科技的進步，應用前景將不可估量。

實體的表面和邊緣提供基于真實效果的視覺體驗，熟悉的觸感讓用戶可以快速地理解和認知。實體的多樣性可以讓我們呈現出更多反映真實世界的設計效果，但同時又絕不會脫離客觀的物理規律。

光效、表面質感、運動感這三點是解釋物體運動規律、交互方式、空間關系的關鍵。真實的光效可以解釋物體之間的交合關系、空間關系，以及單個物體的運動。

大膽夸張

新的視覺語言，在基本元素的處理上，借鑒了傳統的印刷設計——排版、網格、空間、比例、配色、圖像使用這些基礎的平面設計規范。在這些設計基礎上下功夫，不但可以愉悅用戶，而且能夠構建出視覺層級、視覺意義以及視覺聚焦。精心選擇色彩、圖像、選擇合乎比例的字體、留白，力求構建出鮮明、形象的用戶界面，讓用戶沉浸其中。

Material Design 設計語言強調根據用戶行為凸顯核心功能，進而為用戶提供操作指引。

動效表意

動畫效果（簡稱動效）可以有效地暗示、指引用戶。動效的設計要根據用戶行為而定，能夠改變整體設計的觸感。

動效應當在獨立的場景呈現。通過動效，讓物體的變化以更連續、更平滑的方式呈現給用戶，讓用戶能夠充分知曉所發生的變化。

動效應該是有意義的、合理的，動效的目的是為了吸引用戶的注意力，以及維持整個系統的連續性體驗。動效反饋需細膩、清爽。轉場動效需高效、明晰。

2. 新版 Material Design 5大設計原則

材質隱喻

Material Design 受物理世界及其物體紋理材質的啟發，包括它們如何反射光線和投射陰影。材料表面進行重新構想，加入紙張和墨水的特性。

大膽夸張

Material Design 以印刷設計方法，排版、網格、空間、比例、顏色和圖像為指導，創造出讓用戶沉浸在精心設計的視覺層級、視覺意義以及視覺聚焦中。

動效表意

通過微妙的反饋和平滑的過渡來使動效保持一定的連續性。隨著元素出現在屏幕上，他們在環境中轉換和重組，相互作用產生新的變化。

靈活

Material Design 系統旨在實現品牌傳達。它集成了一個自定義代碼庫，可以使組件、插件和設計元素無縫的銜接和靈活的運行。

跨平臺

Material Design 使用跨平臺管理，其中包括 Android、iOS、Flutter 和 Web，方便設計師跨平臺維護 UI 組件。

3. 擴展信息

我們全面的指導可幫助你更快地設計漂亮的產品。通過全新的設計工具，定制 Material 組件和跨平臺管理，在材料研究中找到靈感，并用 Material Theming 表達你產品的與眾不同。

通過瀏覽以下三個部分來幫助你更好的理解：

• 材料系統：我們擴展和優化的設計系統與 Material 工具和組件統一，以改進設計和開發之間的工作流程。
• 材料基礎：設計和策劃如何將 Material Design 設計體系運用到你的應用程序，同時學習支持 Material Design 的原理和理論。
• 材料指南：從設計到代碼實現，在整個產品中系統化地定制和部署個性化主題。

設計目標及原則原文地址：https://material.io/design/introduction/#principles

四、放寬對材質形狀的限制

△ 形狀可以引導注意力，提高組件的識別性，表明狀態和表達品牌

材質形狀默認情況下為矩形，帶有4dp的圓角。但它們具有可調整的圓角、曲線和邊角的數量。

形狀變化（例如圓角或削角）非常微妙，而且很重要。

1. 形狀變化的使用方法

突出重點

通過獨特形狀的運用，可以將用戶注意力集中在頁面中重點的 UI 元素上。

△ 圓形浮動按鈕和弧形底部工具欄的組合，從屏幕上其他位置的矩形形狀中凸顯出來

區分 ui 元素

靈活的形狀為用戶提供了識別組件和識別不同材質的方法，用以區分不同的功能。

△ 使用相同形狀的人物標簽，方便識別

區分不同狀態

通過形狀或材質的不同，可以對 UI 元素狀態進行區分。當使用形狀來表示狀態改變時，應該把該形狀貫穿到每一處的狀態改變上。

△ 這張卡片在選擇后會改變形狀，以表明它已被選中

個性化的品牌傳達

要統一整個品牌的視覺語言，請使用顏色和形狀統一的 UI 元素或 UI 組件。通過對 app 中元素進行有規律的調整，有助于提升品牌的整體視覺形象。

△ 整個應用程序使用形狀一致的ui元素，有助于品牌形象的提升

2. 設計時要更多的考慮到形狀的可識別性以及可用性，下面的設計方式是不可取的

△ 不要使用無法識別形狀的 UI 組件

△ 不要使用干擾用戶操作的形狀，此按鈕的觸摸范圍太小

形狀的規范原文地址：https://material.io/design/shape/about-shape.html

五、更新文本字段樣式

新版 Material Design 規范對文本字段，對樣式進行了重新設計，并闡述了其設計原理。

1. 新版 Material Design 規范設計原理

• 易于發現的：文本字段應該突出并指示用戶可以輸入信息。
• 狀態明確：文本字段狀態應該明確區分。
• 高效：方便讓用戶快速填寫，并高效解決任何錯誤。

2. 原有文本字段樣式

3. 新版文本字段樣式

新版文本字段有兩種類型：

• 填充文本字段；
• 線性文本字段。

這兩種類型的文本字段都使用容器來為交互提供明確的提示，使得文本框在頁面中容易被發現。

兩種類型的文本字段具有相同的功能，因此使用的文本字段的類型可能僅取決于其樣式。

4. 文本字段類型的選擇

• 選擇最適合您應用的視覺風格；
• 選擇最貼近 ui 設計目標的樣式；
• 選擇與其他組件（如按鈕）和周圍內容最為融洽的樣式。

文字規范原文地址：https://material.io/design/components/text-fields.html#usage

六、更新擴展懸浮按鈕

1. 新舊懸浮按鈕形狀區分

懸浮按鈕（FAB）通常是屏幕的主要操作按鈕，原有懸浮按鈕為圓形，如圖：

新版擴展的 FAB 更寬，并且包含文本標簽。

2. 懸浮按鈕的可擴展性

擴展的 FAB 按鈕的寬度可以是固定的或靈活的。

• 固定寬度的按鈕容器由圖標、文本標簽和填充的累積寬度定義。
• 靈活寬度的按鈕容器由其與屏幕上的其他內容（例如屏幕寬度或刪格系統）的關系定義。

△ 此 FAB 按鈕的寬度由圖標、文本標簽和容器填充的累積寬度定義

△ 此 FAB 按鈕容器的寬度由刪格系統定義

擴展懸浮按鈕規范原文地址：https://material.io/design/components/buttons-floating-action-button.html#extended-fab

七、更新布局密度

Material Design 默認使用低密度空間，但在提高用戶體驗時提供高密度空間。

1. 密度原則

• 可瀏覽：高密度控制的用戶界面改善了對大量內容的瀏覽和交互；
• 優先：密集的 UI 元素通過減少操作之間的空間來幫助用戶集中精力；
• 可用性：通過密度控制可以在單個屏幕上顯示更多內容和操作。

2. 何時使用高密度

• 是否增加用戶界面的密度取決于用戶如何與組件進行交互。
• 高密度組件使用戶更好的處理大量信息并進行大量操作。在設計列表、表單和長表格時可使用高密度的組件。

3. 何時不使用高密度

集中任務組件：例如與下拉菜單或選擇器的交互方式。增加這些組件的密度會降低它們的可用性。如日期選擇器，因為這會降低可用性。

△ 不要將高密度應用于日期選擇器，因為這會降低可用性

提醒用戶更改的組件：特別是彈窗，用高密度會降低用戶的注意力，減弱警告作用。

△ 不要將高密度應用于對話，這會降低其可讀性和警告作用。

布局密度規范原文地址：https://material.io/design/layout/density.html#usage

「組件化設計怎么做」

• 《為什么我們都應該學會組件化設計思維？》
• 《進階必讀！可能是最全面的組件化開發與設計指南》
• 《實用全面！教你用Sketch Libraries構建組件庫/設計體系》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com