卡片

卡片是包含一組特定數(shù)據(jù)集的紙片，數(shù)據(jù)集含有各種相關(guān)信息，例如，關(guān)于單一主題的照片，文本，和鏈接?？ㄆǔＪ峭ㄍ敿?xì)復(fù)雜信息的入口?？ㄆ泄潭ǖ膶挾群涂勺兊母叨?。最大高度限制于可適應(yīng)平臺(tái)上單一視圖的內(nèi)容，但如果需要它可以臨時(shí)擴(kuò)展（例如，顯示評(píng)論欄）。卡片不會(huì)翻轉(zhuǎn)以展示其背后的信息。

用途

卡片是用來(lái)顯示由不同種類對(duì)象組成的內(nèi)容的便捷途徑。它們也適用于展示尺寸或操作相當(dāng)不同的相似對(duì)象，像帶有不同長(zhǎng)度標(biāo)題的照片。

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

卡片集是卡片的一個(gè)平面布局。

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="" />

這些卡片每張包含一組特定數(shù)據(jù)集：帶操作的確認(rèn)表，帶操作的筆記，帶照片的筆記。

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

顯示這些內(nèi)容時(shí)使用卡片布局：

• 作為一個(gè)集合，由多種數(shù)據(jù)類型組成（例如，卡片集包含照片，電影，文本，圖像）
• 不要求直接比較（用戶不直接與圖像或字符串比較）
• 包含可變長(zhǎng)度內(nèi)容，例如評(píng)論
• 由富內(nèi)容或互動(dòng)操作組成，例如+1按鈕，滑塊，或評(píng)論
• 如果使用列表需要顯示超過(guò)三行文本
• 如果使用網(wǎng)格列表需要顯示更多文本來(lái)補(bǔ)充圖像

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="" />

(上圖)可取

可快速掃描的列表，用來(lái)代替卡片，是表現(xiàn)沒(méi)有許多操作的同類內(nèi)容的合適方法。

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

(上圖)不可取

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

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

(上圖)可取

網(wǎng)格瓷磚是表現(xiàn)圖片庫(kù)的干凈輕量的方法。

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

(上圖)不可取

卡片在圖片庫(kù)中沒(méi)有必要（同類內(nèi)容）。

卡片布局準(zhǔn)則

字體設(shè)計(jì)

正文：14 sp 或 16 sp

標(biāo)題：24 sp 或更大

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

移動(dòng)設(shè)備上的卡片間距

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

卡片間留白：8 dp

內(nèi)容留白

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="" />

內(nèi)容

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

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="" />

放置主要內(nèi)容在卡片頂部。使用層級(jí)結(jié)構(gòu)來(lái)引導(dǎo)用戶注意到卡片上最重要的信息。

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="" />

操作

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

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

追加操作

卡片的追加操作通過(guò)圖標(biāo)，文本，和UI控制準(zhǔn)確地呼出，這些通常放置在卡片底部。

放置在主要內(nèi)容中的行內(nèi)UI控制可以調(diào)整主要內(nèi)容的外觀，例如，滑塊來(lái)選擇日期，星星來(lái)給內(nèi)容評(píng)分，或者分段的按鈕來(lái)選擇日期范圍。

除彈出菜單外，限制追加操作在兩項(xiàng)。

彈出菜單

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

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

注意事項(xiàng)

強(qiáng)烈不推薦文本內(nèi)容的行內(nèi)鏈接。

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

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="" />

表現(xiàn)

手勢(shì)

支持單張卡片基準(zhǔn)上的滑動(dòng)手勢(shì)?？ㄆ謩?shì)表現(xiàn)應(yīng)該始終在卡片組中實(shí)現(xiàn)。

按住并拖動(dòng)手勢(shì)可行。然而，考慮對(duì)用戶能夠在集合中排序卡片是否重要，或者如果按要求篩選/排序內(nèi)容可以提供更好的體驗(yàn)。

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

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

滾動(dòng)

卡片集只會(huì)豎直滾動(dòng)。超過(guò)最大卡片高度的卡片內(nèi)容將被截?cái)嗲也豢蓾L動(dòng)。

帶截?cái)鄡?nèi)容的卡片可以擴(kuò)展，這樣卡片高度可以超過(guò)視圖的最大值。這種情況下，卡片將與卡片集一起滾動(dòng)。

卡片焦點(diǎn)

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

原文：Cards 翻譯：ThatMrL 校對(duì)：xianglifei