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