清單

清單會以視覺化方式呈現一或多個相關項目。 這些函式通常用於顯示多個選項。

清單封面

資源

類型 連結 狀態
設計 設計來源 (Figma) 可用
導入作業 Jetpack Compose 即將推出

重點特色

  • 清單是指一系列的文字或圖片。
  • 清單應保持自然,方便使用者瀏覽。
  • 清單由包含主要動作和補充動作的項目組成,以圖示和文字表示。

變化版本

清單分為三種類型:單行清單、兩行清單和三行清單。

清單剖析

  1. 單行清單:以單一行傳達每個項目。這個簡單的設計可確保每個項目之間有清楚的差異。
  2. 兩行清單:使用兩行平行傳達每個項目。這種結構化設計可確保自然的可讀性,並避免認知過載。
  3. 三行清單:使用三行並用三行來代表每個項目。 這種裝飾設計可營造出強烈的視覺顯著性。

圖解

清單剖析

  1. 圖示:代表特定物件或動作的小型圖形,通常用來以視覺方式傳達概念或概念。
  2. 上行:標題或副標題上方顯示的一小段文字,通常用於提供額外的背景資訊或強調。
  3. 標題:文字為粗體的大型文字行,做為設計元素或頁面的主要標題。
  4. 副標題:這是位於主要標題下方的一行文字,提供額外資訊或背景資訊。
  5. 控制項:可讓使用者輸入決定的互動元素。

狀態

列出狀態

規格

清單規格

清單高度建議

清單間距

適用情境

清單是一組垂直組織的文字和圖片。已針對閱讀理解進行最佳化,清單中含有單一連續欄的項目。清單項目可以包含以圖示和文字表示的主要和補充動作。

清單項目不是按鈕。項目沒有容器。清單項目預設為未選取且未聚焦。
只在必要時,才為清單項目使用容器背景。

選取控制項

控制清單項目的顯示資訊和動作。它們可以對齊清單項目的前方或結尾邊緣。

選項核取方塊 選項電台 選取切換按鈕
  1. 核取方塊:選取一或多個清單項目。
  2. 圓形按鈕:在清單中選取一個項目。
  3. 切換鈕:開啟或關閉控制項。
使用圖示選取指標,清楚顯示清單中選取的項目。這有助於使用者輕鬆識別所選商品,並改善整體使用者體驗。
請避免只依賴背景顏色來指出清單中的選項。
避免將按鈕放在清單項目中,否則可能會讓使用者對目前所在的元素感到困惑。

圖示

如果您要在清單中顯示相同類型的內容,請省略圖示來減少視覺幹擾,並改善使用者體驗。如果圖示不具目的,且未提供其他資訊,請避免在清單中使用圖示。
避免為清單中的所有項目使用相同的圖示。這可能會令人眼花撩亂,並造成使用者混淆。建議只在圖示能夠增添價值或提供額外資訊時,才使用圖示。

顯示圖片和圖片

清單項目可以包含以圓形裁剪表示的圖片,用來代表人物或實體。

顯示圖片與圖片