轉載藍藍設計( www.devb.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
來源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
藍藍設計將分析列表在各種情境的界面設計方法，以及需要注意的事項。
列表常見的使用情境
- 概觀：瀏覽較多的的信息時，列表可以提供一種概觀性的的方式來呈現內容。
- 逐一瀏覽項目：用戶可能逐一或隨機的的閱讀信息，就像是 Facebook 動態信息。
- 搜尋：用戶可能在列表上尋找他們想要的信息，就像是 Google 搜尋結果。
- 分類與過濾：用戶可能正在分類信息或者使用一些方式（檔案大小、名稱）過濾內容。
- 項目的整理、新增、刪除與分類：用戶正在整理信息，此時很有可能需要多選、搬移的輔助功能。
模式1. 雙面版選擇器
雙面板列表是一種將列表區分為兩個區域的一種設計模式，用戶可以自由在第一個面上選擇項目，第二個面版上會顯示面板一選擇的項目內容。
優點
- 操作非常的有效率，不需要來來回回的在不同列表切換。
- 減少用戶記憶與認知的負擔，使用者不必了解內容在列表上的位置，也不需要學習如何返回列表。
缺點
設計要點
2. 單窗口深入
會使用一個基本的列表顯示內容，當用戶點選某個項目時，會使用新的畫面顯示內容，新的畫面會取代列表畫面。
優點
缺點
- 整體效率較低，需要不斷的進入、離開
- 無法一次處理多個信息
設計要點
- 因為整個畫面都被新的畫面取代，請確保在詳細頁面中有清楚的返回按鈕，小心用戶迷失方向了
- 返回列表時，請務必恢復到前一個的狀態
3. 清單嵌板
列表會在原地展開/收起，用來顯示該項目的詳細信息。
優點
- 能夠同時看到多個展開的內容信息，方便比較。
- 因為詳細內容與列表呈現在同一個畫面，能輕松的閱讀信息
缺點
- 容易與上下項目容易搞混
- 詳細內容太多的時候，不容易操作與定位（scrolling）
設計要點
- 務必將展開/收起狀態設計的清楚
- 使用圖標 +/v 搭配文字的方式隱喻
4. 縮圖分格
將列表是用網格縮圖的方式呈現，讓用戶可以使用視覺圖片的方式瀏覽內容。
優點
- 圖像比文字還容易辨識，而且更容易的區分。
- 因為詳細內容與列表呈現在同一個畫面，能輕松的閱讀信息
缺點
- 容易單調乏味，也許可以把較推薦的內容放大展示
- 依賴文字來尋找的內容，不適合使用，因為使用者必須不斷跳躍瀏覽（相較于垂直列表）
設計要點
- 注意圖片縮放后的比例與分辨率
- 避免沒有圖片的項目，可以在適當的時候給予預設縮圖
5. 旋轉木馬
將一組項目使用水平弧線或水平排列的呈現方式，允許使用者向左或向右檢視內容，通常當前（中間）的項目會較大顯示。
優點
- 因為使用到空間 z 軸，可以省下更多的空間
- 能夠讓使用者把注意力放在正中央的內容上
缺點
- 無法一次呈現較多的信息
- 相較于中央信息，其他信息無法完整的展示
設計要點
- 如果要用來展時較多的項目時，可以使用 Scrollbar 或前后的按鈕來設計
- 旋轉木馬與 Slider 非常相似，旋轉木馬用來一次多個項目。
Safari 在 Mac OSX 10.9 之前時也使用這樣的方式展示 Top Sites，在 10.9 版后改用縮圖列表的方式
6. 斑馬列表
使用兩種不同的色彩作為列表項目的背景，使項目容易被區分出來。利用色塊的方式將列表轉換成合理的視覺對象（完形心理學 – 封閉性）
優點
- 用戶可以輕易辨識列表項目，減少認知與視覺搜尋的時間
設計要點
7. 字母標記滾動條
列表使用字母的方式進行排列，在列表上使用英文字母的方式作為列表的滾動條，通常在電話簿、字典、音樂等列表上會看到這種模式。
使用情境
用戶不曉得項目的完整名稱，但了解項目的開頭字母，可以使用此模式進行快速定位。
設計要點
- 讓字母滾動條支持拖移的操作方式
- 在滾動條上高亮顯示目前列表位置對應的字母
8. 頁碼標簽
面對大量的列表數據時，將列表使用分頁的方式切成多個頁面閱讀，一次閱讀一頁。
優點
- 用戶能夠記憶項目的頁次，對于了解信息的位置、事后的尋找有很好的幫助
- 一次只加載一些數據，減少流量及加載的等候時間
缺點
- 體驗不順暢，瀏覽完一些信息又必須重新點擊頁碼加載新的內容
設計要點
- 必要時讓用戶可以決定每頁的項目數量大小
- 可以的話，顯示總共的頁次，讓用戶能稍微了解共有多少信息
- 除了頁碼外，使用較大的按鈕或鏈接顯示上下頁按鈕
關于分頁顯示與無限滾軸兩個模式，會在之后的文章中進行詳細的分析與比較
9. 分層清單
使用多層的列表呈現內容，用來表顯出內容與內容之間的階層關系。
優點
- 且具有極佳的視覺可視性，能夠一眼看出整體信息架構
- 能夠同時瀏覽與處理多個階層的內容
缺點
- 較小屏幕時，此模式不容易操作
- 不適合使用在簡單清楚的信息架構中
設計要點
10. 樹狀清單
允許在列表結構中，展開出樹狀的階層結構關系，此模式與分層列表不同，樹狀清單能夠一次展示多個項目里頭的階層關系。
優點
- 且具有極佳的視覺可視性，能夠一眼看出整體信息架構
- 能夠同時瀏覽與處理多個樹狀階層的內容
缺點
- 某階層內容特多時，此模式不容易操作
- 不適合使用在簡單清楚的信息架構中
設計要點
- 階層與階層間可以使用間距從視覺上表示彼此間的關系
- 務必清楚的顯示展開 / 收和的狀態
11. 可編輯的列表
一種快速且直覺的方式新增 / 修改列表內容。
不同情境下的解決方案
選擇適合的解決方案
依照你的使用的情境，使用適當的對應列表呈現方式
「從列表中選擇某個項目，該如何顯示該項目的細節信息？」
「該如何呈現一份具有視覺元素的列表」
「如何管理一份長清單」
- 頁碼標簽
- 無限清單
- 無限清單變化版
- 字母標記滾動條
- 搜尋
「如何整理具有階層、分類的清單」
