鑒于目前交互設(shè)計的知識體系較為混亂，我寫了這個［交互基礎(chǔ)］系列專題，旨在整理移動端交互設(shè)計基礎(chǔ)知識。鞏固自己的知識體系，也與大家共勉，打好基礎(chǔ)，才能飛得更高！

前言

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

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

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

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

1.底部tab導(dǎo)航

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

優(yōu)點(diǎn)：

1. 底部tab導(dǎo)航可以承載重要性和頻率處于同一級別的功能模塊、信息或任務(wù)。
2. 在第一時間支持使用者獲取重要性最高、頻率最大的信息或任務(wù)。
3. 支持擁護(hù)在不同模塊、信息或任務(wù)之間快速切換。
4. 可以包容其他信息結(jié)構(gòu)，構(gòu)建出容量更大的模塊、信息或任務(wù)結(jié)構(gòu)。很多APP的主導(dǎo)航模式都是底部tab導(dǎo)航，然后又使用其他的導(dǎo)航模式去承載界面中的具體信息。

缺點(diǎn)：

1. 由于尺寸限制，tab上限為5個，超過5個需要把“更多”放在最右側(cè)的第五個選項卡上，或者需要考慮產(chǎn)品的需求結(jié)構(gòu)是否合適，或者考慮更換導(dǎo)航模式。
2. 底部tab欄占用了一定的空間，減少了頁面的信息承載量。有些產(chǎn)品為了更好展示頁面信息、方便閱讀，采用一種隱藏tab欄的做法，即上滑閱讀時隱藏，下滑返回時再顯示。這種做法雖然照顧了頁面的信息展示，但也可能會讓導(dǎo)航失去便利性，降低切換效率，使用需慎重。

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

2.底部tab的擴(kuò)展導(dǎo)航——舵式導(dǎo)航

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

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

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

3.分段選項卡

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

優(yōu)點(diǎn)：

1. 分段選項卡可以承載重要性和頻率處于同一級別的功能模塊、信息或任務(wù)。
2. 讓用戶清楚地知道有多個可供選擇的視圖。
3. 支持用戶在不同視圖間切換

缺點(diǎn)：

1. 選項卡個數(shù)有限，一般不超過4個。
2. 只支持點(diǎn)擊分段實現(xiàn)視圖間的切換，不支持左右滑動的切換。

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

4.固定選項卡

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

優(yōu)點(diǎn)：

1. 固定選項卡可以承載重要性和頻率處于同一級別的功能模塊、信息或任務(wù)。
2. 讓用戶清楚地知道有多個可供選擇的視圖。
3. 支持用戶在不同視圖間切換，并且支持左右滑動切換，方便操作。

缺點(diǎn)：

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

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

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

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

5.滾動選項卡

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

優(yōu)點(diǎn)：

1. 沒有選項卡個數(shù)的顯示，并且還支持?jǐn)U展或移除。
2. 可以承載重要性和頻率處于同一級別的功能模塊、信息或任務(wù)。
3. 支持用戶在不同視圖間切換，并且支持左右滑動切換，方便操作。

缺點(diǎn)：

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

應(yīng)用同級視圖過多，可選擇擴(kuò)展和移除的，可選擇滾動選項卡做導(dǎo)航。

6.底部、頂部組合tab導(dǎo)航

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

1. 雙層tab占用了更多的頁面空間，具體內(nèi)容的展示空間進(jìn)一步被壓縮，獲取信息的數(shù)量相應(yīng)減少。
2. 頁面標(biāo)簽過多，信息量太大，用戶容易選擇困難，且造成使用混亂。所以，這種組合導(dǎo)航必須注重邏輯梳理清晰，界面排布合理，盡量減少給用戶帶來負(fù)面影響。

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

7.抽屜式導(dǎo)航

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

優(yōu)點(diǎn)：

1. 由于導(dǎo)航界面的隱藏，主界面的內(nèi)容信息展示更加清晰簡潔、不受干擾，方便用戶在核心場景下流暢操作。
2. 由于導(dǎo)航界面是隱藏在屏幕之外，展開之后整一頁面都是導(dǎo)航菜單內(nèi)容，所以可擴(kuò)展和個性化的空間很大。

缺點(diǎn)：

1. 抽屜式導(dǎo)航可能會降低產(chǎn)品一半的用戶參與度。由于整個導(dǎo)航的隱藏，對于用戶來說，首先是不易發(fā)現(xiàn)，再者是給用戶切換功能帶來了操作成本。
2. 導(dǎo)航菜單按鈕一般位于左上角，在大屏手機(jī)時代，單手持握時屬于操作盲區(qū)。

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

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

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

8.下拉菜單式

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

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

優(yōu)點(diǎn)：

1. 隱藏了大部分分類信息或功能操作，使主界面展示更加清晰、簡潔。
2. 通過隱藏的方式，能讓用戶在有限的屏幕空間上做更多的操作。

缺點(diǎn)：

1. 與抽屜式導(dǎo)航類似的缺點(diǎn)，隱藏即代表了不易被用戶發(fā)現(xiàn)，增加了用戶的使用及操作成本。
2. 由于是位于屏幕上方，相對隱蔽而且不能結(jié)合手勢操作，所以該菜單形式也不適合于頻繁的切換功能使用。

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

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

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

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

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

1.列表式導(dǎo)航

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

優(yōu)勢：

1. 列表式的信息格式比較一致，延展性很強(qiáng)，可以不斷地增加信息。
2. 導(dǎo)航效率較高，可引入搜索功能。
3. 適合層級較深的信息結(jié)構(gòu)。
4. 可以方便地進(jìn)行分組分類。

劣勢：

1. 當(dāng)同級內(nèi)容過多時，由于形式的統(tǒng)一，用戶瀏覽容易造成視覺疲勞。
2. 列表式可能有多層級，用戶需在每個頁面選擇一次進(jìn)行導(dǎo)航，直至到達(dá)目標(biāo)位置，并且模塊之間的切換需要返回到列表主頁，操作步驟較多。
3. 如果列表中信息量比較龐大，往往需要加入搜索功能，否則用戶尋找信息會很困難。

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

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

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

2.宮格式導(dǎo)航

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

優(yōu)勢：

1. 宮格式結(jié)構(gòu)適合作為信息或平臺的入口，為產(chǎn)品或項目信息提供聚合的載體。
2. 適合承載訂閱類產(chǎn)品，或眾多屬性差異非常明顯的分類信息。
3. 各個分類模塊可以由不同團(tuán)隊獨(dú)立開發(fā)再聚合匯總在應(yīng)用中。
4. 宮格式結(jié)構(gòu)具有較強(qiáng)的延展性，可以無限擴(kuò)展內(nèi)容。

缺點(diǎn)：

1. 宮格越多，用戶的選擇壓力越多。席克定律指出，一個人面臨的選擇越多，壓力越多，這是宮格式無法避免的劣勢。
2. 無法在多入口間靈活跳轉(zhuǎn)，不適合多任務(wù)操作。
3. 用戶無法第一時間看到信息。由于宮格式結(jié)構(gòu)是信息或平臺的入口，所以具體信息往往隱藏在次級頁面，所以要看到具體信息，要多操作一步。

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

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

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

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

3.陳列館式導(dǎo)航

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

優(yōu)點(diǎn)：

1. 與列表式、宮格式相比較，陳列館式表現(xiàn)形式、視覺效果更加豐富。
2. 展示直觀，且方便瀏覽經(jīng)常更新的內(nèi)容。

缺點(diǎn)：

1. 不適合展現(xiàn)頂層入口框架。
2. 界面內(nèi)容較多時，容易造成視覺疲勞。

3.1網(wǎng)格布局

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

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

4.卡片式導(dǎo)航

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

優(yōu)點(diǎn)：

1. 方式新穎，配合操作動效，比較吸引用戶。
2. 頁面內(nèi)容整體性強(qiáng)。

缺點(diǎn)：

1. 不適合展示過多頁面，只能逐個察看，瀏覽效率低。
2. 不能跳躍性地察看間隔頁面，只能按順序察看相鄰頁面。
3. 各頁面結(jié)構(gòu)內(nèi)容相似，容易忽略后面的內(nèi)容。

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

5.儀表盤式導(dǎo)航

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

優(yōu)點(diǎn)：

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

注意：

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

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

6.輪播式導(dǎo)航

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

1. 承載入口的數(shù)量有限，超過10個可能就太多了。
2. 用戶只能切換到相鄰頁面，難以快速切換到目標(biāo)頁面。且容易迷失位置，所以需要頁面指示器（頁面過多時，需用其他指示方式如數(shù)字，來表示位置）指示用戶當(dāng)前的位置。

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

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

7.折疊菜單式導(dǎo)航

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

優(yōu)點(diǎn)：

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

注意：

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

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

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

1. 雖然每個導(dǎo)航模式有常見的用法，但并沒有絕對的限定，要具體情況具體分析。比如固定選項卡可以作為一級導(dǎo)航，但與底部tab導(dǎo)航結(jié)合的話，就會變成二級導(dǎo)航。
2. 就實際情況而言，很少有APP只用一種導(dǎo)航模式，絕大多數(shù)APP都在混用多種導(dǎo)航模式，因為一個APP由架構(gòu)和內(nèi)容界面組成（與我對導(dǎo)航的分類相同），架構(gòu)需要導(dǎo)航模式支撐，內(nèi)容界面的展現(xiàn)又可能涉及多種導(dǎo)航模式。具體得根據(jù)產(chǎn)品的實際情況，選擇合適的導(dǎo)航模式。
3. 文中的導(dǎo)航模式只是一種參考，這些模式其實還有各種各樣的變形。只要能夠引導(dǎo)用戶清晰明確地找到信息或完成任務(wù)的導(dǎo)航都是優(yōu)秀的導(dǎo)航，并不一定非得使用某種導(dǎo)航。

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

作者：雨無聲，微信公眾號：int－PD，快服科技交互設(shè)計師，2年互聯(lián)網(wǎng)交互設(shè)計經(jīng)驗，有多款移動端產(chǎn)品設(shè)計經(jīng)驗。

本文由@雨無聲 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。