2014-3-18 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.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. 雙面版選擇器
雙面板列表是一種將列表區(qū)分為兩個(gè)區(qū)域的一種設(shè)計(jì)模式,用戶可以自由在第一個(gè)面上選擇項(xiàng)目,第二個(gè)面版上會顯示面板一選擇的項(xiàng)目內(nèi)容。
優(yōu)點(diǎn)
缺點(diǎn)
設(shè)計(jì)要點(diǎn)
會使用一個(gè)基本的列表顯示內(nèi)容,當(dāng)用戶點(diǎn)選某個(gè)項(xiàng)目時(shí),會使用新的畫面顯示內(nèi)容,新的畫面會取代列表畫面。
優(yōu)點(diǎn)
缺點(diǎn)
設(shè)計(jì)要點(diǎn)
列表會在原地展開/收起,用來顯示該項(xiàng)目的詳細(xì)信息。
優(yōu)點(diǎn)
缺點(diǎn)
設(shè)計(jì)要點(diǎn)
將列表是用網(wǎng)格縮圖的方式呈現(xiàn),讓用戶可以使用視覺圖片的方式瀏覽內(nèi)容。
優(yōu)點(diǎn)
缺點(diǎn)
設(shè)計(jì)要點(diǎn)
將一組項(xiàng)目使用水平弧線或水平排列的呈現(xiàn)方式,允許使用者向左或向右檢視內(nèi)容,通常當(dāng)前(中間)的項(xiàng)目會較大顯示。
優(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ū)分出來。利用色塊的方式將列表轉(zhuǎn)換成合理的視覺對象(完形心理學(xué) – 封閉性)
優(yōu)點(diǎn)
設(shè)計(jì)要點(diǎn)
列表使用字母的方式進(jìn)行排列,在列表上使用英文字母的方式作為列表的滾動條,通常在電話簿、字典、音樂等列表上會看到這種模式。
使用情境
用戶不曉得項(xiàng)目的完整名稱,但了解項(xiàng)目的開頭字母,可以使用此模式進(jìn)行快速定位。
設(shè)計(jì)要點(diǎn)
面對大量的列表數(shù)據(jù)時(shí),將列表使用分頁的方式切成多個(gè)頁面閱讀,一次閱讀一頁。
優(yōu)點(diǎn)
缺點(diǎn)
設(shè)計(jì)要點(diǎn)
關(guān)于分頁顯示與無限滾軸兩個(gè)模式,會在之后的文章中進(jìn)行詳細(xì)的分析與比較
使用多層的列表呈現(xiàn)內(nèi)容,用來表顯出內(nèi)容與內(nèi)容之間的階層關(guān)系。
優(yōu)點(diǎn)
缺點(diǎn)
設(shè)計(jì)要點(diǎn)
允許在列表結(jié)構(gòu)中,展開出樹狀的階層結(jié)構(gòu)關(guān)系,此模式與分層列表不同,樹狀清單能夠一次展示多個(gè)項(xiàng)目里頭的階層關(guān)系。
優(yōu)點(diǎn)
缺點(diǎn)
設(shè)計(jì)要點(diǎn)
一種快速且直覺的方式新增 / 修改列表內(nèi)容。
依照你的使用的情境,使用適當(dāng)?shù)膶?yīng)列表呈現(xiàn)方式
「從列表中選擇某個(gè)項(xiàng)目,該如何顯示該項(xiàng)目的細(xì)節(jié)信息?」
「該如何呈現(xiàn)一份具有視覺元素的列表」
「如何管理一份長清單」
「如何整理具有階層、分類的清單」
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com