组件规范：导航与结构
导航是一个产品的“骨架”，承载着用户在 App 内“定位”和“穿梭”的核心任务，主要回答用户心中两个最基本的问题：
1、我现在在哪里？（定位）
2、我能去哪里？（穿梭）
Tab Bar / Bottom Navigation 底部导航
一个常驻在屏幕底部的导航组件，用于在 App 的几个最高级别功能模块之间进行全局切换
核心用途
1、定义APP的一级导航
这是Tab Bar最核心的用途，回答了用户“我能在这个 App 里干什么？”这个根本问题。同时允许用户在 3-5 个同等重要的功能模块间切换，为用户提供清晰的“位置感”
2、承载产品的核心功能
随着移动互联网产品的不断迭代创新，一种打破常规导航，突出产品核心功能的“舵式导航”成为了许多APP的首选
注意事项
1、标签的数量应可控，通常≥3个，≤5个，如果少于或多于这个数量，则需要重新思考一下产品信息架构或采用其他设计方式；
2、不要在 Tab 之间更改它们的顺序或禁用它们，底部导航必须是 100% 稳定和可预测的；
3、保持导航堆栈: 当用户从“首页”Tab 切换到其他Tab，然后再切换回“首页”Tab 时，必须回到“首页”Tab 上他离开时的那个页面（例如他已经浏览到的二级或三级页面），而不是退回到“首页”的根页面。每个 Tab 都必须维护自己独立的导航堆栈。
交互细节
状态区分：必须有清晰的视觉差异来区分“选中”和“未选中”状态；
点击已选中的 Tab： 这是一个容易被忽略，但需要被定义的交互。建议当用户点击一个已选中状态的 Tab 时，应立即将当前页面的内容滚动到顶部并刷新页面。
平台差异
iOS：在iOS端称为“Tab Bar”，系统原生组件，可直接调用；
Android：在Android端称为“Bottom Navigation”，系统原生组件，可直接调用。
Navigation Bar / Top App Bar 顶部导航
一种常驻在屏幕顶部的、用于标示当前页面上下文并提供层级导航（返回）和上下文操作的组件
核心用途
1、标示当前页面
通过标题明确告知用户“当前所处的页面
2、提供返回路径
当用户进入了二级或更深的页面时，必须在左侧提供一个“返回”按钮，允许用户按层级返回到上一页
3、提供页面内的上下文操作
提供 1-3 个与当前页面内容强相关的操作按钮
注意事项
1、不要用于承载全局导航。顶部导航不应该用来在 App 的主功能区之间切换；
2、不要堆砌过多的操作。如果超过 3 个操作，应使用一个“更多”图标将次要操作收纳到 Popover 或 Action Sheet 中；
交互细节
滚动行为： 这是现代 App 设计中非常重要的一环。当用户向下滚动页面内容时，顶部导航栏可以有多种表现：
- 固定： 始终固定在顶部；
- 隐藏： 随内容向上滚动而消失（以提供沉浸式阅读），在用户向下拉时再出现；
- 收缩：从一个“大标题”样式平滑地收缩为标准的小标题栏，常见于 iOS 的规范中；
- 变色/变透明： 在滚动时改变背景颜色或透明度，常用于内容需要“穿透”顶栏的沉浸式首页。
平台差异
iOS：在iOS端称为“Navigation Bar”，标题居中展示；
Android：在Android端称为“Top App Bar”，标题通常跟在左侧的“返回”后；
在追求多平台融合设计的当下，有时统一一种方式即可。
Segmented Control / Tabs 分段控件/标签页
一种水平排列的控件，负责同一页面的不同视图或子分类之间的切换
核心用途
1、在不同视图间切换
通常这些视图是同类但不同状态的内容，例如：在订单页，切换“全部”、“待付款”、“待收货”、“已完成”
2、过滤同类内容
作为一种“筛选”机制，对内容进行过滤，例如：在数据图表中，切换“年/月/日”；在地图软件中，切换交通工具“驾车/步行/公交”
注意事项
1、不要用于承载全局导航：分段导航/标签页不应该用来在 App 的主功能区之间切换；
2、不要用于执行“操作”，它只用“导航”和“切换”；
3、选项之间应有内在关联，两个毫无关联的选项（如“待付款”和“我的收藏”）不应该出现在同一个分段空间里。
交互细节
状态区分： “选中”与“未选中”状态应有明显的视觉区分；
必须有默认项： 页面加载完成时，必须有一个选项是默认选中的，不能存在“全部都未选中”的状态；
内容联动： 在App端，它的切换常与左右滑动手势联动。即：点击选项可切换页面，滑动切换页面时，选项也要跟着切换；
平台差异
iOS：在iOS中被称为“Segmented Control”，系统原生组件，形似“胶囊”，包含所有选项（2-4个），且不可滑动；
Android：在Android中被称为“Tabs”，位置规定在导航栏或导航栏下方，占据一个专属“标签栏”位置，支持横向滑动； 注：iOS中所有“Tabs”，都是自定义的，而非Segmented Control
Navigation Drawer 抽屉导航
一种隐藏的导航面板，用户点击图标后从屏幕左侧弹出，就像拉开一个“抽屉”
核心用途
1、承载次级、全局导航
收纳一些虽然全局通用，但使用频率较低的功能，例如：“设置”、“帮助中心”、“关于我们”等
2、收纳溢出的、扁平的导航入口
当一级导航超过5个，无法承载更多入口，且这些入口为并列关系时，客用Navigation Drawer 收纳这些溢出的导航项
3、作为小型App的全局导航
常见于一些工具型应用，产品架构简单，无复杂的分类
4、作为目录导航
作为文档、漫画、书、笔记等内容的目录导航
注意事项
1、不要用于承载核心、高频的功能；
2、在与底部一级导航混用时，要小心处理层级关系，否则会导致层级混乱；
3、当使用边缘滑动触发时，需要注意滑动手势是否会与其他交互（如切换tab、返回上一级）冲突。
交互细节
触发方式： 点击图标（头像或 ）触发；边缘滑动触发；
模态： 抽屉滑出时，背后的主内容区域应覆盖溢出半透明的遮罩，点击遮罩可关闭抽屉；
层级关系： 通常抽屉是覆盖在主内容区上的，但在某些设计中，它的效果像是推挤主内容，或者主内容移开露出底下的菜单（见左起第二张图）。
平台差异
iOS：非系统原生组件，需要开发者自定义或调用第三方库；
Android：系统原生组件，所有交互都有成熟的官方实现，可直接调用。
Breadcrumbs 面包屑
一种显示用户当前在应用层级结构中位置的导航辅助工具
核心用途
格林童话《汉赛尔与格莱特》中，主人公在森林里撒下面包屑来标记回家的路。在设计领域，借用了这一典故，用“面包屑”来指代一种深层级的辅助导航系统。面包屑常见于Web端的设计中，在移动端由于屏幕尺寸限制和导航模式的差异，很少会用到。
1、深层次的层级机构
移动端绝大部分页面的层级关系用顶部导航栏就能满足，但涉及一些极深的层级关系，且每层页面“同质化”时，适合用面包屑，常见于一些文件管理器
2、企业级的组织架构树
面包屑天然契合组织架构树的特性
注意事项
1、不要用于扁平化结构，如果页面层级关系简单，顶部的导航栏通常就能满足；
2、不要用于线性流程，步骤导航有专属的组件：stepper。
交互细节
截断策略：
- 水平滚动：允许用户左右滑动面包屑来查看请完整路径；
- 折叠前项：只显示最后两级；
- 折叠中间项：展示首尾两项，中间用“…”展示，点击后弹出下拉菜单显示被隐藏的中间层级。
平台差异
iOS：非系统原生组件，iOS有一个原生替代方案：在多层级页面，长按导航栏的返回键，会弹出菜单展示所有父级页面的路径；
Android：非系统原生组件，需要开发自定义。
Steps 步骤条
一种强制性的、线性的导航约束
核心用途
展示任务流程和当前完成程度，引导用户按步骤完成任务，如分步表单、电商下单等
注意事项
1、步骤不宜过多，超过5步则需要考虑拆分任务；
2、标签文本不宜过长，由于APP端横向空间有限，文本应尽量精简。
交互细节
状态管理： 每个节点都有三种状态：待完成、进行中、已完成，需要考虑三种状态的区分；
禁止跳跃： 完成前一个步骤前，后面的步骤不可点击；
回溯机制： 已完成的前序步骤，应允许用户点击跳回。
平台差异
iOS：非系统原生组件，需开发自定义视图。iOS端倾向于使用更轻量的设计方式，如在标题处显示“步骤（1/3）”，或使用简单的进度条代替；
Android：系统原生组件，可直接调用。
Index 索引
一种页内锚点导航
核心用途
用于超长排序列表的快速定位，显示A-Z的字母或特殊符号，常见于通讯录（姓名拼音）、城市选择（首字母）等列表
注意事项
1、不要用于无序列表；
2、不要用于短列表，如果列表长度较短，滑动比索引更方便。
交互细节
拖拽滑动时，需要用气泡放大显示当前选中的字母，否则字母被手指遮挡，用户会失去位置感。
平台差异
iOS：系统原生组件，可直接调用；
Android：非系统原生组件，需要开发自定义。
