解析移動端導航交互設(shè)計模式

前言

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

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

一.主導航結(jié)構(gòu)

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

1.底部tab導航

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

優(yōu)點：

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

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

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

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

缺點：

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

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

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

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

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

優(yōu)點：

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

缺點：

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

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

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

3.分段選項卡

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

優(yōu)點：

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

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

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

缺點：

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

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

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

4.固定選項卡

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

優(yōu)點：

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

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

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

缺點：

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

如下圖所示，固定選項卡的位置一般放置在屏幕頂部(導航欄或?qū)Ш綑谙路?

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

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

5.滾動選項卡

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

優(yōu)點：

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

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

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

缺點：

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

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

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

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

優(yōu)點：

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

缺點：

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

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

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

7.抽屜式導航

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

優(yōu)點：

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

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

缺點：

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

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

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

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

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

8.下拉菜單式

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

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

優(yōu)點：

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

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

缺點：

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

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

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

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

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

二.內(nèi)容界面結(jié)構(gòu)

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

1.列表式導航

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

優(yōu)勢：

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

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

適合層級較深的信息結(jié)構(gòu)。

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

劣勢：

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

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

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

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

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

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

2.宮格式導航

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

優(yōu)勢：

宮格式結(jié)構(gòu)適合作為信息或平臺的入口，為產(chǎn)品或項目信息提供聚合的載體。

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

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

宮格式結(jié)構(gòu)具有較強的延展性，可以無限擴展內(nèi)容。

缺點：

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

無法在多入口間靈活跳轉(zhuǎn)，不適合多任務(wù)操作。

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

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

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

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

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

3.陳列館式導航

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

優(yōu)點：

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

展示直觀，且方便瀏覽經(jīng)常更新的內(nèi)容。

缺點：

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

界面內(nèi)容較多時，容易造成視覺疲勞。

3.1網(wǎng)格布局

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

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

4.卡片式導航

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

優(yōu)點：

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

頁面內(nèi)容整體性強。

缺點：

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

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

各頁面結(jié)構(gòu)內(nèi)容相似，容易忽略后面的內(nèi)容。

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

5.儀表盤式導航

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

優(yōu)點：

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

注意：

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

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

6.輪播式導航

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

優(yōu)點：

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

缺點：

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

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

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

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

7.折疊菜單式導航

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

優(yōu)點：

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

注意：

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

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

三.關(guān)于導航的一些思考

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

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

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

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

本文題目：解析移動端導航交互設(shè)計模式
當前網(wǎng)址：http://www.bm7419.com/news20/166020.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、用戶體驗、網(wǎng)站策劃、虛擬主機、定制網(wǎng)站、網(wǎng)站建設(shè)

廣告

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