本文將分析列表在各種情境的設(shè)計(jì)方法，以及需要注意的事項(xiàng)。 列表常見的使用情境

1. 概觀：瀏覽較多的的信息時(shí)，列表可以提供一種概觀性的的方式來呈現(xiàn)內(nèi)容。
2. 逐一瀏覽項(xiàng)目：用戶可能逐一或隨機(jī)的的閱讀信息，就像是 Facebook 動(dòng)態(tài)信息。
3. 搜尋：用戶可能在列表上尋找他們想要的信息，就像是 Google 搜尋結(jié)果。
4. 分類與過濾：用戶可能正在分類信息或者使用一些方式（檔案大小、名稱）過濾內(nèi)容。
5. 項(xiàng)目的整理、新增、刪除與分類：用戶正在整理信息，此時(shí)很有可能需要多選、搬移的輔助功能。

十一種列表設(shè)計(jì)模式
1. 雙面版選擇器 雙面板列表是一種將列表區(qū)分為兩個(gè)區(qū)域的一種設(shè)計(jì)模式，用戶可以自由在第一個(gè)面上選擇項(xiàng)目，第二個(gè)面版上會(huì)顯示面板一選擇的項(xiàng)目內(nèi)容。 優(yōu)點(diǎn)

• 操作非常的有效率，不需要來來回回的在不同列表切換。
• 減少用戶記憶與認(rèn)知的負(fù)擔(dān)，使用者不必了解內(nèi)容在列表上的位置，也不需要學(xué)習(xí)如何返回列表。

缺點(diǎn)

• 需要比較大的屏幕時(shí)才能支持。

設(shè)計(jì)要點(diǎn)

• 請務(wù)必清楚的標(biāo)示在面板一被選取的項(xiàng)目

     
2. 單窗口深入 會(huì)使用一個(gè)基本的列表顯示內(nèi)容，當(dāng)用戶點(diǎn)選某個(gè)項(xiàng)目時(shí)，會(huì)使用新的畫面顯示內(nèi)容，新的畫面會(huì)取代列表畫面。 優(yōu)點(diǎn)

• 用戶可以專心的處理詳細(xì)信息。

缺點(diǎn)

• 整體效率較低，需要不斷的進(jìn)入、離開
• 無法一次處理多個(gè)信息

設(shè)計(jì)要點(diǎn)

• 因?yàn)檎麄€(gè)畫面都被新的畫面取代，請確保在詳細(xì)頁面中有清楚的返回按鈕，小心用戶迷失方向了
• 返回列表時(shí)，請務(wù)必恢復(fù)到前一個(gè)的狀態(tài)

 
3. 清單嵌板 列表會(huì)在原地展開/收起，用來顯示該項(xiàng)目的詳細(xì)信息。 優(yōu)點(diǎn)

• 能夠同時(shí)看到多個(gè)展開的內(nèi)容信息，方便比較。
• 因?yàn)樵敿?xì)內(nèi)容與列表呈現(xiàn)在同一個(gè)畫面，能輕松的閱讀信息

缺點(diǎn)

• 容易與上下項(xiàng)目容易搞混
• 詳細(xì)內(nèi)容太多的時(shí)候，不容易操作與定位（scrolling）

設(shè)計(jì)要點(diǎn)

• 務(wù)必將展開/收起狀態(tài)設(shè)計(jì)的清楚
• 使用圖標(biāo) +/v 搭配文字的方式隱喻

 
4. 縮圖分格 將列表是用網(wǎng)格縮圖的方式呈現(xiàn)，讓用戶可以使用視覺圖片的方式瀏覽內(nèi)容。 優(yōu)點(diǎn)

• 圖像比文字還容易辨識，而且更容易的區(qū)分。
• 因?yàn)樵敿?xì)內(nèi)容與列表呈現(xiàn)在同一個(gè)畫面，能輕松的閱讀信息

缺點(diǎn)

• 容易單調(diào)乏味，也許可以把較推薦的內(nèi)容放大展示
• 依賴文字來尋找的內(nèi)容，不適合使用，因?yàn)槭褂谜弑仨毑粩嗵S瀏覽（相較于垂直列表）

設(shè)計(jì)要點(diǎn)

• 注意圖片縮放后的比例與分辨率
• 避免沒有圖片的項(xiàng)目，可以在適當(dāng)?shù)臅r(shí)候給予預(yù)設(shè)縮圖