中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

列表常見的使用情境

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

列表的設計模式

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. 可編輯的列表

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

選擇適合的解決方案

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

“從清單中選擇某個項目，該如何顯示該項目的細節資訊？”

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

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

• 縮圖分格
• 旋轉木馬

“如何管理一份長清單”

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

“如何整理具有階層、分類的清單”

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

參考資料
操作介面設計模式（2e）
行動介面設計模式
UI-Patterns