合理的移動(dòng)導(dǎo)航設(shè)計(jì)能夠盡可能地減少摩擦，引導(dǎo)用戶去他們要去的地方。

這篇文章匯總了移動(dòng)端導(dǎo)航設(shè)計(jì)最常見的樣式、要注意的設(shè)計(jì)準(zhǔn)則以及優(yōu)秀的案例分析，一起來系統(tǒng)性地掌握這些知識(shí)～

什么是移動(dòng)端導(dǎo)航？

簡(jiǎn)單來說，導(dǎo)航是用戶從 A 點(diǎn)到 B 點(diǎn)的方式，是他們發(fā)現(xiàn)設(shè)計(jì)點(diǎn)并與產(chǎn)品交互的過程。

可能很多用戶認(rèn)為導(dǎo)航的目標(biāo)是“在盡可能短的時(shí)間內(nèi)讓用戶從 A 到 B”，但時(shí)間短只屬于操作結(jié)果，這個(gè)結(jié)果需要依靠合理且簡(jiǎn)單的設(shè)計(jì)才能實(shí)現(xiàn)。

△ 一個(gè)頁面中可以存在多種導(dǎo)航。例如在油管首頁，有頂部導(dǎo)航欄、篩選器導(dǎo)航和底部導(dǎo)航，這些導(dǎo)航相互搭配為產(chǎn)品助力。

移動(dòng)端導(dǎo)航常見的設(shè)計(jì)樣式

1. 漢堡菜單

圍繞漢堡菜單有很多爭(zhēng)論，但存在即合理，在合適的場(chǎng)景下漢堡菜單也能發(fā)揮大的作用。

來看一下漢堡菜單具備的優(yōu)勢(shì)：

• 視覺空間：節(jié)省屏幕空間，包含有價(jià)值的信息；
• 心智模型：大多數(shù)用戶熟悉這種設(shè)計(jì)樣式并知道如何操作；
• 使用經(jīng)驗(yàn)：調(diào)節(jié)學(xué)習(xí)曲線，改善使用體驗(yàn)。

△ 使用用戶熟悉的設(shè)計(jì)可以事半功倍。例如美團(tuán)和餓了么兩個(gè)產(chǎn)品有著完全不同的主題色，但外賣點(diǎn)餐流程卻是一樣的，仍然是用戶熟悉的操作，并沒有因?yàn)楫a(chǎn)品的不同而改變點(diǎn)餐流程。

2. 底部導(dǎo)航

底部導(dǎo)航欄通常包含產(chǎn)品中最主要的導(dǎo)航鏈接，用戶只需要簡(jiǎn)單的點(diǎn)擊就能直觀地在不同頁面間切換。

△ 幾乎每款產(chǎn)品都缺少不了底部導(dǎo)航欄，它方便用戶單手操作，不需要太費(fèi)力就能快速訪問產(chǎn)品頁面，提高可用性。

3. 頂部導(dǎo)航

關(guān)于頂部導(dǎo)航，可以看之前分享的文章，里面詳細(xì)介紹了頂部導(dǎo)航的設(shè)計(jì)方法。

△ 頂部導(dǎo)航通常包含頁面中最重要的信息，與其他輔助導(dǎo)航結(jié)合使用。

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

卡片式是一種出色的設(shè)計(jì)樣式，支持改變各種形狀和大小，并且能展示文本、鏈接或照片等各種元素。

隨著網(wǎng)絡(luò)上的內(nèi)容越來越碎片化和個(gè)性化，卡片是在頁面中聚合單個(gè)信息的好方式。

△ 為了改進(jìn)體驗(yàn)，卡片可以個(gè)性化顯示不同的內(nèi)容。另外卡片很容易適應(yīng)不同的屏幕尺寸，配合響應(yīng)性設(shè)計(jì)。

5. 標(biāo)簽

標(biāo)簽往往是在一個(gè)大主題下同時(shí)支持多個(gè)選項(xiàng)，每個(gè)選項(xiàng)都轉(zhuǎn)到不同的界面。

△ 標(biāo)簽通常用于在同一頁面中的幾個(gè)視圖之間切換，展示內(nèi)容上的差異性。而頂部導(dǎo)航欄有主頁、搜索、收藏夾等多個(gè)圖標(biāo)，代表不同的功能。

6. 基于手勢(shì)的導(dǎo)航

基于手勢(shì)的導(dǎo)航可以讓用戶在所需方向上快速滑動(dòng)，來完成特定的操作。

這種樣式的優(yōu)點(diǎn)在于，即使最沒有經(jīng)驗(yàn)的用戶也很容易掌握，因?yàn)槭謩?shì)通常是直觀的。

△ 國(guó)外大火的約會(huì)產(chǎn)品Tinder以及國(guó)內(nèi)的探探，都使用了基于手勢(shì)的導(dǎo)航樣式，為用戶帶來滑動(dòng)的樂趣。

△ 基于手勢(shì)的導(dǎo)航并不是Tinder發(fā)明的，但這款產(chǎn)品無疑將這種流行帶給了大眾。經(jīng)典的向左或向右滑動(dòng)模式保持了事物的動(dòng)態(tài)性、簡(jiǎn)單性和娛樂性。

7. 全屏導(dǎo)航

全屏導(dǎo)航是指將大部分屏幕用于導(dǎo)航操作，能夠很好地將用戶的注意力聚焦到具體的產(chǎn)品細(xì)節(jié)上。這是一種以連貫的方式提供大量導(dǎo)航的方法，可以立即幫助用戶了解產(chǎn)品的功能。

△ 點(diǎn)擊圖片可以跳轉(zhuǎn)到全屏大圖導(dǎo)航中，能夠更清晰地查看商品的外觀狀態(tài)。

8. 3D touch

最初是由蘋果公司提供給用戶的，這是一種創(chuàng)建導(dǎo)航快捷方式的方法，可以顯示選定的 APP 的一些關(guān)鍵操作。

△ 蘋果為手機(jī)創(chuàng)造了一種全新的快捷方式，同時(shí)提供了強(qiáng)大的可用性。

△ 3D touch另一個(gè)用途是內(nèi)容預(yù)覽，在處理內(nèi)容選項(xiàng)時(shí)例如收件箱或文章列表時(shí)，這是給用戶提供預(yù)覽的好方法。

移動(dòng)端導(dǎo)航設(shè)計(jì)準(zhǔn)則

1. 導(dǎo)航需要直觀明顯

對(duì)所有類型的導(dǎo)航來說都是如此。在移動(dòng)端中由于屏幕空間的縮小和交互成本的增加，導(dǎo)航體驗(yàn)的好壞會(huì)對(duì)產(chǎn)品產(chǎn)生很大的影響。

△ 從可用性角度來看，直觀的導(dǎo)航對(duì)目標(biāo)用戶來說至關(guān)重要。這意味著需要進(jìn)行嚴(yán)格的測(cè)試和大量的研究，可以使用卡片分類或樹狀圖等方法來驗(yàn)證導(dǎo)航的可用性。

2. 考慮手指的位置

這點(diǎn)對(duì)于移動(dòng)應(yīng)用來說至關(guān)重要，沒有用戶想反復(fù)點(diǎn)擊圖標(biāo)卻沒有反應(yīng)。

△ 鏈接和按鈕的尺寸需要足夠大，以便大多數(shù)用戶在第一次點(diǎn)擊時(shí)就能成功點(diǎn)擊。頁面中按鈕的尺寸最小通常保持在10mm。

3. 建立視覺層級(jí)避免混亂

小屏幕意味著更容易陷入混亂。即使頁面中有少量的元素，如果元素沒有平衡，用戶仍然會(huì)有混亂的感覺。

△ 極簡(jiǎn)主義是UI設(shè)計(jì)的一種特定風(fēng)格，通過必備的頂部導(dǎo)航欄、留白以及由大小、版式、顏色劃分的視覺層級(jí)來規(guī)劃頁面內(nèi)容。

移動(dòng)端導(dǎo)航示例分析

1. Facebook

Facebook 的導(dǎo)航構(gòu)成比較復(fù)雜，融合了多種不同樣式的導(dǎo)航。

△ Facebook主頁包括漢堡菜單、頂部導(dǎo)航欄和底部導(dǎo)航欄。通過這種方式，這家社交媒體巨頭明確的將主要內(nèi)容與次要內(nèi)容分隔開。

2. Spotify

Spotif 作為音樂流媒體業(yè)務(wù)的巨頭，即使對(duì)于新用戶來說，頁面的設(shè)計(jì)也容易理解和探索。

△ 以高度視覺化的形式突出每張卡片背后的關(guān)鍵內(nèi)容，另外底部導(dǎo)航也可以完成繁重的任務(wù)指引。

3. App Store

App Store 是使用標(biāo)簽進(jìn)行導(dǎo)航的好例證，每個(gè)標(biāo)簽代表了同一內(nèi)容的不同方面。

△ 在排行榜中，用戶可以瀏覽付費(fèi)、免費(fèi)和熱門的標(biāo)簽頁，從而快速建立一致性和對(duì)其他頁面的感知。

4. Telegram

Telegram 可以供任何人使用，漢堡菜單提供了用戶可能需要的所有關(guān)鍵導(dǎo)航選項(xiàng)。

△ 每個(gè)用戶都能立即找出漢堡菜單，非常容易使用和理解，而且?guī)缀醪徽加媒缑嬷械膶氋F空間。

5. Yelp

yelp 在創(chuàng)建全屏導(dǎo)航體驗(yàn)時(shí)采用了一種稍微不同的方法。

△ Yelp將屏幕劃分為兩個(gè)不同的區(qū)域，實(shí)際上并沒有將整個(gè)屏幕專門用于導(dǎo)航選項(xiàng)，而是將頂部用于導(dǎo)航選項(xiàng)，并在底部留下更多的負(fù)空間。

6. Trello

頁面中的卡片是拉長(zhǎng)的矩形，整齊有序地填滿屏幕空間而不會(huì)讓用戶不知所措。

△ 卡片系統(tǒng)很好地代表了Trello簡(jiǎn)化復(fù)雜工作流程的能力，為用戶帶來整潔和方便。

7. Twitter

同樣使用了多種導(dǎo)航混合的設(shè)計(jì)樣式。

△ Twitter將導(dǎo)航重點(diǎn)放在底部欄上，涵蓋了整個(gè)平臺(tái)中四個(gè)主要的方面。

最后

沒有高速公路，我們很難便利地在城市間穿梭。同理，如果沒有導(dǎo)航，一款 APP 的使用也會(huì)遇到很多麻煩。導(dǎo)航就像高速，不斷在為用戶提供必要的指引！

 藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：站酷   作者：Clip設(shè)計(jì)夾

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)