當(dāng)前位置: 首頁 > 設(shè)計資訊 > 設(shè)計教程 > 正文

11種不同情境的列表設(shè)計

2018-01-19 1700 0
16
本文將分析列表在各種情境的設(shè)計方法,以及需要注意的事項。 列表常見的使用情境
  1. 概觀:瀏覽較多的的信息時,列表可以提供一種概觀性的的方式來呈現(xiàn)內(nèi)容。
  2. 逐一瀏覽項目:用戶可能逐一或隨機(jī)的的閱讀信息,就像是 Facebook 動態(tài)信息。
  3. 搜尋:用戶可能在列表上尋找他們想要的信息,就像是 Google 搜尋結(jié)果。
  4. 分類與過濾:用戶可能正在分類信息或者使用一些方式(檔案大小、名稱)過濾內(nèi)容。
  5. 項目的整理、新增、刪除與分類:用戶正在整理信息,此時很有可能需要多選、搬移的輔助功能。
十一種列表設(shè)計模式
1. 雙面版選擇器 雙面板列表是一種將列表區(qū)分為兩個區(qū)域的一種設(shè)計模式,用戶可以自由在第一個面上選擇項目,第二個面版上會顯示面板一選擇的項目內(nèi)容。 優(yōu)點(diǎn)
  • 操作非常的有效率,不需要來來回回的在不同列表切換。
  • 減少用戶記憶與認(rèn)知的負(fù)擔(dān),使用者不必了解內(nèi)容在列表上的位置,也不需要學(xué)習(xí)如何返回列表。
缺點(diǎn)
  • 需要比較大的屏幕時才能支持。
設(shè)計要點(diǎn)
  • 請務(wù)必清楚的標(biāo)示在面板一被選取的項目
1   2   3  
2. 單窗口深入 會使用一個基本的列表顯示內(nèi)容,當(dāng)用戶點(diǎn)選某個項目時,會使用新的畫面顯示內(nèi)容,新的畫面會取代列表畫面。 優(yōu)點(diǎn)
  • 用戶可以專心的處理詳細(xì)信息。
缺點(diǎn)
  • 整體效率較低,需要不斷的進(jìn)入、離開
  • 無法一次處理多個信息
設(shè)計要點(diǎn)
  • 因?yàn)檎麄€畫面都被新的畫面取代,請確保在詳細(xì)頁面中有清楚的返回按鈕,小心用戶迷失方向了
  • 返回列表時,請務(wù)必恢復(fù)到前一個的狀態(tài)
4 5  
3. 清單嵌板 列表會在原地展開/收起,用來顯示該項目的詳細(xì)信息。 優(yōu)點(diǎn)
  • 能夠同時看到多個展開的內(nèi)容信息,方便比較。
  • 因?yàn)樵敿?xì)內(nèi)容與列表呈現(xiàn)在同一個畫面,能輕松的閱讀信息
缺點(diǎn)
  • 容易與上下項目容易搞混
  • 詳細(xì)內(nèi)容太多的時候,不容易操作與定位(scrolling)
設(shè)計要點(diǎn)
  • 務(wù)必將展開/收起狀態(tài)設(shè)計的清楚
  • 使用圖標(biāo) +/v 搭配文字的方式隱喻
6 7  
4. 縮圖分格 將列表是用網(wǎng)格縮圖的方式呈現(xiàn),讓用戶可以使用視覺圖片的方式瀏覽內(nèi)容。 優(yōu)點(diǎn)
  • 圖像比文字還容易辨識,而且更容易的區(qū)分。
  • 因?yàn)樵敿?xì)內(nèi)容與列表呈現(xiàn)在同一個畫面,能輕松的閱讀信息
缺點(diǎn)
  • 容易單調(diào)乏味,也許可以把較推薦的內(nèi)容放大展示
  • 依賴文字來尋找的內(nèi)容,不適合使用,因?yàn)槭褂谜弑仨毑粩嗵S瀏覽(相較于垂直列表)
設(shè)計要點(diǎn)
  • 注意圖片縮放后的比例與分辨率
  • 避免沒有圖片的項目,可以在適當(dāng)?shù)臅r候給予預(yù)設(shè)縮圖
8   9   10   11  


14
評論區(qū)(0)
正在加載評論...