卡片

卡片是包含一組特定數據集的紙片，數據集含有各種相關信息，例如，關于單一主題的照片，文本，和鏈接?？ㄆǔＪ峭ㄍ敿殢碗s信息的入口?？ㄆ泄潭ǖ膶挾群涂勺兊母叨?。最大高度限制于可適應平臺上單一視圖的內容，但如果需要它可以臨時擴展（例如，顯示評論欄）?？ㄆ粫D以展示其背后的信息。

用途

卡片是用來顯示由不同種類對象組成的內容的便捷途徑。它們也適用于展示尺寸或操作相當不同的相似對象，像帶有不同長度標題的照片。

注意：即使外觀相近，Now 卡片是卡片的一個帶有唯一表現和格式要求的獨特子集。 ?? http://wiki.jikexueyuan.com/project/material-design/images/components-cards-usage-card_single_large_mdpi.png" alt="" />

卡片集是卡片的一個平面布局。

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-usage-card_travel_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-content-card_books_large_mdpi.png" alt="" />

這些卡片每張包含一組特定數據集：帶操作的確認表，帶操作的筆記，帶照片的筆記。

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-content-card_notes_large_mdpi.png" alt="" />

顯示這些內容時使用卡片布局：

• 作為一個集合，由多種數據類型組成（例如，卡片集包含照片，電影，文本，圖像）
• 不要求直接比較（用戶不直接與圖像或字符串比較）
• 包含可變長度內容，例如評論
• 由富內容或互動操作組成，例如+1按鈕，滑塊，或評論
• 如果使用列表需要顯示超過三行文本
• 如果使用網格列表需要顯示更多文本來補充圖像

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-usage-cardvstilea_large_mdpi.png" alt="" />

(上圖)可取

1. 卡片帶圓角。
2. 卡片帶多種操作。
3. 卡片可以忽略和重排。

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-usage-cardvstileb_large_mdpi.png" alt="" />

(上圖)不可取

這是瓷磚，不是卡片。

1. 瓷磚帶直角。
2. 瓷磚少于兩種操作。

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-usage-card_noa_large_mdpi.png" alt="" />

(上圖)可取

可快速掃描的列表，用來代替卡片，是表現沒有許多操作的同類內容的合適方法。

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-usage-card_nob_large_mdpi.png" alt="" />

(上圖)不可取

這里卡片的使用分散了用戶注意力，不能快速掃描。這些列表項也不能忽略，所以把它們放在不同的卡片上是難以理解的。

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-usage-card_no2a_large_mdpi.png" alt="" />

(上圖)可取

網格瓷磚是表現圖片庫的干凈輕量的方法。

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-usage-card_no2b_large_mdpi.png" alt="" />

(上圖)不可取

卡片在圖片庫中沒有必要（同類內容）。

卡片布局準則

字體設計

正文：14 sp 或 16 sp

標題：24 sp 或更大

扁平按鈕：Roboto Medium, 14 sp, 10 sp 字間距

移動設備上的卡片間距

屏幕邊界與卡片間留白：8 dp

卡片間留白：8 dp

內容留白

16 dp

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-usage-cards_guidelines_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-11_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-13_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-15_large_mdpi.png" alt="" />

內容

卡片內容類型和數量可以很大程度上根據傳遞的內容變化?？ㄆ峁┥舷挛募巴ㄍ鼜碗s信息與視圖的入口；確保不要濫用帶有無用信息或操作的卡片。

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-content-card_books_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-content-card_discover_large_mdpi.png" alt="" />

放置主要內容在卡片頂部。使用層級結構來引導用戶注意到卡片上最重要的信息。

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-usage-card_travel_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-cards-content-card_notes_large_mdpi.png" alt="" />

操作

卡片中的主要操作通常是卡片本身。

追加操作可以在一組卡片間根據內容類型和期望結果變化，例如，播放電影和打開書籍。一組卡片中，始終有定位操作。

追加操作

卡片的追加操作通過圖標，文本，和UI控制準確地呼出，這些通常放置在卡片底部。

放置在主要內容中的行內UI控制可以調整主要內容的外觀，例如，滑塊來選擇日期，星星來給內容評分，或者分段的按鈕來選擇日期范圍。

除彈出菜單外，限制追加操作在兩項。

彈出菜單

彈出菜單（可選）通常放置在卡片的右上角，但它也可以放置在右下方，如果這樣安排改善內容布局和易讀性。

注意不要濫用帶過多操作的彈出菜單。

注意事項

強烈不推薦文本內容的行內鏈接。

盡管卡片可以提供多種操作，UI控制，和彈出菜單，謹慎使用并且記得卡片是通往更復雜詳細信息的入口。

http://wiki.jikexueyuan.com/project/material-design/images\components-cards-actions-card_actionsa_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images\components-cards-actions-card_actionsb_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images\components-cards-actions-card_actionsc_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images\components-cards-actions-card_actionsd_large_mdpi.png" alt="" />

表現

手勢

支持單張卡片基準上的滑動手勢?？ㄆ謩荼憩F應該始終在卡片組中實現。

按住并拖動手勢可行。然而，考慮對用戶能夠在集合中排序卡片是否重要，或者如果按要求篩選/排序內容可以提供更好的體驗。

卡片集篩選，排序，和重組

卡片集可以按要求排序或按日期，文件大小，字母表順序，或其他參數篩選。集合中的第一項定位于集合的左上角，其余的從左至右從上至下延續(xù)。

滾動

卡片集只會豎直滾動。超過最大卡片高度的卡片內容將被截斷且不可滾動。

帶截斷內容的卡片可以擴展，這樣卡片高度可以超過視圖的最大值。這種情況下，卡片將與卡片集一起滾動。

卡片焦點

對于取決于連續(xù)焦點遍歷用于導航的界面（方向鍵，鍵盤），單張卡片應該僅有基本操作或打開一個帶基本和可用追加操作的新視圖。

原文：Cards 翻譯：ThatMrL 校對：xianglifei