起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識交互細節：導航欄如何設計得更好？
編輯導語：我們日常會用很多類型的產品，在操作一個產品時，我們會選擇各種路徑進行操作，這時導航欄起到了很大的作用；導航欄可以幫助用戶進行下一步操作，所以對于用戶體驗也是比較重要的；本文作者分享了關于交互中的導航欄設計，我們一起來了解一下。
一、關于導航欄
頂部導航欄出現在應用程序屏幕的頂部，狀態欄下方，并指引當前頁面位置、層級的控件；就是說，哪天你用一個 App 卻問我在哪、我該如何返回的時候，就是導航欄沒設計好。
導航欄是 App 中最常見的控件之一，iOS 和 Material Design 規范中對它進行了闡述：
- 在 iOS 上，該欄被稱為導航欄，其高度比 Android 版本短。
- 在 Android 上，該欄被稱為頂部應用欄，本文會以更常用的導航欄的叫法指代。
二、導航欄的特點
1. 穩定的
頂部導航欄會顯示在應用中幾乎每個頁面的頂部，有時是常駐存在，有時隨著頁面需要進行隱藏，但永遠不會缺席；很少頁面完全不需導航欄，而整個應用都不需要導航欄的幾乎不存在。
2. 指引的
之所以叫它導航欄，明顯就是因為這個玩意具有導航作用，可以和用戶說，你現在處于什么頁面（導航欄標題）、你現在處于什么位置（一級導航、二級導航，靠返回按鈕區分），用戶可以通過導航欄回到最開始的位置。
3. 統一的
同一個應用內，導航欄的位置、高度、信息都具備相對的統一性，以增加熟悉度，這也是頁面一致性要求的，iOS 和 Material Design 對導航欄的高度、信息等內容都進行了要求，所以大家在形態上都大差不差（但是內容上被玩出了花，下文會講到）。
三、導航欄功能類型
按照功能類型劃分，導航欄常見的有：常規導航欄、編輯操作欄。
1. 常規導航欄
常規導航欄主要的是提供頁面及層級的指引、以及相關操作，這是我們看到最多的導航欄類型。
2. 編輯操作欄
編輯操作欄可以為所選項目提供動作。常規導航欄可以切換為編輯操作欄，在執行某項操作或將其撤消之前一直保持活動狀態。
四、常規導航欄解析
在 Material Design 的規范中，導航欄由容器、導航圖標、標題、操作項、更多菜單等組成，而國內的許多應用，都在此基礎上，進行了更多適應產品需求的個性化設計；但是在形態上，依然與規范相似，以保證用戶易理解性與體驗的流暢性。
1）容器：即導航欄的范圍，導航欄所都有元素都應當在容器里面，導航欄容器的高度因場景不同，有高低之分。
常規的導航欄只需要保證指引性即可，所以不需要占據太大的高度位置，特別是非工具型的產品，更是將頁面高度空間視為寸土寸金的存在。
MD 針對導航欄的特殊情況提供了突出的頂部導航欄方案，并明確指出可用于較長的標題，以容納圖像或為頂部應用程序欄提供更強的外觀。
但是這種方案在國內的應用的并不常見，因為中文環境下，出現這種超長標題的場景比較少，就算有，大多也可以通過縮減標題字數的方法避免這種問題。
iOS 的大標題導航欄使用反而更為常見，大標題可以明確地與下方內容進行區分，默認情況下，大標題導航欄不包含背景底色或陰影。
大標題導航欄樣式下，隨著用戶滾動頁面內容，大標題會轉換為標準大小的標題。
導航欄的底色理論上允許各種顏色，同時也支持透明，但在設計時，基于體驗上的可視性，需要避免因導航欄的透明底色而導致與下方信息難以區分的情況。
2）導航圖標（可選）：導航圖標是可選的，它可以采用以下任何形式：
菜單圖標：這將打開一個導航抽屜，而在國內 App 中，這個規范不僅是漢堡導航按鈕的形式，也可以是頭像圖片等形式。
返回箭頭：返回上一個頁面，返回箭頭并非必須是向左箭頭，也有向下箭頭、關閉按鈕等，但總之都是“回退”的方向。
人們知道標準的后退按鈕可以讓他們通過信息層次結構來追溯自己的步驟，但是，如果應用希望實現自定義后退按鈕，就需要確保它仍然看起來像后退按鈕，行為符合人們的期望，與界面的其余部分匹配，并且在整個應用程序中始終如一地實現。
常規返回箭頭：
向下返回箭頭（常用于可以下滑收起的頁面）：
關閉樣式返回按鈕（常用于瀏覽器/H5 等層級較深但可以一鍵關閉的頁面）：
3）標題（可選）：應用欄標題可用于描述，主要作用為：用戶當前所在的頁面/頁面中的具體場景/正在使用的應用等，此外，標題還被廣泛“改造”，具備很大的被定制的潛力，以滿足產品獨特的需求，這點會在下文講到。
MD 對于導航欄的標題做了許多的規范建議，但是目前看似乎大部分應用都并沒有遵守這些規范，比如：
如果標題文本很長，請使用突出顯示的應用程序欄，并將標題換成兩行。
不要在常規的頂部應用欄中包裝文字。
不要截斷文本，隱藏完整標題可能會引起誤解。
不要縮小文本以使其僅占一行。
4）操作項（可選）：導航欄大多會包含操作項，在操作項中，最常用的動作一般會放在左側，然后朝最右邊的最少動作進行。
5）更多菜單（可選）：針對某些功能操作，不適合直接展示在導航欄外面但由不能直接去掉，或者導航欄空間不足以承載，可以將其放在更多菜單里，點擊可以查看這些功能項。
此外，在國內應用中，導航欄還被用于與其他多種功能進行結合：
搜索：搜索功能可以說是國內應用導航欄中最常見到的功能了，因為大部分應用都將搜索視為應用中的高優先級功能，用戶可以通過搜索快速查詢應用里的內容，同時也為應用帶來不小的商業化收益（關于搜索功能的詳解，可以查看上一篇文章）。
品牌名稱、logo：某些應用需要展示自己的品牌特征，會將品牌名稱、logo 等在應用中展示，而最適合的地方就是導航欄，因為這個位置在頁面的可自定義內容中層級最高。
Tab 標簽：導航欄中采用 Tab 標簽(iOS 里稱為分段控件）的形式也比較常見，這種 Tab 可以讓應用在一個頁面中通過 Tab 承載更多的信息，大多以純文本的形式出現，用戶可以快速識別并通過左右滑動的形式查看；另外，如果采用 Tab 形式，就需要保證幾個 Tab 的信息層級本身是一致的，以便于用戶理解。
五、編輯操作欄解析
頂部導航欄可以轉換為編輯操作欄，以向選定的項目提供相應的動作；例如，當用戶從圖庫中選擇照片時，頂部導航欄會轉換為具有與所選照片相關的動作的編輯操作欄。
當然，iOS 也有不同的規范樣式，當 iOS 的導航欄切換為編輯操作欄時，操作項往往在頁面底部，而頁面頂部放置“完成”、“取消”等操作，此處還是需要根據不同場景進行考量。
六、iOS 和 Android 導航欄的區別
1. 標題對齊
在 iOS 上，導航欄的高度比 Android 版本短，其標題在兩個平臺的默認文本對齊方式有所不同，Android（MD 規范）為左對齊，而 iOS 為居中對齊。
iOS 在大標題的狀態下，標題會采用左對齊的方式。
Android 導航欄返回箭頭右側為該頁面標題，iOS 返回箭頭右側一般不是當前頁面的標題，而是上一層級頁面的標題，或者返回文案。
2. 導航欄背景
Android 一般使用陰影來表示導航欄中的層級關系，而在 iOS 中，應用可以使用高斯模糊等方式來區分導航欄和內容。
七、導航欄案例分析
除了上述提到的導航欄規范，以及常見的導航欄樣式，這里還想繼續討論導航欄的一些不同用法，這些用法可以巧妙地滿足一些不同的產品需求。
1. 沉浸式導航欄以保證設計效果
沉浸式導航欄常用于 App 首屏的設計上，App 的首屏往往存在 Banner 等信息，設計師基于節省設計空間、整體的視覺效果等方面的考量，會將導航欄疊在 Banner 等內容之上；并且隨著頁面滑動，導航欄背景逐漸過渡為不透明，以保證上滑頁面之后，導航欄的信息仍然清晰可視，且不干擾用戶正在瀏覽的其他內容。
以騰訊動漫為例，首屏狀態下導航欄為透明底色，以營造整體氛圍感，在頁面上滑之后，過渡為白色背景，兼顧了頁面信息流瀏覽效果。
騰訊動漫分類頁導航欄效果：
淘寶搜索結果頁導航欄效果：
沉浸式導航欄的設計容易出現信息與下方的圖像信息相互干擾導致影響閱讀的情況，在設計師需要注意保證基本的信息可視性。
此外，頁面的沉浸式并沒有必須將導航欄背景完全透明。如菜鳥裹裹，將導航欄單獨設計，采用懸浮在頁面上方的設計；而非常規的通欄樣式，頁面呼吸感更強，也可以營造整體沉浸感的瀏覽，這種設計在地圖相關的場景中被廣泛應用。
2. 上滑隱藏導航欄以節省頁面空間
雖然導航欄是頁面中必不可少的，但并非是必須固定存在的，在合適的條件下，導航欄可以隨著頁面滑動而適時隱藏，以節省頁面空間；此外，在用戶注意力在頁面其他位置時，隱藏導航欄還能幫助用戶更加聚焦于正在關注的信息。
需要注意的是，導航欄必須能夠被用戶通過某種點擊/滑動等操作輕易呼出，以保證用戶切換操作目標時的無縫切換。
以掌閱為例，掌閱在瀏覽小說過程中，會將導航欄收起，以保證頁面瀏覽效率，減少瀏覽干擾；同時，當用戶希望呼出導航欄時，只需要向下滑動或者單擊頁面即可。
3. 導航欄標題具備拓展操作空間
上文講到，導航欄的標題存在很大的可改造空間，其中一點就是在許多應用中，導航欄標題被賦予了可操作的能力，這種設計將標題的指引性與功能性相結合；除了讓操作更加便捷之外，更是節省了寸土寸金的頁面空間。
以微信公眾號為例，當用戶瀏覽公眾號時，頁面上滑后導航欄將會顯示公眾號名稱，并且在某次改版中，加入了點擊名稱即可查看公眾號詳情的設計；這種設計將公眾號名稱與功能性結合起來，賦予了標題的拓展空間，對公眾號的關注量提升也有一定幫助。
滴答清單：滴答清單是一個工具類應用，用戶可以用它記錄一些日常事項，在事項編輯頁中，導航欄標題是該事項所在的位置。這個標題也支持點擊，點擊后，可以將記錄事項移動到不同的位置。
智行火車票：在查詢機票界面中，導航欄標題一般顯示的是出發地點和到達地點，一般情況下，點擊即可直接切換出發地點和到達地點；而在查詢機票的界面，由于機票不穩定因素多（如機票浮動等，用戶會涉及到比價等情況），用戶在這個場景中的潛在需求不僅僅是切換出發/到達地點。
因此，這個標題還被賦予更多功能，用戶點擊即可切換歷史搜索的查詢記錄、更改出發/到達地點、查詢返程等操作。
4. 導航欄強化關鍵操作
對于應用來說，總有一些功能是應用希望可以讓用戶注意到并且進行操作的，而導航欄的位置在頁面的最高層級，在這里突出某些操作，可以比較輕易地吸引用戶的注意力。
途家：在途家的詳情頁，用戶上滑頁面時，住宿時間選擇會固定在導航欄，便于用戶快速選擇。
在這種應用中，選擇住宿時間是相對比較重要的功能，用戶的期望住宿時間內，該房間是否空閑，直接影響用戶是否選擇該房間；這種設計通過將住宿時間常駐在導航欄，加強功能的曝光，減少用戶長時間瀏覽后，想要訂房卻發現期望時間段內不可入住的情況。
騰訊新聞：在騰訊新聞瀏覽內容時，文章作者會固定在導航欄，并且右側有明顯的關注按鈕。這種設計很明顯，就是希望提升用戶的關注轉化。
5. 導航欄信息切換巧妙“增加”空間
導航欄空間本身是有限的，但是我們可以通過某些微動效巧妙地“增加”導航欄的信息空間；比如通過信息切換的方式，將產品中某些信息暫時性地展示在導航欄，一段時間之后，恢復常規的信息。
QQ 音樂在導航欄的設計中，有很多值得參考的點：
用戶在 QQ 音樂詳情頁點擊收藏時，導航欄右側信息會臨時切換為分享提示條。通過微動效出現的形式，可以第一時間吸引用戶注意力；同時，這種提示并非是固定的，而是與用戶觸發存在關聯性，因此更適合采用臨時狀態，在導航欄的位置既不顯得過于突出和干擾，又能吸引用戶注意，結合得比較巧妙。
用戶進入 QQ 音樂歌單時，歌單導航欄標題會切換為一句話，這句話具備因不同歌單而異，可以算是導航欄的小彩蛋；數秒鐘之后，切換為正常的歌單標題。
用戶進入 QQ 音樂播放頁時，有時導航欄會出現與該歌手相關的“撲通小組”的提示，點擊可以跳轉到對應的小組。
當用戶聽一首歌時，大概率也會對這首歌比較感興趣，在這種場景下，用戶點擊轉化率或許也會有不小的提升；這種設計充分利用了導航欄的空間，同樣也是數秒鐘之后，通過微動效，切換為正常的導航欄。
6. 導航欄顯示關鍵信息
考慮到應用的需求多樣，谷歌的 Material Design 、蘋果的 iOS 規范并不能完美地符合所有需求；導航欄標題在國內的用法中，不僅只有一行文字，甚至不僅只有文字，而是根據產品不同訴求進行改造，以保證關鍵信息可以充分展示。
豆瓣：用戶在瀏覽豆瓣的電影詳情頁時，隨著頁面上滑，電影封面、名稱、評分等信息將會固定在導航欄上。
我們知道豆瓣里評分是一個十分重要的功能，許多用戶會依據別人的評分來初步判斷一個電影的質量，因此評分有必要處于高優先級的展示位置；單純的導航欄規范很難滿足這一點，于是豆瓣對導航欄標題信息進行了重新的設計。
發發奇：發發奇是一款電商類應用，商品價格高，在該應用的詳情頁中，上滑頁面后，發發奇會將商品名稱和價格這種重要信息會固定在導航欄。
7. 根據操作信息實時變動
導航欄是針對于所在頁面而言的指示性控件，因此，當頁面信息發生變化，導航欄也可以隨之發生變化，以適應當前內容。
知乎：用戶在知乎視頻信息流瀏覽時，隨著視頻的切換，導航欄標題也會跟隨變化。
八、結語
導航欄是頁面設計中最常見的控件，雖然常用，但不見得每個人都能用好。作為設計師，需要考慮到如何在導航欄基礎能力上，賦予其更大的能力發揮空間。
這篇文章介紹了導航欄的基礎規范，也列舉業內對導航欄的設計做的比較好的一些應用，包括導航欄如何配合操作進行變化，如何讓信息更加高效展示等，希望這篇文章對你有幫助。
本文由 @熱風 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
想加作者大大微信
產品分析
贊
哈哈