當我們在設計一款App時,我們最注重的很可能是頁面的布局結構,和元素的細節優化。反觀導航的處理則是我們在設計時最容易被忽略的。一款App的核心體驗,很大程度上是有導航決定的,例如告訴用戶怎樣找到自己想要的信息和完成自己想要的任務等。所以今天要和大家分享的內容就是關于導航設計常見樣式匯總,以及他們的優缺點。

NO. 1

底部標簽式導航

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

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

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

NO. 2

頂部標簽式導航

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

優點:數量沒有限制,可固定數量,也可以不固定數量;界面左右滑動可以直接切換;方便直觀瀏覽實時更新的內容

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

NO. 3

分段式導航

分段式導航是iOS系統自帶的標準控件,適合界面分類的切換頻率比較高的,導航數量通常在2-4個之間,如下圖

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

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

NO 4

抽屜式導航

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

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

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

NO 5

下拉式導航

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

優點:與界面的連貫性比較好,用戶可以感知當前位置,同時也節省界面的利用空間。

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

NO6

舵式導航

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