解析移動端導航交互設計模式

前言

任何產品的功能及內容都需要以某種導航框架組織起來，以期使產品結構清晰，目標明確。在產品的結構層，我們需要考慮用戶在應用的什么位置以及如何去往下一個目標位置。而導航通常就是引導用戶使用產品、完成目標的工具。我們在確定產品的需求及目標后，需要選擇合適的導航模式將其組織表達出來，這在整個產品交互設計過程中尤為重要。如何選擇合適的導航模式?做為設計師，我們需要對移動端的導航模式有個系統(tǒng)的了解，讓設計做的有理有據。

目前各種講移動端導航設計的文章也很多，我也看了很多總結導航設計的文章和相關的書籍《移動應用UI設計模式》，該書針對導航模式，根據是否直觀可見有全局導航與瞬時導航的劃分，給了我很大的啟發(fā)。在這里，我結合了自己的一些思考,從主導航結構和內容界面結構的角度出發(fā)，希望能夠更加系統(tǒng)、清晰得闡述導航設計模式。同時也能對交互基礎知識有個深刻的認知(明白設計為什么這么做，而不是因為別人也這么做)，提升自己，也希望對大家有所幫助。

一.主導航結構

主導航結構主要表現(xiàn)有：底部tab式、選項卡式、抽屜式、下拉菜單式等 (包括它們的一些擴展、組合形式)。主導航結構區(qū)別與內容界面結構，是呈現(xiàn)應用的主要功能架構及布局的導航方式，是應用的頂層架構。

1.底部tab導航

底部tab導航對應iOS中的標簽欄，是最常見的主導航模式，且這是符合拇指熱區(qū)操作的一種導航模式。當我們所要構架的幾個模塊信息對用戶來說重要性和使用頻率相似，而且需要頻繁切換時，就適合使用標簽式導航(不支持左右滑動)，能讓用戶直觀了解到應用的核心功能。需要注意的是，iOS系統(tǒng)建議把標簽欄限制在5個選項卡以內，超過5個，可以把“更多”放在最右側的第五個選項卡上(選項過多，用戶難以記憶且容易迷失)。

優(yōu)點：

底部tab導航可以承載重要性和頻率處于同一級別的功能模塊、信息或任務。

在第一時間支持使用者獲取重要性高、頻率大的信息或任務。

支持擁護在不同模塊、信息或任務之間快速切換。

可以包容其他信息結構，構建出容量更大的模塊、信息或任務結構。很多APP的主導航模式都是底部tab導航，然后又使用其他的導航模式去承載界面中的具體信息。

缺點：

由于尺寸限制，tab上限為5個，超過5個需要把“更多”放在最右側的第五個選項卡上，或者需要考慮產品的需求結構是否合適，或者考慮更換導航模式。

底部tab欄占用了一定的空間，減少了頁面的信息承載量。有些產品為了更好展示頁面信息、方便閱讀，采用一種隱藏tab欄的做法，即上滑閱讀時隱藏，下滑返回時再顯示。這種做法雖然照顧了頁面的信息展示，但也可能會讓導航失去便利性，降低切換效率，使用需慎重。

如下圖所示，微信、QQ等常見應用均使用底部tab導航。

2.底部tab的擴展導航——舵式導航

是底部tab導航的擴展形式(又稱舵式導航)，有些情況下，簡單的底部tab導航難以滿足更多的操作功能，因此在標簽欄的中間加入了功能按鈕(多為發(fā)布型的功能按鈕)，來作為應用最核心的操作功能的入口。

優(yōu)點：

①作為底部tab導航的擴展形式，解決了底部tab導航無法合適地承載部分應用需要突出某些重大功能操作按鈕的需求。

缺點：

1.舵式導航本身是存在設計矛盾的。既然舵式導航里放置的是重要性高、使用頻繁的功能，那為什么要隱藏呢?放在二級頁面，有一種被埋藏的暗覺，會增加用戶的記憶負擔和操作量。

實際上，舵式導航是設計師的折中之舉，主要是通過這種帶有缺陷的方式，將兩組分類不同卻都非常重要的信息功能整合在一起。

如下圖所示，新浪微博標簽欄中間的發(fā)布按鈕，輕松籌標簽欄中間的發(fā)起籌款的按鈕。

3.分段選項卡

選項卡式導航，不同平臺有不同的設計規(guī)則。iOS平臺有分段選項卡，安卓平臺提供了固定選項卡、滾動選項卡。本質都是一樣的，即實現(xiàn)容器內不同視圖或內容間的切換。分段選項卡是由兩個或兩個以上寬度相同的分段組成，正常情況下不超過4個，視覺上會有一個很明顯的描邊按鈕。分段選項卡經常會作為二級導航，對主導航內容再次分類，可以在頂部導航欄的下方，也可以直接放在導航欄上。

優(yōu)點：

分段選項卡可以承載重要性和頻率處于同一級別的功能模塊、信息或任務。

讓用戶清楚地知道有多個可供選擇的視圖。

支持用戶在不同視圖間切換

缺點：

選項卡個數(shù)有限，一般不超過4個。

只支持點擊分段實現(xiàn)視圖間的切換，不支持左右滑動的切換。

如下圖所示，iOS的app store與網易云音樂使用了分段式導航。

4.固定選項卡

固定選項卡(選項卡式的一種，又可稱為頂部tab導航)是安卓系統(tǒng)提供的三種主導航方式之一，與iOS提供的分段選項卡類似。同樣能夠扁平化應用的信息結構，適用在應用的主要類別之間切換，并且支持左右滑動切換到不同視圖。隨著當今移動端交互設計的發(fā)展，在實際的運用當中，Android與iOS兩大陣營相互借鑒、完善是一種趨勢，大量iOS應用采用了固定選項卡。(同樣Android應用也大量采用了底部tab導航的方式，歸根結底，設計不應束縛于規(guī)則)

優(yōu)點：

固定選項卡可以承載重要性和頻率處于同一級別的功能模塊、信息或任務。

讓用戶清楚地知道有多個可供選擇的視圖。

支持用戶在不同視圖間切換，并且支持左右滑動切換，方便操作。

缺點：

1.選項卡個數(shù)有限，最多3個(實際上好多應用有用4個的，還是要看情況)。

如下圖所示，固定選項卡的位置一般放置在屏幕頂部(導航欄或導航欄下方)

4.1如下圖所示蝦米音樂、酷狗音樂，當內容分類比較多的時候，且某項功能必須固定在底部，那么選項卡固定在頂部，作為主導航。主導航下方為次級導航，即該選項卡下多個子視圖分類(下圖中，音樂播放功能固定在底部)。

4.2如下圖所示，底部tab導航與固定選項卡組合的導航方式，底部tab導航做為主導航，頂部固定選項卡做為次級導航。(iOS與Android設計思想的結合

5.滾動選項卡

滾動選項卡與固定選項卡同屬選項卡式，大區(qū)別在于：一個模塊中可以顯示多個(超過5個)類別的視圖，并且還可以進行擴展或移除(自定義如新聞類的頻道、現(xiàn)在比較火的直播類的各類游戲)，同樣支持左右滑動切換到不同視圖。

優(yōu)點：

沒有選項卡個數(shù)的顯示，并且還支持擴展或移除。

可以承載重要性和頻率處于同一級別的功能模塊、信息或任務。

支持用戶在不同視圖間切換，并且支持左右滑動切換，方便操作。

缺點：

1.滾動選項卡越多，用戶的選擇壓力越大，這也是滾動選項卡無法避免的劣勢，所以當類別過多的時候，一般都默認顯示一定數(shù)量，其他都放在二級頁面，由用戶自由添加。

如下圖所示，應用同級視圖過多，可選擇擴展和移除的，可選擇滾動選項卡做導航。(下圖的例子，底部tab做主導航，滾動選項卡做為次級導航。)

6.底部、頂部組合tab導航

有些應用存在上下兩層標簽，這是由于應用的信息量巨大且信息的布局有多個層級導致的。這種界面布局較為復雜，特別注重邏輯清晰。

優(yōu)點：

1.底部、頂部組合tab導航解決了諸如新聞資訊類、直播類等信息量巨大且有多個層級的應用的布局問題。這種組合導航方式的運用還是比較多的。

缺點：

雙層tab占用了更多的頁面空間，具體內容的展示空間進一步被壓縮，獲取信息的數(shù)量相應減少。

頁面標簽過多，信息量太大，用戶容易選擇困難，且造成使用混亂。所以，這種組合導航必須注重邏輯梳理清晰，界面排布合理，盡量減少給用戶帶來負面影響。

如下圖新浪新聞、今日頭條，底部tab做主導航、滾動選項卡做為次級導航組合使用。

7.抽屜式導航

抽屜式導航又稱側邊(抽屜) 式導航，是一種瞬時的導航方式，即只有在我們需要的時候才會顯示出來(通過點擊調出)，在我們做出選擇后，再次消失。

優(yōu)點：

由于導航界面的隱藏，主界面的內容信息展示更加清晰簡潔、不受干擾，方便用戶在核心場景下流暢操作。

由于導航界面是隱藏在屏幕之外，展開之后整一頁面都是導航菜單內容，所以可擴展和個性化的空間很大。

缺點：

抽屜式導航可能會降低產品一半的用戶參與度。由于整個導航的隱藏，對于用戶來說，首先是不易發(fā)現(xiàn)，再者是給用戶切換功能帶來了操作成本。

導航菜單按鈕一般位于左上角，在大屏手機時代，單手持握時屬于操作盲區(qū)。

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

7.2當我們設計的信息術語是 沉浸式信息時(如新聞類頁面、閱讀類頁面)，用戶會花80%時間沉浸在界面中，20%的時間用來做其他事情，它們慣用的操作一直是“下拉、刷新”，很少跳轉。一些使用率較低的功能就需要設計師幫用戶“隱藏起來”。如下圖所示：直播吧、小說書城。

7.3抽屜式導航的三種風格：浮層、嵌入式(向右推動原有界面)、新興的模式(向右滑動的3D效果)。輕滑：通過輕滑或點擊的手勢打開抽屜，抽屜部分遮擋或覆蓋原來頁面的內容。嵌入式：通過輕滑、平移或點擊打開抽屜，把原先的頁面內容部分推出屏幕外。新興模式：打開側邊抽屜的時候，嵌入式抽屜不僅把上一級頁面向右推開，還采用3D效果將其推到后面。

8.下拉菜單式

下拉菜單式簡稱下拉式，也是一種瞬時的導航方式，即只有在我們需要的時候才會顯示出來。能讓用戶在有限的屏幕空間上做更多的動作，可以用來篩選同一信息列表下不同類別的信息，或者快速啟動某些常用的功能模塊，而不需要頻繁的頁面跳轉，即可實現(xiàn)操作目的。下拉菜單也可以是浮層或嵌入式的形式，且有一個重要規(guī)則：無論什么手勢，都能打開菜單，比如點擊圖標、輕滑、平移。同樣，隱藏菜單也是這樣。

安卓為這種主導航提供了一種特別的控件——Spinner控件。但要記住，Spinner應該用于同一個類別下的不同視圖間進行導航，而不是跳轉到完全不同的類別。在iOS中下拉菜單為自定義控件。

優(yōu)點：

隱藏了大部分分類信息或功能操作，使主界面展示更加清晰、簡潔。

通過隱藏的方式，能讓用戶在有限的屏幕空間上做更多的操作。

缺點：

與抽屜式導航類似的缺點，隱藏即代表了不易被用戶發(fā)現(xiàn)，增加了用戶的使用及操作成本。

由于是位于屏幕上方，相對隱蔽而且不能結合手勢操作，所以該菜單形式也不適合于頻繁的切換功能使用。

8.1如下圖所示的微信、支付寶，下拉菜單用于快速啟動某些常用的功能模塊。點擊界面其他區(qū)域即可隱藏菜單。

8.2如下圖所示的手機京東、Boss直聘，下拉菜單用于信息列表的篩選，用于篩選同一信息列表下不同類別的信息。需要注意的是，不要讓菜單覆蓋整個屏幕，并且點擊背景的任意區(qū)域都可以隱藏菜單。

8.3如下圖所示的百度網盤、網易郵箱大師，對同一個類別下的不同視圖間進行導航，而不是跳轉到完全不同的類別，原生的Spinner控件的運用比較少了，現(xiàn)在國內的應用都做了差異化的運用(話說回來，在能實現(xiàn)目標的情況下，設計本不因拘泥于規(guī)范)。

二.內容界面結構

內容界面結構主要表現(xiàn)有：列表式導航、宮格式導航、陳列館式導航、卡片式導航等 。內容界面結構導航，顧名思義，是針對內容界面的呈現(xiàn)、布局所整理出來的導航設計模式。大多用于次級導航，有少數(shù)情況會用于主導航。

1.列表式導航

當界面信息的種類比較單一，或者只是作為信息的鏈接入口時，我們可以使用列表式結構。這種結構可以高效、清晰地展示信息，可以容納的信息比較多。一般做為次級導航使用，在少數(shù)應用中做為主導航使用。

優(yōu)勢：

列表式的信息格式比較一致，延展性很強，可以不斷地增加信息。

導航效率較高，可引入搜索功能。

適合層級較深的信息結構。

可以方便地進行分組分類。

劣勢：

當同級內容過多時，由于形式的統(tǒng)一，用戶瀏覽容易造成視覺疲勞。

列表式可能有多層級，用戶需在每個頁面選擇一次進行導航，直至到達目標位置，并且模塊之間的切換需要返回到列表主頁，操作步驟較多。

如果列表中信息量比較龐大，往往需要加入搜索功能，否則用戶尋找信息會很困難。

1.1列表式導航作為主導航，必須滿足層級淺且內容平級的條件。如下圖所示，iOS中的設置、QQ郵箱是為數(shù)不多的用列表式做為主導航的應用。

1.2列表式導航作為次級導航來展示二級甚至更深層級的內容，多用于個人信息、輔助功能、設置、信息列表等，十分常見。

1.3列表式導航作為次級導航展示種類單一的信息，如iOS信息應用，微信的消息列表等。

2.宮格式導航

宮格式(又稱跳板式)主要作為信息聚合的入口，在這種界面中，用戶80%的行為都在尋找信息入口。信息呈現(xiàn)的內容比較少，但是多個項目選取的效率比較高。

優(yōu)勢：

宮格式結構適合作為信息或平臺的入口，為產品或項目信息提供聚合的載體。

適合承載訂閱類產品，或眾多屬性差異非常明顯的分類信息。

各個分類模塊可以由不同團隊獨立開發(fā)再聚合匯總在應用中。

宮格式結構具有較強的延展性，可以無限擴展內容。

缺點：

宮格越多，用戶的選擇壓力越多。席克定律指出，一個人面臨的選擇越多，壓力越多，這是宮格式無法避免的劣勢。

無法在多入口間靈活跳轉，不適合多任務操作。

用戶無法第一時間看到信息。由于宮格式結構是信息或平臺的入口，所以具體信息往往隱藏在次級頁面，所以要看到具體信息，要多操作一步。

因為以上的缺陷，所以宮格式導航直接作為主導航使用的較少，往往作為二級頁面使用，以圖形的形式呈現(xiàn)出來。

2.1宮格式導航被廣泛運用于各平臺操作系統(tǒng)，如下圖所示iOS與Android手機系統(tǒng)界面。

2.2如下圖所示，微店、美圖秀秀是為數(shù)不多的采用宮格式導航做為主導航的應用。

2.3當前，主要是利用宮格式導航的擴展功能來做次級導航，與標簽式導航以及其他類型的導航模式共同構成整個應用的導航系統(tǒng)。如下圖所示，微信錢包中的其他應用服務、ZAKER新聞中的頻道就是采用的宮格式做為次級導航。

3.陳列館式導航

陳列館式導航設計區(qū)別于宮格式，在于可用來呈現(xiàn)實時內容(經常更新、視覺效果直觀的內容)，如新聞、菜譜、視頻或照片等，內容彼此獨立、無層級關系?？梢圆捎镁W格布局或輪盤布局，還可以采用幻燈片模式進行展示。一般做為次級導航使用。

優(yōu)點：

與列表式、宮格式相比較，陳列館式表現(xiàn)形式、視覺效果更加豐富。

展示直觀，且方便瀏覽經常更新的內容。

缺點：

不適合展現(xiàn)頂層入口框架。

界面內容較多時，容易造成視覺疲勞。

3.1網格布局

3.2輪盤布局，半隱藏部分內容，指引用戶左右滑動察看。

3.3瀑布流網格布局，瀑布狀的上下布局，引導用戶的視覺方向，體驗流暢，吸引用戶瀏覽并沉浸其中。

4.卡片式導航

卡片式導航的原型是撲克牌，模仿了撲克牌中常見的切牌、洗牌、棄牌、翻牌等手法，是一種比較新穎的導航設計模式。

優(yōu)點：

方式新穎，配合操作動效，比較吸引用戶。

頁面內容整體性強。

缺點：

不適合展示過多頁面，只能逐個察看，瀏覽效率低。

不能跳躍性地察看間隔頁面，只能按順序察看相鄰頁面。

各頁面結構內容相似，容易忽略后面的內容。

如下圖所示，秒拍的熱榜、探探都是采用了卡片式導航。

5.儀表盤式導航

儀表式導航提供了一種度量關鍵績效指標(KPI)是否達到要求的方法。經過設計以后，每一項量度都可以顯示出額外的信息。這種主要的導航模式對于商業(yè)應用、分析工具以及銷售和市場應用非常有用。但不要載入過多信息，對于要展示的關鍵指標或數(shù)據需經過仔細研究再做決定。

優(yōu)點：

1.使數(shù)據更加生動直觀易讀

注意：

2.有特定的使用場景， 在需要使用關鍵指標或數(shù)據作為應用入口的時候，可以采用儀表盤式。

如下圖所示，支付寶的資產管理使用了儀表盤式導航。

6.輪播式導航

當應用的信息足夠扁平的時候，可以嘗試使用輪播式導航。

優(yōu)點：

1.這種方式大程度保證了頁面的簡潔性和內容的完整性，一般都結合頁面指示器(即小圓點)，操作方便，左右滑動切換。

缺點：

承載入口的數(shù)量有限，超過10個可能就太多了。

用戶只能切換到相鄰頁面，難以快速切換到目標頁面。且容易迷失位置，所以需要頁面指示器(頁面過多時，需用其他指示方式如數(shù)字，來表示位置)指示用戶當前的位置。

如下圖所示，天氣應用就使用了輪播導航，一個頁面展示當前城市的完整天氣情況，左右滑動切換察看其他城市的情況，十分方便

輪播式導航也常用于察看圖片，常于其他導航模式結合，作為廣告banner呈現(xiàn)，這種方式就比較常見了。如下圖所示的天貓、網易云課堂。

7.折疊菜單式導航

折疊菜單式導航(又稱手風琴式)，就是運用動態(tài)的效果，將二級的信息展開，無需跳轉到新的頁面，使用戶在同一個頁面上查看到更多的信息，不需要任何跳轉。折疊菜單式一般層級較少，展開后就可看到具體內容，且內容量相對較小，方便再次收起。

優(yōu)點：

1.通過折疊的方式，用戶在當前頁面就能獲取大量信息，這種方式比跳轉到二級頁面再跳轉回來更高效。

注意：

1.一定要使用常見的圖標來進行指示折疊式菜單的打開或關閉狀態(tài)，避免用戶產生疑問。

如下圖所示，支付寶的客服功能，QQ的好友列表都用到了折疊菜單。

三.關于導航的一些思考

雖然每個導航模式有常見的用法，但并沒有絕對的限定，要具體情況具體分析。比如固定選項卡可以作為一級導航，但與底部tab導航結合的話，就會變成二級導航。

就實際情況而言，很少有APP只用一種導航模式，絕大多數(shù)APP都在混用多種導航模式，因為一個APP由架構和內容界面組成(與我對導航的分類相同)，架構需要導航模式支撐，內容界面的展現(xiàn)又可能涉及多種導航模式。具體得根據產品的實際情況，選擇合適的導航模式。

文中的導航模式只是一種參考，這些模式其實還有各種各樣的變形。只要能夠引導用戶清晰明確地找到信息或完成任務的導航都是優(yōu)秀的導航，并不一定非得使用某種導航。

最后說一點，整理這些導航模式，是想讓自己好好整理一下交互的基礎知識，讓設計做得有理有據。在這里與大家共勉，要想飛得更高，得打好根基。

分享題目：解析移動端導航交互設計模式
標題鏈接：http://bm7419.com/news/166020.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供外貿網站建設、定制網站、網站改版、網站排名、小程序開發(fā)、微信公眾號

廣告

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