列表是界面中最基礎也最關鍵的組件之一。本文系統梳理列表在概覽、逐項瀏覽、搜尋、篩選、編輯等五大典型情境下的應用，並深度拆解 11 種經典列表設計模式的優缺點、適用場景與關鍵設計要點，助你精準選型。

列表的五大核心使用情境

• 概覽：大量信息的整體呈現
• 逐項瀏覽：如 Facebook 動態流，用戶逐條或隨機閱讀
• 搜尋：如 Google 結果頁，用戶在列表中尋找目標
• 分類與過濾：按屬性（檔案大小、名稱等）組織內容
• 項目管理：整理、新增、刪除、分類，需多選、拖拽等輔助交互

十一種經典列表設計模式

1. 雙面板選擇器

將列表分為左右兩區：左側選項，右側即時顯示詳情。

• 優點：操作高效，無需來回切換；降低記憶與認知負荷，無需記住位置或學習返回。
• 缺點：需較大屏幕支撐。
• 設計要點：左側選中態必須清晰可見。

2. 單窗口深入

基礎列表點擊後，新頁面覆蓋原列表顯示詳情。

• 優點：用戶可專注處理詳情。
• 缺點：整體效率低（頻繁進出）；無法並行處理多項信息。
• 設計要點：詳情頁必須有明確返回按鈕；返回時恢復列表原狀態（滾動位置、篩選條件等）。

3. 清單嵌板

列表項原地展開/收起顯示詳情，同屏可見多個展開項。

• 優點：便於多項對比；詳情與列表同屏，閱讀連貫。
• 缺點：易與鄰項混淆；詳情過長導致定位困難。
• 設計要點：展開/收起狀態視覺區分明確；建議「圖標 + 文字」隱喻（如 +/- 或 ▼/▶）。

4. 縮圖分格

以網格縮圖呈現，利用視覺圖像瀏覽。

• 優點：圖像辨識度高、區分快；同屏瀏覽詳情。
• 缺點：易單調（可放大推薦項）；依賴文字搜尋時不適用（需頻繁跳轉視線）。
• 設計要點：注意縮圖比例與分辨率；無圖項目提供預設佔位圖。

5. 旋轉木馬

項目沿水平弧線或排列，左右滑動查看，中央項目放大突出。

• 優點：利用 Z 軸空間省屏幕；聚焦中央內容。
• 缺點：單屏承載信息量少；非中央項目展示不全。
• 設計要點：項目多時提供 Scrollbar 或前後按鈕；區別於 Slider（單項輪播），Carousel 承載多項。

6. 斑馬列表

隔行異色背景，利用完形心理學「封閉性」強化行視覺單元。

• 優點：降低視覺搜尋與認知時間。
• 設計要點：緊湊列表中效果最佳。

7. 字母標記滾動條

按字母排序，滾動條呈 A-Z 字母，拖動快速定位（通訊錄、字典、音樂列表常見）。

• 適用場景：用戶知首字母、不知全名時快速定位。
• 設計要點：支援拖拽操作；滾動條高亮當前字母。

8. 頁碼標籤（分頁）

大量數據分頁載入，單頁瀏覽。

• 優點：用戶可記憶頁碼位置；分批載入減少流量與等待。
• 缺點：體驗不連貫，需反覆點擊翻頁。
• 設計要點：允許用戶自定每頁條數；顯示總頁數；放大上下頁按鈕點擊區域。

9. 分層清單

多層列表呈現層級關係，可同時瀏覽多層級。

• 優點：高效且視覺可見度極佳，一眼掌握信息架構。
• 缺點：小屏操作困難；不適合扁平簡單架構。
• 設計要點：高亮標示當前選中層級關係。

10. 樹狀清單

列表項內部可展開樹狀層級，區別於分層列表，可同時展開多支分支。

• 優點：高效、視覺清晰，適合複雜層級數據。