Google I/O帶來(lái)的Material Design的7個(gè)重大更新

2 評(píng)論 12603 瀏覽 27 收藏 20 分鐘

隨著android P的誕生,谷歌宣布了 Material Design 應(yīng)用程序視覺(jué)設(shè)計(jì)語(yǔ)言的幾項(xiàng)更新。本文主要就Material Design更新內(nèi)容進(jìn)行解讀。

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)?!?/p>

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

下面就Material Design更新內(nèi)容進(jìn)行解讀。

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

材質(zhì)主題編輯器可幫助你制作自己的品牌ui組件庫(kù),并將全局樣式更改應(yīng)用于顏色,形狀和印刷。目前可用于Sketch,你可以通過(guò)下載sketch插件來(lái)訪問(wèn)材質(zhì)主題編輯器。

1. 選擇顏色

通過(guò)選擇主要、次要、背景以及文本和圖標(biāo)色彩,自動(dòng)將顏色應(yīng)用于所有組件。檢查色彩對(duì)比以符合無(wú)障礙要求,從材質(zhì)調(diào)色板中選擇顏色,使用單一顏色自動(dòng)生成10個(gè)顏色值的色調(diào),使用全局顏色更改自動(dòng)填充symbols。

2. 設(shè)置形狀

選擇你的形狀和邊角風(fēng)格,從彎曲或切割的角落樣式中進(jìn)行選擇,并自動(dòng)將更改應(yīng)用于您的材質(zhì)組件。

在材質(zhì)庫(kù)中的組件中,使用對(duì)稱和非對(duì)稱形狀進(jìn)行播放,同時(shí)保留在材質(zhì)設(shè)計(jì)指南中。

3. 添加類型

最多可為您的主題添加3個(gè)字體,基于材料排版指導(dǎo),自動(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á)您的品牌,提供五種主題和一系列格式、尺寸和密度。從填充、圓潤(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),并且可以直接將畫板上傳到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)

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

  1. 我們希冀創(chuàng)造一種新的視覺(jué)設(shè)計(jì)語(yǔ)言,能夠遵循優(yōu)秀設(shè)計(jì)的經(jīng)典定則,同時(shí)還伴有創(chuàng)新理念和新的科技。
  2. 我們希望創(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)、鍵盤等輸入方式。

新版Material Design 3 大設(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)。
  • 定制:展開(kāi)Material的視覺(jué)語(yǔ)言,為創(chuàng)新和品牌表達(dá)提供靈活的基礎(chǔ)。

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

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

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

(1)隱喻

通過(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),熟悉的觸感讓用戶可以快速地理解和認(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)。

(2)大膽夸張

新的視覺(jué)語(yǔ)言,在基本元素的處理上,借鑒了傳統(tǒng)的印刷設(shè)計(jì)——排版、網(wǎng)格、空間、比例、配色、圖像使用這些基礎(chǔ)的平面設(shè)計(jì)規(guī)范。

在這些設(shè)計(jì)基礎(chǔ)上下功夫,不但可以愉悅用戶,而且能夠構(gòu)建出視覺(jué)層級(jí)、視覺(jué)意義以及視覺(jué)聚焦。精心選擇色彩、圖像、選擇合乎比例的字體、留白,力求構(gòu)建出鮮明、形象的用戶界面,讓用戶沉浸其中。

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

(3)動(dòng)效表意

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

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

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

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

(1)材質(zhì)隱喻

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

(2)大膽夸張

Material Design以印刷設(shè)計(jì)方法 – 印刷術(shù)、網(wǎng)格、空間、比例、顏色和圖像為指導(dǎo),創(chuàng)造出讓用戶沉浸在體驗(yàn)中的層次結(jié)構(gòu),含義和焦點(diǎn)。

(3)動(dòng)效表意

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

(4)靈活

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

(5)跨平臺(tái)

Material Design使用跨Android、iOS、Flutter和Web的共享組件維護(hù)跨平臺(tái)的相同UI。

擴(kuò)展信息:

我們?nèi)娴闹笇?dǎo)可幫助你更快地制作漂亮的產(chǎn)品,設(shè)計(jì)和構(gòu)建新工具,用于定制材料和共享工作,在材料研究中找到靈感,并用Material Theming表達(dá)你產(chǎn)品的與眾不同。

通過(guò)瀏覽以下三個(gè)部分來(lái)查找您需要的內(nèi)容:

  • 材料系統(tǒng):我們擴(kuò)展和增強(qiáng)的設(shè)計(jì)系統(tǒng)與Material工具和組件統(tǒng)一,以改進(jìn)設(shè)計(jì)和開(kāi)發(fā)之間的工作流程。
  • 材料基礎(chǔ):設(shè)計(jì)和策劃如何使用Material Design體系結(jié)構(gòu)構(gòu)建你的應(yīng)用程序,同時(shí)學(xué)習(xí)支持Material Design的原理和理論。
  • 材料指南:在整個(gè)產(chǎn)品中系統(tǒng)化地定制和部署獨(dú)特的材質(zhì)主題 – 從設(shè)計(jì)到代碼。

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

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

形狀可以引導(dǎo)注意力,識(shí)別組件,溝通狀態(tài)和表達(dá)品牌。材料表面默認(rèn)情況下為矩形,帶有4dp的圓角。他們具有可調(diào)整的:角角和曲線、邊角和曲線、邊角的數(shù)量。

形狀變化(例如如圓角或削角)非常微妙,而且很重要。

形狀變化的使用方法

(1)重點(diǎn)

由于獨(dú)特的形狀脫穎而出,他們可以將注意力集中在屏幕的不同部位。

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

(2)用于組件區(qū)分

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

這些人物標(biāo)簽可以通過(guò)對(duì)形狀的一致使用來(lái)識(shí)別。

(3)表明狀態(tài)不同

可以通過(guò)形狀或材質(zhì)的不同來(lái)傳達(dá)元素的狀態(tài)更改,當(dāng)使用形狀來(lái)指示狀態(tài)改變時(shí),在每一次出現(xiàn)的情況下都一致地使用它。

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

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

要在整個(gè)應(yīng)用中表達(dá)品牌的視覺(jué)語(yǔ)言,請(qǐng)以一致的方式與其他自定義(如顏色)一起使用形狀。通過(guò)對(duì)app中元素進(jìn)行戰(zhàn)略性小調(diào)整,有助于塑造品牌的整體印象。

整個(gè)應(yīng)用程序使用形狀的一致性,有助于表達(dá)其品牌。

當(dāng)然,設(shè)計(jì)時(shí)要更多的考慮到形狀的可識(shí)別性以及可用性,下面的設(shè)計(jì)方式是不可取的。

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

?不要使用對(duì)用戶操作起干擾作用的形狀,此按鈕的觸摸目標(biāo)太小。

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

五、更新文本字段樣式

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

  • 易于發(fā)現(xiàn)的:文本字段應(yīng)該突出并指示用戶可以輸入信息。
  • 明確:文本字段狀態(tài)應(yīng)該明確區(qū)分。
  • 高效:文本字段可以讓您輕松理解所需的信息并解決任何錯(cuò)誤。

原有文本字段樣式:

新版文本字段樣式

新版文本字段有兩種類型:

  1. 填充文本字段;
  2. 概述的文本字段。

這兩種類型的文本字段都使用容器來(lái)為交互提供明確的提示,使得字段在布局中可被發(fā)現(xiàn)。

兩種類型的文本字段都提供相同的功能,因此使用的文本字段的類型可能僅取決于樣式。

  1. 選擇最適合您應(yīng)用的視覺(jué)風(fēng)格;
  2. 選擇最貼近ui設(shè)計(jì)目標(biāo)的;
  3. 與其他組件(如:按鈕)和周圍內(nèi)容最為融洽的。

文字規(guī)范原文

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

浮動(dòng)操作按鈕(FAB)表示屏幕的主要操作,原有懸浮按鈕為圓形如圖:

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

擴(kuò)展的FAB容器的寬度可以是固定的或流體的。

  1. 固定寬度的容器由圖標(biāo),文本標(biāo)簽和填充的累積寬度定義。
  2. 流體寬度容器由其與屏幕上的其他內(nèi)容(例如屏幕寬度或布局網(wǎng)格)的關(guān)系定義。

此固定的擴(kuò)展FAB寬度由圖標(biāo),文本標(biāo)簽和容器填充的累積寬度定義。

此擴(kuò)展FAB的容器寬度由布局網(wǎng)格列定義。

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

七、更新布局密度

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

1. 密度原則

  • 可瀏覽:高密度控制的用戶界面改善了對(duì)大量?jī)?nèi)容的瀏覽和交互。
  • 優(yōu)先:密集的UI元素通過(guò)減少操作之間的空間來(lái)幫助用戶集中精力。
  • 可用性:通過(guò)搞密度控制可以在單個(gè)屏幕上顯示更多內(nèi)容和操作。

2. 何時(shí)應(yīng)用高密度

  • 是否增加用戶界面的密度,取決于用戶如何與組件進(jìn)行交互。
  • 高密度組件使用戶更好的處理大量信息并采取行動(dòng)。在設(shè)計(jì)列表、表單和長(zhǎng)表格時(shí)可使用密度增加的組件。

  1. 默認(rèn)密度,48dp行高 ;
  2. 高密度,32dp行高。

  1. 默認(rèn)密度,56dp文本字段高度 ;
  2. 高密度,44dp文本字段高度。

將密度始終應(yīng)用于組件以及組件中嵌套的任何元素。

  1. 默認(rèn)密度,40dp行高和36dp動(dòng)作高度 ;
  2. 高密度,32dp行高,24dp動(dòng)作高度。

3. 何時(shí)不應(yīng)用高密度

(1)不要將高密度應(yīng)用于涉及集中任務(wù)的組件,例如:與下拉菜單或選擇器的交互方式。增加這些組件的密度會(huì)降低它們的可用性。

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

(2)不要將密度應(yīng)用于提醒用戶更改的組件,例如:彈窗或?qū)υ捒?,?duì)警報(bào)應(yīng)用高密度會(huì)降低他們發(fā)出注意力的能力。

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

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

 

本文由@瀟瀟 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖作者提供

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. Material Design還是非常漂亮的,可是國(guó)內(nèi)貌似沒(méi)人用

    來(lái)自北京 回復(fù)