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

一、卡片（Cards） 

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

原則 

1、涵蓋

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

2、獨(dú)立

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

3、個(gè)體

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

布局

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

1.容器

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

2.縮略圖（可選）

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

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

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

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

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

5.媒介（可選）

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

6.支持文本（可選）

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

7.按鈕（可選）

卡片可以包括操作按鈕。

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

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

操作

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

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

2、展開卡片以顯示信息

二、紙片（Chips)

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

用法

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

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

原則

1、緊湊

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

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

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

3、集中

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

類型

1、輸入型

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

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

2、選擇型

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

選擇某個(gè)紙片則會(huì)自動(dòng)取消選擇該組中的其他紙片。

3、篩選型

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

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

4、操作型

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

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

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

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

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

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

作者：宛蘇