UI设计师必看 ！5个章节教你系统掌握顶部导航栏设计
作为产品体验的章节“第一道门”，顶部导航栏（Navigation Bar）的教系设计直接影响用户对产品的使用效率和品牌感知，基于我们产品的统掌使用场景，Navigation Bar 呈现出多样的握顶组合方式来表达不同的页面层级及内容 ，由于没有统一的部导设计规范 ，因此出现了细节混乱不一致等问题。航栏同时 ，设计师必设计为了适应产品的章节不断迭代更新，提高设计和开发的教系效率 ，保证产品体验的统掌一致性 ，需要设计组件库有更具自由度 、握顶灵活拓展性的部导表现以及规范指引 。
那么如何拆解复杂场景 ，航栏收敛结构 ，设计师必设计搭建出灵活 、易用 、好维护 、可拓展的 Navigation Bar 设计组件呢 ？请跟随本文的脚步一起看一看具体的实践思路吧。
一起感受一下最终落地的组件实际的使用效果吧～
一 、怎么个事
通过App和小程序的场景收集 ，我们发现目前线上的 Navigation Bar 可总结出10+种不同的样式 ，由于各部分元素没有统一规范 ，出现了各种不同的问题 ，急需对组件库重新进行收敛和升级 ：
- Image尺寸和圆角未统一
- icon颜色 、大小、样式不一致
- 元素间距 、对齐方式不一致
- 标题文字字号不一致
- 标题文字字数限制未规定 ，出现两行展示的情况
- 部分图标被截断 ，显示不完整
- App和小程序同一场景样式未对齐
二 、别人是怎么做的 ？
在主流的大厂组件库中 ，我们发现 NavgationBar 都单独提取出了左侧区域及右侧区域 ，在命名上也看不到难以理解的业务属性命名 ，这也让我们意识到了要转变搭建 NavgationBar 组件的逻辑 ，跳出复杂的业务场景 ，从结构入手 ，形成容器思维，提升组件的包容性 。
TDesign
Ant Design Mobile
三 、NavBar是什么？
定义
顶部导航栏（Navigation Bar）位于屏幕的顶部 ，状态栏的正下方 ，主要用于帮助用户明确页面位置 、层级等 ，导航栏包含了一些控件 ，用来在应用里不同的视图中导航 ，同时还承载了针对当前页面全局性的操作 。
作用
- 导航 ：提供离开当前页面的出口，即返回上级（适用于非一级页面）
- 定位 ：告知用户当前所在位置
- 提供全局操作 ：一般是以图标 、文字、按钮或组合的形式存在
- 增加品牌曝光 ：例如品牌Logo 、容器品牌色 、图标品牌色等
- 搜索 ：方便用户快速查找内容
- 分类整理 ：以分类tab为代表 ，本质是将多个相关的同级页面聚合在一起
- 用户账户相关 ：如登录 、注册、个人中心等，通常结合用户头像或特定图标表示
- 动作指引 ：基于当前页面动作指引下一步去向
四 、场景复杂 ，如何简化 ？
我们的业务场景丰富 ，还需要同时兼顾 App 和小程序 ，以及正常模式和Ghost模式 ，在这个基础上，我们的NavgationBar 样式能枚举出 25+ 种 ，这么多场景 ，总不能全部做成组件母版吧 ，那么应该如何简化呢 ？
找共性 — 打地基
首先 ，从基础结构上看 ， Navigation Bar 都包含了3个部分，可以归纳为Left（左侧容器） 、Center（中间容器） 、Right（右侧容器） ，容器之间互相适应 。
找特性 — 搭建基础变体
基于业务诉求，各部分容器生成了各式各样的类型和组合方式 ，但是在组件设计中 ，需要避免把所有的情况枚举成选项 ，否则会丧失组件使用时的灵活性 ，并且难以应对后期的拓展需求 ，这就需要我们在众多情况中先找出特性 ，并抽象化的表示。
通过总结各部分容器的作用及场景 ，可得出其各自包含的基础组件类型变体（Variants）如下 ：
Left（左侧容器） ：
- Logo
- IconButton
Center（中间容器） ：
- SearchBar
- Tabs
- Text
Right（右侧容器） ：
- Button
- 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 设计组件的升级过程中 ，我也深刻意识到了怎样才能叫“好的设计组件” ，我们不能将眼光局限于现有的业务场景当中 ，需要在我们收集出所有场景之后深入的分析 ，建立容器思维，寻找底层结构的共性和逻辑，搭建坚固的基底之后，再一层一层往下拆分 、嵌套 ，保证组件的灵活性 、可拓展性 。
作者：Echo Design
作为产品体验的章节“第一道门”，顶部导航栏（Navigation Bar）的教系设计直接影响用户对产品的使用效率和品牌感知，基于我们产品的统掌使用场景，Navigation Bar 呈现出多样的握顶组合方式来表达不同的页面层级及内容 ，由于没有统一的部导设计规范 ，因此出现了细节混乱不一致等问题。航栏同时 ，设计师必设计为了适应产品的章节不断迭代更新，提高设计和开发的教系效率 ，保证产品体验的统掌一致性 ，需要设计组件库有更具自由度 、握顶灵活拓展性的部导表现以及规范指引 。
那么如何拆解复杂场景 ，航栏收敛结构 ，设计师必设计搭建出灵活 、易用 、好维护 、可拓展的 Navigation Bar 设计组件呢 ？请跟随本文的脚步一起看一看具体的实践思路吧。
一起感受一下最终落地的组件实际的使用效果吧～
一 、怎么个事
通过App和小程序的场景收集 ，我们发现目前线上的 Navigation Bar 可总结出10+种不同的样式 ，由于各部分元素没有统一规范 ，出现了各种不同的问题 ，急需对组件库重新进行收敛和升级 ：
- Image尺寸和圆角未统一
- icon颜色 、大小、样式不一致
- 元素间距 、对齐方式不一致
- 标题文字字号不一致
- 标题文字字数限制未规定 ，出现两行展示的情况
- 部分图标被截断 ，显示不完整
- App和小程序同一场景样式未对齐
二 、别人是怎么做的 ？
在主流的大厂组件库中 ，我们发现 NavgationBar 都单独提取出了左侧区域及右侧区域 ，在命名上也看不到难以理解的业务属性命名 ，这也让我们意识到了要转变搭建 NavgationBar 组件的逻辑 ，跳出复杂的业务场景 ，从结构入手 ，形成容器思维，提升组件的包容性 。
TDesign
Ant Design Mobile
三 、NavBar是什么？
定义
顶部导航栏（Navigation Bar）位于屏幕的顶部 ，状态栏的正下方 ，主要用于帮助用户明确页面位置 、层级等 ，导航栏包含了一些控件 ，用来在应用里不同的视图中导航 ，同时还承载了针对当前页面全局性的操作 。
作用
- 导航 ：提供离开当前页面的出口，即返回上级（适用于非一级页面）
- 定位 ：告知用户当前所在位置
- 提供全局操作 ：一般是以图标 、文字、按钮或组合的形式存在
- 增加品牌曝光 ：例如品牌Logo 、容器品牌色 、图标品牌色等
- 搜索 ：方便用户快速查找内容
- 分类整理 ：以分类tab为代表 ，本质是将多个相关的同级页面聚合在一起
- 用户账户相关 ：如登录 、注册、个人中心等，通常结合用户头像或特定图标表示
- 动作指引 ：基于当前页面动作指引下一步去向
四 、场景复杂 ，如何简化 ？
我们的业务场景丰富 ，还需要同时兼顾 App 和小程序 ，以及正常模式和Ghost模式 ，在这个基础上，我们的NavgationBar 样式能枚举出 25+ 种 ，这么多场景 ，总不能全部做成组件母版吧 ，那么应该如何简化呢 ？
找共性 — 打地基
首先 ，从基础结构上看 ， Navigation Bar 都包含了3个部分，可以归纳为Left（左侧容器） 、Center（中间容器） 、Right（右侧容器） ，容器之间互相适应 。
找特性 — 搭建基础变体
基于业务诉求，各部分容器生成了各式各样的类型和组合方式 ，但是在组件设计中 ，需要避免把所有的情况枚举成选项 ，否则会丧失组件使用时的灵活性 ，并且难以应对后期的拓展需求 ，这就需要我们在众多情况中先找出特性 ，并抽象化的表示。
通过总结各部分容器的作用及场景 ，可得出其各自包含的基础组件类型变体（Variants）如下 ：
Left（左侧容器） ：
- Logo
- IconButton
Center（中间容器） ：
- SearchBar
- Tabs
- Text
Right（右侧容器） ：
- Button
- 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 设计组件的升级过程中 ，我也深刻意识到了怎样才能叫“好的设计组件” ，我们不能将眼光局限于现有的业务场景当中 ，需要在我们收集出所有场景之后深入的分析 ，建立容器思维，寻找底层结构的共性和逻辑，搭建坚固的基底之后，再一层一层往下拆分 、嵌套 ，保证组件的灵活性 、可拓展性 。
作者：Echo Design
