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