常見移動端產(chǎn)品導(dǎo)航設(shè)計模式

平時生活中使用過很多APP,也看過一些關(guān)于移動產(chǎn)品導(dǎo)航設(shè)計的文章。今天整理了一下市場上常見的幾種導(dǎo)航設(shè)計,算是對自己學過知識的梳理。

APP導(dǎo)航承載著用戶獲取所需內(nèi)容的快速途徑,它看似簡單,卻是產(chǎn)品設(shè)計中最需要考量的一部分。APP導(dǎo)航的設(shè)計,會直接影響用戶對APP的體驗感受。一個好的導(dǎo)航設(shè)計能讓用戶快速了解該產(chǎn)品的功能和信息組織架構(gòu)。可以說導(dǎo)航設(shè)計有著舉足輕重的作用。雖然不同的產(chǎn)品需求和商業(yè)目標決定了不同的導(dǎo)航框架的設(shè)計模式,但縱觀應(yīng)用市場上的APP,導(dǎo)航設(shè)計的模式總是幾種的組合使用。下面我們來看一下常見的幾種導(dǎo)航設(shè)計模式。


一、標簽式導(dǎo)航


標簽式導(dǎo)航又叫Tab式導(dǎo)航,是目前移動端市場上最為廣泛的導(dǎo)航設(shè)計。標簽導(dǎo)航通常分為底部,頂部,頂、底混合使用這三種模式

1、底部導(dǎo)航,采用文字加圖標的方式展現(xiàn)。一般有3-5個標簽,適合在相關(guān)的幾類信息中間頻繁的切換使用。這類信息優(yōu)先級較高、用戶使用頻繁,彼此之間相互獨立,通過標簽式導(dǎo)航的引導(dǎo),用戶可以迅速的實現(xiàn)頁面之間的切換且不會迷失方向,簡單而高效。它的缺點是會占用一定高度的空間,如果用戶是小屏幕手機,則視覺體驗不太好。


底部標簽導(dǎo)航

2、頂部導(dǎo)航,當內(nèi)容分類比較多的時候,經(jīng)常會采用頂部導(dǎo)航設(shè)計模式,如一些資訊類的APP天天快報,推酷就采用頂部導(dǎo)航。


頂部標簽導(dǎo)航

3、頂部,底部雙tab導(dǎo)航。標簽式導(dǎo)航除了設(shè)在底部和底部,另外有些產(chǎn)品內(nèi)容比較多會采用頂部,底部混合使用標簽式導(dǎo)航,如簡書、微票兒。


頂部,底部雙tab導(dǎo)航

二、抽屜式標簽


抽屜導(dǎo)航指的是一些功能菜單按鈕隱藏在當前頁面后,如網(wǎng)易郵箱、QQ、知乎等。點擊入口或側(cè)滑即可像拉抽屜一樣拉出菜單。這種導(dǎo)航設(shè)計比較適合于那么不需要頻繁切換的次功能,例如對設(shè)置、關(guān)于、會員、皮膚設(shè)置等功能的隱藏。


抽屜式導(dǎo)航的優(yōu)點在于節(jié)省頁面展示空間,使主頁面更加簡潔美觀,讓用戶將更多的注意力聚焦到當前頁面。

缺點在于次功能入口比較隱蔽,用戶不容易發(fā)現(xiàn);使用次功能需要二次點擊,增加用戶使用成本。

三、宮格式導(dǎo)航


這種宮格導(dǎo)航是將主要入口全部聚合在主頁面中,每個宮格相互獨立,它們的信息間也沒有任何交集,無法跳轉(zhuǎn)互通。因為這種特質(zhì),宮格式導(dǎo)航被廣泛應(yīng)用于各平臺系統(tǒng)的中心頁面。這樣的組織方式無法讓用戶在第一時間看到內(nèi)容,選擇壓力較大,除了常見app如支付寶和美圖秀秀,其他的app采用這種導(dǎo)航的應(yīng)用已經(jīng)越來越少,往往用在二級頁作為內(nèi)容列表的一種圖形化形式呈現(xiàn),或是作為一系列工具入口的聚合。


四、列表式導(dǎo)航


列表式導(dǎo)航作為信息組織框架,是我們在產(chǎn)品設(shè)計中必不可少的一個信息承載模式。列表導(dǎo)航與宮格導(dǎo)航類似,常用于二級頁面,不會默認展示任何實質(zhì)內(nèi)容,所以通常app不會在首頁使用它。這種導(dǎo)航結(jié)構(gòu)清晰,易于用戶理解,能夠幫助用戶快速的定位去到對應(yīng)的頁面。


五、舵式導(dǎo)航


在有些情況下,簡單的底部tab式導(dǎo)航難以滿足更多的操作功能,這個時候我們就需要一些擴展形式來滿足需求 ,新浪微博、lofter、閑魚底部采用的就是舵式導(dǎo)航,舵式導(dǎo)航(之前看到別人這么叫所以我也就這么稱呼吧)跟標簽式導(dǎo)航相比,區(qū)別在于舵式導(dǎo)航把類似生產(chǎn)內(nèi)容的主功能按鈕放在中間,標簽更加突出醒目,同時該主功能標簽做了功能擴展,也因此給設(shè)計增加了一些個性化的亮點。


總結(jié)


以上幾種是最常見導(dǎo)航設(shè)計模式,真正的產(chǎn)品設(shè)計時往往根據(jù)產(chǎn)品層次的深度和廣度采用多種模式的混合使用,在做到界面簡潔美觀的同時還要滿足用戶的使用習慣。

移動端產(chǎn)品導(dǎo)航的設(shè)計沒有最好之說,只有最合適,根據(jù)你的產(chǎn)品采取最合適的導(dǎo)航設(shè)計。除了當下已有的設(shè)計模式,未來一定會有更多更新的導(dǎo)航設(shè)計和交互體驗,設(shè)計的心應(yīng)該是自由的。若你羽翼未豐,就在規(guī)則的天空中飛行,可能不會出彩但不至于犯錯;若你已成雄鷹,便可自由飛翔,突破規(guī)則,甚至建立自己的規(guī)則。

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

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

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