六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

不同情境的列表設(shè)計(jì)

2014-3-18    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.wnxcall.com  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,   請點(diǎn)這里

藍(lán)藍(lán)設(shè)計(jì)將分析列表在各種情境的界面設(shè)計(jì)方法,以及需要注意的事項(xiàng)。

列表常見的使用情境

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

模式1. 雙面版選擇器

雙面板列表是一種將列表區(qū)分為兩個(gè)區(qū)域的一種設(shè)計(jì)模式,用戶可以自由在第一個(gè)面上選擇項(xiàng)目,第二個(gè)面版上會顯示面板一選擇的項(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)目

1

 


2

 


3

 

2. 單窗口深入

會使用一個(gè)基本的列表顯示內(nèi)容,當(dāng)用戶點(diǎn)選某個(gè)項(xiàng)目時(shí),會使用新的畫面顯示內(nèi)容,新的畫面會取代列表畫面。

優(yōu)點(diǎn)

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

缺點(diǎn)

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

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

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

4 5

 

3. 清單嵌板

列表會在原地展開/收起,用來顯示該項(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 搭配文字的方式隱喻

6 7

 

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è)縮圖

8

 


9

 


10

 


11

 

5. 旋轉(zhuǎn)木馬

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

優(yōu)點(diǎn)

  • 因?yàn)槭褂玫娇臻g z 軸,可以省下更多的空間
  • 能夠讓使用者把注意力放在正中央的內(nèi)容上

缺點(diǎn)

  • 無法一次呈現(xiàn)較多的信息
  • 相較于中央信息,其他信息無法完整的展示

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

  • 如果要用來展時(shí)較多的項(xiàng)目時(shí),可以使用 Scrollbar 或前后的按鈕來設(shè)計(jì)
  • 旋轉(zhuǎn)木馬與 Slider 非常相似,旋轉(zhuǎn)木馬用來一次多個(gè)項(xiàng)目。

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

12

 

6. 斑馬列表

使用兩種不同的色彩作為列表項(xiàng)目的背景,使項(xiàng)目容易被區(qū)分出來。利用色塊的方式將列表轉(zhuǎn)換成合理的視覺對象(完形心理學(xué) – 封閉性)

優(yōu)點(diǎn)

  • 用戶可以輕易辨識列表項(xiàng)目,減少認(rèn)知與視覺搜尋的時(shí)間

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

  • 在列表較為緊密的情況下使用這個(gè)設(shè)計(jì)方式

13

 

7. 字母標(biāo)記滾動條

列表使用字母的方式進(jìn)行排列,在列表上使用英文字母的方式作為列表的滾動條,通常在電話簿、字典、音樂等列表上會看到這種模式。

使用情境

用戶不曉得項(xiàng)目的完整名稱,但了解項(xiàng)目的開頭字母,可以使用此模式進(jìn)行快速定位。

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

  • 讓字母滾動條支持拖移的操作方式
  • 在滾動條上高亮顯示目前列表位置對應(yīng)的字母

14

 


15

 

8. 頁碼標(biāo)簽

面對大量的列表數(shù)據(jù)時(shí),將列表使用分頁的方式切成多個(gè)頁面閱讀,一次閱讀一頁。

優(yōu)點(diǎn)

  • 用戶能夠記憶項(xiàng)目的頁次,對于了解信息的位置、事后的尋找有很好的幫助
  • 一次只加載一些數(shù)據(jù),減少流量及加載的等候時(shí)間

缺點(diǎn)

  • 體驗(yàn)不順暢,瀏覽完一些信息又必須重新點(diǎn)擊頁碼加載新的內(nèi)容

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

  • 必要時(shí)讓用戶可以決定每頁的項(xiàng)目數(shù)量大小
  • 可以的話,顯示總共的頁次,讓用戶能稍微了解共有多少信息
  • 除了頁碼外,使用較大的按鈕或鏈接顯示上下頁按鈕

關(guān)于分頁顯示與無限滾軸兩個(gè)模式,會在之后的文章中進(jìn)行詳細(xì)的分析與比較

0000

 


16

 

9. 分層清單

使用多層的列表呈現(xiàn)內(nèi)容,用來表顯出內(nèi)容與內(nèi)容之間的階層關(guān)系。

優(yōu)點(diǎn)

  • 且具有極佳的視覺可視性,能夠一眼看出整體信息架構(gòu)
  • 能夠同時(shí)瀏覽與處理多個(gè)階層的內(nèi)容

缺點(diǎn)

  • 較小屏幕時(shí),此模式不容易操作
  • 不適合使用在簡單清楚的信息架構(gòu)中

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

  • 務(wù)必清楚的高亮標(biāo)示當(dāng)前所選擇的階層關(guān)系

17

 

10. 樹狀清單

允許在列表結(jié)構(gòu)中,展開出樹狀的階層結(jié)構(gòu)關(guān)系,此模式與分層列表不同,樹狀清單能夠一次展示多個(gè)項(xiàng)目里頭的階層關(guān)系。

優(yōu)點(diǎn)

  • 且具有極佳的視覺可視性,能夠一眼看出整體信息架構(gòu)
  • 能夠同時(shí)瀏覽與處理多個(gè)樹狀階層的內(nèi)容

缺點(diǎn)

  • 某階層內(nèi)容特多時(shí),此模式不容易操作
  • 不適合使用在簡單清楚的信息架構(gòu)中

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

  • 階層與階層間可以使用間距從視覺上表示彼此間的關(guān)系
  • 務(wù)必清楚的顯示展開 / 收和的狀態(tài)

18

 

11. 可編輯的列表

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

19

 

不同情境下的解決方案

選擇適合的解決方案

依照你的使用的情境,使用適當(dāng)?shù)膶?yīng)列表呈現(xiàn)方式

「從列表中選擇某個(gè)項(xiàng)目,該如何顯示該項(xiàng)目的細(xì)節(jié)信息?」

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

「該如何呈現(xiàn)一份具有視覺元素的列表」

  • 縮圖分格
  • 旋轉(zhuǎn)木馬

「如何管理一份長清單」

  • 頁碼標(biāo)簽
  • 無限清單
  • 無限清單變化版
  • 字母標(biāo)記滾動條
  • 搜尋

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

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

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔