[視頻]Google I/O帶來(lái)了MaterialDesign重大更新

 

2018谷歌開(kāi)發(fā)者大會(huì)原聲中文字幕版實(shí)錄

 

 

2018年5月9日凌晨1點(diǎn)，谷歌I/O開(kāi)發(fā)者大會(huì)如期在美國(guó)加州山景城的海濱露天劇場(chǎng)拉開(kāi)帷幕，谷歌不僅對(duì)AI技術(shù)進(jìn)行了更深層次的提升，同時(shí)也對(duì)Android系統(tǒng)進(jìn)行了更新，谷歌副總裁Dave Burke對(duì)Android的更新進(jìn)行了開(kāi)場(chǎng)演講，“在Android過(guò)去的10中，已經(jīng)成為了一個(gè)開(kāi)放的系統(tǒng)。”

隨著android P的誕生，谷歌今日宣布了 Material Design 應(yīng)用程序視覺(jué)設(shè)計(jì)語(yǔ)言的幾項(xiàng)更新。盡管此前傳聞稱(chēng)有大改，但從剛剛召開(kāi)的 I/O 2018 開(kāi)發(fā)者大會(huì)來(lái)看，今年的發(fā)力點(diǎn)還是在主題、分享和開(kāi)發(fā)簡(jiǎn)易性上。下面就對(duì)Material Design的更新內(nèi)容進(jìn)行解讀。

 

 

一、強(qiáng)大的“主題編輯器”

主題編輯器可幫助你制作自己的品牌ui組件庫(kù)，并提供全局樣式更改方案，可以應(yīng)用于顏色，形狀和排版。目前可用于Sketch，通過(guò)下載sketch插件來(lái)進(jìn)行應(yīng)用。

 

 

1、自定義主題顏色

通過(guò)插件可以設(shè)定主色、輔色及背景色和文字顏色，并自動(dòng)將顏色應(yīng)用于所有組件。

◎檢查色彩對(duì)比以符合無(wú)障礙要求

◎從材質(zhì)調(diào)色板中選擇顏色

◎使用單一顏色自動(dòng)生成10個(gè)輔助色

◎使用symbols設(shè)定全局顏色方便顏色的更改

 

 

2、設(shè)置形狀

◎選擇你的形狀和邊角風(fēng)格

◎從彎曲或切割的邊角樣式中進(jìn)行選擇，并自動(dòng)將更改應(yīng)用于全部組件

◎在材質(zhì)庫(kù)中的組件中使用對(duì)稱(chēng)或非對(duì)稱(chēng)形狀進(jìn)行切換 - 同時(shí)保留在Material Design規(guī)范中

 

 

3、字體定義

◎最多可為您的主題添加3種字體

◎基于Material排版，自動(dòng)調(diào)整和優(yōu)化字體的可讀性

◎可快速訪問(wèn)Google字體，包括：Roboto，Raleway，Alegreya，Merriweather，Rubik，Oswald等

 

 

4、探索圖標(biāo)

◎通過(guò)風(fēng)格化的系統(tǒng)圖標(biāo)表達(dá)您的品牌 - 提供五個(gè)主題和一系列格式，尺寸和密度

◎從填充，圓潤(rùn)，銳利，描邊和雙色圖標(biāo)主題中進(jìn)行選擇

 

 

5、開(kāi)始使用主題編輯器

通過(guò)下載并安裝Material Plugin開(kāi)始使用（需要macOS High Sierra 10.13或更高版本）

 

 

◎該插件提供對(duì)Material組件庫(kù)，Material Theme Editor（可用于Sketch）的訪問(wèn)，并且可以直接將畫(huà)板上傳到Gallery

◎在圖庫(kù)中，使用材質(zhì)主題編輯器創(chuàng)建的設(shè)計(jì)可以自動(dòng)生成規(guī)范并訪問(wèn)開(kāi)發(fā)者文檔

點(diǎn)這里跳轉(zhuǎn)官方網(wǎng)站下載

 

 

二、新增Material Design設(shè)計(jì)目標(biāo)

 

1、先讓我們來(lái)回顧一下舊版Material Design2個(gè)設(shè)計(jì)目標(biāo)：

◎我們希冀創(chuàng)造一種新的視覺(jué)設(shè)計(jì)語(yǔ)言，能夠遵循優(yōu)秀設(shè)計(jì)的經(jīng)典定則，同時(shí)還伴有創(chuàng)新理念和新的科技。

◎我們希望創(chuàng)造一種獨(dú)一無(wú)二的底層系統(tǒng)，在這個(gè)系統(tǒng)的基礎(chǔ)之上，構(gòu)建跨平臺(tái)和超越設(shè)備尺寸的統(tǒng)一體驗(yàn)。遵循基本的移動(dòng)設(shè)計(jì)定則，同時(shí)支持觸摸、語(yǔ)音、鼠標(biāo)、鍵盤(pán)等輸入方式。

2、新版Material Design3大設(shè)計(jì)目標(biāo)

 

 

新版增加了“定制”目標(biāo)，與最新推出的主題編輯器個(gè)性化的定制功能相吻合。

◎創(chuàng)造：我們希冀創(chuàng)造一種新的視覺(jué)設(shè)計(jì)語(yǔ)言，能夠遵循優(yōu)秀設(shè)計(jì)的經(jīng)典定則，同時(shí)還伴有創(chuàng)新理念和新的科技。

◎統(tǒng)一：我們希望創(chuàng)造一種獨(dú)一無(wú)二的底層系統(tǒng)，在這個(gè)系統(tǒng)的基礎(chǔ)之上，構(gòu)建跨平臺(tái)和超越設(shè)備尺寸的統(tǒng)一體驗(yàn)。

◎定制：通過(guò)Material的視覺(jué)語(yǔ)言的延伸，為創(chuàng)新和品牌表達(dá)提供統(tǒng)一靈活的設(shè)計(jì)規(guī)范。

 

三、新增Material Design設(shè)計(jì)原則

本次更新將原有的材質(zhì)隱喻、大膽夸張、動(dòng)效表意3大設(shè)計(jì)原則擴(kuò)充為5大設(shè)計(jì)原則：材質(zhì)隱喻、大膽夸張、動(dòng)效表意、靈活、跨平臺(tái)，讓我們來(lái)做一個(gè)對(duì)比。

1、原有Material Design3大設(shè)計(jì)原則：

◎隱喻

通過(guò)構(gòu)建系統(tǒng)化的動(dòng)效和空間合理化利用，并將兩個(gè)理念合二為一，構(gòu)成了實(shí)體隱喻。與眾不同的觸感是實(shí)體的基礎(chǔ)，這一靈感來(lái)自我們對(duì)紙墨的研究，但是我們相信，隨著科技的進(jìn)步，應(yīng)用前景將不可估量。

實(shí)體的表面和邊緣提供基于真實(shí)效果的視覺(jué)體驗(yàn)，熟悉的觸感讓用戶(hù)可以快速地理解和認(rèn)知。實(shí)體的多樣性可以讓我們呈現(xiàn)出更多反映真實(shí)世界的設(shè)計(jì)效果，但同時(shí)又絕不會(huì)脫離客觀的物理規(guī)律。

光效、表面質(zhì)感、運(yùn)動(dòng)感這三點(diǎn)是解釋物體運(yùn)動(dòng)規(guī)律、交互方式、空間關(guān)系的關(guān)鍵。真實(shí)的光效可以解釋物體之間的交合關(guān)系、空間關(guān)系，以及單個(gè)物體的運(yùn)動(dòng)。

◎大膽夸張

新的視覺(jué)語(yǔ)言，在基本元素的處理上，借鑒了傳統(tǒng)的印刷設(shè)計(jì)——排版、網(wǎng)格、空間、比例、配色、圖像使用——這些基礎(chǔ)的平面設(shè)計(jì)規(guī)范。在這些設(shè)計(jì)基礎(chǔ)上下功夫，不但可以愉悅用戶(hù)，而且能夠構(gòu)建出視覺(jué)層級(jí)、視覺(jué)意義以及視覺(jué)聚焦。精心選擇色彩、圖像、選擇合乎比例的字體、留白，力求構(gòu)建出鮮明、形象的用戶(hù)界面，讓用戶(hù)沉浸其中。

Material Design 設(shè)計(jì)語(yǔ)言強(qiáng)調(diào)根據(jù)用戶(hù)行為凸顯核心功能，進(jìn)而為用戶(hù)提供操作指引。

◎動(dòng)效表意

動(dòng)畫(huà)效果(簡(jiǎn)稱(chēng)動(dòng)效)可以有效地暗示、指引用戶(hù)。動(dòng)效的設(shè)計(jì)要根據(jù)用戶(hù)行為而定，能夠改變整體設(shè)計(jì)的觸感。

動(dòng)效應(yīng)當(dāng)在獨(dú)立的場(chǎng)景呈現(xiàn)。通過(guò)動(dòng)效，讓物體的變化以更連續(xù)、更平滑的方式呈現(xiàn)給用戶(hù)，讓用戶(hù)能夠充分知曉所發(fā)生的變化。

動(dòng)效應(yīng)該是有意義的、合理的，動(dòng)效的目的是為了吸引用戶(hù)的注意力，以及維持整個(gè)系統(tǒng)的連續(xù)性體驗(yàn)。動(dòng)效反饋需細(xì)膩、清爽。轉(zhuǎn)場(chǎng)動(dòng)效需高效、明晰。

 

2、新版Material Design5大設(shè)計(jì)原則：

 

◎材質(zhì)隱喻

Material Design受物理世界及其物體紋理材質(zhì)的啟發(fā)，包括它們?nèi)绾畏瓷涔饩€和投射陰影。材料表面進(jìn)行重新構(gòu)想，加入紙張和墨水的特性。

◎大膽夸張

Material Design以印刷設(shè)計(jì)方法 - 排版，網(wǎng)格，空間，比例，顏色和圖像為指導(dǎo)，創(chuàng)造出讓用戶(hù)沉浸在精心設(shè)計(jì)的視覺(jué)層級(jí)、視覺(jué)意義以及視覺(jué)聚焦中。

◎動(dòng)效表意

通過(guò)微妙的反饋和平滑的過(guò)渡來(lái)使動(dòng)效保持一定的連續(xù)性。隨著元素出現(xiàn)在屏幕上，他們?cè)诃h(huán)境中轉(zhuǎn)換和重組，相互作用產(chǎn)生新的變化。

◎靈活

Material Design系統(tǒng)旨在實(shí)現(xiàn)品牌傳達(dá)。它集成了一個(gè)自定義代碼庫(kù)，可以使組件，插件和設(shè)計(jì)元素?zé)o縫的銜接和靈活的運(yùn)行。

◎跨平臺(tái)

Material Design使用跨平臺(tái)管理，其中包括Android，iOS，F(xiàn)lutter和Web，方便設(shè)計(jì)師跨平臺(tái)維護(hù)ui組件。

 

3、擴(kuò)展信息：

我們?nèi)娴闹笇?dǎo)可幫助你更快地設(shè)計(jì)漂亮的產(chǎn)品。通過(guò)全新的設(shè)計(jì)工具，定制Material組件和跨平臺(tái)管理，在材料研究中找到靈感，并用Material Theming表達(dá)你產(chǎn)品的與眾不同。

通過(guò)瀏覽以下三個(gè)部分來(lái)幫助你更好的理解：

 

◎材料系統(tǒng)：我們擴(kuò)展和優(yōu)化的設(shè)計(jì)系統(tǒng)與Material工具和組件統(tǒng)一，以改進(jìn)設(shè)計(jì)和開(kāi)發(fā)之間的工作流程。

◎材料基礎(chǔ)：設(shè)計(jì)和策劃如何將Material Design設(shè)計(jì)體系運(yùn)用到你的應(yīng)用程序，同時(shí)學(xué)習(xí)支持Material Design的原理和理論。

◎材料指南：從設(shè)計(jì)到代碼實(shí)現(xiàn)，在整個(gè)產(chǎn)品中系統(tǒng)化地定制和部署個(gè)性化主題。

查看設(shè)計(jì)目標(biāo)及原則原文

 

四、放寬對(duì)材質(zhì)形狀的限制

形狀可以引導(dǎo)注意力，提高組件的識(shí)別性，表明狀態(tài)和表達(dá)品牌。

 

材質(zhì)形狀默認(rèn)情況下為矩形，帶有4dp的圓角。但它們具有可調(diào)整的圓角、曲線和邊角的數(shù)量。

形狀變化（例如圓角或削角）非常微妙，而且很重要。

 

1、形狀變化的使用方法

◎突出重點(diǎn)

通過(guò)獨(dú)特形狀的運(yùn)用，可以將用戶(hù)注意力集中在頁(yè)面中重點(diǎn)的ui元素上。

 

圓形浮動(dòng)按鈕和弧形底部工具欄的組合，從屏幕上其他位置的矩形形狀中凸顯出來(lái)。

 

◎區(qū)分ui元素

靈活的形狀為用戶(hù)提供了識(shí)別組件和識(shí)別不同材質(zhì)的方法，用以區(qū)分不同的功能。

 

使用相同形狀的人物標(biāo)簽，方便識(shí)別。

 

◎區(qū)分不同狀態(tài)

通過(guò)形狀或材質(zhì)的不同，可以對(duì)ui元素狀態(tài)進(jìn)行區(qū)分。當(dāng)使用形狀來(lái)表示狀態(tài)改變時(shí)，應(yīng)該把該形狀貫穿到每一處的狀態(tài)改變上。

 

這張卡片在選擇后會(huì)改變形狀，以表明它已被選中。

 

◎個(gè)性化的品牌傳達(dá)

要統(tǒng)一整個(gè)品牌的視覺(jué)語(yǔ)言，請(qǐng)使用顏色和形狀統(tǒng)一的ui元素或ui組件。通過(guò)對(duì)app中元素進(jìn)行有規(guī)律的調(diào)整，有助于提升品牌的整體視覺(jué)形象。

 

整個(gè)應(yīng)用程序使用形狀一致的ui元素，有助于品牌形象的提升。

 

2、設(shè)計(jì)時(shí)要更多的考慮到形狀的可識(shí)別性以及可用性，下面的設(shè)計(jì)方式是不可取的

不要使用無(wú)法識(shí)別形狀的ui組件。

 

 

不要使用干擾用戶(hù)操作的形狀，此按鈕的觸摸范圍太小。

 

 

有關(guān)形狀的規(guī)范原文

 

五、更新文本字段樣式

1、新版Material Design規(guī)范對(duì)文本字段對(duì)樣式進(jìn)行了重新設(shè)計(jì)，并闡述了其設(shè)計(jì)原理

 

 

◎易于發(fā)現(xiàn)的：文本字段應(yīng)該突出并指示用戶(hù)可以輸入信息。

◎狀態(tài)明確：文本字段狀態(tài)應(yīng)該明確區(qū)分。

◎高效：方便讓用戶(hù)快速填寫(xiě)，并高效解決任何錯(cuò)誤。

 

2、原有文本字段樣式

3、新版文本字段樣式

新版文本字段有兩種類(lèi)型：

◎填充文本字段

◎線性文本字段

這兩種類(lèi)型的文本字段都使用容器來(lái)為交互提供明確的提示，使得文本框在頁(yè)面中容易被發(fā)現(xiàn)。

 

 

4、兩種類(lèi)型的文本字段具有相同的功能，因此使用的文本字段的類(lèi)型可能僅取決于其樣式。

◎選擇最適合您應(yīng)用的視覺(jué)風(fēng)格

◎選擇最貼近ui設(shè)計(jì)目標(biāo)的樣式

◎選擇與其他組件（如按鈕）和周?chē)鷥?nèi)容最為融洽的樣式

 

文字規(guī)范原文

 

六、更新擴(kuò)展懸浮按鈕

1、新舊懸浮按鈕形狀區(qū)分

懸浮按鈕（FAB）通常是屏幕的主要操作按鈕，原有懸浮按鈕為圓形，如圖

新版擴(kuò)展的FAB更寬，并且包含文本標(biāo)簽。

2、懸浮按鈕的可擴(kuò)展性

擴(kuò)展的FAB按鈕的寬度可以是固定的或靈活的。

◎固定寬度的按鈕容器由圖標(biāo)、文本標(biāo)簽和填充的累積寬度定義。

◎靈活寬度的按鈕容器由其與屏幕上的其他內(nèi)容（例如屏幕寬度或刪格系統(tǒng)）的關(guān)系定義。

此FAB按鈕的寬度由圖標(biāo)、文本標(biāo)簽和容器填充的累積寬度定義。

此FAB按鈕容器的寬度由刪格系統(tǒng)定義。

擴(kuò)展懸浮按鈕規(guī)范原文

 

七、更新布局密度

Material Design默認(rèn)使用低密度空間，但在提高用戶(hù)體驗(yàn)時(shí)提供高密度空間。

1、密度原則

◎可瀏覽：高密度控制的用戶(hù)界面改善了對(duì)大量?jī)?nèi)容的瀏覽和交互；

◎優(yōu)先：密集的UI元素通過(guò)減少操作之間的空間來(lái)幫助用戶(hù)集中精力；

◎可用性：通過(guò)搞密度控制可以在單個(gè)屏幕上顯示更多內(nèi)容和操作。

2、何時(shí)使用高密度

◎是否增加用戶(hù)界面的密度取決于用戶(hù)如何與組件進(jìn)行交互。

◎高密度組件使用戶(hù)更好的處理大量信息并進(jìn)行大量操作。在設(shè)計(jì)列表、表單和長(zhǎng)表格時(shí)可使用高密度的組件。

 

 

 

3、何時(shí)不使用高密度

◎集中任務(wù)組件：例如與下拉菜單或選擇器的交互方式。增加這些組件的密度會(huì)降低它們的可用性。如日期選擇器，因?yàn)檫@會(huì)降低可用性。

 

不要將高密度應(yīng)用于日期選擇器，因?yàn)檫@會(huì)降低可用性

 

◎提醒用戶(hù)更改的組件：特別是彈窗，用高密度會(huì)降低用戶(hù)的注意力，減弱警告作用。

 

不要將高密度應(yīng)用于對(duì)話(huà)，這會(huì)降低其可讀性和警告作用。

布局密度規(guī)范原文