一、抽屜式滑動導航
?? 代表:Facebook字旭,QQ对湃,Path,舊版知乎
不會直接顯示在主屏幕遗淳,通過點擊左(右)上角拍柒,或側(cè)滑可以出現(xiàn)
優(yōu)點:形式多樣靈活,兼容多種模式(列表式屈暗、圖表卡片式布局)拆讯;隱藏非核心的操作與功能,讓用戶更專注于核心的功能操作上去养叛;擴展了屏幕顯示范圍
缺點:隱藏了框架中的其他狀態(tài)种呐,用戶初次使用學習成本高
二、底部標簽式
?? 代表:微信弃甥,微博爽室,Instagram
比較常見的經(jīng)典布局
優(yōu)點: 直觀展現(xiàn)當前入口位置,各個入口之間可自由轉(zhuǎn)換并且不會迷失方向淆攻,適合需要不斷在各入口之間選擇的app(社交類)
缺點:當?shù)撞繕撕灁?shù)量過多時阔墩,可能使整個應用過于龐雜
三嘿架、跳板式(類win8,九宮格圖標)
?? 代表:去哪兒網(wǎng)啸箫,去啊耸彪,美圖秀秀,隨便走
一般用作主導航
優(yōu)點:清晰展現(xiàn)各入口位置筐高;不必拘泥于完全網(wǎng)格式搜囱,可成比例放大某幾個圖標以彰顯其總要性;容易記住位置柑土,方便下次迅速找到
缺點:無法在多入口之間靈活跳轉(zhuǎn)蜀肘,不太適合社交類app;容易形成更深的路徑稽屏,不能直接展現(xiàn)入口內(nèi)容扮宠;不能顯示太多入口次級內(nèi)容
四、列表式
?? 代表:印象筆記
最常見的導航模式之一狐榔,常用于次級頁面
優(yōu)點:層次清晰坛增,可展示內(nèi)容較長的標題,可展示部分預覽內(nèi)容
缺點: 同級內(nèi)容過多時薄腻,用戶易疲勞收捣,排版靈活性不高,只能通過排列順序庵楷、顏色來區(qū)分各入口重要程度
?五罢艾、旋轉(zhuǎn)木馬式(輪播式)
?? 代表:火柴盒
優(yōu)點:可展示大面積的圖片信息,左右滑動可順暢切換尽纽,適用于每日一推
缺點:?不適合展示過多頁面咐蚯,不能跳躍性查看
六、點聚式
?? 代表:Path
優(yōu)點:節(jié)省頁面空間弄贿,展開方式有趣
缺點:隱藏了框架中其他入口春锋,不能直觀展示各項功能
七、超級菜單式
代表:美團
手機網(wǎng)站中使用較多
優(yōu)點:便于分類檢索的次級導航
缺點:分類過細差凹,返回尋找困難
八期奔、陳列館式
代表:當當讀書
優(yōu)點:直觀展示各項內(nèi)容,方便瀏覽經(jīng)常更新的內(nèi)容
缺點:不適合展現(xiàn)頂層入口框架,容易形成界面內(nèi)容過多,顯得雜亂,設(shè)計效果容易呆板
九危尿、瀑布式
代表:tataUFO
優(yōu)點:瀏覽時體驗流暢
缺點:缺乏對整體內(nèi)容的體積感能庆,易造成用戶疲勞