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

垂直列表(縱向羅列多個(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è)界面。

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

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

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,733評(píng)論 25 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,037評(píng)論 4 61
  • 前言:14年8月分享在500UXC的文章,時(shí)間長即失去了它的時(shí)效性,今轉(zhuǎn)載至此。 年正如精良的設(shè)計(jì)一樣,優(yōu)秀的導(dǎo)航...
    鈷藍(lán)閱讀 2,816評(píng)論 3 15
  • 阿曽,請(qǐng)?jiān)徫业呐橙酰也桓夷畛瞿愕娜?,只得以這種方式稱呼你。今天是我結(jié)束我們友情兩年整的時(shí)間,我想你一定是恨我...
    莫島行閱讀 431評(píng)論 0 2
  • 11月25日本月第4周周六下午14:00~17:00紫瑜兒瑜伽會(huì)員開放日(會(huì)員可帶家人朋友和孩子一起參加)。 具體...
    紫瑜兒閱讀 249評(píng)論 0 0

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