編輯導(dǎo)語：當(dāng)下人們越來越依賴于移動端設(shè)備，而好的產(chǎn)品設(shè)計有助于吸引用戶點擊。其中，合理有效的移動端設(shè)計有助于高效地引導(dǎo)用戶，提升用戶體驗。本篇文章里，作者就對移動端導(dǎo)航設(shè)計樣式、設(shè)計準則及相關(guān)案例進行了展示分析，讓我們來看一下。

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

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

一、什么是移動端導(dǎo)航？

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

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

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

二、移動端導(dǎo)航常見的設(shè)計樣式

1. 漢堡菜單

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

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

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

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

2. 底部導(dǎo)航

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

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

3. 頂部導(dǎo)航

關(guān)于頂部導(dǎo)航，可以看之前分享的文章——《研究了100多個App后，發(fā)現(xiàn)了頂部欄UI設(shè)計的模式和規(guī)則！》里面詳細介紹了頂部導(dǎo)航的設(shè)計方法。

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

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

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

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

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

5. 標簽

標簽往往是在一個大主題下同時支持多個選項，每個選項都轉(zhuǎn)到不同的界面。

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

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

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

這種樣式的優(yōu)點在于，即使最沒有經(jīng)驗的用戶也很容易掌握，因為手勢通常是直觀的，只需要輕微使用就可以正確。

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

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

7. 全屏導(dǎo)航

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

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

8. 3D touch

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

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

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

三、移動端導(dǎo)航設(shè)計準則

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

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

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

2. 考慮手指的位置

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

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

3. 建立視覺層級避免混亂

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

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

四、移動端導(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ù)的巨頭，即使對于新用戶來說，頁面的設(shè)計也容易理解和探索。

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

3. App Store

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

在排行榜中，用戶可以瀏覽付費、免費和熱門的標簽頁，從而快速建立一致性和對其他頁面的感知。

4. Telegram

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

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

5. Yelp

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

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

6. Trello

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

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

7. Twitter

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

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

最后

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

內(nèi)容參考：justinmind.com/blog/mobile-navigation

作者：Clippp，微信公眾號：Clip設(shè)計夾。每周精選設(shè)計文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計思考。

本文由 @Clippp 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。