麻豆网页 全方位科普移動端導航的六種設計模式

任何APP的組織信息都需要以某種導航框架固定起來，就像是建筑工人拔地而起的高樓大廈一樣，地基非常重要，之后你想要蓋多少層樓、每層樓有多少間房，都在地基的基礎上構成。而一個新的產品也是這樣，合適的導航框架，決定了產品之后的延伸和擴展。

不同的產品需求和商業目標決定了不同的導航框架的設計模式。而交互設計的第一步，就是決定導航的框架設計，框架確定后，才能開始逐漸豐富血肉。

首先，我們要為組織信息分層，在這一步驟，一定要做好信息層級的扁平化，不能把所有的組織信息都鋪出來，這樣做只會讓用戶心煩意亂找不到想要的重要操作，也不能把層級做的很深，用戶沒有那么多耐心跟你玩躲貓貓。一定要將做核心、最穩固、最根本的功能要素放在第一層頁面，其他得內容收在第二層、第三層、甚至更深。

之后，根據層級的深度和廣度來確定導航的設計模式。不要覺得這有多難，移動端的屏幕尺寸就這么大，操作方式也無非就是點擊、滑動、長按這些。因此導航模式一般也就分為以下7種。

一、標簽式導航

也就是我們平時說的tab式導航，是移動應用中最普遍、最常用的導航模式，適合在相關的幾類信息中間頻繁的調轉。這類信息優先級較高、用戶使用頻繁，彼此之間相互獨立，通過標簽式導航的引導，用戶可以迅速的實現頁面之間的切換且不會迷失方向，簡單而高效。需要注意的是標簽式導航根據邏輯和重要性控制在5個以內，多于5個用戶難以記憶而且容易迷失。

而標簽式導航還細分為底部tab式導航、頂部tab式導航、底部tab的擴展導航這三種。

1 、底部tab 式導航

如果此時你觀察一下自己手機中常用的APP你就會發現QQ、微信、淘寶、微博、美團、京東等全部都是底部tab式導航

這是符合拇指熱區操作的一種導航模式，隨著手機屏幕越來越大，內容顯示變多了，但是單手操作變難了。這也就是為什么，工具欄和導航條一般都在手機界面的下邊緣，而將導航放置在屏幕底部即拇指熱區，這樣的方式為單手持握時拇指操作帶來了更大的舒適性。

將導航放置在屏幕底部也不僅僅關乎到拇指操作的舒適性，還關系到另一個問題：如果放在上面，用手指操作時，會擋住閱讀的視線。如果控件在底部，不管手怎么移動，至少不會擋住主要內容，從而給予清晰的視角。呈遞內容的屏幕在上方，控制按鍵在下方。

2 、頂部tab 式導航

Android的物理按鍵已經放在底部了，為了不產生堆疊，很多Android應用運用了頂部tab式導航，這是一種妥協下的行為。（下圖為微信Android和iOS圖）

而如今，在妥協物理按鍵和拇指操作舒適中，微信Android版拋棄了頂部導航的方式，和IOS保持了一致。

當然頂部導航也不是那么一無是處，QQ音樂和酷我音樂現在用的就是頂部Tab式導航；還有騰訊新聞和網易新聞這種新聞類APP，由于內容、分類較多，運用頂部和底部雙tab導航。

小結：在兩種情況下可以選擇頂部tab式導航。

1)、某項功能必須固定在底部，那么其他tab只能固定在頂部，但為了方便操作，頂部tab導航最好支持手勢操作，即滑動即可切換；

2)、該APP是沉浸式體驗，如新聞、小說等，為了帶給用戶更好的閱讀體驗，可以將tab放在頂部。

3 、底部tab 式導航的擴展形式

在有些情況下，簡單的底部tab式導航難以滿足更多的操作功能，這個時候我們就需要一些擴展形式來滿足需求。如微博和QQ空間都做了這種擴展，也因此給設計增加了一些個性化的亮點。

標簽導航總結：

實際上，底部Tab模式導航在iOS和Android上一直是最安全的一種導航模式，不怎么出彩，但是絕對不會犯錯。在大屏幕時代，底部Tab模式的導航更能適應，也更好設計。

適用于：入口分類數目不多，可以控制在5個以內，且用戶需要在入口間頻繁切換來執行多個任務。

需要注意：結構太過復雜而且不穩定的應用不適合標簽式導航。

二、抽屜式導航

經常和底部tab式導航結合使用的抽屜式導航，我們可以稱之為優雅的隱喻。抽屜式導航將部分信息內容進行隱藏，突出了應用的核心功能。設想你的產品信息層級有非常多的頁面和內容，難以在一屏內顯示全部內容，那么你一定首先會想到去設計一個底部或頂部的tab導航，但導航太多無疑顯得臃腫，而且使用戶難以點擊，那么這個時候，抽屜式導航是個不錯的選擇。

但是，抽屜欄式導航有兩大缺陷：

1、在大屏幕手機上，單手持握時處于操作盲區，難以點擊

2、抽屜式導航可能會降低你產品一半的用戶參與度

那么，到底什么時候適合用側導航呢？我們總結一下：

1).如果應用主要的功能和內容都在一個頁面里面。只是一些用戶設置這類低頻操作內容需要顯示在其他頁面里。為了讓主頁面看上去干凈美觀，可以把這些輔助功能放在抽屜欄里。

2).如果你的應用有不同的視圖，且他們是平級的，需要用戶同等地對待，抽屜欄將會浪費掉大多數的用戶對于側邊欄中入口的潛在參與度和交互程度。

3).在大屏時代使用抽屜欄，手勢操作顯得尤為重要，從屏幕邊緣喚出抽屜欄是個不錯的選擇。

需要注意的是：需要用戶有一定參與的信息層級，最好不好放置在抽屜欄

三、列表式導航

如果說標簽式導航是APP中最普遍的導航方式，那么列表式導航就是最必不可少的一種信息承載模式，這種導航結構簡單清晰、易于理解、冷靜高效，能夠幫助用戶快速定位到對應內容。在APP中的應用也分為兩種：

1 、作為主導航使用

如果該APP主要表達的信息層級較為單一，且并不會在入口間頻繁且反復跳轉，那么將列表式導航作為主導航是一種不錯的選擇。

2 、作為輔助導航來展示二級甚至更深層級的內容

你幾乎在所以APP中都能看到它的應用，作為信息梳理條目，列表數量盡量保持在一屏以內，超過一屏最好再分一級，而且按照人一次只能記住4項事物的心理法則最重要的內容歸納在前4個列表更容易被人們記住。如果不同種類的內容放在同一頁面，那么要注意為這些內容分類。

四、平鋪式導航

當你的信息足夠扁平，可以嘗試平鋪式導航。這種導航方式很容易帶來高大上的視覺體驗，最大程度的保證了頁面的簡潔性和內容的完整性，且一般都會結合滑動切換的手勢，操作起來也非常方便。下圖是一個家居雜志的APP，雜志休閑隨意的特質，非常適合平鋪式導航，最大限度的保持了圖片的完整性。

但缺點是用戶只能切換的相鄰頁面，很難跳轉到非相鄰的頁面，很容易迷失位置，因此平鋪式導航都會添加幾個小點來指示當前位置。

總結：

輪播式導航比較適用于足夠扁平化的內容和隨意瀏覽的閱讀模式

需要注意的是：無法跳轉至費相鄰頁面，如果入口間需要反復跳轉，則不適合這種模式

五、宮格式導航

這種導航模式非常常見，但是卻不常用。

常見是因為，無論你用的是Android還是iOS，每天一打開手機都可以看到。

每一個APP都是一個宮格，這些宮格聚集在中心頁面，用戶只能在中心頁面進入其中一個宮格，如果想要進入另一個宮格，必須要先回到中心頁面，再進入另一個宮格。每個宮格相互獨立，它們的信息間也沒有任何交集，無法跳轉互通。因為這種特質，宮格式導航被廣泛應用于各平臺系統的中心頁面，這就是為什么說他常見。

總結一下：

宮格式導航適合入口相互獨立互斥，且不需要交叉使用的信息歸類

一旦入口需要有所交集，必然導致更多的操作負累，這個時候只能根據產品特性做出權衡，如果不適合，建議果斷拒絕這種方式。

六、懸浮 icon 導航

懸浮icon導航，是將導航頁面分層，無論你到達APP的哪個頁面，懸浮icon永遠懸浮在上面，你依靠懸浮層隨時可以去想要去的地方，同時，為了讓懸浮icon不遮擋某個頁面的操作，通常懸浮的icon都可以在屏幕邊緣自由移動。

總結：

懸浮式icon是一個非常便捷的操作入口，也適應大屏幕時代。

但需要注意的是

1).懸浮式icon會遮擋某些頁面的操作，在設計的時候應該考慮進去，比如無論在那個頁面永遠為懸浮icon留有位置。

2).在某些信息層級繁多且復雜的APP，讓用戶自主決定是否需要調出懸浮式icon，或者讓用戶自定義菜單會更加符合用戶的心理預期。

最后總結一下：

標簽式導航：最常用、最不易出錯，請第一時間考慮它。

抽屜式導航：如果你的信息層級繁多，可以考慮將輔助類內容放在抽屜中。

列表式導航：作為輔助導航來展示二級甚至更深層級的內容，每個APP必不可少，但請注意數量與分類。

平鋪式導航：如果你的內容是隨意瀏覽，無需來回跳轉的，可以考慮它。

宮格式導航：不建議在APP中作為主導航使用，如果非使用不可，請增加跳轉的關聯性。

懸浮式導航：更適應大屏的導航模式，不妨試一試，但注意不要讓它遮擋住某些頁面的操作。

最后，根據產品層級的深度和廣度，選擇適合的導航模式，是產品設計中的關鍵一環。