2018年5月9日淩晨1點， 谷歌I/O開發者大會如期在美國加州山景城的海濱露天劇場拉開帷幕， 穀歌不僅對AI技術進行了更深層次的提升， 同時也對Android系統進行了更新， 谷歌副總裁Dave Burke對Android的更新進行了開場演講， “在Android過去的10中， 已經成為了一個開放的系統。 ”
隨著android P的誕生， 穀歌今日宣佈了 Material Design 應用程式視覺設計語言的幾項更新。 儘管此前傳聞稱有大改， 但從剛剛召開的 I/O 2018 開發者大會來看， 今年的發力點還是在主題、分享和開發簡易性上。 下面就Material Design更新內容進行解讀。
一
強大的“主題編輯器”
主題編輯器可説明你製作自己的品牌ui元件庫，
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 Design設計目標
1
舊版Material Design2個設計目標
我們希冀創造一種新的視覺設計語言， 能夠遵循優秀設計的經典定則， 同時還伴有創新理念和新的科技。
我們希望創造一種獨一無二的底層系統， 在這個系統的基礎之上， 構建跨平臺和超越設備尺寸的統一體驗。
2
新版Material Design3大設計目標
新版增加了“定制”目標， 與最新推出的主題編輯器個性化的定制功能相吻合。
創造：我們希冀創造一種新的視覺設計語言， 能夠遵循優秀設計的經典定則， 同時還伴有創新理念和新的科技。
統一：我們希望創造一種獨一無二的底層系統， 在這個系統的基礎之上， 構建跨平臺和超越設備尺寸的統一體驗。
定制：通過Material的視覺語言的延伸， 為創新和品牌表達提供統一靈活的設計規範。
三
新增Material Design設計原則
本次更新將原有的材質隱喻、大膽誇張、動效表意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中元素進行有規律的調整，有助於提升品牌的整體視覺形象。
2
設計時要更多的考慮到形狀的可識別性以及可用性，下面的設計方式是不可取的
不要使用使元件無法識別的形狀。
不要使用對用戶操作起干擾作用的形狀。此按鈕的觸摸目標太小。
五
更新文本欄位樣式
1
新版Material Design規範對文本欄位對樣式進行了重新設計，並闡述了其設計原理
易於發現的：文本欄位應該突出並指示使用者可以輸入資訊。
狀態明確：文本欄位狀態應該明確區分。
高效：方便讓使用者快速填寫，並高效解決任何錯誤。
2
原有文本欄位樣式
3
新版文本欄位樣式
新版文本欄位有兩種類型：
填充文本欄位
線性文本欄位
這兩種類型的文本欄位都使用容器來為交互提供明確的提示，使得文字方塊在頁面中容易被發現。
4
兩種類型的文本欄位具有相同的功能，因此使用的文本欄位的類型可能僅取決於其樣式
選擇最適合您應用的視覺風格
選擇最貼近ui設計目標的樣式
選擇與其他元件（如按鈕）和周圍內容最為融洽的樣式
六
更新擴展懸浮按鈕
1
新舊懸浮按鈕形狀區分
懸浮按鈕（FAB）通常是螢幕的主要操作按鈕，原有懸浮按鈕為圓形，如圖
新版擴展的FAB更寬，並且包含文本標籤。
2
懸浮按鈕的可擴展性
擴展的FAB按鈕的寬度可以是固定的或靈活的。
固定寬度的按鈕容器由圖示、文本標籤和填充的累積寬度定義。
靈活寬度的按鈕容器由其與螢幕上的其他內容（例如螢幕寬度或刪格系統）的關係定義。
此FAB按鈕的寬度由圖示、文本標籤和容器填充的累積寬度定義。
此FAB按鈕容器的寬度由刪格系統定義。
七
更新佈局密度
Material Design預設使用低密度空間，但在提高使用者體驗時提供高密度空間。
1
密度原則
可流覽：高密度控制的使用者介面改善了對大量內容的流覽和交互；
優先：密集的UI元素通過減少操作之間的空間來幫助用戶集中精力；
可用性：通過搞密度控制可以在單個螢幕上顯示更多內容和操作。
2
何時使用高密度
是否增加使用者介面的密度取決於使用者如何與元件進行交互。
高密度元件使使用者更好的處理大量資訊並進行大量操作。在設計清單、表單和長表格時可使用高密度的元件。
將密度始終應用於元件以及元件中嵌套的任何元素。
3
何時不使用高密度
集中任務元件：例如與下拉式功能表或選擇器的對話模式。增加這些元件的密度會降低它們的可用性。如日期選擇器，因為這會降低可用性。
不要將高密度應用於日期選擇器，因為這會降低可用性
提醒使用者更改的元件：特別是彈窗，用高密度會降低使用者的注意力，減弱警告作用。
不要將高密度應用於對話，這會降低其可讀性和警告作用。
-end-
本篇內容來自：Shell_Xiao糯米
————————————————
根據你的喜好
目測你還喜歡這些文章
————————————————
站酷，讓設計更有價值！
更多內容瞭解一下！
讓用戶能夠充分知曉所發生的變化。
動效應該是有意義的、合理的，動效的目的是為了吸引使用者的注意力，以及維持整個系統的連續性體驗。動效回饋需細膩、清爽。轉場動效需高效、明晰。
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中元素進行有規律的調整，有助於提升品牌的整體視覺形象。
2
設計時要更多的考慮到形狀的可識別性以及可用性，下面的設計方式是不可取的
不要使用使元件無法識別的形狀。
不要使用對用戶操作起干擾作用的形狀。此按鈕的觸摸目標太小。
五
更新文本欄位樣式
1
新版Material Design規範對文本欄位對樣式進行了重新設計，並闡述了其設計原理
易於發現的：文本欄位應該突出並指示使用者可以輸入資訊。
狀態明確：文本欄位狀態應該明確區分。
高效：方便讓使用者快速填寫，並高效解決任何錯誤。
2
原有文本欄位樣式
3
新版文本欄位樣式
新版文本欄位有兩種類型：
填充文本欄位
線性文本欄位
這兩種類型的文本欄位都使用容器來為交互提供明確的提示，使得文字方塊在頁面中容易被發現。
4
兩種類型的文本欄位具有相同的功能，因此使用的文本欄位的類型可能僅取決於其樣式
選擇最適合您應用的視覺風格
選擇最貼近ui設計目標的樣式
選擇與其他元件（如按鈕）和周圍內容最為融洽的樣式
六
更新擴展懸浮按鈕
1
新舊懸浮按鈕形狀區分
懸浮按鈕（FAB）通常是螢幕的主要操作按鈕，原有懸浮按鈕為圓形，如圖
新版擴展的FAB更寬，並且包含文本標籤。
2
懸浮按鈕的可擴展性
擴展的FAB按鈕的寬度可以是固定的或靈活的。
固定寬度的按鈕容器由圖示、文本標籤和填充的累積寬度定義。
靈活寬度的按鈕容器由其與螢幕上的其他內容（例如螢幕寬度或刪格系統）的關係定義。
此FAB按鈕的寬度由圖示、文本標籤和容器填充的累積寬度定義。
此FAB按鈕容器的寬度由刪格系統定義。
七
更新佈局密度
Material Design預設使用低密度空間，但在提高使用者體驗時提供高密度空間。
1
密度原則
可流覽：高密度控制的使用者介面改善了對大量內容的流覽和交互；
優先：密集的UI元素通過減少操作之間的空間來幫助用戶集中精力；
可用性：通過搞密度控制可以在單個螢幕上顯示更多內容和操作。
2
何時使用高密度
是否增加使用者介面的密度取決於使用者如何與元件進行交互。
高密度元件使使用者更好的處理大量資訊並進行大量操作。在設計清單、表單和長表格時可使用高密度的元件。
將密度始終應用於元件以及元件中嵌套的任何元素。
3
何時不使用高密度
集中任務元件：例如與下拉式功能表或選擇器的對話模式。增加這些元件的密度會降低它們的可用性。如日期選擇器，因為這會降低可用性。
不要將高密度應用於日期選擇器，因為這會降低可用性
提醒使用者更改的元件：特別是彈窗，用高密度會降低使用者的注意力，減弱警告作用。
不要將高密度應用於對話，這會降低其可讀性和警告作用。
-end-
本篇內容來自：Shell_Xiao糯米
————————————————
根據你的喜好
目測你還喜歡這些文章
————————————————
站酷，讓設計更有價值！
更多內容瞭解一下！