編輯導語：如今隨著互聯網的不斷發展，用戶對于網絡的需求變大，市面上的產品越來越多；對于一些產品必備的就是導航欄，導航欄可以有效快速的幫助用戶找到目標，非常方便；本文作者分享了關于線上產品導航欄的解構和分析，我們一起來看一下。

導航欄（Navigation Bar）作為一個基礎控件，極高的復用率和看似單調的設計樣式，往往會讓人習慣性忽略其中隱藏的諸多細節，以及背后的設計原因。

本篇文章主要探討導航欄視覺和交互上的各種組合可能性和相關設計細節點，希望能提煉出一般性的設計規律（觀點僅是個人粗淺的分析，如果有哪里說得不對的地方，希望大家多多指點）。

一、理解導航欄的作用

導航欄是用來幫助用戶定位、導航、操作的基礎組件；既負責告知用戶當前所在位置，防止迷失，又負責連通頁面跳轉路徑，允許用戶在不同層級的界面之間來去自如，同時還承載了針對當前頁面全局性的操作。

簡要概述導航欄的作用，有以下6個：

定位：告知用戶當前所在位置；導航：提供離開當前頁面的出口，即返回上級（適用于非一級頁面）；提供全局操作：一般是以圖標、文字、按鈕或組合的形式存在；扁平層級：以分類tab為代表，本質是將多個相關的同級頁面聚合在一起；增加品牌曝光：一般放置在首頁左上角；解釋頁面當前狀態：屬于瞬時狀態，動態變化。

二、梳理導航欄常見的布局方式

實際上，導航欄的布局方式非常豐富，除了上文提到的幾種基礎布局之外，還有許多復雜的布局方式，不同的布局方式體現了不同頁面的信息架構。

為了方便描述，我將導航欄可以放置信息的部分劃分為左、中、右三個區域。

接下來，我將從【結構簡單】到【結構復雜】的順序來討論導航欄的各種布局方式。

三、突出視覺重點的4種設計策略

視覺服務于功能，不同視覺權重背后對應的是不同功能權重。以搜索功能為例，不同產品、不同場景下，搜索功能的權重都是不同的。

對于電商產品來說，首頁搜索是非常關鍵的流量入口，必須足夠突出，減少用戶的認知和操作負擔，使用戶更加順暢高效地使用產品；而對于不同產品或不同場景來說，搜索的優先級就未必有這么高。

提升視覺權重的本質是將重要信息和次要信息【區分】開來，而建立區分的本質則是【建立對比】，我們以“搜索”功能為例。

四、拆解視覺細節

我們從以下幾個方面來拆解導航欄：

五、整理交互細節

首先，我們要了解，頁面固有的層級結構決定了某些信息是常駐于屏幕的，另外的信息是隨著用戶豎直方向滑動手勢而滾動的，而導航欄絕大多數情況下是常駐于頁面頂部的。

盡管導航欄一般都是常駐于頁面頂部，但仍有不同的情況要分類討論：

常駐區域無變化：導航欄不會隨著用戶手勢的滑動而發生變化。常駐區域有變化：導航欄會隨著用戶手勢的滑動而發生變化。

首先要明確，哪些內容屬于常駐內容。

上方這種情況比較明顯，頭部區域是常駐區域，但要注意并不包括四個主圖標。

我們再來看下面的案例：

上述變化的本質是從【狀態a】過渡到【狀態b】。

狀態b決定了常駐于屏幕的元素數量，這和內容層顯示效率息息相關，需要在頁面設計之初就考慮好；確定好了【常駐區域】和【被折疊區域】之后的交互就比較簡單，直接折疊相應內容即可；使用這種【狀態過渡】的思路，相當于明確了變化的起點和終點，之后就可以將精力投入在如何使兩種狀態之間的過渡更加自然。

當我們確定了【過渡變量】之后，我們只需要考慮如何安排變量如何入場（進入狀態b）。變量的出場（撤出狀態a）并不需要考慮，因為變量是跟隨內容層一齊滾動的，自然會被上層的導航欄遮擋。

上方微信讀書的案例用了硬切的方式，過渡變量直接出現在狀態b中。通過觀察iOS14的信息，我們不難發現，iOS系統采用的標題欄過渡方式是漸現。本質上沒有區別，細節上，漸現相對于硬切更加柔和絲滑。

六、結語

以上是我個人對導航欄相關的一些整理和總結。

分別從功能作用、布局樣式、如何突出重點、視覺細節、交互細節幾個層面梳理了導航欄設計策略和設計思考。

基礎且復用率極高的控件蘊含了許多細節和門道，通過大量細致觀察總結出一般性的規律，希望我的文章能幫助大家看到一些平時可能會忽略的細節。

感謝閱讀，歡迎交流！

本文由 @doo_W 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議