馬上就是中秋節(jié)啦，在此25學(xué)堂全體童鞋們祝福各位移動app設(shè)計師和移動產(chǎn)品經(jīng)理中秋快樂。同時，25學(xué)堂的小編從互聯(lián)網(wǎng)一些事網(wǎng)站中看到了這樣一篇全解app導(dǎo)航的網(wǎng)站。

當(dāng)然之前，25學(xué)堂原創(chuàng)了一篇《8種移動APP導(dǎo)航設(shè)計模式大對比》文章。

今天再來跟大家一起重溫下APP導(dǎo)航交互設(shè)計全解。特別適合APP設(shè)計小白來學(xué)習(xí)。

首先，我們來看一下一個叫做原始導(dǎo)航的導(dǎo)航。

原始導(dǎo)航是一個最最粗糙的導(dǎo)航，通過純文字的鏈接入口來導(dǎo)航。如下圖：

一、標(biāo)簽導(dǎo)航(選項卡導(dǎo)航)

有了原始導(dǎo)航，你可能會說，原始導(dǎo)航這種入口的擺放方式太占空間了，就五個入口就占據(jù)了整個界面。有沒有一種更加省空間的導(dǎo)航模式呢?當(dāng)然有。

首先，我們將五個入口放到界面的下方，就會形成常見的底部標(biāo)簽導(dǎo)航。

通常，底部標(biāo)簽導(dǎo)航有4～5標(biāo)簽，一般不會超過5個，有更多的選項操作時可將最后一項設(shè)置為更多，將一些次要功能放置在更多里。這是一種非常常見的導(dǎo)航模式。如果你的應(yīng)用需要用戶頻繁的在不同分頁切換，可以采用這種導(dǎo)航。雖然它還是會占用一定的界面空間，但比起原始導(dǎo)航來說好多了。

現(xiàn)在很多APP(包括ios和android)都在用這種模式。也是目前很多移動APP設(shè)計大牛和產(chǎn)品經(jīng)理所推崇的app導(dǎo)航方式。

當(dāng)然，如果你在五個標(biāo)簽中，有一個標(biāo)簽是最重要或最頻繁使用的，想要重點突出，可以使用下面變形的底部標(biāo)簽導(dǎo)航。

這種底部標(biāo)簽導(dǎo)航模式并不常見，但在一些APP中還是可以看到它的應(yīng)用。比如微博的底部標(biāo)簽導(dǎo)航。

其次，我們將標(biāo)簽放到界面的上方，就會形成常見的頂部標(biāo)簽導(dǎo)航。

頂部標(biāo)簽導(dǎo)航在ios app中一般當(dāng)作二級導(dǎo)航。在android app中，這種導(dǎo)航模式以前被用作一級導(dǎo)航，但自從google推出了“抽屜導(dǎo)航”作為一級導(dǎo)航后，頂部標(biāo)簽導(dǎo)航就被常用為二級導(dǎo)航了。

作為一個二級導(dǎo)航，頂部標(biāo)簽導(dǎo)航應(yīng)用于多種情境下，可以固定數(shù)量，展示有限的幾個標(biāo)簽。也可以擴大一定的數(shù)量，變成向左滑動展現(xiàn)更多標(biāo)簽。甚至可以像網(wǎng)易新聞那樣，衍生出訂閱功能。頂部標(biāo)簽導(dǎo)航也是一種非常常見的導(dǎo)航模式。

二、抽屜導(dǎo)航

說完標(biāo)簽導(dǎo)航，你可能會說，我是有六七個導(dǎo)航，但其中只有一個導(dǎo)航是主要的，別的雖然有用，但用戶非常非常少用。這種情況下能不能只顯示主要的內(nèi)容，其它導(dǎo)航隱藏起來呢?這樣還可以更近一步地節(jié)省頁面空間。

當(dāng)然可以。在這種情況下你可以使用抽屜導(dǎo)航。但是不建議用抽屜導(dǎo)航。至于為什么可以閱讀《看完《方寸之間》之后，對APP導(dǎo)航設(shè)計的讀后感》

抽屜導(dǎo)航是將菜單隱藏在當(dāng)前頁面后，點擊導(dǎo)航入口即可像拉抽屜一樣拉出菜單。

這種導(dǎo)航的優(yōu)點是：節(jié)省頁面展示空間，讓用戶將更多的注意力聚焦到當(dāng)前頁面。比較適合于不那么需要頻繁切換內(nèi)容的應(yīng)用，例如對設(shè)置、關(guān)于等內(nèi)容的隱藏。

缺點是：對于那些需要經(jīng)常在不同導(dǎo)航間切換或者核心功能有一堆入口的app不適用。抽屜導(dǎo)航設(shè)計需要注意的是一定要提供菜單畫出的過渡動畫。

三：下拉導(dǎo)航

講完抽屜導(dǎo)航后，還有另外一種類似的導(dǎo)航模式同樣可以節(jié)省頁面空間，并且隱藏次要入口，這就是下拉導(dǎo)航。

下拉導(dǎo)航，與抽屜式導(dǎo)航的目的相同，都是為了突出內(nèi)容。一般位于產(chǎn)品頂部，通過點擊呼出導(dǎo)航菜單。導(dǎo)航菜單以浮窗形式位于界面上層，可通過點擊導(dǎo)航菜單以外的區(qū)域使其收起。下拉導(dǎo)航的菜單與界面的連貫性比抽屜式要好，容易讓用戶感知當(dāng)前位置。但由于是位于屏幕上方，相對隱蔽而且不能結(jié)合手勢操作，所以該菜單形式也不適合于頻繁的切換功能使用?？紤]到導(dǎo)航菜單的可用面積較小，所以一般采用列表的形式展示菜單內(nèi)容。

下拉導(dǎo)航有一種比較常見的變式，就是下來菜單中展示兩級甚至多級(一般就是兩級，沒見過更多的)，很多人稱其為超級菜單導(dǎo)航。如下：

這種導(dǎo)航模式說實話用得比較少。但最近在各種O2O形態(tài)的APP中有比較多的使用(可能跟分類級別多而且不好組織有關(guān))。比如：美團、百度外賣等都有用超級菜單。

四、宮格導(dǎo)航

我在原始導(dǎo)航里設(shè)定了5個入口?？墒?，如果有7、8個甚至10多個入口呢?而且這些入口你也不好說到底哪個對用戶是最重要的，重要性差不多，怎么辦?OK，宮格導(dǎo)航可以解決這個問題。

宮格導(dǎo)航將主要入口全部聚合在頁面，讓用戶做出選擇。這樣的組織方式雖然無法讓用戶第一時間看到內(nèi)容或執(zhí)行操作，用戶的選擇壓力也比較大。但卻能夠讓用戶整體上了解APP提供的服務(wù)，從而選擇自己所需要的那個服務(wù)。

目前來說，這種導(dǎo)航模式越來越少用在一級導(dǎo)航了。不過，作為二級導(dǎo)航，作為一系列工具入口的聚合，或作為內(nèi)容列表的一種圖形化呈現(xiàn)形式，還是存在在各種APP里。如：zakeer的核心頁面就是宮格導(dǎo)航，但其與訂閱功能結(jié)合，沒有讓所有宮格斗展示出了。各種手機界面打開后的app展示頁面基本上都是宮格模式的。

由于受到卡片式設(shè)計的影響，宮格模式的變形也非常多。接下來簡單說一下這些變形。

首先，可以將宮格的卡片變大，宮格與宮格時間不留空白，如下圖：

　　是不是和錘子手機的宮格展示布局一樣了?

?

上面這種展現(xiàn)方式所能展現(xiàn)的卡片數(shù)量有限。如果我們將其稍做調(diào)整，增加縱向滾動功能，就可以增加卡片數(shù)量的展現(xiàn)，可以說是無限的。如下圖：

　　優(yōu)酷安卓app里的“頻道”模塊采取的就是這種模式。

如果更進一步，是不是可以對上面這種無限的展示宮格進行分類呢?當(dāng)然可以。然后我們就有了下面這種導(dǎo)航模式：

當(dāng)然，每個分類下能夠展示的數(shù)量可以更多，并不限于3個。

這時，如果我們想要在分類下，展示更多的內(nèi)容，但又想多展示分類，怎么辦?可以在以上的導(dǎo)航模式中再進一步變形，如圖：

允許每行宮格橫向滑動展示更多，這樣就擴展了展示的數(shù)量，又不會減少分類數(shù)量的展示。

宮格導(dǎo)航還有沒有別的變式呢?當(dāng)然有。比如：

可以通過變化宮格導(dǎo)航中卡片的大小，來凸顯宮格中內(nèi)容的不同重要性。

可以將宮格導(dǎo)航和訂閱功能結(jié)合，形成獨特的訂閱導(dǎo)航。

……

變化形式根據(jù)不同的需要很可能有很多種。一般來講，常見的這些導(dǎo)航模式就夠了。

五、列表導(dǎo)航

列表式APP導(dǎo)航是我們在APP設(shè)計種必不可少的一個信息承載模式。當(dāng)然作為一個APP的導(dǎo)航也是非常方便的。這種導(dǎo)航模式從原始導(dǎo)航中很好轉(zhuǎn)換，只要將列表左對齊，增加向右箭頭表明是否還有下級即可。如圖：

目前來看，列表導(dǎo)航通常用于二級頁，由于它與宮格導(dǎo)航一樣，不會默認(rèn)展示任何實質(zhì)內(nèi)容，所以通常app不會在首頁使用它。這種導(dǎo)航結(jié)構(gòu)清晰，易于理解，冷靜高效，能夠幫助用戶快速的定位去到對應(yīng)的頁面。

自然，如果你想要對列表進行分類也是可以的。這樣邏輯上會更加清晰。如下：

如果說雖然可以分類，但實在不知道如何確定分類名稱。把分類名稱去掉也是可以的。只是用間距將每一組列表隔開也能起到梳理邏輯的作用。

對于列表導(dǎo)航來說，還有一種常見的變式：將列表下內(nèi)容中的核心內(nèi)容展示出來，常見的是核心數(shù)據(jù)展現(xiàn)。如下：

這種變式有時候也被成為儀表式導(dǎo)航，通過標(biāo)題和核心數(shù)據(jù)來展現(xiàn)核心內(nèi)容，同時作為導(dǎo)航使用。這種導(dǎo)航模式可以參見各種互聯(lián)網(wǎng)金融APP中的產(chǎn)品列表。

六、輪播導(dǎo)航

如果我們將原始導(dǎo)航中的5個入口共處一個頁面變成每個頁面僅限一個入口可以嗎?或者說，我們將宮格導(dǎo)航變成一宮格呢?會有一種新的導(dǎo)航模式嗎?

按照上面的假設(shè)，我們會有一種常見的導(dǎo)航模式：輪播導(dǎo)航。如下：

當(dāng)然，只有應(yīng)用信息足夠扁平，可以嘗試輪播導(dǎo)航。輪播導(dǎo)航如果應(yīng)用得當(dāng)，能夠給人耳目一新的體驗。輪播導(dǎo)航能夠最大程度的保證應(yīng)用的頁面簡潔性，操作也是最方便的，只需要手指左右滑動。缺點也很明顯：承載入口的數(shù)量有限，超過10個可能就優(yōu)點多了。這種導(dǎo)航常見于查看圖片，也經(jīng)常與其他導(dǎo)航模式結(jié)合，作為banner廣告呈現(xiàn)。

七、點聚導(dǎo)航

如果一個界面，因為內(nèi)容或功能展示的需求，需要極端簡化其入口，應(yīng)該如何做?點聚導(dǎo)航是一種選擇。

當(dāng)層級框架比較復(fù)雜，幾個并列的模塊中都有用戶頻繁使用的核心內(nèi)容，但有需要簡化頁面時，會考慮使用點聚式導(dǎo)航。點聚式導(dǎo)航將多個核心功能聚匯到主界面中顯示，方便用戶呼出使用。由于點聚式占用空間小，一般會融入一些動態(tài)的互動效果，讓導(dǎo)航更具趣味性。很多圖片拍攝及編輯、視頻拍攝及編輯類APP會使用這類導(dǎo)航。

八、隱喻導(dǎo)航

如果原始導(dǎo)航中的五個入口，變成游戲界面中的五個關(guān)卡，只是簡單地將其按照上下順序列出來就會不太適用。游戲?qū)?dǎo)航的要求不僅要可用，更要和整個游戲的風(fēng)格等匹配。因此，有了隱喻導(dǎo)航這種模式，用頁面模仿應(yīng)用的隱喻對象。這種導(dǎo)航主要用于游戲，但在幫助導(dǎo)航 人們組織事物(如日記、書籍等)，并對其進行分類的應(yīng)用中也能看到。

這是25學(xué)堂為大家重新整理的8個APP導(dǎo)航交互設(shè)計的全解，主要告訴他們?nèi)绾螒?yīng)用這些導(dǎo)航到自己的app設(shè)計當(dāng)中去。即合理又漂亮。