移動導航設計，你知道嗎?

平常我們去商場或者景點逛的時候，通常會看到整個景區(qū)或者整個商場的導游圖，能讓我們知道身處何地并且快速的找到目的地。投射到一個虛擬的產(chǎn)品上面，同樣是一個“商場”或“景點”，為了讓用戶能夠順利的在產(chǎn)品中暢行，則必須為用戶提供一個有效的導航系統(tǒng)，讓用戶時刻清楚自己在應用中所處的位置，及如何前往目的頁面。產(chǎn)品的導航系統(tǒng)，是產(chǎn)品的信息結構在用戶界面上的展現(xiàn)方式。

介紹APP導航設計的文章中至少會提到數(shù)十種導航方式，種類名稱繁多，不是很容易理得清。那么問題來了，怎樣才能更加更快速、系統(tǒng)地掌握各種導航設計方式呢?在本篇，按照結構化思維對各種APP導航設計進行分類整理，最終形成三個大類：分層結構、扁平化結構以及內容或體驗驅動型，提供另外一種認識APP導航設計方式的思路。

一、層次結構導航

從杜威十進制分類法到動物界的門綱目科屬，龐大的信息通常都會被分類到類別，以及子類別、子子類別…中去，這就是層級結構。層級結構模型是人們最容易理解的分類結構模型，層級導航也是APP中最常用的導航模型之一，本篇將列表式導航、宮格式導航(跳板式導航)、陳列館式導航歸為層級導航結構，它們有共性也有細微的不同：

1、列表式導航

列表式導航中的每一個列表項(注：iOS設計指南中成列表為表格視圖)都是進入子功能的入口，用戶通過在每個頁面選擇一次進行導航，直至到達目標位置，并且模塊之間的切換必須返回至列表主頁當中。列表相當于一個一行一列的表格，列表項中既可以填充文字圖片，也可以填充按鈕或者展開某一項。

iOS中設置是經(jīng)典的利用列表導航的應用，QQ郵箱是為數(shù)不多用列表式設計做主導航的應用。

注：iOS設置 和 QQ郵箱

列表中可以填充更多的列表項，來擴展有限的屏幕空間上能夠容納的入口數(shù)量，可以用來展示信息記錄/聯(lián)系人列表等某一類別下的列表項記錄。

注：mono 中的小組列表 & 一直播中粉絲列表

列表式導航也是最常見的導航方式之一，更多被用來做次級導航，多用在個人中心、設置、內容/信息列表中。

注：簡書 & 美團，“我的”用列表導航做次級導航

2、宮格式導航(跳板式導航)

宮格式導航可以看做列表式導航的變形，同樣屬于層級結構導航，不同于列表導航地方在于宮格式導航是以N行N列的表格來呈現(xiàn)，同時表格中元素以圖片為主。宮格中一個格子代表一個功能/模塊入口，從一個模塊到另一個模塊用戶必須原路返回幾步(或者從頭開始)，然后做出不同的選擇。宮格式導航曾經(jīng)在APP中非常流行，主要是因為它能容納更多的功能入口，同時跨平臺不受平臺限制(移動互聯(lián)網(wǎng)剛興起的時候，每個平臺的交互規(guī)范有很大的區(qū)別)。

注：早期的Facebook與 LinkedIn就是采用宮格式導航做主導航(2011年)

美圖秀秀、微店是現(xiàn)在位數(shù)不多的仍舊用宮格式導航做主導航的應用之一，微軟識花這款小工具首頁也是用宮格式導航產(chǎn)品設計，美圖秀秀與微軟識花都是工具型產(chǎn)品，而微店中采用宮格式設計展示最常用的功能入口。

注：美圖秀秀 & 微軟識花 & 微店

當前，很少有產(chǎn)品會用宮格式導航做主導航，主要是利用宮格式導航的擴展功能來做次級導航，與標簽式導航以及其他類型的導航模式共同構成整個應用的導航系統(tǒng)。

注：支付寶 & 豌豆莢一覽

3、陳列館式導航

陳列館式導航可用來呈現(xiàn)實時內容，比如新聞、菜譜、文章或照片，可以采用網(wǎng)格布局(比如一直播和ins)或輪盤布局(比如格瓦拉電影)，還可以采用幻燈片模式進行展示。陳列館式導航本質上也是另外一種層級導航結構，進入另外一個內容詳情之前，必須先回到主界面重新點擊進入。相較于列表導航、宮格式導航的不同在于，陳列館式導航有更豐富的表現(xiàn)形式、更加隨意的組合效果(瀑布流等)以及豐富的動態(tài)效果(輪盤、幻燈片形式)。

注：一直播(網(wǎng)格布局展示主播信息) & 格瓦拉電影(采用輪播布局展示電影信息)

相較于列表導航、宮格式導航，陳列館式設計展示了彼此獨立、內容之間無層級關系的內容項。

注：ins & 開眼

陳列館式設計模式最適合呈現(xiàn)經(jīng)常更新的、視覺效果直觀、彼此獨立的內容。

注：LOFTER和廚房故事都采用瀑布流網(wǎng)格布局展示內容信息

注意：宮格式導航與陳列館式、列表導航的區(qū)別是后兩種形式的導航中一個宮格/列表為菜單/功能入口，而陳列館式導航中展示的更多為彼此獨立的實時內容。

層級導航的優(yōu)缺點

優(yōu)點：能應變大量的類別、功能和項目;組織方式常見，容易理解，可直接對內容進行交互;直觀且占用屏幕空間小;列表展示很適合用戶自定義分類。

缺點：主功能只有在最頂層頁面才會被顯示出來，不像標簽欄，每個頁面都可以看見;主功能和分類以及內容之間的切換有些麻煩。必須要先回到頂層頁面，然后再依次點入。

二、扁平結構導航

在扁平信息架構的應用中，用戶可以從首頁目錄直接切換到另一個類目視圖，因為所有的分類都可以從主屏直接訪問。iOS與Android中分別提供標簽欄以及選項卡作為支撐扁平導航的控件，越來越多的應用結合兩者進行整體導航的設計。

1、標簽式導航

標簽式導航對應iOS中的標簽欄，是現(xiàn)在最常見的主導航模式。大的好處就是扁平化整個應用的導航結構，所有主類別視圖都可以在頂層視圖進行切換，用戶可以直接從一個類別的視圖切換到另一個類別的視圖，利于用戶在視圖之間的頻繁切換，而不需要像層級導航那樣回到主頁面重新進入，直觀清晰、易于用戶理解。

注：iOS版網(wǎng)易云音樂和Instagram都用標簽欄做主導航

標簽欄標簽最好不多于5個，當多余四個時，將剩下的功能全部置于“更多/我的/個人”中。

注：網(wǎng)易嚴選 & 知乎

標簽導航的變形：標簽欄中加入功能按鈕，一般是一個應用中最核心功能的功能入口或功能入口集(點聚式)，多為發(fā)布類按鈕，例如：Instagram、LOFTER、微博、QQ空間等可以快速發(fā)布內容。

注：nice(快速發(fā)布功能入口) & 新浪微博 (子功能集入口)

2、固定選項卡

固定選項卡是安卓系統(tǒng)提供的三種頂級導航方式之一，與iOS系統(tǒng)中的標簽欄相似，同樣的它能夠扁平化整個信息結構，并且支持左右滑動切換到不同的視圖。隨著移動端交互設計的發(fā)展，Android與iOS兩大陣營的相互借鑒、完善，交互設計規(guī)范越趨于相似，你會看到大量安卓應用也采用標簽欄作為主導航，iOS應用中采用頂部選項卡式導航作為次級導航。

注：Android版網(wǎng)易云音樂以及iOS版QQ音樂都用固定選項式導航做主導航

以下場景中可以使用固定選項卡：需要經(jīng)常切換視圖/內容視圖有限(3-4個)/讓用戶清楚地知道可供選擇的視圖。

注：荔枝FM & 小咖秀

固定選項卡一般放置在屏幕的頂部(導航欄或導航欄下方)，展示同一模塊下不同類別的信息或者篩選不同模塊的信息。

注：LOFTER & 小紅書

3、滾動選項卡

滾動選項卡與固定選項卡同屬選項卡式，一般滾動選項卡要比固定選項卡要窄， 一個模塊中可以顯示多個(超過5個)類別的視圖，并且還可以進行擴展以及自定義展示(多用在頻道/模塊定制中)，同樣可以左右滑動切換不同類別的視圖。

注：QQ空間 & 騰訊新聞

滾動選項卡能通過水平滑動，定位到更多的選項卡視圖中。如果應用的內容有很多視圖，或者靈活的插入而不能確定有多少視圖將會被展示，就是用滾動選項卡吧。

注：虎牙直播 & 鳳凰新聞

扁平導航結構的優(yōu)缺點

優(yōu)點：能夠快速的訪問到所有主要模塊視圖;標注清晰的菜單，告知用戶主要功能和當前所在的功能模塊;有利用用戶進行視圖之間的頻繁切換。

缺點：標簽欄導航只能顯示5個標簽;標簽欄以及選項卡欄會占用一定的屏幕空間;選項卡過多，會導致切換不同類別視圖較繁瑣(選項卡過多，最好右側提供全部分類的導航)。

三、內容或體驗驅動導航(其他類型)

1、抽屜式導航

抽屜式導航也叫側邊欄(抽屜)式導航，抽屜式導航一般應用在以下的場景中：

(1)核心功能流程單一，主界面就能滿足用戶核心場景下的需求，不需要頻繁在幾個功能模塊之間進行切換，將其他的功能模塊(通常是分類、設置、個人中心等)做一個收納，利用抽屜導航隱藏起來，例如：探探、唯品會、滴滴出行等。

注：滴滴出行 & 探探

(2)節(jié)省屏幕空間，突出主要功能模塊，將相對不常用的功能模塊整合起來放到側邊抽屜，例如：QQ、懂球帝、有貨等。

注：懂球帝 & 有貨 (都采用嵌入式)

抽屜式導航的三種風格：浮層、嵌入式(向右推動原有界面)、新興的模式(向右滑動的3D效果)。

注：天天快報(浮層式) & 知乎日報(嵌入式) & 酷狗音樂 (新興模式)

缺點：功能模塊之間的切換比較繁瑣，新用戶的學習成本較高。

2、卡片式導航

卡片式導航原型類似生活中撲克牌，模仿切牌、換牌、翻牌等動作模式，是一種比較新穎的導航模式，在市面上應用這種導航的應用不算太多，探探中采用卡片式設計為導航和內容交互的主要模式，像卡片一樣堆疊展示推薦用戶，左滑表示無感，右滑表示喜歡或點贊;AcFun中采用卡片式設計展示推薦的番劇，任何方向的滑動都為切換不同的番劇。

注：探探 & AcFun

陌陌-點點與秒拍-熱榜都采用卡片式設計向用戶展示推薦好友以及最熱的短視頻信息。

注：陌陌-點點 & 秒拍-熱榜

3、翻頁式導航

翻頁式導航最常見的就是利用頁面控件(iOS中的標準控件)，能夠告訴用戶打開了多少個視圖，以及它們當前處在哪個視圖當中，利用手勢操作控制頁面的位置。墨跡天氣的城市視圖展現(xiàn)以及Facebook中查看好友請求都是利用翻頁式導航，墨跡天氣中提供了指示頁面數(shù)量以及頁面當前位置的頁面控件，而Facebook則利用部分可見的內容引導用戶滑動切換不同好友。

注：墨跡天氣 & Facebook

4、下拉列表式導航

下拉菜單能讓用戶在有限的屏幕空間上做更多的動作，通常用來篩選同一信息模塊下不同類別的信息，或者快速啟動某些常用的功能模塊，而不需要頻繁的頁面跳轉。Android中對應的控件為spinner控件，但該控件用于同一類別下不同視圖之間的切換，而不是跳轉至完全不同的視圖。iOS中下拉菜單為自定義控件，可以實現(xiàn)不同類別之間的切換。

注：秒拍 & 喜馬拉雅FM

不要讓菜單覆蓋整個屏幕，同時點擊背景的任意位置可以隱藏菜單

注：same & 網(wǎng)易云音樂

下拉菜單常用做信息/內容列表的篩選，篩選同一信息列表中不同類別的信息

注：58同城 & 蘇寧易購

看完關于移動導航設計的總結，如何應用到平時的產(chǎn)品設計中呢?

以下兩點可供參考：

首先，可以參考競品是如何做的，為什么這么做，這么做的效果如何;

其次，結合自己產(chǎn)品實際的需求、功能、內容、用戶使用場景等進行思考，可以在做出幾套方案后，進行最優(yōu)選擇。最后注意在平時使用產(chǎn)品的過程中留意相關的產(chǎn)品設計，適當?shù)倪M行總結，才能在產(chǎn)品設計中游刃有余。

當前題目：移動端導航設計大全，你知道嗎？
網(wǎng)站地址：http://www.rwnh.cn/news17/171167.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、品牌網(wǎng)站制作、微信小程序、自適應網(wǎng)站、網(wǎng)站設計公司、網(wǎng)頁設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)