App常用導(dǎo)航框架

文章目的:在整體上把握移動(dòng)端App的導(dǎo)航框架,理解每種導(dǎo)航所具有的優(yōu)點(diǎn)、局限性和其所適用的范圍。

文章用心:典型APP案例、按導(dǎo)航熱門度排列、文章結(jié)構(gòu)清晰。

導(dǎo)航作為移動(dòng)App的基本入口以及主要功能的展現(xiàn)方式,不同性質(zhì)的App所羅列的不同優(yōu)先級(jí)的功能,展示出來(lái)的導(dǎo)航也各有千秋,其服務(wù)的對(duì)象和目的也不盡相同。概括為一句話:需具體問(wèn)題,具體分析。但,其中也不乏規(guī)律可循。

羅列一下常見的導(dǎo)航樣式:標(biāo)簽式Tab(微信)、列表式List(網(wǎng)易,偏向信息展示)、抽屜式Side(手機(jī)QQ)、九宮格式SpringBoard(支付寶)、輪播式Cards(Iphone天氣,自帶軟件)、陳列館式(貓眼)、點(diǎn)聚式(百度云)、瀑布式Gallery(圖片、壁紙軟件,偏向信息展示)。

1.標(biāo)簽式Tab



典型微信、電話,最常用的導(dǎo)航模式。

優(yōu)點(diǎn):直觀展示入口內(nèi)容,頻度使用高,且功能內(nèi)容不一。

局限性:如若是一款功能模塊較多的軟件,再采用標(biāo)簽式會(huì)顯得笨重,可考慮采用其他導(dǎo)航模式。

適用范圍:

在整體上:切換頻度較高,適用于排列主要功能的大部分軟件。

在功能上:作為移動(dòng)軟件的一級(jí)功能入口,擺放最主要功能。


2.列表式?List



典型網(wǎng)易、知乎,較常用導(dǎo)航模式。

優(yōu)點(diǎn):層次清晰,展示內(nèi)容多,展示內(nèi)容性軟件。

局限性:需注重編排。

適用范圍:

在整體上:適用于資訊類軟件。

在功能上:對(duì)各種內(nèi)容的展示,需保證清晰、明了。


3.抽屜式?Side



典型手機(jī)QQ、QQ空間,較常用導(dǎo)航模式。

優(yōu)點(diǎn):擴(kuò)展性強(qiáng),需求頻度稍弱(隱藏),弱需求的整合歸類。

局限性:弱需求隱藏。

適用范圍:

在整體上:適用于功能較多,需求層級(jí)較多的軟件。

在功能上:同類弱需求的組合排列。


4.九宮格式?SpringBoard



典型支付寶、優(yōu)酷,較常用導(dǎo)航模式。

優(yōu)點(diǎn):功能入口直觀,且功能模塊多。

局限性:功能多、雜,無(wú)重點(diǎn)突出。

適用范圍:

在整體上:適用于功能模塊多的平臺(tái)性軟件。

在功能上:較多重要功能,以展示列的形式顯示功能。


5.輪番式?Cards



典型Iphone天氣、花田,較常用導(dǎo)航模式。

優(yōu)點(diǎn):功能內(nèi)容統(tǒng)一,瀏覽方式順暢。

局限性:但不能展示多頁(yè),只能順序查看。

適用范圍:

在整體上:適用于功能單一、統(tǒng)一的工具型軟件,適用于隨意看看。

在功能上:同級(jí)功能內(nèi)容的展示,適用于順便再看看的性質(zhì)。


6.陳列式



典型貓眼、大眾點(diǎn)評(píng),較常用導(dǎo)航模式。

優(yōu)點(diǎn):直觀、方便,內(nèi)容陳列。

適用范圍:

在整體上:適用電影、書籍等陳列展示。

在功能上:相同內(nèi)容的展示,現(xiàn)基本都是用于展示電影內(nèi)容。


7.點(diǎn)聚式



典型百度云、Path,較少用導(dǎo)航模式。

優(yōu)點(diǎn):靈活、有趣,界面更加開闊。

局限性:隱藏了功能,且隱藏功能不能太多,不然顯示后,用戶較難反應(yīng)。

適用范圍:

在整體上:適用于信息內(nèi)容展示較多的軟件并功能需求頻度較低

在功能上:與抽屜式導(dǎo)航類似,都是用于隱藏次級(jí)功能。但是,此類導(dǎo)航所隱藏的功能更加少,需要給用戶指明其功能,但是顯示效果佳。


8.瀑布式?Gallery



典型花瓣、壁紙10000+,較少用導(dǎo)航模式。

優(yōu)點(diǎn):瀏覽式查看、目的性不強(qiáng)。

局限性:布局需設(shè)計(jì),會(huì)造成視覺疲勞。

適用范圍:

在整體上:適用于信息展示,偏向于圖片而非文字類,瀏覽性質(zhì)強(qiáng)。

在功能上:同類內(nèi)容的展示,用于隨意看看,與輪播式導(dǎo)航類似,但是展示內(nèi)容更多。


本文通過(guò)對(duì)導(dǎo)航類型分類,并評(píng)估其適用類型,能更加明確其使用目的性和適用性。

單一的導(dǎo)航是無(wú)法駕馭現(xiàn)在豐富功能的App的,采用混合型組合,針對(duì)導(dǎo)航的適用性采取不同類型的導(dǎo)航,適合的永遠(yuǎn)才是最好的,因地制宜。

本文統(tǒng)一、針對(duì)性了解和分析了導(dǎo)航的類別,希望以后在設(shè)計(jì)和理解App時(shí),能有一個(gè)整體性的把握,這便足矣。

如果有觸動(dòng)到你的一些想法的話,那就賞個(gè)贊,鼓勵(lì)下。

最后編輯于
?著作權(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),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,167評(píng)論 25 708
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,634評(píng)論 19 139
  • 當(dāng)我們確定了移動(dòng)APP的設(shè)計(jì)需求和APP產(chǎn)品設(shè)計(jì)流程之后,開始著手設(shè)計(jì)APP界面UI或是APP原型圖啦。這個(gè)時(shí)候我...
    jason_peng閱讀 1,153評(píng)論 1 15
  • 抱抱是一個(gè)讓人聽到,看到或想到都會(huì)覺得溫暖的詞。認(rèn)識(shí)我媳婦兒之前,和朋友之間相處,若彼此最近累了,或者遇到...
    七根閱讀 272評(píng)論 0 1
  • 今天凌晨蘋果發(fā)布了Xcode8正式版,iOS10, 萬(wàn)眾矚目,那么Xcode8到底更新了什么東西呢?,接下來(lái)軍哥帶...
    coderYJ閱讀 6,806評(píng)論 11 29

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