2021-5-14 資深UI設計者
合理的移動導航設計能夠盡可能地減少摩擦，引導用戶去他們要去的地方。
這篇文章匯總了移動端導航設計最常見的樣式、要注意的設計準則以及優(yōu)秀的案例分析，一起來系統(tǒng)性地掌握這些知識～
簡單來說，導航是用戶從 A 點到 B 點的方式，是他們發(fā)現(xiàn)設計點并與產(chǎn)品交互的過程。
可能很多用戶認為導航的目標是“在盡可能短的時間內(nèi)讓用戶從 A 到 B”，但時間短只屬于操作結(jié)果，這個結(jié)果需要依靠合理且簡單的設計才能實現(xiàn)。
△ 一個頁面中可以存在多種導航。例如在油管首頁，有頂部導航欄、篩選器導航和底部導航，這些導航相互搭配為產(chǎn)品助力。
1. 漢堡菜單
圍繞漢堡菜單有很多爭論，但存在即合理，在合適的場景下漢堡菜單也能發(fā)揮大的作用。
來看一下漢堡菜單具備的優(yōu)勢：
△ 使用用戶熟悉的設計可以事半功倍。例如美團和餓了么兩個產(chǎn)品有著完全不同的主題色，但外賣點餐流程卻是一樣的，仍然是用戶熟悉的操作，并沒有因為產(chǎn)品的不同而改變點餐流程。
2. 底部導航
底部導航欄通常包含產(chǎn)品中最主要的導航鏈接，用戶只需要簡單的點擊就能直觀地在不同頁面間切換。
△ 幾乎每款產(chǎn)品都缺少不了底部導航欄，它方便用戶單手操作，不需要太費力就能快速訪問產(chǎn)品頁面，提高可用性。
3. 頂部導航
關(guān)于頂部導航，可以看之前分享的文章，里面詳細介紹了頂部導航的設計方法。
△ 頂部導航通常包含頁面中最重要的信息，與其他輔助導航結(jié)合使用。
4. 卡片式導航
卡片式是一種出色的設計樣式，支持改變各種形狀和大小，并且能展示文本、鏈接或照片等各種元素。
隨著網(wǎng)絡上的內(nèi)容越來越碎片化和個性化，卡片是在頁面中聚合單個信息的好方式。
△ 為了改進體驗，卡片可以個性化顯示不同的內(nèi)容。另外卡片很容易適應不同的屏幕尺寸，配合響應性設計。
5. 標簽
標簽往往是在一個大主題下同時支持多個選項，每個選項都轉(zhuǎn)到不同的界面。
△ 標簽通常用于在同一頁面中的幾個視圖之間切換，展示內(nèi)容上的差異性。而頂部導航欄有主頁、搜索、收藏夾等多個圖標，代表不同的功能。
6. 基于手勢的導航
基于手勢的導航可以讓用戶在所需方向上快速滑動，來完成特定的操作。
這種樣式的優(yōu)點在于，即使最沒有經(jīng)驗的用戶也很容易掌握，因為手勢通常是直觀的。
△ 國外大火的約會產(chǎn)品Tinder以及國內(nèi)的探探，都使用了基于手勢的導航樣式，為用戶帶來滑動的樂趣。
△ 基于手勢的導航并不是Tinder發(fā)明的，但這款產(chǎn)品無疑將這種流行帶給了大眾。經(jīng)典的向左或向右滑動模式保持了事物的動態(tài)性、簡單性和娛樂性。
7. 全屏導航
全屏導航是指將大部分屏幕用于導航操作，能夠很好地將用戶的注意力聚焦到具體的產(chǎn)品細節(jié)上。這是一種以連貫的方式提供大量導航的方法，可以立即幫助用戶了解產(chǎn)品的功能。
△ 點擊圖片可以跳轉(zhuǎn)到全屏大圖導航中，能夠更清晰地查看商品的外觀狀態(tài)。
8. 3D touch
最初是由蘋果公司提供給用戶的，這是一種創(chuàng)建導航快捷方式的方法，可以顯示選定的 APP 的一些關(guān)鍵操作。
△ 蘋果為手機創(chuàng)造了一種全新的快捷方式，同時提供了強大的可用性。
△ 3D touch另一個用途是內(nèi)容預覽，在處理內(nèi)容選項時例如收件箱或文章列表時，這是給用戶提供預覽的好方法。
1. 導航需要直觀明顯
對所有類型的導航來說都是如此。在移動端中由于屏幕空間的縮小和交互成本的增加，導航體驗的好壞會對產(chǎn)品產(chǎn)生很大的影響。
△ 從可用性角度來看，直觀的導航對目標用戶來說至關(guān)重要。這意味著需要進行嚴格的測試和大量的研究，可以使用卡片分類或樹狀圖等方法來驗證導航的可用性。
2. 考慮手指的位置
這點對于移動應用來說至關(guān)重要，沒有用戶想反復點擊圖標卻沒有反應。
△ 鏈接和按鈕的尺寸需要足夠大，以便大多數(shù)用戶在第一次點擊時就能成功點擊。頁面中按鈕的尺寸最小通常保持在10mm。
3. 建立視覺層級避免混亂
小屏幕意味著更容易陷入混亂。即使頁面中有少量的元素，如果元素沒有平衡，用戶仍然會有混亂的感覺。
△ 極簡主義是UI設計的一種特定風格，通過必備的頂部導航欄、留白以及由大小、版式、顏色劃分的視覺層級來規(guī)劃頁面內(nèi)容。
1. Facebook
Facebook 的導航構(gòu)成比較復雜，融合了多種不同樣式的導航。
△ Facebook主頁包括漢堡菜單、頂部導航欄和底部導航欄。通過這種方式，這家社交媒體巨頭明確的將主要內(nèi)容與次要內(nèi)容分隔開。
2. Spotify
Spotif 作為音樂流媒體業(yè)務的巨頭，即使對于新用戶來說，頁面的設計也容易理解和探索。
△ 以高度視覺化的形式突出每張卡片背后的關(guān)鍵內(nèi)容，另外底部導航也可以完成繁重的任務指引。
3. App Store
App Store 是使用標簽進行導航的好例證，每個標簽代表了同一內(nèi)容的不同方面。
△ 在排行榜中，用戶可以瀏覽付費、免費和熱門的標簽頁，從而快速建立一致性和對其他頁面的感知。
4. Telegram
Telegram 可以供任何人使用，漢堡菜單提供了用戶可能需要的所有關(guān)鍵導航選項。
△ 每個用戶都能立即找出漢堡菜單，非常容易使用和理解，而且?guī)缀醪徽加媒缑嬷械膶氋F空間。
5. Yelp
yelp 在創(chuàng)建全屏導航體驗時采用了一種稍微不同的方法。
△ Yelp將屏幕劃分為兩個不同的區(qū)域，實際上并沒有將整個屏幕專門用于導航選項，而是將頂部用于導航選項，并在底部留下更多的負空間。
6. Trello
頁面中的卡片是拉長的矩形，整齊有序地填滿屏幕空間而不會讓用戶不知所措。
△ 卡片系統(tǒng)很好地代表了Trello簡化復雜工作流程的能力，為用戶帶來整潔和方便。
7. Twitter
同樣使用了多種導航混合的設計樣式。
△ Twitter將導航重點放在底部欄上，涵蓋了整個平臺中四個主要的方面。
沒有高速公路，我們很難便利地在城市間穿梭。同理，如果沒有導航，一款 APP 的使用也會遇到很多麻煩。導航就像高速，不斷在為用戶提供必要的指引！
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
文章來源：站酷 作者：Clip設計夾
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務