亚洲国产精品久久精品成人_国产步兵社区视频在线观看_国产不卡免费视频_午夜私人影院免费体验区

列表常見的使用情境

1. 概觀
   瀏覽較多的的資訊時(shí)，列表可以提供一種概觀性的的方式來呈現(xiàn)內(nèi)容。

2. 逐一瀏覽項(xiàng)目
   使用者可能逐一或隨機(jī)的的閱讀資訊，就像是Facebook動態(tài)資訊。

3. 搜尋
   使用者可能在清單上尋找他們想要的資訊，就像是Google搜尋結(jié)果。

4. 分類與過濾
   使用者可能正在分類資訊或者使用一些方式（檔案大小、名稱）過濾內(nèi)容。

5. 項(xiàng)目的整理、新增、刪除與分類
   使用者正在整理資訊，此時(shí)很有可能需要多選、搬移的輔助功能。

列表的設(shè)計(jì)模式

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)

• 需要比較大的螢?zāi)粫r(shí)才能支持。

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

請務(wù)必清楚的標(biāo)示在面板一被選取的項(xiàng)目

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)

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ì)的清楚

• 使用圖示+/v搭配文字的方式隱喻

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

5. 旋轉(zhuǎn)木馬

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

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

• 因?yàn)槭褂玫娇臻gz軸，可以省下更多的空間

• 能夠讓使用者把注意力放在正中央的內(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版后改用縮圖列表的方式

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ì)方式

7. 字母標(biāo)記卷軸

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

使用情境

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

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

• 讓字母卷軸支援拖移的操作方式

• 在卷軸上高亮顯示目前列表位置對應(yīng)的字母

8. 頁碼標(biāo)簽

面對大量的列表資料時(shí)，將列表使用分頁的方式切成多個(gè)頁面閱讀，一次閱讀一頁。

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

• 使用者能夠記憶項(xiàng)目的頁次，對于瞭解資訊的位置、事后的尋找有很好的幫助

• 一次只載入一些資料，減少流量及載入的等候時(shí)間

缺點(diǎn)

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

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

• 必要時(shí)讓使用者可以決定每頁的項(xiàng)目數(shù)量大小

• 可以的話，顯示總共的頁次，讓使用者能稍微瞭解共有多少資訊

• 除了頁碼外，使用較大的按鈕或連結(jié)顯示上下頁按鈕

關(guān)注我們：在查找公眾號中搜索：zomsky1688，或者掃描下方二維碼快速關(guān)注。

本文來自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天
關(guān)鍵詞：廣州網(wǎng)站建設(shè),廣州網(wǎng)頁設(shè)計(jì),廣州網(wǎng)站設(shè)計(jì),廣州網(wǎng)站建設(shè)公司