#我是一個可愛的搬磚工系列# 嘗試對照英文翻譯學(xué)習(xí)MD的組件設(shè)計命贴，借此加深各種組件的應(yīng)用~

Material Design鏈接：Material Design——Cards

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

一、使用

卡片是在一個主題上顯示內(nèi)容和動作的界面。

它們應(yīng)易于瀏覽，以獲得相關(guān)和可采取操作的信息元素，如卡片上的文本和圖像以明確的結(jié)構(gòu)層次來展示。

· 包含 卡片可以識別為單個包含的單元

· 單獨 一張卡片可以單獨使用众弓，而不依賴周圍的元素作為背景

· 個體 一張卡片不能與另一卡片合并，也不能分成多張牌

二隔箍、分析

卡容器是卡中唯一必需的元素谓娃。這里顯示的所有其他元素都是可選的。

卡片布局可以不同蜒滩，以支持它們包含的內(nèi)容類型滨达。以下元素通常存在于該品種中。

1. Container 卡片容器容納所有卡片元素俯艰，它們的大小取決于這些元素占用的空間捡遍，卡片高度由容器表示。

2. Thumbnail [optional] 卡片可以包括縮略圖來顯示頭像竹握、角標或圖標画株。

3. Header text [optional] 標題文本可以包括諸如相冊或文章的名稱之類的內(nèi)容。

4. Subhead [optional] ?子標題文本可以包括文本元素啦辐，如文章字節(jié)行或標記位置谓传。

5. Media [optional] 卡片可以包括各種媒體，包括照片芹关，和圖形续挟，如天氣圖標。

6. Supporting text [optional] 支持文本包括文本充边，如文章摘要或餐館描述庸推。

7. Buttons [optional] 卡片可以包括操作按鈕常侦。

8. Icons [optional] 卡片可以包括操作按鈕浇冰。

每一張卡片都是由內(nèi)容塊組成的。所有的塊聋亡，作為一個整體肘习，都與一個單獨的主題或目的地有關(guān)。內(nèi)容可以接受不同級別的強調(diào)坡倔，這取決于其層次結(jié)構(gòu)漂佩。

卡片包含豐富的媒體脖含、主標題、支持文本和操作投蝉。

△ 分割線

分割線可用于分離卡中的區(qū)域或指示可擴展的卡的區(qū)域养葵。

使用嵌入分隔符(1)，不運行卡的完整長度的分隔符瘩缆，以分離相關(guān)內(nèi)容关拒。

可以展開的內(nèi)容應(yīng)該使用全寬度分隔符。

三庸娱、行為

△ 轉(zhuǎn)換

卡片可以變換以顯示更多內(nèi)容着绊。

卡片擴展到使用父-子轉(zhuǎn)換填充整個屏幕。

展開卡片以顯示信息熟尉。

卡片不會突然正反面翻轉(zhuǎn)來顯示信息归露。

△ 高度

在移動設(shè)備上，卡的默認高度是1DP斤儿，升高的高度是8DP剧包。

用投影來增強卡片的展示。

在桌面和手機上雇毫，卡的靜止高度可以是0 dp玄捕。他們懸停時上升到8DP。

0 dp的筆畫有助于表示一張卡片棚放。

△ 手勢

手勢應(yīng)該在卡片集合中一致地實現(xiàn)枚粘。卡上常用的手勢包括swipe, pick up and move, and scrolling（刷卡飘蚯、拾取馍迄、移動和滾動）。

· Swipe（刷卡）

一次可以在一張卡上局骤，在卡上的任何地方執(zhí)行刷卡手勢攀圈。

它可用于：

· 關(guān)閉卡片

· 更改卡片的狀態(tài)(例如標記或存檔)

同一時間內(nèi)，對一張卡片只操作一個刷卡動作峦甩。

卡片不應(yīng)包含像banner那樣的翻頁內(nèi)容(如圖像傳送帶或分頁)赘来。

刷卡手勢也不應(yīng)導(dǎo)致部分卡片與整體分離。

· Pick up and move（拾取凯傲、移動）

拾取和移動手勢允許用戶在多張卡片中移動和重新選擇卡片犬辰。

當(dāng)移動卡片時，增加它的高度（適當(dāng)加投影）冰单。

別把卡片移到其他卡片后面幌缝。

不要讓卡片把其他元素擋開。當(dāng)一張卡片被拿起時诫欠，它會出現(xiàn)在所有元素的前面(除了應(yīng)用程序欄和導(dǎo)航)涵卵。

· Scrolling（滾動）

高于最大卡高的卡內(nèi)容被截斷浴栽，不滾動，但可以通過擴展卡的高度來顯示轿偎〉浼Γ卡可以擴展到屏幕的最大高度，在這種情況下坏晦，卡在屏幕內(nèi)滾動椿每。

Right：在手機上，卡片可以擴展到顯示更多的內(nèi)容英遭，在屏幕上滾動间护，卡片中的內(nèi)容不會滾動；Wrong：在手機上挖诸，卡不能內(nèi)部滾動汁尺，因為它可能導(dǎo)致兩個滾動條被顯示。

在桌面上多律，卡片內(nèi)容可以在卡片中展開和滾動痴突。

四、操作

· 直接操作

卡片的主要動作區(qū)域通常是卡片本身狼荞，通常辽装，卡片用來展示屏幕內(nèi)容下，其中一個主題詳情相味。

卡片底部的補充文本和操作

· 補充操作

溢出菜單包含相關(guān)操作拾积。它們通常放置在卡的右上角或右下角。

溢出菜單通常位于卡的右上角或右下角丰涉。

UI控件

UI控件可以包含在卡中拓巧，以允許用戶與卡的內(nèi)容進行交互。UI控件的形式可以是滑塊一死、對內(nèi)容進行分級的星號肛度、選項卡或按鈕。

此卡包含可對內(nèi)容進行評分的星號投慈。

此卡在操作區(qū)域內(nèi)包含選擇選項卡承耿。

· 附加操作

卡片可以支持多個操作，例如UI控件和溢出菜單伪煤。因為卡片是獲取更詳細信息的切入點加袋，所以它們應(yīng)該包含有限數(shù)量的操作。

Caution：卡片提供更可靠信息的入口带族。小心不要用多余的信息或行動過載卡片锁荔。

△ 焦點

當(dāng)遍歷卡上的焦點時蟀给，在移動到下一張卡之前訪問每個焦點元素蝙砌。

對于僅使用焦點遍歷(使用D-pad和鍵盤)導(dǎo)航的用戶阳堕，卡片應(yīng)該有主操作或打開包含主操作和補充操作的新屏幕。

卡片的對焦遍歷

五择克、卡片收藏

△ 用法

當(dāng)多張卡片出現(xiàn)時恬总，它們被組合成一個或多個集合。默認情況下肚邢，集合中的卡片是共面的壹堰，除非被拾起或拖動，否則它們有相同的靜止高度骡湖。

△ 布局

組織卡片收集贱纠，使其易于使用。它們的布局影響著人們對它們的感知响蕴。

將卡片添加到集合時谆焊，第一項將自動定位在左上角。隨后的卡片從左到右浦夷，從上到下排列辖试。

· 可掃描的

若要使一組卡片可掃描，請將它們放置在一致的模式中劈狐。

Scannable cards

· 儀表盤

若要在屏幕上顯示多個主題和功能罐孝，請使用儀表板式卡片集合。

儀表板式卡片收集

· 區(qū)別

要突出每張卡的個性肥缔、風(fēng)格或新穎性莲兢，請使用帶有非對稱網(wǎng)格的卡片集合。

非對稱網(wǎng)格中的卡片

△ 包含收藏

卡集合可以放在容器中续膳，并在容器內(nèi)滾動怒见。

Right：卡集合可以在容器內(nèi)水平滾動；Wrong：收集的容器不應(yīng)該是卡片姑宽，容器的整個表面不應(yīng)該是交互式的遣耍。

△ 篩選和排序

卡片收集可以通過多種方式進行篩選，包括按日期或字母順序篩選炮车。如果可以篩選集合舵变，則篩選器必須應(yīng)用于集合中的每一張卡。

篩選或排序選項應(yīng)放置在卡片收集之外瘦穆。

END.THANKS FOR YOUR READING~

如有不當(dāng)纪隙，還請多多指教~