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