2.4移動產(chǎn)品設(shè)計(jì)之列表

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

垂直列表.png

注意:

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

其他例如時(shí)間軸形式


時(shí)間軸形式.png

對話框形式


對話框形式.png

輪播面板(橫向羅列)

大圖展示型


大圖展示型.png

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


小圖展示型.png

注意:

  • 需要指示器來提示用戶,標(biāo)識屏幕外面還有內(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的二級導(dǎo)航或者多級導(dǎo)航,例如微信的發(fā)現(xiàn)界面。

作為一級導(dǎo)航時(shí)的注意點(diǎn):

  • 適合功能層級比較淺,且功能間切換不頻繁的APP

輪播導(dǎo)航(看起來比較高大上)

例如lofter的發(fā)現(xiàn)界面就是輪播導(dǎo)航的形式
特點(diǎn):隱藏其余導(dǎo)航選項(xiàng),保證頁面簡潔,讓用戶在同一時(shí)間只專注于一個目標(biāo),并且往往會配合大圖或者大背景,獲得較好的體驗(yàn)感。
不足:

  • 用戶很難跳轉(zhuǎn)到非相鄰的導(dǎo)航選項(xiàng),所以比奧適合選項(xiàng)比較少且不頻繁切換的APP中,又或者是瀏覽體驗(yàn)式的APP中

宮格導(dǎo)航

例如手機(jī)的主界面,功能更佳扁平化,可以充分利用整個界面。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容