淺談列表設計:11 種不同情境的列表設計大全




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

列表常見的使用情境

  1. 概觀:瀏覽較多的的資訊時,列表可以提供一種概觀性的的方式來呈現內容。
  2. 逐一瀏覽項目:使用者可能逐一或隨機的的閱讀資訊,就像是 Facebook 動態資訊。
  3. 搜尋:使用者可能在清單上尋找他們想要的資訊,就像是 Google 搜尋結果。
  4. 分類與過濾:使用者可能正在分類資訊或者使用一些方式(檔案大小、名稱)過濾內容。
  5. 項目的整理、新增、刪除與分類:使用者正在整理資訊,此時很有可能需要多選、搬移的輔助功能。

 

十一種列表設計模式

列表的設計模式

1. 雙面版選擇器

雙面板列表是一種將列表區分為兩個區域的一種設計模式,使用者可以自由在第一個面上選擇項目,第二個面版上會顯示面板一選擇的項目內容。

優點

  • 操作非常的有效率,不需要來來回回的在不同列表切換。
  • 減少使用者記憶與認知的負擔,使用者不必了解內容在列表上的位置,也不需要學習如何返回列表。

缺點

  • 需要比較大的螢幕時才能支持。

設計要點

  • 請務必清楚的標示在面板一被選取的項目

list-design-1

list-design-2

list-design-3

 

2. 單視窗深入

會使用一個基本的列表顯示內容,當使用者點選某個項目時,會使用新的畫面顯示內容,新的畫面會取代列表畫面。

優點

  • 使用者可以專心的處理詳細資訊

缺點

  • 整體效率較低,需要不斷的進入、離開
  • 無法一次處理多個資訊

設計要點

  • 因為整個畫面都被新的畫面取代,請確保在詳細頁面中有清楚的返回按鈕,小心使用者迷失方向了
  • 返回列表時,請務必恢復到前一個的狀態

 

list-design-5

list-design-4

 

3. 清單嵌板

列表會在原地展開/收起,用來顯示該項目的詳細資訊。

優點

  • 能夠同時看到多個展開的內容資訊,方便比較。
  • 因為詳細內容與列表呈現在同一個畫面,能輕鬆的閱讀資訊

缺點

  • 容易與上下項目容易搞混
  • 詳細內容太多的時候,不容易操作與定位(scrolling)

設計要點

  • 務必將展開/收起狀態設計的清楚
  • 使用圖示 +/v 搭配文字的方式隱喻

 

list-design-6

list-design-7

 

4. 縮圖分格

將列表是用網格縮圖的方式呈現,讓使用者可以使用視覺圖片的方式瀏覽內容。

優點

  • 圖像比文字還容易辨識,而且更容易的區分。
  • 因為詳細內容與列表呈現在同一個畫面,能輕鬆的閱讀資訊

缺點

  • 容易單調乏味,也許可以把較推薦的內容放大展示
  • 依賴文字來尋找的內容,不適合使用,因為使用者必須不斷跳躍瀏覽(相較於垂直列表)

設計要點

  • 注意圖片縮放後的比例與解析度
  • 避免沒有圖片的項目,可以在適當的時候給予預設縮圖。

 

list-design-11

list-design-10

list-design-9

list-design-8

 

5. 旋轉木馬

將一組項目使用水平弧線或水平排列的呈現方式,允許使用者向左或向右檢視內容,通常當前(中間)的項目會較大顯示。

優點

  • 因為使用到空間 z 軸,可以省下更多的空間
  • 能夠讓使用者把注意力放在正中央的內容上

缺點

  • 無法一次呈現較多的資訊
  • 相較於中央資訊,其他資訊無法完整的展示

設計要點

  • 如果要用來展時較多的項目時,可以使用 Scrollbar 或前後的按鈕來設計
  • 旋轉木馬與 Slider 非常相似,旋轉木馬用來一次多個項目。

Safari 在 Mac OSX 10.9 之前時也使用這樣的方式展示 Top Sites,在 10.9 版後改用縮圖列表的方式

list-design-12

 

6. 斑馬列表

使用兩種不同的色彩作為列表項目的背景,使項目容易被區分出來。利用色塊的方式將列表轉換成合理的視覺物件(完形心理學 – 封閉性)

優點

  • 使用者可以輕易辨識列表項目,減少認知與視覺搜尋的時間

設計要點

  • 在列表較為緊密的情況下使用這個設計方式

 

list-design-13

 

7. 字母標記捲軸

列表使用字母的方式進行排列,在列表上使用英文字母的方式作為列表的捲軸,通常在電話簿、字典、音樂等列表上會看到這種模式。

使用情境

使用者不曉得項目的完整名稱,但了解項目的開頭字母,可以使用此模式進行快速定位。

設計要點

  • 讓字母捲軸支援拖移的操作方式
  • 在捲軸上高亮顯示目前列表位置對應的字母

 

list-design-14

list-design-15

 

8. 頁碼標籤

面對大量的列表資料時,將列表使用分頁的方式切成多個頁面閱讀,一次閱讀一頁。

優點

  • 使用者能夠記憶項目的頁次,對於了解資訊的位置、事後的尋找有很好的幫助
  • 一次只載入一些資料,減少流量及載入的等候時間

缺點

  • 體驗不順暢,瀏覽完一些資訊又必須重新點擊頁碼載入新的內容

設計要點

  • 必要時讓使用者可以決定每頁的項目數量大小
  • 可以的話,顯示總共的頁次,讓使用者能稍微了解共有多少資訊
  • 除了頁碼外,使用較大的按鈕或連結顯示上下頁按鈕

關於分頁顯示與無限滾軸兩個模式,會在之後的文章中進行詳細的分析與比較

list-design-16

list-design-17

 

9. 分層清單

使用多層的列表呈現內容,用來表顯出內容與內容之間的階層關係。

優點

  • 高效且具有極佳的視覺可視性,能夠一眼看出整體資訊架構
  • 能夠同時瀏覽與處理多個階層的內容

缺點

  • 較小螢幕時,此模式不容易操作
  • 不適合使用在簡單清楚的資訊架構中

設計要點

  • 務必清楚的高亮標示當前所選擇的階層關係

 

list-design-18

 

10. 樹狀清單

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

優點

  • 高效且具有極佳的視覺可視性,能夠一眼看出整體資訊架構
  • 能夠同時瀏覽與處理多個樹狀階層的內容

缺點

  • 某階層內容特多時,此模式不容易操作
  • 不適合使用在簡單清楚的資訊架構中

設計要點

  • 階層與階層間可以使用間距從視覺上表示彼此間的關係
  • 務必清楚的顯示展開 / 收和的狀態

 

list-design-19

 

11. 可編輯的列表

一種快速且直覺的方式新增 / 修改列表內容。

list-design-20

 

不同情境下的解決方案

選擇適合的解決方案

依照你的使用的情境,使用適當的對應列表呈現方式

「從清單中選擇某個項目,該如何顯示該項目的細節資訊?」

  • 雙面版選擇器
  • 清單嵌板
  • 單視窗深入

「該如何呈現一份具有視覺元素的清單」

  • 縮圖分格
  • 旋轉木馬

「如何管理一份長清單」

  • 頁碼標籤
  • 無限清單
  • 無限清單變化版
  • 字母標記捲軸
  • 搜尋

「如何整理具有階層、分類的清單」

  • 清單嵌板
  • 分層清單
  • 樹狀清單

 


參考資料

本文著作權由 幹誌 及作者 奧革士的隨筆記錄 共同擁有(商業登記公司網站請勿任意轉載
著作在非商業使用條件下係採創用 CC「姓名標示-非商業性-禁止改做 3.0 台灣版」授權條款釋出。

About The Author

奧革士的隨筆記錄

目前是一位 Design / Developer ,熱愛使用者經驗研究及設計,喜歡把將平常所見以及所得加上一些自己的經驗與想法與大家分享。

支持作者

喜歡這篇文章請給作者一個讚
 加入幹誌!