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

一、卡片（Cards） 

卡片包含有關單個主題的內容和操作。 

原則 

1、涵蓋

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

2、獨立

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

3、個體

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

布局

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

1.容器

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

2.縮略圖（可選）

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

3.標題文字（可選）

標題文本可以是相冊或文章名稱等內容。

4.子標題（可選）

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

5.媒介（可選）

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

6.支持文本（可選）

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

7.按鈕（可選）

卡片可以包括操作按鈕。

8.圖標（可選）

卡片可以包括操作圖標。

操作

卡片可以轉換為顯示其他內容。

1、展開以完成層級之間轉換填充整個屏幕

2、展開卡片以顯示信息

二、紙片（Chips)

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

用法

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

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

原則

1、緊湊

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

2、關聯(lián)

芯片應該與它們所代表的內容或任務，有明確而有用的關系。

3、集中

芯片應該使任務更容易完成，或者內容更容易排序。

類型

1、輸入型

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

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

2、選擇型

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

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

3、篩選型

篩選型紙片代表選項集合的過濾器。

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

4、操作型

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

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

Material Design視覺設計語言概述（一）

Material Design視覺設計語言概述（二）

Material Design視覺設計語言概述（三）

Material Design視覺設計語言概述（四）

作者：宛蘇