清單

清單是一種視覺化呈現方式,可用於一或多個相關項目。通常用於顯示一組選項。

清單封面

資源

類型 連結 狀態
設計 設計來源 (Figma) 可使用
實作 Jetpack Compose 可使用

重點特色

  • 清單是連續的文字或圖像集合。
  • 清單應讓使用者感覺自然,且易於瀏覽。
  • 清單由項目組成,這些項目包含主要和輔助動作,並以圖示和文字表示。

版本

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

清單剖析

  1. 單行清單:單行清單可用於傳達每個項目。這項簡單的設計可確保每個項目都與其他項目清楚區隔。
  2. 兩行清單:使用兩個平行線來顯示每個項目。這種結構化設計可確保自然可讀性,並避免認知超載。
  3. 三行清單:使用三條平行線代表每個項目。這種裝飾設計可營造出極高的視覺效果。

圖解

清單剖析

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

狀態

列出狀態

規格

可列出規格

清單高度建議

清單間距

用量

清單是垂直排列的文字和圖片群組。清單是為了提升閱讀理解能力而最佳化,由單一連續的項目欄所組成。清單項目可包含主要和輔助動作,並以圖示和文字表示。

清單項目並非按鈕。項目沒有容器。根據預設,清單項目不會選取或聚焦。
請只在必要時為清單項目使用容器背景。

選取控制項

控管清單項目的顯示資訊和動作。可對齊清單項目的前端或尾端。

選取核取方塊

選取圓形按鈕

選取開關

  1. 核取方塊:選取一或多個清單項目。
  2. 圓形按鈕:在清單中選取單一項目。
  3. 切換鈕:切換控制項的開啟或關閉狀態。
使用圖示選取指標,清楚顯示清單中的所選項目。這有助於使用者輕鬆辨識所選項目,並改善整體使用者體驗。
請勿只依靠背景顏色來指出清單中的選取項目。
請勿在清單項目中放置按鈕,否則使用者可能會混淆,不知道目前焦點在哪個元素上。

圖示

如果清單中顯示的是相同類型的內容,請省略圖示,以減少視覺干擾並改善使用者體驗。避免在清單中使用圖示,除非圖示有用途,且可提供額外資訊。
避免在清單中的所有項目中使用相同的圖示。這可能會讓使用者感到視覺疲勞和困惑。請只在圖示可提供額外資訊或價值時使用。

顯示圖片和圖片

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

顯示圖片和圖片