加入人人都是産品經理【起點學院】産品經理實戰訓練營，BAT産品總監手把手帶你學産品

雖說一款應用的生死不是由導航決定，但毋庸置疑，導航模式的選擇在産品用戶體驗上占有很大的比重。就導航本身來說，沒有優劣之分，端看你的應用适合哪種。下面是我羅列的一些常見的移動導航模式，接下來會對其一一舉例說明（注：重要模式會重點分析，其餘簡略，篇幅略長，不喜可跳過）

标簽式

标簽式導航是ios平台上公認的最經典的導航模式，看市場上幾乎有80%的應用都在使用就能知道。标簽式導航關注的是平行空間的展示，它的優點是适用于多個内容體系，且重要程度相似（平級關系），能頻繁在不同頁面間切換，切換成本底，隻需一次點擊；缺點是占用一定高度空間，且标簽數量有限，最多5個标簽。

下圖中圖1-淘寶，是标簽式導航的标準使用形式，每個标簽作為一個導航分類放在标簽欄中（注意都是名詞）。圖2和圖3可以算是标準形式的變形（還有其他變形形式，後面再講），雖然也是有5個标簽，但處于中間位置的标簽不是作為導航使用，而是一個行為召喚按鈕。行為召喚按鈕主要強調某項重要功能的快捷使用，該功能需要是應用最核心且最常用的功能，優先級很高。比如圖2的instagram,它的目标是以一種快速、美妙和有趣的方式将你随時抓拍下的圖片分享出來，它關注的是能随時随地抓拍。因此，作為行為召喚按鈕的“拍照”放在标簽欄上就很有必要。

但是，有些應用對于行為召喚按鈕的放置并不合理。如下圖的圖3-簡書，雖然文章的撰寫是簡書的核心功能，将其作為标簽欄中的一個按鈕，即能在視覺上凸現出來，又能減少操作負荷，似乎很棒。但卻忽略了一個重要的問題，從使用環境來說，文章或者文檔的撰寫是需要在安靜且能集中注意力的環境下，但移動app天然具有幹擾多且注意力不集中的問題。而且在手機上輸入上百字也是一件痛苦的事。對于這款産品的手機用戶來說，可能用戶對内容的消費比對執行動作更重要。

另外，還有一種常見的标簽式導航的變種，即傳統的标簽式 點聚式。這裡先專門講一下點聚式，最為我們所熟知的點聚式就是曾經經典的path結構，即抽屜導航 點聚式，如下圖所示—改版前圖示，它的目的是将用戶最頻繁使用的多個核心功能點彙聚在主界面中顯示，方便用戶随時呼出使用。隻是，如今單獨使用點聚式的應用越來越少，就連path也對這種傳統的點聚式進行了調整，變成了依附于标簽的點聚式結構，如下圖中的path改版後。還有下圖中的樣式1和樣式2，也是這種形式的不同展現。他們的共同點是，使用同一個導航入口，進行多個同級功能的不同操作，大部分都是2-5個不同的操作選項，當然也會有更多，比如下圖中的新浪微博，點擊“加号”入口，出現了更多的功能選項,且這些功能的優先級相若。

其實，在Android 5.0中，這種點聚式更常用的表現形式是懸浮響應按鈕，它代表的是這個app中最主要的操作。隻是就目前來講使用場景有限，實際應用并不理想。

抽屜式

抽屜式導航的目的是帶給用戶更為沉浸的體驗。它的特點是，“閱讀”為王，點擊切換少，專注于主體信息本身。從表現形态來看，抽屜導航很符合産品的二八法則，即産品中隻有20%的功能常用，所以要突顯，剩下的80%不常用，因此隐藏。它不像标簽導航一樣強調平級關系的切換，而是突出重要且核心的功能。抽屜導航的另一些優點是，側邊導航收納的導航标簽可以是5個以上，節省屏幕空間。缺點是無法快速完成導航切換，操作成本高。

關于抽屜導航，在Android和ios平台的使用也有區别。抽屜導航在Android平台上比ios更常使用。由于在ios上，抽屜導航沒有專門的設計規範，所以使用上較為随意，表現形式也不受拘泥。

如果以抽屜導航和主頁在空間位置為評判依據，其在風格上主要有3種表現：

第一種是浮層，即導航抽屜處于主頁上層，通過滑動或點擊的手勢打開抽屜，抽屜部分遮擋或覆蓋原來頁面的内容，如下圖中圖4，這種風格多數會在Android上出現。

第二種是疊加式，即導航抽屜位于主頁的底部，打開抽屜，原來的主頁會向屏幕右側滑動，顯出主頁下方的導航抽屜，如下圖中圖5，這種風格在ios上很普遍。第三種是嵌入層，即導航抽屜和主頁處于同一層，通過輕滑、平移或點擊打開抽屜，把原先的頁面内容部分推出屏幕外，如下圖中圖6（注意導航和主頁銜接處無陰影）。

而第三種風格經常會有如下圖圖7的變形，就是說在打開側邊抽屜的時候，嵌入式抽屜不僅把上一級頁面向右推開，還采用3D效果将其推到後面。了解不同風格可在設計時斟酌使用。

選項卡式

對于選項卡導航，不同平台有不同的設計規則。今天主要說說ios上選項卡的表現，選項卡的本質即是，實現容器内不同視圖或内容的切換。雖然對于選項卡本身，ios沒有專門的規範約束，但這并不妨礙廣大設計者們自由發揮。目前市場上主要有3種形式的選項卡：分段選項卡、固定選項卡和滑動選項卡。

分段選項卡：是由兩個或兩個以上寬度相同的分段組成，正常情況下不超過4個，視覺上會有一個很明顯的描邊按鈕。分段選項卡經常會作為二級導航，對主導航内容再次分類，可以在頂部導航欄的下方，也可以直接放在導航欄上，如下圖所示。标簽之間互相關聯，隻能點擊切換，操作效率較低。

另外，就是固定選項卡和滑動選項卡，兩者都可以直接點擊或左右滑動切換選項，且一級和二級導航都能使用。區别就是滑動選項卡可以有更多選項，且能直接通過手指滑動導航找分類，适用于相關類别多的應用，如下圖的電子商務網站。

下拉菜單式

現如今，下拉菜單式導航并不常用。下拉菜單和導航抽屜一樣，是以突出内容為主的導航模式；一般位于産品頂部，通過點擊呼出導航菜單。

由于導航菜單位于屏幕頂部，不适合結合手勢，操作負荷大，因此不适合需要頻繁切換功能，且能在一定程度上節省屏幕空間。一般情況下，下拉菜單很容易被滑動選項卡取代，且滑動選項卡可以結合手勢操作，使用效率更高，這也是現在下拉菜單很少被使用的原因，除非你的下拉菜單選項中有很明顯的優先級區分。

比如下圖所示，圖8的新浪微博首頁作為默認選中項，顯示和用戶相關的所有微博，常态下用戶隻需要一直浏覽下去即可，很少需要主動點擊切換，除非想要篩選某些特定的微博内容，此處的内容優先級很容易區分。同理，圖9也是如此，用戶關注更多且更感興趣的是以項目為維度的内容分組，因此用下拉菜單來表現。另外，多數菜單是以點擊後彈框的形式出現，也有一些是從底部滑出一個新的頁面調出菜單，如下圖中的圖10。

宮格式

宮格式導航，是一種類似于手機桌面各個應用入口的導航方式。每個入口往往是比較獨立的信息内容，用戶進入一個入口後，隻處理與此入口相關的内容，如果要跳轉至其他入口，必須要先回到入口總界面。

這種導航經常用于工具類app中，它的優點是功能拓展性強，可增加多個入口。缺點是單頁承載信息能力弱，層級深，不适合頻繁任務切換。如下圖的美顔相機就是标準的宮格式結構，每個功能類似于獨立的app,且作為一級導航使用，這種表現形式現在越來越少。而剩下的其他三張圖示，屬于宮格式的一種變形，我稱之為數據入口，這種隻作為各種大數據入口的導航模式現在更多作為二級導航使用，特别是平台類産品。

列表式

列表式導航也是一種十分常見的導航模式，純粹的列表導航很少見，一般都是搭配着别的導航模式一起使用，大多作為二級導航。

列表中可以放置圖片、标題或者詳情文字等來展示信息，列表本身是一個傳達信息效率很高的載體，因此使用列表的時候要注意，每個列表所占的屏幕空間，以及每屏能顯示多少條列表等。

如下圖所示的圖1-1采用了列表的分組模式，圖2-2中列表中的每項信息可能都會影響用戶的點擊轉化，所以如這種形式的列表，細節信息很重要。

圖1-3和圖1-4為二級列表，點擊列表右側的小符号，可以展開或者隐藏信息，這方便用戶查找信息并快速定位，多數情況下，點擊右側小符号可能會出現快捷編輯模式或者部分詳情信息，便于用戶直接編輯或者浏覽。而點擊整個列表，通常會進入新一級的詳情頁面。因此，設計師在設計的時候要注意。

圖示式

圖示式是一種更加可視化的導航，它能根據頁面内容的變化及時更新圖片，适合以圖片為主的内容，像新聞、美食、旅行、視頻圖片等經常使用，常作為二級導航。

由于圖片可能需要經常更新，因此需要配置固定的欄目或标題，防止不斷更新的圖片讓用戶找不到入口。這種形式的導航常常會采用網格布局，如下圖所示，每行基本上會有1-3個圖示單位，不同的網格布局決定了每屏容納的圖示個數，因此用戶浏覽效率及點擊轉化率也會有所不同。

幻燈片式

幻燈片的導航方式，适用于圖片或整塊内容的并列展示，用戶通過手指左右滑動來切換當前内容。正常情況下，幻燈片的數量不宜太多，最好控制在7-8個以内，避免用戶操作疲勞。如下圖所示，使用幻燈片設計最好在設計上提供視覺暗示，讓用戶清楚的知道所處的位置以及幻燈片數量，例如添加分頁标識碼，或者隐喻還有下一張圖片等。

本文由 @butter 原創發布于人人都是産品經理 ，未經許可，禁止轉載。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部