Cards 卡片

這是一個翻譯系列，原文是谷歌18年所出的材料設計指南（文末有鏈接），強大的材料設計將帶我們一起深入了解UI設計中的所有規范。每周會更新數篇，一共百余篇，歡迎關注哦。

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

目錄

1. 用法
2. 剖析
3. 行為
4. 操作
5. 卡片集
6. 主題化
7. 規格

用法

卡片是展示單個主題的內容和操作的界面。

他們應該易于瀏覽相關的和可操作的信息。其中的諸如文本和圖像等元素應明確指示出層次結構。

原則

剖析

容器是卡片中唯一必需的元素。所有其他元素都是可選的。

卡片布局可以有所不同，以支持它們包含的內容類型。常見以下元素。

1. 容器
   卡片容器容納所有卡片元素，它們的大小由這些元素占據的空間決定。卡片海拔高度即容器高度。
2. 縮略圖[可選]
   卡片可以包含縮略圖以顯示頭像、logo或圖標。
3. 標題文字[可選]
   標題文字可以包括諸如相冊或文章的名稱之類的內容。
4. 子標題[可選]
   子標題文本可以包括文本元素，例如文章署名或標記位置。
5. 媒體[可選]
   卡片可以包括各種媒體，包括照片和圖形，例如天氣圖標。
6. 輔助文本[可選]
   支持文本包括文章摘要或餐館描述等文本。
7. 按鈕[可選]
   卡片可以包括操作按鈕。
8. 圖標[可選]
   卡片可以包括操作的圖標。

每張卡都由內容塊組成。所有塊，作為一個整體，與單個主題或目的頁面相關。內容可以根據其層次結構級別獲得不同級別的強調。

卡片包含富媒體，首要標題，支持文本和操作。

分隔線

分隔線可用于分隔卡片中的區域或指示可以擴展的卡片區域。

使用內嵌式分隔線（1），長度沒有卡片那么寬的，來分隔相關內容。

可擴展的內容應該使用全寬（全出血）分隔線。

行為

轉換

卡片可以轉換為顯示更多內容。

卡片使用父-子轉換來填充整個屏幕。

展開卡片以顯示信息。

卡片不會翻轉來顯示信息。

海拔高度

在移動設備上，卡片的默認高度為1dp，升高后高度為8dp。

陰影有助于表明這是卡片。

在桌面和移動設備上，卡片可以具有0dp的靜止高度。它們在懸停時升至8dp。

0dp的邊框有助于表明這是卡片。

手勢

手勢應該在卡片集中保持相對一致。卡片上經常使用的手勢包括滑動、拾取和移動以及滾動。

滑動

在卡片的任何位置，一次可以用一種手勢來滑動單張卡片。

它可以用于：

1. 關閉卡片
2. 更改卡片的狀態（例如標記或存檔）

一張卡片只能配有一個滑動動作。

卡片不應包含可滑動的內容（例如圖像輪播或分頁）。 滑動手勢也不應導致卡片內容塊在滑動時分離。

拾起并移動

拾取和移動手勢允許用戶移動和重新排列集合中的卡片。

移動卡片時，請增加其海拔高度。

不要將卡片移到其他卡片后面。

不要讓卡片將其他元素撞開。拾取卡片時，它會顯示在所有元素的前面（應用欄和導航除外）。

滾動

高于最大卡片高度的卡片內容會被截斷并且不會滾動，但可以通過擴展卡片的高度來顯示它。卡片可以擴展到超出屏幕的最大高度，在這種情況下，卡片在屏幕內滾動。

在移動設備上，卡片可以擴展以顯示更多內容，并在屏幕內滾動。卡內的內容不會滾動。

在移動設備上，卡片內部內容無法滾動，因為它可能會導致顯示兩個滾動條。

在桌面端，卡片內容可以在卡片中擴展和滾動。

操作

首要操作

卡片的主要操作區域通常就是卡片本身。通常，卡片是某個主題的細節頁面中一個大觸摸目標。

卡片的操作區域包含富媒體和輔助文本。

補充操作

補充操作由卡片上的圖標，文本和UI控件表示。它們通常放在卡片的底部。

對于兩個以上的補充操作，請使用溢出菜單。

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

溢出菜單

溢出菜單包含相關操作。它們通常放在卡片的右上角或右下角。

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

UI控件

UI控件可以包含在卡中，以允許用戶與卡片的內容進行交互。UI控件可以是滑塊、評價內容的星標、紙片或按鈕。

此卡片包含用于評分內容的星標。

此卡片在操作區域內包含選擇紙片。

此卡片在操作區域內包含滑塊控件。

其他操作

卡片可以支持多種操作，例如UI控件和溢出菜單。因為卡片是更詳細信息的入口點，因此它們的操作數量應有所限制。

謹慎使用

卡片是更繁雜的信息的入口。小心不要使信息或操作量過載。

焦點

當遍歷卡片上的焦點時，訪問每個聚焦元素，然后移動到下一張卡片。

對于僅使用焦點框（使用方向鍵和鍵盤）導航的用戶，卡片或有一項主要操作，或打開包含主要和補充操作的新頁面。

卡片上焦點的移動

卡片集

用法

當存在多張卡片時，它們被組合在一起成為一個或多個集合。默認情況下，集合中的卡片是共面的，除非拾取或拖動它們，否則有相同的靜止海拔。

布局

把卡片組織成集合，以方便使用。如何布置卡片會影響它們的感知方式。

將卡片添加到集合時，第一個項目會自動定位在左上角。后續卡片從左到右，從上到下排列。

可瀏覽

要使一組卡片易于瀏覽，請將它們放在一致的模式中。

可瀏覽的卡片

儀表板

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

儀表板式的卡片集

可區分

要突出顯示每張卡片的個性，風格或新穎性，請使用帶有不對稱網格的卡片集。

非對稱網格中的卡片

容器內的集合

卡片集可以放在容器中，并在其中滾動。

卡片集可以在容器內水平滾動。

集合的容器不應該是卡片，容器的整個表面區域是不能交互的。

過濾和排序

可以通過各種方式過濾卡片集，包括按日期或字母順序。 如果可以過濾集合，則過濾器必須應用于集合中的每個卡片。

過濾器或排序選項應放在卡片集之外。

主題化

Owl材料主題

這款教育app的卡片已使用材料主題進行了定制。 定制領域包括顏色、排版和形狀。

Owl的自定義卡片

顏色

Owl的卡片在三個元素上使用了自定義顏色：容器、文本和圖標。

文本

Owl卡片的標題、數字和類型文本使用了自定義排版。

形狀

Owl的卡片使用自定義的容器形狀。

Reply素材主題

此電子郵件app的卡片使用了材料主題自定義。定制領域包括顏色、排版和形狀。

Reply的自定義卡片

顏色

Reply卡片在六個元素上使用了自定義顏色：容器、元數據文本、標題文本、正文文本、圖標和圖標填充。

文本

Reply的卡片標題、正文和元數據文本使用了自定義排版。

形狀

Reply卡片使用自定義容器形狀。

規格

本節并不是詳盡無遺的規范。卡片沒有單一的布局，排版或圖像尺寸。所有卡片的設計都應滿足其所呈現內容的需求。此章節顯示了各種卡片布局，以幫助展示其多樣性。

有海拔的卡片

線框卡片

原文地址：Material Design

譯者：珠珠

轉載請注明：學UI網 » Cards 卡片