2014-3-18 藍(lán)藍(lán)設(shè)計的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計( www.sdgs6788.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
來源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
藍(lán)藍(lán)設(shè)計將分析列表在各種情境的界面設(shè)計方法，以及需要注意的事項(xiàng)。
列表常見的使用情境
模式1. 雙面版選擇器
雙面板列表是一種將列表區(qū)分為兩個區(qū)域的一種設(shè)計模式，用戶可以自由在第一個面上選擇項(xiàng)目，第二個面版上會顯示面板一選擇的項(xiàng)目內(nèi)容。
優(yōu)點(diǎn)
缺點(diǎn)
設(shè)計要點(diǎn)
會使用一個基本的列表顯示內(nèi)容，當(dāng)用戶點(diǎn)選某個項(xiàng)目時，會使用新的畫面顯示內(nèi)容，新的畫面會取代列表畫面。
優(yōu)點(diǎn)
缺點(diǎn)
設(shè)計要點(diǎn)
列表會在原地展開/收起，用來顯示該項(xiàng)目的詳細(xì)信息。
優(yōu)點(diǎn)
缺點(diǎn)
設(shè)計要點(diǎn)
將列表是用網(wǎng)格縮圖的方式呈現(xiàn)，讓用戶可以使用視覺圖片的方式瀏覽內(nèi)容。
優(yōu)點(diǎn)
缺點(diǎn)
設(shè)計要點(diǎn)
將一組項(xiàng)目使用水平弧線或水平排列的呈現(xiàn)方式，允許使用者向左或向右檢視內(nèi)容，通常當(dāng)前（中間）的項(xiàng)目會較大顯示。
優(yōu)點(diǎn)
缺點(diǎn)
設(shè)計要點(diǎn)
Safari 在 Mac OSX 10.9 之前時也使用這樣的方式展示 Top Sites，在 10.9 版后改用縮圖列表的方式
使用兩種不同的色彩作為列表項(xiàng)目的背景，使項(xiàng)目容易被區(qū)分出來。利用色塊的方式將列表轉(zhuǎn)換成合理的視覺對象（完形心理學(xué) – 封閉性）
優(yōu)點(diǎn)
設(shè)計要點(diǎn)
列表使用字母的方式進(jìn)行排列，在列表上使用英文字母的方式作為列表的滾動條，通常在電話簿、字典、音樂等列表上會看到這種模式。
使用情境
用戶不曉得項(xiàng)目的完整名稱，但了解項(xiàng)目的開頭字母，可以使用此模式進(jìn)行快速定位。
設(shè)計要點(diǎn)
面對大量的列表數(shù)據(jù)時，將列表使用分頁的方式切成多個頁面閱讀，一次閱讀一頁。
優(yōu)點(diǎn)
缺點(diǎn)
設(shè)計要點(diǎn)
關(guān)于分頁顯示與無限滾軸兩個模式，會在之后的文章中進(jìn)行詳細(xì)的分析與比較
使用多層的列表呈現(xiàn)內(nèi)容，用來表顯出內(nèi)容與內(nèi)容之間的階層關(guān)系。
優(yōu)點(diǎn)
缺點(diǎn)
設(shè)計要點(diǎn)
允許在列表結(jié)構(gòu)中，展開出樹狀的階層結(jié)構(gòu)關(guān)系，此模式與分層列表不同，樹狀清單能夠一次展示多個項(xiàng)目里頭的階層關(guān)系。
優(yōu)點(diǎn)
缺點(diǎn)
設(shè)計要點(diǎn)
一種快速且直覺的方式新增 / 修改列表內(nèi)容。
依照你的使用的情境，使用適當(dāng)?shù)膶?yīng)列表呈現(xiàn)方式
「從列表中選擇某個項(xiàng)目，該如何顯示該項(xiàng)目的細(xì)節(jié)信息？」
「該如何呈現(xiàn)一份具有視覺元素的列表」
「如何管理一份長清單」
「如何整理具有階層、分類的清單」
藍(lán)藍(lán)設(shè)計的小編 http://www.sdgs6788.com