常見(jiàn)移動(dòng)端產(chǎn)品導(dǎo)航設(shè)計(jì)模式
平時(shí)生活中使用過(guò)很多APP,也看過(guò)一些關(guān)于移動(dòng)產(chǎn)品導(dǎo)航設(shè)計(jì)的文章。今天整理了一下市場(chǎng)上常見(jiàn)的幾種導(dǎo)航設(shè)計(jì),算是對(duì)自己學(xué)過(guò)知識(shí)的梳理。
APP導(dǎo)航承載著用戶獲取所需內(nèi)容的快速途徑,它看似簡(jiǎn)單,卻是產(chǎn)品設(shè)計(jì)中最需要考量的一部分。APP導(dǎo)航的設(shè)計(jì),會(huì)直接影響用戶對(duì)APP的體驗(yàn)感受。一個(gè)好的導(dǎo)航設(shè)計(jì)能讓用戶快速了解該產(chǎn)品的功能和信息組織架構(gòu)??梢哉f(shuō)導(dǎo)航設(shè)計(jì)有著舉足輕重的作用。雖然不同的產(chǎn)品需求和商業(yè)目標(biāo)決定了不同的導(dǎo)航框架的設(shè)計(jì)模式,但縱觀應(yīng)用市場(chǎng)上的APP,導(dǎo)航設(shè)計(jì)的模式總是幾種的組合使用。下面我們來(lái)看一下常見(jiàn)的幾種導(dǎo)航設(shè)計(jì)模式。
一、標(biāo)簽式導(dǎo)航
標(biāo)簽式導(dǎo)航又叫Tab式導(dǎo)航,是目前移動(dòng)端市場(chǎng)上最為廣泛的導(dǎo)航設(shè)計(jì)。標(biāo)簽導(dǎo)航通常分為底部,頂部,頂、底混合使用這三種模式
1、底部導(dǎo)航,采用文字加圖標(biāo)的方式展現(xiàn)。
一般有3-5個(gè)標(biāo)簽,適合在相關(guān)的幾類信息中間頻繁的切換使用。這類信息優(yōu)先級(jí)較高、用戶使用頻繁,彼此之間相互獨(dú)立,通過(guò)標(biāo)簽式導(dǎo)航的引導(dǎo),用戶可以迅速的實(shí)現(xiàn)頁(yè)面之間的切換且不會(huì)迷失方向,簡(jiǎn)單而高效。它的缺點(diǎn)是會(huì)占用一定高度的空間,如果用戶是小屏幕手機(jī),則視覺(jué)體驗(yàn)不太好。
底部標(biāo)簽導(dǎo)航
2、頂部導(dǎo)航
當(dāng)內(nèi)容分類比較多的時(shí)候,經(jīng)常會(huì)采用頂部導(dǎo)航設(shè)計(jì)模式,如一些資訊類的APP天天快報(bào),推酷就采用頂部導(dǎo)航。
頂部標(biāo)簽導(dǎo)航
3、頂部,底部雙tab導(dǎo)航
標(biāo)簽式導(dǎo)航除了設(shè)在底部和底部,另外有些產(chǎn)品內(nèi)容比較多會(huì)采用頂部,底部混合使用標(biāo)簽式導(dǎo)航,如簡(jiǎn)書(shū)、微票兒。
頂部,底部雙tab導(dǎo)航
二、抽屜式標(biāo)簽
抽屜導(dǎo)航指的是一些功能菜單按鈕隱藏在當(dāng)前頁(yè)面后,如網(wǎng)易郵箱、QQ、知乎等。點(diǎn)擊入口或側(cè)滑即可像拉抽屜一樣拉出菜單。這種導(dǎo)航設(shè)計(jì)比較適合于那么不需要頻繁切換的次功能,例如對(duì)設(shè)置、關(guān)于、會(huì)員、皮膚設(shè)置等功能的隱藏。
抽屜式導(dǎo)航的優(yōu)點(diǎn)在于節(jié)省頁(yè)面展示空間,使主頁(yè)面更加簡(jiǎn)潔美觀,讓用戶將更多的注意力聚焦到當(dāng)前頁(yè)面。
缺點(diǎn)在于次功能入口比較隱蔽,用戶不容易發(fā)現(xiàn);使用次功能需要二次點(diǎn)擊,增加用戶使用成本。
三、宮格式導(dǎo)航
這種宮格導(dǎo)航是將主要入口全部聚合在主頁(yè)面中,每個(gè)宮格相互獨(dú)立,它們的信息間也沒(méi)有任何交集,無(wú)法跳轉(zhuǎn)互通。因?yàn)檫@種特質(zhì),宮格式導(dǎo)航被廣泛應(yīng)用于各平臺(tái)系統(tǒng)的中心頁(yè)面。這樣的組織方式無(wú)法讓用戶在第一時(shí)間看到內(nèi)容,選擇壓力較大,除了常見(jiàn)app如支付寶和美圖秀秀,其他的app采用這種導(dǎo)航的應(yīng)用已經(jīng)越來(lái)越少,往往用在二級(jí)頁(yè)作為內(nèi)容列表的一種圖形化形式呈現(xiàn),或是作為一系列工具入口的聚合。
四、列表式導(dǎo)航
列表式導(dǎo)航作為信息組織框架,是我們?cè)诋a(chǎn)品設(shè)計(jì)中必不可少的一個(gè)信息承載模式。列表導(dǎo)航與宮格導(dǎo)航類似,常用于二級(jí)頁(yè)面,不會(huì)默認(rèn)展示任何實(shí)質(zhì)內(nèi)容,所以通常app不會(huì)在首頁(yè)使用它。這種導(dǎo)航結(jié)構(gòu)清晰,易于用戶理解,能夠幫助用戶快速的定位去到對(duì)應(yīng)的頁(yè)面。
五、舵式導(dǎo)航
在有些情況下,簡(jiǎn)單的底部tab式導(dǎo)航難以滿足更多的操作功能,這個(gè)時(shí)候我們就需要一些擴(kuò)展形式來(lái)滿足需求 ,新浪微博、lofter、閑魚(yú)底部采用的就是舵式導(dǎo)航,舵式導(dǎo)航(之前看到別人這么叫所以我也就這么稱呼吧)跟標(biāo)簽式導(dǎo)航相比,區(qū)別在于舵式導(dǎo)航把類似生產(chǎn)內(nèi)容的主功能按鈕放在中間,標(biāo)簽更加突出醒目,同時(shí)該主功能標(biāo)簽做了功能擴(kuò)展,也因此給設(shè)計(jì)增加了一些個(gè)性化的亮點(diǎn)。
總結(jié)
以上幾種是最常見(jiàn)導(dǎo)航設(shè)計(jì)模式,真正的產(chǎn)品設(shè)計(jì)時(shí)往往根據(jù)產(chǎn)品層次的深度和廣度采用多種模式的混合使用,在做到界面簡(jiǎn)潔美觀的同時(shí)還要滿足用戶的使用習(xí)慣。
移動(dòng)端產(chǎn)品導(dǎo)航的設(shè)計(jì)沒(méi)有最好之說(shuō),只有最合適,根據(jù)你的產(chǎn)品采取最合適的導(dǎo)航設(shè)計(jì)。除了當(dāng)下已有的設(shè)計(jì)模式,未來(lái)一定會(huì)有更多更新的導(dǎo)航設(shè)計(jì)和交互體驗(yàn),設(shè)計(jì)的心應(yīng)該是自由的。若你羽翼未豐,就在規(guī)則的天空中飛行,可能不會(huì)出彩但不至于犯錯(cuò);若你已成雄鷹,便可自由飛翔,突破規(guī)則,甚至建立自己的規(guī)則。
作者:正好先生DJW
來(lái)源@:簡(jiǎn)書(shū)
原文鏈接:http://www.jianshu.com/p/99d62d59ca85#
本文由 @正好先生DJW 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
總結(jié)的挺不錯(cuò)的,很贊
很全面的分析總結(jié),小編辛苦了
底部和頂部
學(xué)習(xí)了,非常好的分類,希望多些這樣的干貨