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

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

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

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

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

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

二、別人是怎么做的？

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

TDesign

Ant Design Mobile

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

定義

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

作用

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

四、場景復(fù)雜，如何簡化？

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

找共性 — 打地基

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

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

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

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

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

1. Logo
2. IconButton

Center（中間容器）：

1. SearchBar
2. Tabs
3. Text

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

1. Button
2. IconButton

增加底層靈活性

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

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

五、食用指南

NavBar 基礎(chǔ)變量

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

Left 容器

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

Center 容器

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

Right 容器

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

結(jié)語

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

作者：Echo Design