作为产品体验的章节“第一道门” ，顶部导航栏（Navigation Bar）的教系设计直接影响用户对产品的使用效率和品牌感知 ，基于我们产品的统掌使用场景，Navigation Bar 呈现出多样的握顶组合方式来表达不同的页面层级及内容 ，由于没有统一的部导设计规范 ，因此出现了细节混乱不一致等问题 。航栏同时 ，设计师必设计为了适应产品的章节不断迭代更新 ，提高设计和开发的教系效率 ，保证产品体验的统掌一致性 ，需要设计组件库有更具自由度 、握顶灵活拓展性的部导表现以及规范指引 。
那么如何拆解复杂场景，航栏收敛结构 ，设计师必设计搭建出灵活 、易用 、好维护 、可拓展的 Navigation Bar 设计组件呢 ？请跟随本文的脚步一起看一看具体的实践思路吧 。
一起感受一下最终落地的组件实际的使用效果吧～
通过App和小程序的场景收集 ，我们发现目前线上的 Navigation Bar 可总结出10+种不同的样式 ，由于各部分元素没有统一规范，出现了各种不同的问题 ，急需对组件库重新进行收敛和升级 ：
在主流的大厂组件库中 ，我们发现 NavgationBar 都单独提取出了左侧区域及右侧区域 ，在命名上也看不到难以理解的业务属性命名 ，这也让我们意识到了要转变搭建 NavgationBar 组件的逻辑，跳出复杂的业务场景 ，从结构入手 ，形成容器思维 ，提升组件的包容性。
TDesign
Ant Design Mobile
定义
顶部导航栏（Navigation Bar）位于屏幕的顶部 ，状态栏的正下方 ，主要用于帮助用户明确页面位置 、层级等 ，导航栏包含了一些控件 ，用来在应用里不同的视图中导航 ，同时还承载了针对当前页面全局性的操作 。
作用
我们的业务场景丰富 ，还需要同时兼顾 App 和小程序 ，以及正常模式和Ghost模式 ，在这个基础上，我们的NavgationBar 样式能枚举出 25+ 种 ，这么多场景，总不能全部做成组件母版吧 ，那么应该如何简化呢 ？
找共性 — 打地基
首先 ，从基础结构上看 ， Navigation Bar 都包含了3个部分 ，可以归纳为Left（左侧容器）、Center（中间容器） 、Right（右侧容器） ，容器之间互相适应 。
找特性 — 搭建基础变体
基于业务诉求，各部分容器生成了各式各样的类型和组合方式 ，但是在组件设计中 ，需要避免把所有的情况枚举成选项 ，否则会丧失组件使用时的灵活性 ，并且难以应对后期的拓展需求，这就需要我们在众多情况中先找出特性 ，并抽象化的表示。
通过总结各部分容器的作用及场景 ，可得出其各自包含的基础组件类型变体（Variants）如下 ：
Left（左侧容器） ：
Center（中间容器） ：
Right（右侧容器） ：
增加底层灵活性
再拓展开来，每个基础类型组件还有不同的结构性需求，这需要组件具备底层的灵活性，以适应多种状态切换 。可以抽象地理解为 ，为一个小组（基础组件类型）设置一定的成员名额（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
关注微信
