當(dāng)我們?cè)谠O(shè)計(jì)一款A(yù)pp時(shí),我們最注重的很可能是頁(yè)面的布局結(jié)構(gòu),和元素的細(xì)節(jié)優(yōu)化。反觀導(dǎo)航的處理則是我們?cè)谠O(shè)計(jì)時(shí)最容易被忽略的。一款A(yù)pp的核心體驗(yàn),很大程度上是有導(dǎo)航?jīng)Q定的,例如告訴用戶怎樣找到自己想要的信息和完成自己想要的任務(wù)等。所以今天要和大家分享的內(nèi)容就是關(guān)于導(dǎo)航設(shè)計(jì)常見(jiàn)樣式匯總,以及他們的優(yōu)缺點(diǎn)。
NO. 1
底部標(biāo)簽式導(dǎo)航
底部標(biāo)簽式導(dǎo)航位于頁(yè)面底部,用于一級(jí)界面當(dāng)中,是一種最常見(jiàn)的導(dǎo)航模式,如果我們開(kāi)發(fā)的應(yīng)用是需要用戶頻繁在不同的界面中切換時(shí),最好采用這種導(dǎo)航。標(biāo)簽式導(dǎo)航最好不要多余5個(gè),當(dāng)多余5個(gè)時(shí),我們可以將剩余優(yōu)先級(jí)不高的功能集合到一個(gè)功能入口中,例如:“更多,人中心,我的等”。如下圖
優(yōu)點(diǎn):可以看到當(dāng)前所謂在的入口位置,輕松在各個(gè)入口間切換且不會(huì)迷失;也可直接展示當(dāng)前選擇的界面內(nèi)容;同時(shí)底部標(biāo)簽也是拇指的熱區(qū)范圍,方便操作。
缺點(diǎn):導(dǎo)航選項(xiàng)數(shù)量有限,不能展示過(guò)多的入口(最多5個(gè),考慮到手指理想的觸摸尺寸)同是也占用了界面的一定高度,如果是小屏手機(jī)會(huì)影響內(nèi)容的顯示區(qū)域。
NO. 2
頂部標(biāo)簽式導(dǎo)航
頂部標(biāo)簽導(dǎo)航顧名思義,位于界面中的頂部,通常是在導(dǎo)航欄或者狀態(tài)欄下方使用。一般作用于二級(jí)導(dǎo)航,因此頂部標(biāo)簽的樣式通常是用文字直接展示,避免過(guò)多的視覺(jué)設(shè)計(jì),造成界面中導(dǎo)航層級(jí)不明確。再細(xì)分的話,頂部導(dǎo)航也可以分為兩種:1.固定標(biāo)簽的頂部導(dǎo)航(有些應(yīng)用用來(lái)做App中的主導(dǎo)航,例如:QQ音樂(lè))2.可滑動(dòng)標(biāo)簽的頂部導(dǎo)航(導(dǎo)航的入口不能少于5個(gè)),如下圖
優(yōu)點(diǎn):數(shù)量沒(méi)有限制,可固定數(shù)量,也可以不固定數(shù)量;界面左右滑動(dòng)可以直接切換;方便直觀瀏覽實(shí)時(shí)更新的內(nèi)容
缺點(diǎn):容易形成界面內(nèi)容過(guò)多,占用了界面的一定高度
NO. 3
分段式導(dǎo)航
分段式導(dǎo)航是iOS系統(tǒng)自帶的標(biāo)準(zhǔn)控件,適合界面分類的切換頻率比較高的,導(dǎo)航數(shù)量通常在2-4個(gè)之間,如下圖
優(yōu)點(diǎn):可以看到當(dāng)前所謂在的入口位置,輕松在各個(gè)入口間切換且不會(huì)迷失;也可直接展示當(dāng)前選擇的界面內(nèi)容;適用于高頻率切換的界面,方便操作。
缺點(diǎn):樣式守舊,靈活性不高,無(wú)法通過(guò)左右側(cè)滑的手勢(shì)進(jìn)行切換。數(shù)量會(huì)因?yàn)樽侄蔚拈L(zhǎng)短受到一定限制。
NO 4
抽屜式導(dǎo)航
從導(dǎo)航名稱上理解,抽屜,通常用來(lái)收起整理的意思,也就是除了核心功能以外的低頻操作都放到這個(gè)抽屜里,由此可見(jiàn),抽屜式導(dǎo)航的核心就是【隱藏】,所以我們的產(chǎn)品如果需要讓用戶獲得沉浸式的體驗(yàn)及其他模塊的切換頻率低的話抽屜式導(dǎo)航則是一個(gè)不錯(cuò)的選擇。抽屜式導(dǎo)航通?？刂频陌咽殖霈F(xiàn)在App的左上角,以按鈕的形式出現(xiàn),點(diǎn)擊之后抽屜被拉開(kāi),左側(cè)區(qū)域顯示導(dǎo)航中的內(nèi)容,如下圖
優(yōu)點(diǎn):隱藏非主要功能,可以使用主意力集中在核心功能上,減少其他非核心功能的干擾,節(jié)省界面的利用空間
缺點(diǎn):由于可發(fā)現(xiàn)性底,不能一目了然,其他模塊的流量會(huì)被遏制,不利于整體產(chǎn)品流量最大化。不合適頻繁切換使用,會(huì)增加用戶的學(xué)習(xí)成本高。
NO 5
下拉式導(dǎo)航
下拉導(dǎo)航通常用于篩選統(tǒng)一模塊下不同類別的是信息,與抽屜式導(dǎo)航的目的是相同的,都是為了隱藏非核心的操作與功能。這類導(dǎo)航多用于瀏覽類的二級(jí)導(dǎo)航;通過(guò)點(diǎn)擊我們可以召喚出下拉菜單,下拉菜單通常會(huì)以浮窗的形式顯示在界面上層,當(dāng)我們點(diǎn)擊菜單以外的區(qū)域便會(huì)收起。相對(duì)抽屜式導(dǎo)航相比,下拉式導(dǎo)航能讓用戶感知到當(dāng)前位置。如下圖)
優(yōu)點(diǎn):與界面的連貫性比較好,用戶可以感知當(dāng)前位置,同時(shí)也節(jié)省界面的利用空間。
缺點(diǎn):不合適頻繁切換使用;無(wú)法結(jié)合左右滑動(dòng)操作;相對(duì)隱蔽。
NO6
舵式導(dǎo)航
舵式導(dǎo)航屬于底部標(biāo)簽導(dǎo)航的變形,按鈕中間加了個(gè)+號(hào),看起來(lái)就像是輪船上用來(lái)指揮的船舵。當(dāng)標(biāo)簽導(dǎo)航無(wú)法滿足需求時(shí),我們可以選擇舵式導(dǎo)航,把導(dǎo)航內(nèi)核心的功能放在船舵中央,并用突出的顏色來(lái)吸引用戶頻繁點(diǎn)擊。舵式導(dǎo)航主要把生產(chǎn)內(nèi)容的主功能按鈕放在中間,常見(jiàn)于用戶生產(chǎn)∪GC(用戶自發(fā)上傳的內(nèi)容)內(nèi)容的社區(qū)型App。例如簡(jiǎn)書(shū),閑魚(yú),如下圖
優(yōu)點(diǎn):突出重要且頻繁的操作入口,同時(shí)也彌補(bǔ)了底部標(biāo)簽導(dǎo)航數(shù)量的不足,還可以在設(shè)計(jì)上做出靈活,有趣效果。
缺點(diǎn):需要用戶二次點(diǎn)擊才能到達(dá)目標(biāo),增加了用戶的操作流程,同時(shí)隱藏的功能不能過(guò)多,會(huì)對(duì)點(diǎn)擊后的用戶造成反感,增加用戶的思考選擇壓力,不合適頻繁切換使用。
NO.7
點(diǎn)聚式導(dǎo)航
當(dāng)層級(jí)信息比較復(fù)雜,并且每個(gè)模塊中都有用戶頻繁使用的核心功能在這些條件的限制下,我們最好的選擇就是點(diǎn)聚式導(dǎo)航,點(diǎn)聚式導(dǎo)航的特點(diǎn)就是無(wú)論你到達(dá)App中那一個(gè)界面,懸浮CON都會(huì)一直在界面的最上面,方便不同的用戶隨時(shí)選擇自己需要的功能入口,如下圖
優(yōu)點(diǎn):占據(jù)空間小,方便不同的用戶進(jìn)入不同的模塊,通常他的出現(xiàn)時(shí)伴隨著互動(dòng)效果的,所以更加吸引用戶的點(diǎn)擊欲望,提高產(chǎn)品核心功能的點(diǎn)擊率。
缺點(diǎn):樣旋懸浮在界面上面的點(diǎn)聚式導(dǎo)航,會(huì)遮擋默寫(xiě)文字或者操作,用戶需要滑動(dòng)后才可操作,無(wú)形中增加了用戶的使用步驟,通常點(diǎn)聚式導(dǎo)航他的展示方式為一個(gè)|CON,沒(méi)有任何文字說(shuō)明,因此用戶理解上會(huì)出現(xiàn)一定的障礙。
NO 8
列表式導(dǎo)航
列表式導(dǎo)航是App中必不可少的一種信息承載模式,通常是由圖標(biāo)+文字的形式在界面中左對(duì)齊排列,對(duì)于功能之間如果存在不同種類的情況,通常用留白分割的方法處理。(如下圖)列表導(dǎo)航中每一個(gè)列表都是一個(gè)子功能的入口,并且每個(gè)入口之間的切換必須要返回至列表主頁(yè)才可以,如下圖
優(yōu)點(diǎn):列表式結(jié)構(gòu)具有很強(qiáng)的延展性,可以不斷的增加信息,可以很方便的進(jìn)行分組分類。簡(jiǎn)單清晰、易于理解、用戶可以快速找到自己想要的信息。
缺點(diǎn):只能通過(guò)排序來(lái)區(qū)分個(gè)入口的重要;列表過(guò)多會(huì)造成用戶下滑的操作,甚至增加搜索方面的功能。每個(gè)入口切換時(shí),只能通過(guò)返回至列表頁(yè)面才可以。
NO 9
宮格式導(dǎo)航
宮格導(dǎo)航將主要入口全部聚合在界面中,讓用戶整體了解App的服務(wù),從而選擇自己需要的服務(wù)。各個(gè)入口之間行相互獨(dú)立,沒(méi)有太多交集,無(wú)法跳轉(zhuǎn)互通。宮格式導(dǎo)航的變化很多,比如美圖秀秀,支付寶,如下圖
優(yōu)點(diǎn):宮格式結(jié)構(gòu)可以作為信息或平臺(tái)的入口,讓用戶了解App中的所有服務(wù)并快速選擇自己需要的服務(wù)。同時(shí)也具有較強(qiáng)的延展性。
缺點(diǎn):用戶無(wú)法直接看到想要選擇服務(wù)的內(nèi)容部分,需要點(diǎn)擊后才能看到具體的界面內(nèi)容,會(huì)增加用戶的選擇壓力。