作為產(chǎn)品體驗(yàn)的“第一道門(mén)”，頂部導(dǎo)航欄（Navigation Bar）的設(shè)計(jì)直接影響用戶對(duì)產(chǎn)品的使用效率和品牌感知，基于我們產(chǎn)品的使用場(chǎng)景，Navigation Bar 呈現(xiàn)出多樣的組合方式來(lái)表達(dá)不同的頁(yè)面層級(jí)及內(nèi)容，由于沒(méi)有統(tǒng)一的設(shè)計(jì)規(guī)范，因此出現(xiàn)了細(xì)節(jié)混亂不一致等問(wèn)題。同時(shí)，為了適應(yīng)產(chǎn)品的不斷迭代更新，提高設(shè)計(jì)和開(kāi)發(fā)的效率，保證產(chǎn)品體驗(yàn)的一致性，需要設(shè)計(jì)組件庫(kù)有更具自由度、靈活拓展性的表現(xiàn)以及規(guī)范指引。

那么如何拆解復(fù)雜場(chǎng)景，收斂結(jié)構(gòu)，搭建出靈活、易用、好維護(hù)、可拓展的 Navigation Bar 設(shè)計(jì)組件呢？請(qǐng)跟隨本文的腳步一起看一看具體的實(shí)踐思路吧。

一起感受一下最終落地的組件實(shí)際的使用效果吧～

一、怎么個(gè)事???????

通過(guò)App和小程序的場(chǎng)景收集，我們發(fā)現(xiàn)目前線上的 Navigation Bar 可總結(jié)出10+種不同的樣式，由于各部分元素沒(méi)有統(tǒng)一規(guī)范，出現(xiàn)了各種不同的問(wèn)題，急需對(duì)組件庫(kù)重新進(jìn)行收斂和升級(jí)：

1. Image尺寸和圓角未統(tǒng)一
2. icon顏色、大小、樣式不一致
3. 元素間距、對(duì)齊方式不一致
4. 標(biāo)題文字字號(hào)不一致
5. 標(biāo)題文字字?jǐn)?shù)限制未規(guī)定，出現(xiàn)兩行展示的情況
6. 部分圖標(biāo)被截?cái)?，顯示不完整
7. App和小程序同一場(chǎng)景樣式未對(duì)齊

二、別人是怎么做的？

在主流的大廠組件庫(kù)中，我們發(fā)現(xiàn) NavgationBar 都單獨(dú)提取出了左側(cè)區(qū)域及右側(cè)區(qū)域，在命名上也看不到難以理解的業(yè)務(wù)屬性命名，這也讓我們意識(shí)到了要轉(zhuǎn)變搭建 NavgationBar 組件的邏輯，跳出復(fù)雜的業(yè)務(wù)場(chǎng)景，從結(jié)構(gòu)入手，形成容器思維，提升組件的包容性。

TDesign

Ant Design Mobile

三、NavBar是什么？???????

定義

頂部導(dǎo)航欄（Navigation Bar）位于屏幕的頂部，狀態(tài)欄的正下方，主要用于幫助用戶明確頁(yè)面位置、層級(jí)等，導(dǎo)航欄包含了一些控件，用來(lái)在應(yīng)用里不同的視圖中導(dǎo)航，同時(shí)還承載了針對(duì)當(dāng)前頁(yè)面全局性的操作。

作用

1. 導(dǎo)航：提供離開(kāi)當(dāng)前頁(yè)面的出口，即返回上級(jí)（適用于非一級(jí)頁(yè)面）
2. 定位：告知用戶當(dāng)前所在位置
3. 提供全局操作：一般是以圖標(biāo)、文字、按鈕或組合的形式存在
4. 增加品牌曝光：例如品牌Logo、容器品牌色、圖標(biāo)品牌色等
5. 搜索：方便用戶快速查找內(nèi)容
6. 分類整理：以分類tab為代表，本質(zhì)是將多個(gè)相關(guān)的同級(jí)頁(yè)面聚合在一起
7. 用戶賬戶相關(guān)：如登錄、注冊(cè)、個(gè)人中心等，通常結(jié)合用戶頭像或特定圖標(biāo)表示
8. 動(dòng)作指引：基于當(dāng)前頁(yè)面動(dòng)作指引下一步去向

四、場(chǎng)景復(fù)雜，如何簡(jiǎn)化？

我們的業(yè)務(wù)場(chǎng)景豐富，還需要同時(shí)兼顧 App 和小程序，以及正常模式和Ghost模式，在這個(gè)基礎(chǔ)上，我們的NavgationBar 樣式能枚舉出 25+ 種，這么多場(chǎng)景，總不能全部做成組件母版吧，那么應(yīng)該如何簡(jiǎn)化呢？

找共性 — 打地基

首先，從基礎(chǔ)結(jié)構(gòu)上看， Navigation Bar 都包含了3個(gè)部分，可以歸納為L(zhǎng)eft（左側(cè)容器）、Center（中間容器）、Right（右側(cè)容器），容器之間互相適應(yīng)。

找特性 — 搭建基礎(chǔ)變體

基于業(yè)務(wù)訴求，各部分容器生成了各式各樣的類型和組合方式，但是在組件設(shè)計(jì)中，需要避免把所有的情況枚舉成選項(xiàng)，否則會(huì)喪失組件使用時(shí)的靈活性，并且難以應(yīng)對(duì)后期的拓展需求，這就需要我們?cè)诒姸嗲闆r中先找出特性，并抽象化的表示。

通過(guò)總結(jié)各部分容器的作用及場(chǎng)景，可得出其各自包含的基礎(chǔ)組件類型變體（Variants）如下：

Left（左側(cè)容器）：

1. Logo
2. IconButton

Center（中間容器）：

1. SearchBar
2. Tabs
3. Text

Right（右側(cè)容器）：

1. Button
2. IconButton

增加底層靈活性

再拓展開(kāi)來(lái)，每個(gè)基礎(chǔ)類型組件還有不同的結(jié)構(gòu)性需求，這需要組件具備底層的靈活性，以適應(yīng)多種狀態(tài)切換?？梢猿橄蟮乩斫鉃?，為一個(gè)小組（基礎(chǔ)組件類型）設(shè)置一定的成員名額（Swap 槽位），基于不同的需求可選擇成員（原子）單獨(dú)上崗，或者合作共同上崗，隨著小組的發(fā)展，需要的時(shí)候也持續(xù)支持加入新成員。

Navigation Bar 組件結(jié)構(gòu)層級(jí)

五、食用指南

NavBar 基礎(chǔ)變量

為 NavBar 的基礎(chǔ)變量（Variant）設(shè)置了App / 小程序的平臺(tái)切換，以及適應(yīng)深淺色模式背景的色彩切換，同時(shí)可自由控制 Left、Center、Right 容器的開(kāi)關(guān)。

Left 容器

Left 容器的作用包括展示品牌LOGO、頁(yè)面主題以及提供離開(kāi)當(dāng)前頁(yè)面的出口，即返回上級(jí)（適用于非一級(jí)頁(yè)面），通過(guò) Instance Swap，我們可以在組件的屬性面板中快速替換原子組件的樣式，這種方式能省去組件搭建和修改過(guò)程中的重復(fù)操作，支持直接的無(wú)限拓展。

Center 容器

在Center 容器中，基于業(yè)務(wù)場(chǎng)景的需求，提供搜索（Search）、分類（Tabs）、文字標(biāo)題（Text）三種基礎(chǔ)類型組件。其中 Text 類型能夠結(jié)合不同的原子形成多種組合，通過(guò)賦予每個(gè)原子組件屬性（Property），可以在 Text 子組件中靈活控制其開(kāi)關(guān)組合，例如這里我們涉及到了 Text 排版的切換、前置圖片（Lead_Img）、后置標(biāo)簽（Trailing_Tag）、后置箭頭（Trailing_Arrow）、背景（Bg）等。

Right 容器

Right 容器一般包括全局的操作控件，其中最常見(jiàn)的就是按鈕（Button），向下拆分還包括了Text Button、Icon Button 等，在實(shí)際應(yīng)用場(chǎng)景中，由于 IconButton 的基礎(chǔ)原子組件本身自帶邊距，因此在頁(yè)面中所需預(yù)留的間距（Padding） 與 Button 不同，同時(shí)我們還會(huì)遇到 Button 與 Icon Button 組合使用的情況，因此在 Right 容器的 Button 子組件中，我們預(yù)留了四個(gè) Swap 槽位，并賦予了 TextButton 單獨(dú)的 Padding，這樣在使用組件時(shí)，能夠降低解綁率，通過(guò)開(kāi)關(guān)即可隨意組合，同時(shí)也無(wú)需手動(dòng)再調(diào)整間距（Padding），易于設(shè)計(jì)組內(nèi)統(tǒng)一設(shè)計(jì)規(guī)范。

結(jié)語(yǔ)

在 NavigationBar 設(shè)計(jì)組件的升級(jí)過(guò)程中，我也深刻意識(shí)到了怎樣才能叫“好的設(shè)計(jì)組件”，我們不能將眼光局限于現(xiàn)有的業(yè)務(wù)場(chǎng)景當(dāng)中，需要在我們收集出所有場(chǎng)景之后深入的分析，建立容器思維，尋找底層結(jié)構(gòu)的共性和邏輯，搭建堅(jiān)固的基底之后，再一層一層往下拆分、嵌套，保證組件的靈活性、可拓展性。

作者：Echo Design