設(shè)計模式
一钠龙、標(biāo)簽導(dǎo)航(微信)
標(biāo)簽導(dǎo)航位于頁面底部口渔,標(biāo)簽的分類最好可以控制在5個以內(nèi)
優(yōu)點:清楚當(dāng)前所在的入口位置、輕松在各入口間頻繁跳轉(zhuǎn)且不會迷失方向蒿涎、直接展現(xiàn)最重要入口的內(nèi)容信息
缺點:功能入口過多時哀托,該模式顯得笨重不適用
二、舵式導(dǎo)航(微博劳秋,底部有【+】標(biāo)簽)
中間用特別的標(biāo)簽仓手,兩邊是其他操作按鈕
優(yōu)點:需要突出重要且頻繁操作的入口
缺點:同標(biāo)簽導(dǎo)航
三、抽屜式導(dǎo)航(知乎)
將菜單隱藏在當(dāng)前頁面后玻淑,點擊入口即可像拉抽屜一樣拉出菜單
優(yōu)點:節(jié)省頁面展示空間嗽冒、讓用戶注意力聚焦到當(dāng)前頁面、擴展性好
缺點:入口太深补履,不適合頻繁切換的應(yīng)用
四添坊、宮格導(dǎo)航(美圖秀秀)
將入口全部聚合在頁面,讓用戶做出選擇箫锤,適合各頁面之間切換不頻繁的應(yīng)用
優(yōu)點:直觀展現(xiàn)各項內(nèi)容贬蛙、方便瀏覽經(jīng)常更新的內(nèi)容
缺點:無法完成入口間的跳轉(zhuǎn)、不能直接展現(xiàn)入口內(nèi)容谚攒、不能顯示太多入口次級內(nèi)容
五阳准、組合導(dǎo)航
用戶需要聚焦內(nèi)容,同時又需要一些快捷入口能夠連接到某頁面時就可以采用組合導(dǎo)航
優(yōu)點:布局靈活五鲫,能適應(yīng)架構(gòu)的快速調(diào)整
缺點:不規(guī)則容易有雜亂感
六溺职、列表導(dǎo)航(微信發(fā)現(xiàn))
優(yōu)點:層次展示清晰、可展示內(nèi)容較長的標(biāo)題、可展示標(biāo)題的次級內(nèi)容
缺點:同級過多時產(chǎn)生疲勞浪耘、排版靈活性不高乱灵、只能通過排序、顏色來區(qū)分各入口重要程度
七七冲、Tab導(dǎo)航(indicate menu)
本質(zhì)和標(biāo)簽導(dǎo)航相同痛倚,層級較多的情況下,可以采用tab導(dǎo)航澜躺,典型場景是用于改變當(dāng)前的視圖蝉稳,或?qū)Ξ?dāng)前頁面內(nèi)容進行分類查看
優(yōu)點:對多內(nèi)容多層級產(chǎn)品適用
缺點:結(jié)構(gòu)復(fù)雜,內(nèi)容繁多
八掘鄙、輪播導(dǎo)航(viewpage)
應(yīng)用信息足夠扁平耘戚,可以嘗試輪播導(dǎo)航
優(yōu)點:單頁面簡潔內(nèi)容,整天性強操漠、線性的瀏覽方式有順暢感收津、方向感
缺點:不適合展示過多頁面、非主頁面不利于展示和查看
九浊伙、點聚導(dǎo)航(自定義衛(wèi)星聚合控件)
主操作選項或?qū)Ш胶喜⒊梢粋€按鈕撞秋,浮動在頁面上
優(yōu)點:靈活、展示方式有趣嚣鄙、頁面更開闊
缺點:隱藏了更多入口和操作
十吻贿、瀑布導(dǎo)航
適用于圖片為主的內(nèi)容,下拉自動加載
優(yōu)點:瀏覽時產(chǎn)生流暢體驗哑子、排版布局多變舅列、沉浸式體驗
缺點:不適合層級架構(gòu)復(fù)雜的產(chǎn)品、容易產(chǎn)生疲勞感