文 / Shell_Xiao糯米(簡書暱稱)
_
2018年穀歌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、字體定義
4、探索圖標
5、開始使用主題編輯器
通過下載並安裝Material Plugin開始使用（需要macOS High Sierra 10.13或更高版本）
1、先讓我們來回顧一下舊版Material Design2個設計目標：
2、新版Material Design3大設計目標
新版增加了「定製」目標，與最新推出的主題編輯器個性化的定製功能相吻合。
創造：我們希冀創造一種新的視覺設計語言，能夠遵循優秀設計的經典定則，同時還伴有創新理念和新的科技。
統一：我們希望創造一種獨一無二的底層系統，在這個系統的基礎之上，構建跨平臺和超越設備尺寸的統一體驗。
定製：通過Material的視覺語言的延伸，為創新和品牌表達提供統一靈活的設計規範。
本次更新將原有的材質隱喻、大膽誇張、動效表意3大設計原則擴充為5大設計原則：材質隱喻、大膽誇張、動效表意、靈活、跨平臺，讓我們來做一個對比。
1、原有Material Design3大設計原則：
通過構建系統化的動效和空間合理化利用，並將兩個理念合二為一，構成了實體隱喻。與眾不同的觸感是實體的基礎，這一靈感來自我們對紙墨的研究，但是我們相信，隨著科技的進步，應用前景將不可估量。
實體的表面和邊緣提供基於真實效果的視覺體驗，熟悉的觸感讓用戶可以快速地理解和認知。實體的多樣性可以讓我們呈現出更多反映真實世界的設計效果，但同時又絕不會脫離客觀的物理規律。
光效、表面質感、運動感這三點是解釋物體運動規律、交互方式、空間關係的關鍵。真實的光效可以解釋物體之間的交合關係、空間關係，以及單個物體的運動。
新的視覺語言，在基本元素的處理上，借鑑了傳統的印刷設計——排版、網格、空間、比例、配色、圖像使用——這些基礎的平面設計規範。在這些設計基礎上下功夫，不但可以愉悅用戶，而且能夠構建出視覺層級、視覺意義以及視覺聚焦。精心選擇色彩、圖像、選擇合乎比例的字體、留白，力求構建出鮮明、形象的用戶界面，讓用戶沉浸其中。
Material Design 設計語言強調根據用戶行為凸顯核心功能，進而為用戶提供操作指引。
動畫效果(簡稱動效)可以有效地暗示、指引用戶。動效的設計要根據用戶行為而定，能夠改變整體設計的觸感。
動效應當在獨立的場景呈現。通過動效，讓物體的變化以更連續、更平滑的方式呈現給用戶，讓用戶能夠充分知曉所發生的變化。
動效應該是有意義的、合理的，動效的目的是為了吸引用戶的注意力，以及維持整個系統的連續性體驗。動效反饋需細膩、清爽。轉場動效需高效、明晰。
2、新版Material Design5大設計原則：
Material Design受物理世界及其物體紋理材質的啟發，包括它們如何反射光線和投射陰影。材料表面進行重新構想，加入紙張和墨水的特性。
Material Design以印刷設計方法 - 排版，網格，空間，比例，顏色和圖像為指導，創造出讓用戶沉浸在精心設計的視覺層級、視覺意義以及視覺聚焦中。
通過微妙的反饋和平滑的過渡來使動效保持一定的連續性。隨著元素出現在屏幕上，他們在環境中轉換和重組，相互作用產生新的變化。
Material Design系統旨在實現品牌傳達。它集成了一個自定義代碼庫，可以使組件，插件和設計元素無縫的銜接和靈活的運行。
Material Design使用跨平臺管理，其中包括Android，iOS，Flutter和Web，方便設計師跨平臺維護ui組件。
3、擴展信息
我們全面的指導可幫助你更快地設計漂亮的產品。通過全新的設計工具，定製Material組件和跨平臺管理，在材料研究中找到靈感，並用Material Theming表達你產品的與眾不同。
通過瀏覽以下三個部分來幫助你更好的理解：
材料系統：我們擴展和優化的設計系統與Material工具和組件統一，以改進設計和開發之間的工作流程。
材料基礎：設計和策劃如何將Material Design設計體系運用到你的應用程式，同時學習支持Material Design的原理和理論。
材料指南：從設計到代碼實現，在整個產品中系統化地定製和部署個性化主題。
形狀可以引導注意力，提高組件的識別性，表明狀態和表達品牌。
材質形狀默認情況下為矩形，帶有4dp的圓角。但它們具有可調整的圓角、曲線和邊角的數量。
形狀變化（例如圓角或削角）非常微妙，而且很重要。
1、形狀變化的使用方法
突出重點
通過獨特形狀的運用，可以將用戶注意力集中在頁面中重點的ui元素上。
圓形浮動按鈕和弧形底部工具欄的組合，從屏幕上其他位置的矩形形狀中凸顯出來。
區分ui元素
靈活的形狀為用戶提供了識別組件和識別不同材質的方法，用以區分不同的功能。
使用相同形狀的人物標籤，方便識別。
區分不同狀態
通過形狀或材質的不同，可以對ui元素狀態進行區分。當使用形狀來表示狀態改變時，應該把該形狀貫穿到每一處的狀態改變上。
這張卡片在選擇後會改變形狀，以表明它已被選中。
個性化的品牌傳達
要統一整個品牌的視覺語言，請使用顏色和形狀統一的ui元素或ui組件。通過對app中元素進行有規律的調整，有助於提升品牌的整體視覺形象。
整個應用程式使用形狀一致的ui元素，有助於品牌形象的提升。
"設計時要更多的考慮到形狀的可識別性以及可用性
下面的設計方式是不可取的"
❌不要使用無法識別形狀的ui組件。
❌不要使用幹擾用戶操作的形狀，此按鈕的觸摸範圍太小。
1、新版Material Design規範對文本欄位對樣式進行了重新設計，並闡述了其設計原理
易於發現的：
文本欄位應該突出並指示用戶可以輸入信息。
狀態明確：文本欄位狀態應該明確區分。
高效：方便讓用戶快速填寫，並高效解決任何錯誤。
2、原有文本欄位樣式
3、新版文本欄位樣式
新版文本欄位有兩種類型：
這兩種類型的文本欄位都使用容器來為交互提供明確的提示，使得文本框在頁面中容易被發現。
4、兩種類型的文本欄位具有相同的功能，因此使用的文本欄位的類型可能僅取決於其樣式。
選擇最適合您應用的視覺風格
選擇最貼近ui設計目標的樣式
選擇與其他組件（如按鈕）和周圍內容最為融洽的樣式
1、新舊懸浮按鈕形狀區分
懸浮按鈕（FAB）通常是屏幕的主要操作按鈕，原有懸浮按鈕為圓形，如圖
新版擴展的FAB更寬，並且包含文本標籤。
2、懸浮按鈕的可擴展性
擴展的FAB按鈕的寬度可以是固定的或靈活的。
此FAB按鈕的寬度由圖標、文本標籤和容器填充的累積寬度定義。
此FAB按鈕容器的寬度由刪格系統定義。
Material Design默認使用低密度空間，但在提高用戶體驗時提供高密度空間。
1、密度原則
可瀏覽：高密度控制的用戶界面改善了對大量內容的瀏覽和交互；
優先：密集的UI元素通過減少操作之間的空間來幫助用戶集中精力；
可用性：通過搞密度控制可以在單個屏幕上顯示更多內容和操作。
2、何時使用高密度
3、何時不使用高密度
集中任務組件：例如與下拉菜單或選擇器的交互方式。增加這些組件的密度會降低它們的可用性。如日期選擇器，因為這會降低可用性。
❌不要將高密度應用於日期選擇器，因為這會降低可用性
提醒用戶更改的組件：特別是彈窗，用高密度會降低用戶的注意力，減弱警告作用。
❌不要將高密度應用於對話，這會降低其可讀性和警告作用。
-end-
*作者：Shell_Xiao糯米
簡書連結：https://www.jianshu.com/p/64ee4fc11af4
＊再編輯：曉黑，設計夾編輯，主要負責內容挖掘及編輯工作。
—
【神器推薦】
在我們做設計的過程中，前期草圖肯定是少不了的，
比如你是字體設計師，在前期草圖過程中，
就得力求規範，
如果是GUI設計師更是如此啦，
設計個icon，在比例、結構方面也是比較嚴謹的，
這個時候如果有一款神器
能夠大大提升你的創作效率，
豈不美哉？
下面的就是能夠提升你創作效率的柵格本，建議試試
畢竟這種低成本的東西，練一杯coffee錢都不到
買不了吃虧，也賣不了上當~~
若大批量購買，需要各種規格定製，可添加微信：cosun1987，進行諮詢
商務合作及投稿請聯繫曉黑
微信號：sezign01
點擊閱讀原文，購買給設計師用的手繪本