起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Google I/O帶來的Material Design的7個重大更新
隨著android P的誕生，谷歌宣布了 Material Design 應用程序視覺設計語言的幾項更新。本文主要就Material Design更新內容進行解讀。
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. 設置形狀
選擇你的形狀和邊角風格，從彎曲或切割的角落樣式中進行選擇，并自動將更改應用于您的材質組件。
在材質庫中的組件中，使用對稱和非對稱形狀進行播放，同時保留在材質設計指南中。
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）不要將密度應用于提醒用戶更改的組件，例如：彈窗或對話框，對警報應用高密度會降低他們發出注意力的能力。
?不要將高密度應用于對話，這會降低其可讀性和警告作用。
本文由@瀟瀟 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖作者提供
Material Design還是非常漂亮的,可是國內貌似沒人用