當(dāng)我們在設(shè)計一款A(yù)pp時,我們最注重的很可能是頁面的布局結(jié)構(gòu),和元素的細(xì)節(jié)優(yōu)化。反觀導(dǎo)航的處理則是我們在設(shè)計時最容易被忽略的。一款A(yù)pp的核心體驗,很大程度上是有導(dǎo)航?jīng)Q定的,例如告訴用戶怎樣找到自己想要的信息和完成自己想要的任務(wù)等。所以今天要和大家分享的內(nèi)容就是關(guān)于導(dǎo)航設(shè)計常見樣式匯總,以及他們的優(yōu)缺點。

NO. 1

底部標(biāo)簽式導(dǎo)航

底部標(biāo)簽式導(dǎo)航位于頁面底部,用于一級界面當(dāng)中,是一種最常見的導(dǎo)航模式,如果我們開發(fā)的應(yīng)用是需要用戶頻繁在不同的界面中切換時,最好采用這種導(dǎo)航。標(biāo)簽式導(dǎo)航最好不要多余5個,當(dāng)多余5個時,我們可以將剩余優(yōu)先級不高的功能集合到一個功能入口中,例如:“更多,人中心,我的等”。如下圖

優(yōu)點:可以看到當(dāng)前所謂在的入口位置,輕松在各個入口間切換且不會迷失;也可直接展示當(dāng)前選擇的界面內(nèi)容;同時底部標(biāo)簽也是拇指的熱區(qū)范圍,方便操作。

缺點:導(dǎo)航選項數(shù)量有限,不能展示過多的入口(最多5個,考慮到手指理想的觸摸尺寸)同是也占用了界面的一定高度,如果是小屏手機(jī)會影響內(nèi)容的顯示區(qū)域。

NO. 2

頂部標(biāo)簽式導(dǎo)航

頂部標(biāo)簽導(dǎo)航顧名思義,位于界面中的頂部,通常是在導(dǎo)航欄或者狀態(tài)欄下方使用。一般作用于二級導(dǎo)航,因此頂部標(biāo)簽的樣式通常是用文字直接展示,避免過多的視覺設(shè)計,造成界面中導(dǎo)航層級不明確。再細(xì)分的話,頂部導(dǎo)航也可以分為兩種:1.固定標(biāo)簽的頂部導(dǎo)航(有些應(yīng)用用來做App中的主導(dǎo)航,例如:QQ音樂)2.可滑動標(biāo)簽的頂部導(dǎo)航(導(dǎo)航的入口不能少于5個),如下圖

優(yōu)點:數(shù)量沒有限制,可固定數(shù)量,也可以不固定數(shù)量;界面左右滑動可以直接切換;方便直觀瀏覽實時更新的內(nèi)容

缺點:容易形成界面內(nèi)容過多,占用了界面的一定高度

NO. 3

分段式導(dǎo)航

分段式導(dǎo)航是iOS系統(tǒng)自帶的標(biāo)準(zhǔn)控件,適合界面分類的切換頻率比較高的,導(dǎo)航數(shù)量通常在2-4個之間,如下圖

優(yōu)點:可以看到當(dāng)前所謂在的入口位置,輕松在各個入口間切換且不會迷失;也可直接展示當(dāng)前選擇的界面內(nèi)容;適用于高頻率切換的界面,方便操作。

缺點:樣式守舊,靈活性不高,無法通過左右側(cè)滑的手勢進(jìn)行切換。數(shù)量會因為字段的長短受到一定限制。

NO 4

抽屜式導(dǎo)航

從導(dǎo)航名稱上理解,抽屜,通常用來收起整理的意思,也就是除了核心功能以外的低頻操作都放到這個抽屜里,由此可見,抽屜式導(dǎo)航的核心就是【隱藏】,所以我們的產(chǎn)品如果需要讓用戶獲得沉浸式的體驗及其他模塊的切換頻率低的話抽屜式導(dǎo)航則是一個不錯的選擇。抽屜式導(dǎo)航通?？刂频陌咽殖霈F(xiàn)在App的左上角,以按鈕的形式出現(xiàn),點擊之后抽屜被拉開,左側(cè)區(qū)域顯示導(dǎo)航中的內(nèi)容,如下圖

優(yōu)點:隱藏非主要功能,可以使用主意力集中在核心功能上,減少其他非核心功能的干擾,節(jié)省界面的利用空間

缺點:由于可發(fā)現(xiàn)性底,不能一目了然,其他模塊的流量會被遏制,不利于整體產(chǎn)品流量最大化。不合適頻繁切換使用,會增加用戶的學(xué)習(xí)成本高。

NO 5

下拉式導(dǎo)航

下拉導(dǎo)航通常用于篩選統(tǒng)一模塊下不同類別的是信息,與抽屜式導(dǎo)航的目的是相同的,都是為了隱藏非核心的操作與功能。這類導(dǎo)航多用于瀏覽類的二級導(dǎo)航;通過點擊我們可以召喚出下拉菜單,下拉菜單通常會以浮窗的形式顯示在界面上層,當(dāng)我們點擊菜單以外的區(qū)域便會收起。相對抽屜式導(dǎo)航相比,下拉式導(dǎo)航能讓用戶感知到當(dāng)前位置。如下圖)

優(yōu)點:與界面的連貫性比較好,用戶可以感知當(dāng)前位置,同時也節(jié)省界面的利用空間。

缺點:不合適頻繁切換使用;無法結(jié)合左右滑動操作;相對隱蔽。

NO6

舵式導(dǎo)航

舵式導(dǎo)航屬于底部標(biāo)簽導(dǎo)航的變形,按鈕中間加了個+號,看起來就像是輪船上用來指揮的船舵。當(dāng)標(biāo)簽導(dǎo)航無法滿足需求時,我們可以選擇舵式導(dǎo)航,把導(dǎo)航內(nèi)核心的功能放在船舵中央,并用突出的顏色來吸引用戶頻繁點擊。舵式導(dǎo)航主要把生產(chǎn)內(nèi)容的主功能按鈕放在中間,常見于用戶生產(chǎn)∪GC(用戶自發(fā)上傳的內(nèi)容)內(nèi)容的社區(qū)型App。例如簡書,閑魚,如下圖

優(yōu)點:突出重要且頻繁的操作入口,同時也彌補(bǔ)了底部標(biāo)簽導(dǎo)航數(shù)量的不足,還可以在設(shè)計上做出靈活,有趣效果。

缺點:需要用戶二次點擊才能到達(dá)目標(biāo),增加了用戶的操作流程,同時隱藏的功能不能過多,會對點擊后的用戶造成反感,增加用戶的思考選擇壓力,不合適頻繁切換使用。

NO.7

點聚式導(dǎo)航

當(dāng)層級信息比較復(fù)雜,并且每個模塊中都有用戶頻繁使用的核心功能在這些條件的限制下,我們最好的選擇就是點聚式導(dǎo)航,點聚式導(dǎo)航的特點就是無論你到達(dá)App中那一個界面,懸浮CON都會一直在界面的最上面,方便不同的用戶隨時選擇自己需要的功能入口,如下圖

優(yōu)點:占據(jù)空間小,方便不同的用戶進(jìn)入不同的模塊,通常他的出現(xiàn)時伴隨著互動效果的,所以更加吸引用戶的點擊欲望,提高產(chǎn)品核心功能的點擊率。

缺點:樣旋懸浮在界面上面的點聚式導(dǎo)航,會遮擋默寫文字或者操作,用戶需要滑動后才可操作,無形中增加了用戶的使用步驟,通常點聚式導(dǎo)航他的展示方式為一個|CON,沒有任何文字說明,因此用戶理解上會出現(xiàn)一定的障礙。

NO 8

列表式導(dǎo)航

列表式導(dǎo)航是App中必不可少的一種信息承載模式,通常是由圖標(biāo)+文字的形式在界面中左對齊排列,對于功能之間如果存在不同種類的情況,通常用留白分割的方法處理。(如下圖)列表導(dǎo)航中每一個列表都是一個子功能的入口,并且每個入口之間的切換必須要返回至列表主頁才可以,如下圖

優(yōu)點:列表式結(jié)構(gòu)具有很強(qiáng)的延展性,可以不斷的增加信息,可以很方便的進(jìn)行分組分類。簡單清晰、易于理解、用戶可以快速找到自己想要的信息。

缺點:只能通過排序來區(qū)分個入口的重要;列表過多會造成用戶下滑的操作,甚至增加搜索方面的功能。每個入口切換時,只能通過返回至列表頁面才可以。

NO 9

宮格式導(dǎo)航

宮格導(dǎo)航將主要入口全部聚合在界面中,讓用戶整體了解App的服務(wù),從而選擇自己需要的服務(wù)。各個入口之間行相互獨立,沒有太多交集,無法跳轉(zhuǎn)互通。宮格式導(dǎo)航的變化很多,比如美圖秀秀,支付寶,如下圖

優(yōu)點:宮格式結(jié)構(gòu)可以作為信息或平臺的入口,讓用戶了解App中的所有服務(wù)并快速選擇自己需要的服務(wù)。同時也具有較強(qiáng)的延展性。

缺點:用戶無法直接看到想要選擇服務(wù)的內(nèi)容部分,需要點擊后才能看到具體的界面內(nèi)容,會增加用戶的選擇壓力。