垂直列表(縱向羅列多個(gè)條目)——最基本的列表形式

垂直列表.png
注意:
- 用戶的閱讀順序是從左往右,從上往下,所以垂直列表基本上都是左對(duì)齊的樣式
- 條目詳細(xì)度與頁面展示條數(shù)之間的平衡

垂直列表的基本樣式.png
其他例如時(shí)間軸形式

時(shí)間軸形式.png
對(duì)話框形式

對(duì)話框形式.png
輪播面板(橫向羅列)
大圖展示型

大圖展示型.png
小圖展示型 能夠羅列更多的展示項(xiàng)目

小圖展示型.png
注意:
- 需要指示器來提示用戶,標(biāo)識(shí)屏幕外面還有內(nèi)容
網(wǎng)格列表
網(wǎng)格列表(一般都是展示圖片或者一點(diǎn)點(diǎn)的文字說明)例如照片類的展示都是網(wǎng)格列表
網(wǎng)格列表的變種——瀑布流 常見一些圖片展示類的網(wǎng)站,例如花瓣和loft、pinerest
當(dāng)三種表格應(yīng)用到導(dǎo)航時(shí)

當(dāng)三種列表同時(shí)應(yīng)用到導(dǎo)航時(shí).png
垂直列表導(dǎo)航特色:
簡單清晰、易于理解、冷靜高效、快速定位
最常見于APP的二級(jí)導(dǎo)航或者多級(jí)導(dǎo)航,例如微信的發(fā)現(xiàn)界面。
作為一級(jí)導(dǎo)航時(shí)的注意點(diǎn):
- 適合功能層級(jí)比較淺,且功能間切換不頻繁的APP
輪播導(dǎo)航(看起來比較高大上)
例如lofter的發(fā)現(xiàn)界面就是輪播導(dǎo)航的形式
特點(diǎn):隱藏其余導(dǎo)航選項(xiàng),保證頁面簡潔,讓用戶在同一時(shí)間只專注于一個(gè)目標(biāo),并且往往會(huì)配合大圖或者大背景,獲得較好的體驗(yàn)感。
不足:
- 用戶很難跳轉(zhuǎn)到非相鄰的導(dǎo)航選項(xiàng),所以比奧適合選項(xiàng)比較少且不頻繁切換的APP中,又或者是瀏覽體驗(yàn)式的APP中
宮格導(dǎo)航
例如手機(jī)的主界面,功能更佳扁平化,可以充分利用整個(gè)界面。