UI设计师必看！5个章节教你系统掌握顶部导航栏设计

作为产品体验的“第一道门”，顶部导航栏（Navigation Bar）的设计直接影响用户对产品的使用效率和品牌感知，基于我们产品的使用场景，Navigation Bar 呈现出多样的组合方式来表达不同的页面层级及内容，由于没有统一的设计规范，因此出现了细节混乱不一致等问题。同时，为了适应产品的不断迭代更新，提高设计和开发的效率，保证产品体验的一致性，需要设计组件库有更具自由度、灵活拓展性的表现以及规范指引。

那么如何拆解复杂场景，收敛结构，搭建出灵活、易用、好维护、可拓展的 Navigation Bar 设计组件呢？请跟随本文的脚步一起看一看具体的实践思路吧。

往期教程：

一起感受一下最终落地的组件实际的使用效果吧～

一、怎么个事‍‍‍‍‍‍‍

通过App和小程序的场景收集，我们发现目前线上的 Navigation Bar 可总结出10+种不同的样式，由于各部分元素没有统一规范，出现了各种不同的问题，急需对组件库重新进行收敛和升级：

1. Image尺寸和圆角未统一
2. icon颜色、大小、样式不一致
3. 元素间距、对齐方式不一致
4. 标题文字字号不一致
5. 标题文字字数限制未规定，出现两行展示的情况
6. 部分图标被截断，显示不完整
7. App和小程序同一场景样式未对齐

二、别人是怎么做的？

在主流的大厂组件库中，我们发现 NavgationBar 都单独提取出了左侧区域及右侧区域，在命名上也看不到难以理解的业务属性命名，这也让我们意识到了要转变搭建 NavgationBar 组件的逻辑，跳出复杂的业务场景，从结构入手，形成容器思维，提升组件的包容性。

TDesign

Ant Design Mobile

三、NavBar是什么？‍‍‍‍‍‍‍

定义

顶部导航栏（Navigation Bar）位于屏幕的顶部，状态栏的正下方，主要用于帮助用户明确页面位置、层级等，导航栏包含了一些控件，用来在应用里不同的视图中导航，同时还承载了针对当前页面全局性的操作。

作用

1. 导航：提供离开当前页面的出口，即返回上级（适用于非一级页面）
2. 定位：告知用户当前所在位置
3. 提供全局操作：一般是以图标、文字、按钮或组合的形式存在
4. 增加品牌曝光：例如品牌Logo、容器品牌色、图标品牌色等
5. 搜索：方便用户快速查找内容
6. 分类整理：以分类tab为代表，本质是将多个相关的同级页面聚合在一起
7. 用户账户相关：如登录、注册、个人中心等，通常结合用户头像或特定图标表示
8. 动作指引：基于当前页面动作指引下一步去向

四、场景复杂，如何简化？

我们的业务场景丰富，还需要同时兼顾 App 和小程序，以及正常模式和Ghost模式，在这个基础上，我们的NavgationBar 样式能枚举出 25+ 种，这么多场景，总不能全部做成组件母版吧，那么应该如何简化呢？

找共性 — 打地基

首先，从基础结构上看， Navigation Bar 都包含了3个部分，可以归纳为Left（左侧容器）、Center（中间容器）、Right（右侧容器），容器之间互相适应。

找特性 — 搭建基础变体

基于业务诉求，各部分容器生成了各式各样的类型和组合方式，但是在组件设计中，需要避免把所有的情况枚举成选项，否则会丧失组件使用时的灵活性，并且难以应对后期的拓展需求，这就需要我们在众多情况中先找出特性，并抽象化的表示。

通过总结各部分容器的作用及场景，可得出其各自包含的基础组件类型变体（Variants）如下：

Left（左侧容器）：

1. Logo
2. IconButton

Center（中间容器）：

1. SearchBar
2. Tabs
3. Text

Right（右侧容器）：

1. Button
2. IconButton

增加底层灵活性

再拓展开来，每个基础类型组件还有不同的结构性需求，这需要组件具备底层的灵活性，以适应多种状态切换。可以抽象地理解为，为一个小组（基础组件类型）设置一定的成员名额（Swap 槽位），基于不同的需求可选择成员（原子）单独上岗，或者合作共同上岗，随着小组的发展，需要的时候也持续支持加入新成员。

Navigation Bar 组件结构层级

五、食用指南

NavBar 基础变量

为 NavBar 的基础变量（Variant）设置了App / 小程序的平台切换，以及适应深浅色模式背景的色彩切换，同时可自由控制 Left、Center、Right 容器的开关。

Left 容器

Left 容器的作用包括展示品牌LOGO、页面主题以及提供离开当前页面的出口，即返回上级（适用于非一级页面），通过 Instance Swap，我们可以在组件的属性面板中快速替换原子组件的样式，这种方式能省去组件搭建和修改过程中的重复操作，支持直接的无限拓展。

Center 容器

在Center 容器中，基于业务场景的需求，提供搜索（Search）、分类（Tabs）、文字标题（Text）三种基础类型组件。其中 Text 类型能够结合不同的原子形成多种组合，通过赋予每个原子组件属性（Property），可以在 Text 子组件中灵活控制其开关组合，例如这里我们涉及到了 Text 排版的切换、前置图片（Lead_Img）、后置标签（Trailing_Tag）、后置箭头（Trailing_Arrow）、背景（Bg）等。

Right 容器

Right 容器一般包括全局的操作控件，其中最常见的就是按钮（Button），向下拆分还包括了Text Button、Icon Button 等，在实际应用场景中，由于 IconButton 的基础原子组件本身自带边距，因此在页面中所需预留的间距（Padding） 与 Button 不同，同时我们还会遇到 Button 与 Icon Button 组合使用的情况，因此在 Right 容器的 Button 子组件中，我们预留了四个 Swap 槽位，并赋予了 TextButton 单独的 Padding，这样在使用组件时，能够降低解绑率，通过开关即可随意组合，同时也无需手动再调整间距（Padding），易于设计组内统一设计规范。

结语

在 NavigationBar 设计组件的升级过程中，我也深刻意识到了怎样才能叫“好的设计组件”，我们不能将眼光局限于现有的业务场景当中，需要在我们收集出所有场景之后深入的分析，建立容器思维，寻找底层结构的共性和逻辑，搭建坚固的基底之后，再一层一层往下拆分、嵌套，保证组件的灵活性、可拓展性。