乾貨分享！關於APP導航菜單設計你應該瞭解的一切

導航菜單是人機交互的最主要的橋樑和平臺，主要做用是不讓用戶迷失方向。如今市面上產品的菜單欄種類繁多，到底什麼樣的纔是優秀的導航菜單設計呢？好的菜單設計不只能提高整個產品的用戶體驗，並且還能讓用戶耳目一新。這篇文章將聚焦導航菜單，分享咱們對於導航菜單的認識和體驗。

1、導航菜單有什麼做用？

1.    提高產品內容和功能結構和層次

導航是APP的骨架，支撐着總體的內容和信息，讓內容按照信息架構有機地結合在一塊兒，直觀而清晰地展現在用戶面前，從而使零碎的內容變得充實而有序。結構化的同時也加強了生態感。

2.    重點展現核心功能

每一款產品投入開發進入市場後，立身之本在於本身的核心功能。所以，核心功能必須放在用戶觸手可及的位置，次要功能的比重應該獲得控制，展現上也不能喧賓奪主。經過導航就能很好的突出核心，適當隱藏次要功能。

3.    簡化用戶旅程

合理的導航系統和順暢的任務路徑，可以讓用戶快速地達到目標，造成暢快的用戶體驗。用戶旅程的簡化對於產品的用戶黏度和轉化率有着直接的做用，高效的導航可以直戳用戶痛點。

2、導航菜單的分類

在瞭解導航菜單的基本做用後，咱們利用快速原型工具Mockplus來展現一下導航菜單的分類。

一、經典導航菜單Tabber

Tabber是蘋果ios能夠自動生成一種導航控件，開發起來方便。因此這種經典的底部導航欄受到絕大數app設計師的青睞。這種設計符合手機端用戶單手操做的習慣，包括新版微信，淘寶，支付寶，百度手機等都採用的這一方式。這個APP導航方式佔大多數。

                                        

優勢：清楚當前所在的入口位置；直接展示最重要入口的內容信息。

缺點：功能入口過多時，該模式顯得笨重不實用。

2.、矩形、網格式導航菜單

這種宮格導航是將主要入口所有聚合在頁面，讓用戶作出選擇。這樣的組織方式沒法讓用戶在第一時間看到內容，選擇壓力較大，採用這種導航的應用已經愈來愈少，每每用在二級頁做爲內容列表的一種圖形化形式呈現，或是做爲一系列工具入口的聚合。

 

              

利用Mockplus實現的宮格導航效果【在線預覽】

優勢：簡約而不簡陋，導航清晰、明顯，並能提升效率。

缺點：設計時須要注意色彩的搭配，太過於花哨會讓用戶產生視覺疲勞。

三、抽屜式導航

抽屜式滑動導航很好地彌補了tabber導航中切換項受限的缺陷，經過縱向排列切換項解決了這一問題，將菜單隱藏在當前頁面內，點擊入口便可像抽屜同樣拉出菜單。

 

                

                                          利用Mockplus實現的抽屜式導航效果【在線預覽】

優勢：節省頁面展現空間；讓用戶注意力聚焦到當前頁面；擴展性好。

缺點：不適合頻繁切換的應用。

四、舵式導航

目前流行一種標籤導航的形式，常被稱作爲「舵式導航」，由於它的樣式很像輪船上用來指揮的船舵，兩側是其餘操做按鈕。當頁面有處於同一層級的幾大部份內容，同時又須要一個很是重要且頻繁操做的入口，就能夠採用這種APP導航模式。

 

                 

                                             利用Mockplus實現的舵式導航效果【在線預覽】

優勢：須要突出重要且頻繁操做的入口。

缺點：同標籤導航。

3、經典導航菜單設計

1. 谷歌的Material Design中使用了「浮動操做按鈕」來定義這種導航。經過UI上方浮動的圖標進行區分，同時也有恰當的動態效果。開創了全新的導航規範。

2. 一樣的，印象筆記也借鑑了這樣的模式，用戶只需輕點右下角的浮動按鈕，就能夠快速地記錄當下的靈感。

                                             

3. Tumblr搭配了形象的圖標和貼切的標籤。 當你向下滾動瀏覽內容時，這些圖標也會天然地消失。

                                           

4. Messenger的構造嚴格地遵循了標籤導航，一部分標籤固定在頂部，一部分在底部清晰地呈現主要功能。圖標清晰易於理解，也容許自定義標籤，從而產生精緻而整潔的視覺體驗。

                          

小結

愈來愈多的設計師意識到導航欄菜單對提升用戶體驗的重要性。 在Android中，咱們看到從漢堡導航迭代爲獨立的標籤欄。 在iOS上，愈來愈多的應用程序正在移除小標籤欄，替換成更大更清晰的圖標。爲了追求更好的用戶體驗，簡化APP設計，設計師們還會在導航設計優化的路上不斷探索新的設計方向。