全方位科普移動端導航的七種設計模式

最新 05-25

Elainezhu：看了很多總結導航的文章，其實都基本雷同，但是都覺得不夠細緻，也不是從我們常用的產品去分析的，因此用自己的思路重新分析了一遍，某些段落來自引用，比如拇指熱區，某些來自我讀過的文章，但大部分的分析來自我的原創。這篇文章應該說是站在巨人的肩膀上，自己的一些淺見。

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

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

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

之後，根據層級的深度和廣度來確定導航的設計模式。不要覺得這有多難，移動端的屏幕尺寸就這麼大，操作方式也無非就是點擊、滑動、長按這些。因此導航模式一般也就分為以下7種（當然你可以在這七種的基礎上互相組合）接下來我們可以具體分析一下這七種導航模式。

一、標籤式導航

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

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

1、底部tab式導航

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

這是符合拇指熱區操作的一種導航模式，那麼什麼是拇指熱區呢？當你走在路上、單手持握手機並操作;站在公交車上，一手拉扶手，另一隻手操作等等這些場景時，你最常用的操作就是右手單手持握並操作手機，因此，對於手機來說，為觸摸進行交互設計，主要針對的就是拇指。

但在手機操作中，拇指的可控範圍有限，缺乏靈活度。尤其是在如今的大屏手機上，拇指的可控範圍還不到整個屏幕的三分之一——主要集中在屏幕底部、與拇指相對的另外一邊。當用右手持握手機的時候（左撇子畢竟是少數，我們還是要為主流用戶設計，拇指的熱區如下圖所示）

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

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

這也是為什麼我是個果粉的原因，iPhone把一個需要按壓的home鍵放在手機底部比android手機將三個觸摸式物理按鍵放在底部高明多了，這些接近屏幕邊緣的物理按鍵擠在一起，手指非常不便於操作。（華為甚至直接將3個物理按鍵放在了屏幕里），尤其是在我玩遊戲的時候總會誤觸發這3個物理按鍵，造成無意退出，非常不爽。如果再將導航也放置在底部，只能對舒適性說拜拜了（市面上的主流android手機）

2、頂部tab式導航

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

當然頂部導航也不是那麼一無是處，QQ音樂和酷我音樂現在用的就是頂部Tab式導航，為了更好的瀏覽基本信息（歌手、歌曲名）、以及支持快捷操作（播放/暫停）播放器需要固定在底部,那麼頂部tab導航不失為一個好選擇（如下圖）

還有騰訊新聞和網易新聞這種新聞類app，由於內容、分類較多，運用頂部和底部雙tab導航，而切換頻率最高的tab放在頂部，這是為什麼呢？因為新聞在每個tab都是沉浸式閱讀，最常用的操作是在一個tab中不斷地下滑閱讀內容，將常用的tab放在頂部，加入手勢切換的操作，反倒能帶來更好地閱讀體驗。（如下圖）

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

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

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

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

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

在這些app中，為了讓用戶更簡單的貢獻內容，突出了按鈕的設計，讓平淡的標籤欄多了幾分趣味。

標籤導航總結：

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

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

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

二、抽屜式導航

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

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

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

我們看到隨著iPhone6和iPhone6 plus的推出，到今年6S的持續推進，大屏幕手機時代就這麼不可阻擋的來了，而屏幕頂部左上角的抽屜欄位置，一個需要被經常操作的入口，現在，處在了操作盲區。（如下圖）

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

抽屜欄為頁面帶來乾淨的設計的同時，也讓用戶忽視隱藏的信息，既然你第一眼看不到這些入口，那麼你也就會時常忘記它們在哪兒。這也導致了隱藏在抽屜欄內的信息內容用戶點擊率下降，參與感降低。

那麼，問題來了，到底什麼時候適合用側導航呢？

我們總結一下：

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

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

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

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

三、列表式導航

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

1、作為主導航使用

如果該app主要表達的信息層級較為單一，且並不會在入口間頻繁且反覆跳轉，那麼將列表式導航作為主導航是一種不錯的選擇。例如雜誌Elle，作為一個雜誌app，他以文字、圖片表達為主，層級淺且內容評級，用列表式導航作為主導航來構架內容，簡單而直接。（如下圖）

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

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

總結：

列表式導航大多作為輔助導航來展示二級甚至更深層次的內容，若要作為主導航，必須滿足層級淺且內容平級的條件

需要注意的是：

列表式導航的數量保持在一屏以內，超過一屏最好再分一級，

將最終要的內容歸納在前4個列表更容易被人們記住

要注意為列表內容分類。

四、平鋪式導航

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

但缺點是用戶只能切換的相鄰頁面，很難跳轉到非相鄰的頁面，很容易迷失位置，因此平鋪式導航都會添加幾個小點來指示當前位置。如墨跡天氣中切換城市的操作就運用了平鋪式導航，優點是可以在一個頁面完整展示當前城市的情況，快速切換到其他城市。但如果你設置的城市比較多，就很難快速定位到某個城市，但所幸手勢操作切換方便，且正常情況下，用戶最多只會設置2-3個頁面，不會造成太大的負擔。

淘寶中的店鋪推薦也使用了平鋪式導航，推薦店鋪雖然有40個之多，但用數字表達出了明確位置的同時，也加入了手勢切換，增加了易用性和趣味性。

總結：

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

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

五、宮格式導航

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

常見是因為，無論你用的是android還是iOS，每天一打開手機，宮格式導航就會對你說hello了（就是下圖啦）

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

但是為什麼不常用呢，大家可以翻一下手機里的app，看看哪個app的主導航用了宮格式導航？你可能只能找到一個最常用的，尤其是愛自拍的親們-美圖秀秀（如下圖）

經常使用美圖秀秀的人都會有一個共同的煩惱，例如我拍了一張圖片，我需要美圖一下，我的心理模型是這樣的：進入美圖秀秀-打開一張圖片-先祛斑祛痘、放大眼睛、瘦個臉-最後加上特效（自然/甜美可人/粉嫩系）-保存圖片。

但是美圖秀秀給我的實際模型卻是這樣的:進入美圖秀秀-打開一張圖片-進入人像美容-祛斑祛痘、放大眼睛、瘦個臉-保存圖片-再進入美化圖片-加個特效-再次保存。這樣做的結果是流程複雜，而且我多存了一張沒用的照片，還要到照片里進行刪除。

這就是宮格式導航的缺陷，信息互斥，無法相互通達，只能給用戶帶來了更多的操作步驟。

總結一下：

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

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

六、懸浮icon導航

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

iOS系統就運用了這種導航模式-Assistive Touch, Assistive Touch是在iOS5出現之後搭載的新的輔助功能，知乎上很多人吐槽這個懸浮方塊非常礙事，還有很多人說這是因為home鍵質量不佳而且官方並沒有明確提出有效的解決方案，所以AssistiveTouch是曲線救國，此處應有笑聲…我最早的一部4S用了2年，摔碎屏2次，home鍵都依然堅挺，撇開home鍵不談，單說懸浮icon在大屏幕時代發揮的作用，當你單手持握手機，拇指在手機中部瀏覽，你想回到主屏幕，但是手指卻難以到達屏幕底部，懸浮方塊在這個時候就能為你提供快捷操作。