導航欄（Navigation Bar）作為一個基礎控件，極高的復用率和看似單調(diào)的設計樣式，往往會讓人習慣性忽略其中隱藏的諸多細節(jié)，以及背后的設計原因。本篇文章主要探討導航欄視覺和交互上的各種組合可能性和相關設計細節(jié)點，希望能提煉出一般性的設計規(guī)律。
導航欄是用來幫助用戶定位、導航、操作的基礎組件。既負責告知用戶當前所在位置，防止迷失，又負責連通頁面跳轉(zhuǎn)路徑，允許用戶在不同層級的界面之間來去自如。同時還承載了針對當前頁面全局性的操作。
簡要概述導航欄的作用，有以下 6 個：
- 定位：告知用戶當前所在位置
- 導航：提供離開當前頁面的出口，即返回上級（適用于非一級頁面）
- 提供全局操作：一般是以圖標、文字、按鈕或組合的形式存在
- 扁平層級：以分類 tab 為代表，本質(zhì)是將多個相關的同級頁面聚合在一起
- 增加品牌曝光：一般放置在首頁左上角
- 解釋頁面當前狀態(tài)：屬于瞬時狀態(tài)，動態(tài)變化
實際上，導航欄的布局方式非常豐富，除了上文提到的幾種基礎布局之外，還有許多復雜的布局方式。
不同的布局方式體現(xiàn)了不同頁面的信息架構(gòu)。
為了方便描述，我將導航欄可以放置信息的部分劃分為左、中、右三個區(qū)域。
接下來，我將從「結(jié)構(gòu)簡單」到「結(jié)構(gòu)復雜」的順序來討論導航欄的各種布局方式。
視覺服務于功能，不同視覺權重背后對應的是不同功能權重。以搜索功能為例，不同產(chǎn)品、不同場景下，搜索功能的權重都是不同的。對于電商產(chǎn)品來說，首頁搜索是非常關鍵的流量入口，必須足夠突出，減少用戶的認知和操作負擔，使用戶更加順暢高效地使用產(chǎn)品。而對于不同產(chǎn)品或不同場景來說，搜索的優(yōu)先級就未必有這么高。
提升視覺權重的本質(zhì)是將重要信息和次要信息「區(qū)分」開來，而建立區(qū)分的本質(zhì)則是「建立對比」。
我們以“搜索”功能為例。
我們從以下幾個方面來拆解導航欄：
- 標題樣式
- tab 樣式
- 控件樣式
- 背景樣式
首先，我們要了解，頁面固有的層級結(jié)構(gòu)決定了某些信息是常駐于屏幕的，另外的信息是隨著用戶豎直方向滑動手勢而滾動的。而導航欄絕大多數(shù)情況下是常駐于頁面頂部的。
盡管導航欄一般都是常駐于頁面頂部，但仍有不同的情況要分類討論：
- 常駐區(qū)域無變化：導航欄不會隨著用戶手勢的滑動而發(fā)生變化。
- 常駐區(qū)域有變化：導航欄會隨著用戶手勢的滑動而發(fā)生變化。
首先要明確，哪些內(nèi)容屬于常駐內(nèi)容。
上方這種情況比較明顯，頭部區(qū)域是常駐區(qū)域，但要注意并不包括四個主圖標。
我們再來看下面的案例。
上述變化的本質(zhì)是從「狀態(tài) a」過渡到「狀態(tài) b」。
狀態(tài) b 決定了常駐于屏幕的元素數(shù)量，這和內(nèi)容層顯示效率息息相關，需要在頁面設計之初就考慮好。
確定好了「常駐區(qū)域」和「被折疊區(qū)域」之后的交互就比較簡單，直接折疊相應內(nèi)容即可。
使用這種「狀態(tài)過渡」的思路，相當于明確了變化的起點和終點，之后就可以將精力投入在如何使兩種狀態(tài)之間的過渡更加自然。
當我們確定了「過渡變量」之后，我們只需要考慮如何安排變量如何入場（進入狀態(tài) b）。變量的出場（撤出狀態(tài) a）并不需要考慮，因為變量是跟隨內(nèi)容層一齊滾動的，自然會被上層的導航欄遮擋。
上方微信讀書的案例用了硬切的方式，過渡變量直接出現(xiàn)在狀態(tài) b 中。通過觀察 iOS14 的信息，我們不難發(fā)現(xiàn)，iOS 系統(tǒng)采用的標題欄過渡方式是漸現(xiàn)。本質(zhì)上沒有區(qū)別，細節(jié)上，漸現(xiàn)相對于硬切更加柔和絲滑。
以上是我個人對導航欄相關的一些整理和總結(jié)。
分別從功能作用、布局樣式、如何突出重點、視覺細節(jié)、交互細節(jié)幾個層面梳理了導航欄設計策略和設計思考；A且復用率極高的控件蘊含了許多細節(jié)和門道，通過大量細致觀察總結(jié)出一般性的規(guī)律，希望我的文章能幫助大家看到一些平時可能會忽略的細節(jié)。
承擔因您的行為而導致的法律責任，
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。