起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識你真的了解移動端導航設計嗎？來看這篇系統性的總結！
編輯導語：當下人們越來越依賴于移動端設備，而好的產品設計有助于吸引用戶點擊。其中，合理有效的移動端設計有助于高效地引導用戶，提升用戶體驗。本篇文章里，作者就對移動端導航設計樣式、設計準則及相關案例進行了展示分析，讓我們來看一下。
合理的移動導航設計能夠盡可能地減少摩擦，引導用戶去他們要去的地方。
這篇文章匯總了移動端導航設計最常見的樣式、要注意的設計準則以及優秀的案例分析，一起來系統性地掌握這些知識～
一、什么是移動端導航？
簡單來說，導航是用戶從A點到B點的方式，是他們發現設計點并與產品交互的過程。
可能很多用戶認為導航的目標是“在盡可能短的時間內讓用戶從A到B”，但時間短只屬于操作結果，這個結果需要依靠合理且簡單的設計才能實現。
一個頁面中可以存在多種導航。例如在油管首頁，有頂部導航欄、篩選器導航和底部導航，這些導航相互搭配為產品助力。
二、移動端導航常見的設計樣式
1. 漢堡菜單
圍繞漢堡菜單有很多爭論，但存在即合理，在合適的場景下漢堡菜單也能發揮大的作用。
來看一下漢堡菜單具備的優勢：
- 視覺空間：節省屏幕空間，包含有價值的信息；
- 心智模型：大多數用戶熟悉這種設計樣式并知道如何操作；
- 使用經驗：調節學習曲線，改善使用體驗。
使用用戶熟悉的設計可以事半功倍。例如美團和餓了么兩個產品有著完全不同的主題色，但外賣點餐流程卻是一樣的，仍然是用戶熟悉的操作，并沒有因為產品的不同而改變點餐流程。
2. 底部導航
底部導航欄通常包含產品中最主要的導航鏈接，用戶只需要簡單的點擊就能直觀地在不同頁面間切換。
幾乎每款產品都缺少不了底部導航欄，它方便用戶單手操作，不需要太費力就能快速訪問產品頁面，提高可用性。
3. 頂部導航
關于頂部導航，可以看之前分享的文章——《研究了100多個App后，發現了頂部欄UI設計的模式和規則！》里面詳細介紹了頂部導航的設計方法。
頂部導航通常包含頁面中最重要的信息，與其他輔助導航結合使用。
4. 卡片式導航
卡片式是一種出色的設計樣式，支持改變各種形狀和大小，并且能展示文本、鏈接或照片等各種元素。
隨著網絡上的內容越來越碎片化和個性化，卡片是在頁面中聚合單個信息的好方式。
為了改進體驗，卡片可以個性化顯示不同的內容。另外卡片很容易適應不同的屏幕尺寸，配合響應性設計。
5. 標簽
標簽往往是在一個大主題下同時支持多個選項，每個選項都轉到不同的界面。
標簽通常用于在同一頁面中的幾個視圖之間切換，展示內容上的差異性。而頂部導航欄有主頁、搜索、收藏夾等多個圖標，代表不同的功能。
6. 基于手勢的導航
基于手勢的導航可以讓用戶在所需方向上快速滑動，來完成特定的操作。
這種樣式的優點在于，即使最沒有經驗的用戶也很容易掌握，因為手勢通常是直觀的，只需要輕微使用就可以正確。
國外大火的約會產品Tinder以及國內的探探，都使用了基于手勢的導航樣式，為用戶帶來滑動的樂趣。
基于手勢的導航并不是Tinder發明的，但這款產品無疑將這種流行帶給了大眾。經典的向左或向右滑動模式保持了事物的動態性、簡單性和娛樂性。
7. 全屏導航
全屏導航是指將大部分屏幕用于導航操作，能夠很好地將用戶的注意力聚焦到具體的產品細節上。這是一種以連貫的方式提供大量導航的方法，可以立即幫助用戶了解產品的功能。
點擊圖片可以跳轉到全屏大圖導航中，能夠更清晰地查看商品的外觀狀態。
8. 3D touch
最初是由蘋果公司提供給用戶的，這是一種創建導航快捷方式的方法，可以顯示選定的APP的一些關鍵操作。
蘋果為手機創造了一種全新的快捷方式，同時提供了強大的可用性。
3D touch另一個用途是內容預覽，在處理內容選項時例如收件箱或文章列表時，這是給用戶提供預覽的好方法。
三、移動端導航設計準則
1. 導航需要直觀明顯
對所有類型的導航來說都是如此。在移動端中由于屏幕空間的縮小和交互成本的增加，導航體驗的好壞會對產品產生很大的影響。
從可用性角度來看，直觀的導航對目標用戶來說至關重要。這意味著需要進行嚴格的測試和大量的研究，可以使用卡片分類或樹狀圖等方法來驗證導航的可用性。
2. 考慮手指的位置
這點對于移動應用來說至關重要，沒有用戶想反復點擊圖標卻沒有反應。
鏈接和按鈕的尺寸需要足夠大，以便大多數用戶在第一次點擊時就能成功點擊。頁面中按鈕的尺寸最小通常保持在10mm。
3. 建立視覺層級避免混亂
小屏幕意味著更容易陷入混亂。即使頁面中有少量的元素，如果元素沒有平衡，用戶仍然會有混亂的感覺。
極簡主義是UI設計的一種特定風格，通過必備的頂部導航欄、留白以及由大小、版式、顏色劃分的視覺層級來規劃頁面內容。
四、移動端導航示例分析
1. Facebook
Facebook的導航構成比較復雜，融合了多種不同樣式的導航。
Facebook主頁包括漢堡菜單、頂部導航欄和底部導航欄。通過這種方式，這家社交媒體巨頭明確的將主要內容與次要內容分隔開。
2. Spotify
Spotif作為音樂流媒體業務的巨頭，即使對于新用戶來說，頁面的設計也容易理解和探索。
以高度視覺化的形式突出每張卡片背后的關鍵內容，另外底部導航也可以完成繁重的任務指引。
3. App Store
App Store是使用標簽進行導航的好例證，每個標簽代表了同一內容的不同方面。
在排行榜中，用戶可以瀏覽付費、免費和熱門的標簽頁，從而快速建立一致性和對其他頁面的感知。
4. Telegram
Telegram可以供任何人使用，漢堡菜單提供了用戶可能需要的所有關鍵導航選項。
每個用戶都能立即找出漢堡菜單，非常容易使用和理解，而且幾乎不占用界面中的寶貴空間。
5. Yelp
yelp在創建全屏導航體驗時采用了一種稍微不同的方法。
Yelp將屏幕劃分為兩個不同的區域，實際上并沒有將整個屏幕專門用于導航選項，而是將頂部用于導航選項，并在底部留下更多的負空間。
6. Trello
頁面中的卡片是拉長的矩形，整齊有序地填滿屏幕空間而不會讓用戶不知所措。
卡片系統很好地代表了Trello簡化復雜工作流程的能力，為用戶帶來整潔和方便。
7. Twitter
同樣使用了多種導航混合的設計樣式。
Twitter將導航重點放在底部欄上，涵蓋了整個平臺中四個主要的方面。
最后
沒有高速公路，我們很難便利地在城市間穿梭。同理，如果沒有導航，一款APP的使用也會遇到很多麻煩。導航就像高速，不斷在為用戶提供必要的指引！
內容參考：justinmind.com/blog/mobile-navigation
作者：Clippp，微信公眾號：Clip設計夾。每周精選設計文章，專注分享關于產品、交互、UI視覺上的設計思考。
本文由 @Clippp 翻譯發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
- 目前還沒評論，等你發揮！
