【UI學習】移動端6種導航欄設計總結
文：小歐
圖片來自漫畫 長頸鹿但丁
找到一份很有價值的導航設計總結篇，學習到了什麼叫拇指熱區，感謝原作者。我根據自己的理解做了部分修改，總結分享給各位有需要的夥伴。
一、標籤式導航
即我們說的tab式導航，是移動應用中最普遍、最常用的導航模式，適合在相關的幾類資訊中間頻繁的調轉。這類資訊優先順序較高、使用者使用頻繁，彼此之間相互獨立，通過標籤式導航的引導，使用者可以迅速的實現頁面之間的切換且不會迷失方向，簡單而高效。
需要注意的是標籤式導航根據邏輯和重要性控制在 5個以內 ，多餘5個使用者難以記憶而且容易迷失。
標籤式的導航可細分為：底部tab式導航、頂部tab式導航、底部tab的擴充套件導航。
1、底部tab式導航 （QQ、微信、淘寶、微博、美團、京東）
這是符合拇指熱區的導航方式。那啥叫拇指熱區呢？當你走在路上、單手持握手機並操作;站在公交車上，一手拉扶手，另一隻手操作等等這些場景時，你最常用的操作就是右手單手持握並操作手機，因此，對於手機來說，為觸控進行互動設計，主要針對的就是拇指。
但在手機操作中，拇指的可控範圍有限，缺乏靈活度。尤其是在如今的大屏手機上，拇指的可控範圍還不到整個螢幕的三分之一——主要集中在螢幕底部、與拇指相對的另外一邊。當用右手持握手機的時候（左撇子畢竟是少數，我們還是要為主流使用者設計，拇指的熱區如下圖所示）（紅色：拇指點選盲區；橙色：拇指能觸及的區域需用史上吃奶的勁；綠色：拇指點選的最佳區域）
拇指熱區
隨著手機屏增大，內容顯示變多，但是單手操作變難了。從上面的拇指熱區來看就很容易理解為什麼導航和工具欄放在在手機螢幕的下邊緣。
將導航放置在螢幕底部也不僅僅關乎到拇指操作的舒適性，還關係到另一個問題：如果放在上面，用手指操作時，會擋住閱讀的視線。 如果控制元件在底部，不管手怎麼移動，至少不會擋住主要內容，從而給予清晰的視角。呈遞內容的螢幕在上方，控制按鍵在下方。
2.頂部tab式導航 (QQ音樂、酷我音樂、新聞類app)
QQ音樂和酷我音樂，為了更好的瀏覽基本資訊（歌手、歌曲名）、以及支援快捷操作（播放/暫停）播放器需要固定在底部,那麼頂部tab導航不失為一個好選擇
QQ、酷我其實是一家
今日頭條這種新聞類APP，由於內容、分類較多，運用頂部和底部雙tab導航，而切換頻率最高的tab放在頂部，這是為什麼呢？因為新聞在每個tab都是沉浸式閱讀，最常用的操作是在一個tab中不斷地下滑閱讀內容，將常用的tab放在頂部，加入手勢切換的操作，反倒能帶來更好地閱讀體驗。（如下圖）
今日頭條首頁
小結： 在兩種情況下可以選擇頂部tab式導航。
a、某項功能必須固定在底部，那麼其他tab只能固定在頂部，但為了方便操作，頂部tab導航最好支援手勢操作，即滑動即可切換；
b、該APP是沉浸式體驗，如新聞、小說等，為了帶給使用者更好的閱讀體驗，可以將tab放在頂部。
3.底部tab式導航的擴充套件形式 （微博和QQ空間、閒魚）
有些情況下，簡單的底部tab式導航難以滿足更多的操作功能，這個時候需要一些擴充套件形式來滿足需。同時也給設計增加了一些個性化的亮點。
這些APP中，為了讓使用者更簡單的貢獻內容，突出了按鈕的設計，讓平淡的標籤欄多了幾分趣味。
微博
閒魚
標籤導航總結： 實際上，底部Tab模式導航在iOS和Android上一直是最安全的一種導航模式，他不怎麼出彩，但是絕對不會犯錯。在大螢幕時代，底部Tab模式的導航更能適應，也更好設計。
適用於：入口分類數目不多，可以控制在5個以內，且使用者需要在入口間頻繁切換來執行多個任務
注意：結構太過複雜而且不穩定的應用不適合標籤式導航
二.抽屜式導航（側導航）
經常和底部tab式導航結合使用的抽屜式導航，我們可以稱之為優雅的隱喻。抽屜式導航將部分資訊內容進行隱藏，突出了應用的核心功能。設想你的產品資訊層級有非常多的頁面和內容，難以在一屏內顯示全部內容，那麼你一定首先會想到去設計一個底部或頂部的tab導航，但導航太多無疑顯得臃腫，而且使使用者難以點選，那麼這個時候，抽屜式導航是個不錯的選擇。
抽屜欄式導航的兩大缺陷：
1、在大螢幕手機上，單手持握時處於操作盲區，大螢幕手機時代就這麼不可阻擋的來了，而螢幕頂部左上角的抽屜欄位置，一個需要被經常操作的入口，現在，處在了操作盲區。（如下圖）
比如QQ的抽屜式導航欄
2、 抽屜式導航可能會降低你產品一半的使用者參與度
抽屜欄為頁面帶來乾淨的設計的同時，也讓使用者忽視隱藏的資訊，既然你第一眼看不到這些入口，那麼你也就會時常忘記它們在哪兒。這也導致了隱藏在抽屜欄內的資訊內容使用者點選率下降，參與感降低。
側導航總結：
a.如果應用主要的功能和內容都在一個頁面裡面。只是一些使用者設定這類低頻操作內容需要顯示在其他頁面裡。為了讓主頁面看上去幹淨美觀，可以把這些輔助功能放在抽屜欄裡。
b.如果你的應用有不同的檢視，且他們是平級的，需要使用者同等地對待，抽屜欄將會浪費掉大多數的使用者對於側邊欄中入口的潛在參與度和互動程度。
c.在大屏時代使用抽屜欄，手勢操作顯得尤為重要，從螢幕邊緣喚出抽屜欄是個不錯的選擇。
注意:需要使用者有一定參與的資訊層級，最好不好放置在抽屜欄
三、列表式導航
如果說標籤式導航是APP中最普遍的導航方式，那麼列表式導航就是最必不可少的一種資訊承載模式，這種導航結構簡單清晰、易於理解、冷靜高效，能夠幫助使用者快速定位到對應內容。在APP中的應用也分為兩種
1、 作為主導航使用
如果該APP主要表達的資訊層級較為單一，且並不會在入口間頻繁且反覆跳轉，那麼將列表式導航作為主導航是一種不錯的選擇。例如花瓣，作為一個圖片類APP，他以圖片表達為主，層級淺且內容評級，用列表式導航作為主導航來構架內容，簡單而直接。（如下圖）
花瓣
2、 作為輔助導航來展示二級甚至更深層級的內容
幾乎在所以APP中都能看到它的應用，作為資訊梳理條目，列表數量儘量保持在一屏以內，超過一屏最好再分一級，而且按照人一次只能記住4項事物的心理法則最重要的內容歸納在前4個列表更容易被人們記住。如果不同種類的內容放在同一頁面，那麼要注意為這些內容分類，比如微信的設定頁面，用留白的方式來區分內容的不同（如下圖）
微信列表式輔助導航
總結： 列表式導航大多作為輔助導航來展示二級甚至更深層次的內容，若要作為主導航，必須滿足層級淺且內容平級的條件
注意：
a.表式導航的數量保持在一屏以內，超過一屏最好再分一級，
b.將最終要的內容歸納在前4個列表更容易被人們記住
c.要注意為列表內容分類
四、平鋪式導航
當你的資訊足夠扁平，可以嘗試平鋪式導航。這種導航方式很容易帶來高大上的視覺體驗，最大程度的保證了頁面的簡潔性和內容的完整性，且一般都會結合滑動切換的手勢，操作起來也非常方便。PChouse是一個家居雜誌的APP，雜誌休閒隨意的特質，非常適合平鋪式導航，最大限度的保持了圖片的完整性。（如下圖）
我也是第一次看到這個APP
但缺點是使用者只能切換的相鄰頁面，很難跳轉到非相鄰的頁面，很容易迷失位置，因此平鋪式導航都會新增幾個小點來指示當前位置。如墨跡天氣中切換城市的操作就運用了平鋪式導航，優點是可以在一個頁面完整展示當前城市的情況，快速切換到其他城市。但如果你設定的城市比較多，就很難快速定位到某個城市，但所幸手勢操作切換方便，且正常情況下，使用者最多隻會設定2-3個頁面，不會造成太大的負擔。
，墨跡天氣
淘寶中的店鋪推薦也使用了平鋪式導航，推薦店鋪雖然有40個之多，但用數字表達出了明確位置的同時，也加入了手勢切換，增加了易用性和趣味性。
總結： 輪播式導航比較適用於足夠扁平化的內容和隨意瀏覽的閱讀模式
淘寶平鋪式導航
注意： 無法跳轉至費相鄰頁面，如果入口間需要反覆跳轉，則不適合這種模式
五、宮格式導航(常見但不常用)
常見是因為，無論你用的是Android還是iOS，每天一開啟手機，宮格式導航就會對你說hello了（就是下圖啦）
沒想到吧
每一個APP都是一個宮格，這些宮格聚集在中心頁面，使用者只能在中心頁面進入其中一個宮格，如果想要進入另一個宮格，必須要先回到中心頁面，再進入另一個宮格。每個宮格相互獨立，它們的資訊間也沒有任何交集，無法跳轉互通。因為這種特質，宮格式導航被廣泛應用於各平臺系統的中心頁面，這就是為什麼說他常見。
但是為什麼不常用呢，大家可以翻一下手機裡的APP，看看哪個APP的主導航用了宮格式導航？你可能只能找到一個最常用的，尤其是愛自拍的親們-美圖秀秀（如下圖）
美圖秀秀
經常使用美圖秀秀的人都會有一個共同的煩惱，例如我拍了一張圖片，我需要美圖一下，我的心理模型是這樣的：進入美圖秀秀-開啟一張圖片-先祛斑祛痘、放大眼睛、瘦個臉-最後加上特效（自然/甜美可人/粉嫩系）-儲存圖片。
但是美圖秀秀給我的實際模型卻是這樣的:進入美圖秀秀-開啟一張圖片-進入人像美容-祛斑祛痘、放大眼睛、瘦個臉-儲存圖片-再進入美化圖片-加個特效-再次儲存。這樣做的結果是流程複雜，而且我多存了一張沒用的照片，還要到照片裡進行刪除。
這就是宮格式導航的缺陷，資訊互斥，無法相互通達，只能給使用者帶來了更多的操作步驟。
總結： 宮格式導航適合入口相互獨立互斥，且不需要交叉使用的資訊歸類。 一旦入口需要有所交集，必然導致更多的操作負累，這個時候只能根據產品特性做出權衡，如果不適合，建議果斷拒絕這種方式。
六.懸浮icon導航
懸浮icon導航，是將導航頁面分層，無論你到達APP的哪個頁面，懸浮icon永遠懸浮在上面，你依靠懸浮層隨時可以去想要去的地方，同時，為了讓懸浮icon不遮擋某個頁面的操作，通常懸浮的icon都可以在螢幕邊緣自由移動。
iOS系統就運用了這種導航模式-Assistive Touch, Assistive Touch是在iOS5出現之後搭載的新的輔助功能，知乎上很多人吐槽這個懸浮方塊非常礙事，還有很多人說這是因為home鍵質量不佳而且官方並沒有明確提出有效的解決方案，所以AssistiveTouch是曲線救國，此處應有笑聲…撇開home鍵不談，單說懸浮icon在大螢幕時代發揮的作用，當你單手持握手機，拇指在手機中部瀏覽，你想回到主螢幕，但是手指卻難以到達螢幕底部，懸浮方塊在這個時候就能為你提供快捷操作。而且你可以在AssistiveTouch裡自定義頂層選單，我比較喜歡裡面的螢幕快照功能，不用按住電源鍵和home鍵就能截圖的感覺棒棒噠！
懸浮icon導航
而且你可以在AssistiveTouch裡自定義頂層選單，我比較喜歡裡面的螢幕快照功能，不用按住電源鍵和home鍵就能截圖的感覺棒棒噠！
總結： 懸浮式icon是一個非常便捷的操作入口，也適應大螢幕時代。
大總結：
標籤式導航：最常用、最不易出錯，請第一時間考慮它
抽屜式導航：如果你的資訊層級繁多，可以考慮將輔助類內容放在抽屜中
列表式導航：作為輔助導航來展示二級甚至更深層級的內容，每個APP必不可少，但請注意數量與分類
平鋪式導航：如果你的內容是隨意瀏覽，無需來回跳轉的，可以考慮它。
宮格式導航：不建議在APP中作為主導航使用，如果非使用不可，請增加跳轉的關聯性
懸浮式導航：更適應大屏的導航模式，不妨試一試，但注意不要讓它遮擋住某些頁面的操作