隨著android P的誕生，谷歌宣布了 Material Design 應用程式視覺設計語言的幾項更新。本文主要就Material Design更新內容進行解讀。
2018年5月9日凌晨1點，谷歌I/O開發者大會如期在美國加州山景城的海濱露天劇場拉開帷幕，谷歌不僅對AI技術進行了更深層次的提升，同時也對Android系統進行了更新。
谷歌副總裁Dave Burke對Android的更新，進行了開場演講：
「在Android過去的10中，已經成為了一個開放的系統。」
隨著android P的誕生，谷歌今日宣布了 Material Design 應用程式視覺設計語言的幾項更新。儘管此前傳聞稱有大改，但從剛剛召開的 I/O 2018 開發者大會來看，今年的發力點還是在主題、分享和開發簡易性上。
下面就Material Design更新內容進行解讀。
一、強大的「主題編輯器」
材質主題編輯器可幫助你製作自己的品牌ui組件庫，並將全局樣式更改應用於顏色，形狀和印刷。目前可用於Sketch，你可以通過下載sketch插件來訪問材質主題編輯器。
1. 選擇顏色
通過選擇主要、次要、背景以及文本和圖標色彩，自動將顏色應用於所有組件。檢查色彩對比以符合無障礙要求，從材質調色板中選擇顏色，使用單一顏色自動生成10個顏色值的色調，使用全局顏色更改自動填充symbols。
2. 設置形狀
選擇你的形狀和邊角風格，從彎曲或切割的角落樣式中進行選擇，並自動將更改應用於您的材質組件。
在材質庫中的組件中，使用對稱和非對稱形狀進行播放，同時保留在材質設計指南中。
3. 添加類型
最多可為您的主題添加3個字體，基於材料排版指導，自動調整和優化字體的可讀性，訪問流行的Google字體。包括：Roboto、Raleway、Alegreya、Merriweather、Rubik、Oswald等。
4. 探索圖標
通過風格化的系統圖標表達您的品牌，提供五種主題和一系列格式、尺寸和密度。從填充、圓潤、銳利、輪廓和雙色圖標主題中進行選擇。
5. 開始使用主題編輯器
通過下載並安裝Material Plugin開始使用（需要macOS High Sierra 10.13或更高版本）。
該插件提供對Material組件庫，Material Theme Editor（可用於Sketch）的訪問，並且可以直接將畫板上傳到Gallery
在圖庫中，使用材質主題編輯器創建的設計，可以自動生成規範並訪問開發者文檔。
二、新增Material Design設計目標
先讓我們來回顧一下舊版Material Design2個設計目標：
我們希冀創造一種新的視覺設計語言，能夠遵循優秀設計的經典定則，同時還伴有創新理念和新的科技。
我們希望創造一種獨一無二的底層系統，在這個系統的基礎之上，構建跨平臺和超越設備尺寸的統一體驗。遵循基本的移動設計定則，同時支持觸摸、語音、滑鼠、鍵盤等輸入方式。
新版Material Design 3 大設計目標
新版增加了定製目標，與最新推出的主題編輯器個性化的定製功能相吻合。
創造：我們希冀創造一種新的視覺設計語言，能夠遵循優秀設計的經典定則，同時還伴有創新理念和新的科技。
統一：我們希望創造一種獨一無二的底層系統，在這個系統的基礎之上，構建跨平臺和超越設備尺寸的統一體驗。
定製：展開Material的視覺語言，為創新和品牌表達提供靈活的基礎。
三、新增Material Design設計原則
本次更新將原有的材質隱喻、大膽誇張、動效表意3大設計原則，擴充為5大設計原則：材質隱喻、大膽誇張、動效表意、靈活、跨平臺，讓我們來做一個對比。
原有Material Design3大設計原則
（1）隱喻
通過構建系統化的動效和空間合理化利用，並將兩個理念合二為一，構成了實體隱喻。與眾不同的觸感是實體的基礎，這一靈感來自我們對紙墨的研究。但是我們相信，隨著科技的進步，應用前景將不可估量。
實體的表面和邊緣提供，基於真實效果的視覺體驗，熟悉的觸感讓用戶可以快速地理解和認知。實體的多樣性可以讓我們呈現出更多反映真實世界的設計效果，但同時又絕不會脫離客觀的物理規律。
光效、表面質感、運動感這三點是解釋物體運動規律、交互方式、空間關係的關鍵。真實的光效可以解釋物體之間的交合關係、空間關係，以及單個物體的運動。
（2）大膽誇張
新的視覺語言，在基本元素的處理上，借鑑了傳統的印刷設計——排版、網格、空間、比例、配色、圖像使用這些基礎的平面設計規範。
在這些設計基礎上下功夫，不但可以愉悅用戶，而且能夠構建出視覺層級、視覺意義以及視覺聚焦。精心選擇色彩、圖像、選擇合乎比例的字體、留白，力求構建出鮮明、形象的用戶界面，讓用戶沉浸其中。
Material Design 設計語言強調：根據用戶行為凸顯核心功能，進而為用戶提供操作指引。
（3）動效表意
動畫效果(簡稱動效)可以有效地暗示、指引用戶。動效的設計要根據用戶行為而定，能夠改變整體設計的觸感。
動效應當在獨立的場景呈現。通過動效，讓物體的變化以更連續、更平滑的方式呈現給用戶，讓用戶能夠充分知曉所發生的變化。
動效應該是有意義的、合理的，動效的目的是為了吸引用戶的注意力，以及維持整個系統的連續性體驗。動效反饋需細膩、清爽，轉場動效需高效、明晰。
新版Material Design5大設計原則
（1）材質隱喻
Material Design受物理世界及其紋理的啟發，包括它們如何反射光線和投射陰影，材料表面重新構想紙張和墨水的介質。
（2）大膽誇張
Material Design以印刷設計方法 – 印刷術、網格、空間、比例、顏色和圖像為指導，創造出讓用戶沉浸在體驗中的層次結構，含義和焦點。
（3）動效表意
通過微妙的反饋和連貫的過渡來使動效保持一定的連續性。隨著元素出現在屏幕上，他們在環境中轉換和重組，相互作用產生新的轉變。
（4）靈活
Material Design系統旨在實現品牌表達，它集成了一個自定義代碼庫，可以使組件、插件和設計元素無縫的銜接和靈活的運行。
（5）跨平臺
Material Design使用跨Android、iOS、Flutter和Web的共享組件維護跨平臺的相同UI。
擴展信息：
我們全面的指導可幫助你更快地製作漂亮的產品，設計和構建新工具，用於定製材料和共享工作，在材料研究中找到靈感，並用Material Theming表達你產品的與眾不同。
通過瀏覽以下三個部分來查找您需要的內容：
材料系統：我們擴展和增強的設計系統與Material工具和組件統一，以改進設計和開發之間的工作流程。
材料基礎：設計和策劃如何使用Material Design體系結構構建你的應用程式，同時學習支持Material Design的原理和理論。
材料指南：在整個產品中系統化地定製和部署獨特的材質主題 – 從設計到代碼。
四、放寬對材質形狀的限制
形狀可以引導注意力，識別組件，溝通狀態和表達品牌。材料表面默認情況下為矩形，帶有4dp的圓角。他們具有可調整的：角角和曲線、邊角和曲線、邊角的數量。
形狀變化（例如如圓角或削角）非常微妙，而且很重要。
形狀變化的使用方法
（1）重點
由於獨特的形狀脫穎而出，他們可以將注意力集中在屏幕的不同部位。
圓形浮動動作按鈕和弧形底部工具欄的組合，從屏幕上其他位置的矩形形狀中凸顯出來。
（2）用於組件區分
形狀為用戶提供了識別組件和識別不同材質的方法，用以區分不同的功能。
這些人物標籤可以通過對形狀的一致使用來識別。
（3）表明狀態不同
可以通過形狀或材質的不同來傳達元素的狀態更改，當使用形狀來指示狀態改變時，在每一次出現的情況下都一致地使用它。
這張卡在選擇後會改變形狀，以表明它已被選中。
（4）個性化的品牌傳達
要在整個應用中表達品牌的視覺語言，請以一致的方式與其他自定義（如顏色）一起使用形狀。通過對app中元素進行戰略性小調整，有助於塑造品牌的整體印象。
整個應用程式使用形狀的一致性，有助於表達其品牌。
當然，設計時要更多的考慮到形狀的可識別性以及可用性，下面的設計方式是不可取的。
不要使用使組件無法識別的形狀。
不要使用對用戶操作起幹擾作用的形狀，此按鈕的觸摸目標太小。
五、更新文本欄位樣式
新版Material Design規範對文本欄位對樣式進行了重新設計，並闡述了其設計原理。
易於發現的：文本欄位應該突出並指示用戶可以輸入信息。
明確：文本欄位狀態應該明確區分。
高效：文本欄位可以讓您輕鬆理解所需的信息並解決任何錯誤。
原有文本欄位樣式：
新版文本欄位樣式
新版文本欄位有兩種類型：
填充文本欄位；
概述的文本欄位。
這兩種類型的文本欄位都使用容器來為交互提供明確的提示，使得欄位在布局中可被發現。
兩種類型的文本欄位都提供相同的功能，因此使用的文本欄位的類型可能僅取決於樣式。
選擇最適合您應用的視覺風格；
選擇最貼近ui設計目標的；
與其他組件（如：按鈕）和周圍內容最為融洽的。
六、更新擴展懸浮按鈕
浮動操作按鈕（FAB）表示屏幕的主要操作，原有懸浮按鈕為圓形如圖：
新版擴展的FAB更寬，並且包含文本標籤。
擴展的FAB容器的寬度可以是固定的或流體的。
固定寬度的容器由圖標，文本標籤和填充的累積寬度定義。
流體寬度容器由其與屏幕上的其他內容（例如屏幕寬度或布局網格）的關係定義。
此固定的擴展FAB寬度由圖標，文本標籤和容器填充的累積寬度定義。
此擴展FAB的容器寬度由布局網格列定義。
七、更新布局密度
Material Design默認使用低密度空間，但在提高用戶體驗時提供高密度空間。
1. 密度原則
可瀏覽：高密度控制的用戶界面改善了對大量內容的瀏覽和交互。
優先：密集的UI元素通過減少操作之間的空間來幫助用戶集中精力。
可用性：通過搞密度控制可以在單個屏幕上顯示更多內容和操作。
2. 何時應用高密度
是否增加用戶界面的密度，取決於用戶如何與組件進行交互。
高密度組件使用戶更好的處理大量信息並採取行動。在設計列表、表單和長表格時可使用密度增加的組件。
默認密度，48dp行高 ；
高密度，32dp行高。
默認密度，56dp文本欄位高度 ；
高密度，44dp文本欄位高度。
將密度始終應用於組件以及組件中嵌套的任何元素。
默認密度，40dp行高和36dp動作高度 ；
高密度，32dp行高，24dp動作高度。
3. 何時不應用高密度
（1）不要將高密度應用於涉及集中任務的組件，例如：與下拉菜單或選擇器的交互方式。增加這些組件的密度會降低它們的可用性。
不要將高密度應用於日期選擇器，因為這會降低可用性。
（2）不要將密度應用於提醒用戶更改的組件，例如：彈窗或對話框，對警報應用高密度會降低他們發出注意力的能力。
不要將高密度應用於對話，這會降低其可讀性和警告作用。
本文由@瀟瀟 原創發布於人人都是產品經理。未經許可，禁止轉載
題圖作者提供