11種不同情境的列表設計

 

　　本文將分析列表在各種情境的設計方法，以及需要注意的事項。

　　列表常見的使用情境

　　概觀：浏覽較多的的信息時，列表可以提供一種概觀性的的方式來呈現內容。

　　逐一浏覽項目：用戶可能逐一或隨機的的閱讀信息，就像是 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. 樹狀清單

　　允許在列表結構中，展開出樹狀的階層結構關系，此模式與分層列表不同，樹狀清單能夠一次展示多個項目裡頭的階層關系。

　　優點

　　高效且具有極佳的視覺