Material Design（原質(zhì)化設(shè)計）是谷歌開發(fā)的一種視覺設(shè)計語言，它遵循了優(yōu)秀設(shè)計的經(jīng)典原則，同時還結(jié)合了創(chuàng)新理念和新技術(shù)。

一、卡片（Cards） 

卡片包含有關(guān)單個主題的內(nèi)容和操作。 

原則 

1、涵蓋

一張卡片可以被看作為一個單獨(dú)的包含單元。

2、獨(dú)立

一張卡片可以在上下文中獨(dú)立，而不依賴周圍的元素。

3、個體

一張卡片不能與另一張卡片合并，也不能分成多張卡片。

布局

卡片容器是卡片中唯一必需的元素。下圖顯示的所有其他元素都是可選的。布局可因內(nèi)容而變。

1.容器

卡片容器容納所有卡片上的元素，它們的大小由這些元素占據(jù)的空間決定。

2.縮略圖（可選）

卡片可以包含縮略圖以顯示虛擬人物、標(biāo)記或圖標(biāo)。

3.標(biāo)題文字（可選）

標(biāo)題文本可以是相冊或文章名稱等內(nèi)容。

4.子標(biāo)題（可選）

子標(biāo)題文本可以是文本元素，例如文章署名或標(biāo)記位置。

5.媒介（可選）

卡片可以包括各種媒介，如照片和圖形，例如天氣圖標(biāo)。

6.支持文本（可選）

支持文本可以是文章摘要或餐廳描述等文本。

7.按鈕（可選）

卡片可以包括操作按鈕。

8.圖標(biāo)（可選）

卡片可以包括操作圖標(biāo)。

操作

卡片可以轉(zhuǎn)換為顯示其他內(nèi)容。

1、展開以完成層級之間轉(zhuǎn)換填充整個屏幕

2、展開卡片以顯示信息

二、紙片（Chips)

紙片是表示輸入、屬性或操作的緊湊元素。

用法

紙片允許用戶輸入信息、進(jìn)行選擇、過濾內(nèi)容和觸發(fā)操作。

紙片應(yīng)該作為一組多個交互元素動態(tài)顯示。與按鈕不同的是，按鈕應(yīng)該是一致的、熟悉的動作調(diào)用，用戶希望在相同的常規(guī)區(qū)域中顯示為相同的動作。

原則

1、緊湊

紙片是代表離散信息的緊湊組件。

2、關(guān)聯(lián)

芯片應(yīng)該與它們所代表的內(nèi)容或任務(wù)，有明確而有用的關(guān)系。

3、集中

芯片應(yīng)該使任務(wù)更容易完成，或者內(nèi)容更容易排序。

類型

1、輸入型

輸入型紙片表示在字段中使用的信息，例如實(shí)體或不同的屬性。

輸入型紙片可根據(jù)用戶的輸入變換文本。

2、選擇型

在包含至少兩個選項(xiàng)的集合中，選擇紙片代表單個選擇。

選擇某個紙片則會自動取消選擇該組中的其他紙片。

3、篩選型

篩選型紙片代表選項(xiàng)集合的過濾器。

當(dāng)用戶開始選擇紙片時，篩選型紙片建議可以動態(tài)變化。

4、操作型

操作型紙片觸發(fā)與主要內(nèi)容相關(guān)的動作。

點(diǎn)擊操作型紙片會觸發(fā)上下文操作。

Material Design視覺設(shè)計語言概述（一）

Material Design視覺設(shè)計語言概述（二）

Material Design視覺設(shè)計語言概述（三）

Material Design視覺設(shè)計語言概述（四）

作者：宛蘇