导航是任何应用程序的支柱。定义用户如何在屏幕之间移动、查找功能和完成任务。糟糕的导航会让人感到困惑和沮丧。本指南向您介绍如何设计直观的流程。
为什么导航很重要
初体验
用户需要立即定位自己。
效率
只需最少的接触即可到达目的地。
发现
查找您不知道的功能。
减少认知负荷
少一点思考，多一点行动。
导航模式
标签栏
基地上的主要导航。 3-5 项。标准 iOS 和 Android。
底部导航
与标签栏类似。材料设计。
抽屉/汉堡
侧面菜单。更多项目，更少可见。
选项卡布局（顶部）
选项卡位于顶部。相关内容。
基于手势
滑动即可导航。更少的铬，更多的内容。
导航层次结构
主要导航
主要部分。始终可访问。
辅助导航
部分内。向下钻取。
上下文
与当前内容相关的操作。
实用程序
设置、配置文件、帮助。
信息架构
卡片分类
用户组织内容。揭示心智模型。
树测试
无需目测即可测试结构。用户找到物品了吗？
网站地图
完整结构的可视化。
流程图
记录用户旅程。
流动模式
轮辐式
中央屏幕，分支。返回枢纽。
分层
逐步深入。面包屑。
###线性
步骤顺序。向导，入门。
堆栈
堆叠的屏幕。回栈。
过渡和动画
目的
沟通屏幕之间的关系。
推送/弹出
分层导航。方向表示深度。
莫代尔
暂时集中精力。驳回退货。
共享元素
常见元素在屏幕之间移动。
淡出
微妙变化的平滑过渡。
深层链接
这是什么
将您带到应用程序中特定屏幕的 URL。
用例
通知、电子邮件、共享。
实施
解释 URL 的路由。
通用链接/应用程序链接
相同的链接适用于应用程序和网络。
导航手势
向后滑动
iOS：边缘滑动返回。
Android 手势导航
全球导航的手势系统。
拉动刷新
更新内容。
滑动操作
对列表项的操作。
复杂应用程序中的导航
多个流
每个选项卡都可以有自己的堆栈。
嵌套
选项卡内的选项卡。小心复杂性。
###搜索
全局搜索作为替代导航。
状态恢复
返回上次离开的地方。
用户指南
位置指示器
我在应用程序中的什么位置？
面包屑
采取的路径。
进度指标
在线性流中。
###标题
屏幕标题传达上下文。
辅助功能
屏幕阅读器
导航可与 VoiceOver/TalkBack 配合使用。
焦点顺序
逻辑 Tab 键顺序。
跳过链接
跳过重复的导航。
大型触摸目标
足够大的可触摸元素。
平台
iOS
首选标签栏。回到左上角。边缘手势。
###安卓
底部导航。向上按钮。共用抽屉。
跨平台
使标准适应平台或有意识地统一。
导航测试
任务成功
用户完成任务了吗？
任务时间
到达目的地需要多长时间？
错误率
错误的接触，死胡同。
第一次点击
正确的第一次接触预示着成功。
常见错误
汉堡包万能
隐藏重要的导航。
许多物品
拥挤的标签栏令人困惑。
不一致
不同的屏幕上有不同的图案。
深层层次结构
深层次很多。
死胡同
没有明显的回去路。
文档
用户流程
旅程图。
屏幕库存
所有屏幕的列表。
导航矩阵
谁通向谁。
结论
精心设计的导航是隐形的，用户不假思索就能找到自己需要的东西。使用熟悉的模式，保持一致性，并与真实用户进行测试。直观的流程是可用应用程序的基础。
##常见问题解答
1) 标签栏还是抽屉？ 主要项目的选项卡栏（最多 5 个）。用于存放更多物品或信息较多的应用程序的抽屉。
2) 有多少层级？ 最好是 3 个或更少。更令人困惑的是。
3) 如何测试导航？ 结构的树测试，流程的可用性测试。
4) 是否需要深层链接？ 对于具有共享或通知功能的应用程序，是的。
5) 我可以使用不同的 iOS/Android 标准吗？ 它可以，但用户期望熟悉。小心避开。
另请阅读
- [应用程序导航流程：日常工具0
- [应用程序导航流程：扩展工具1
- [数字信息架构：如何为用户组织内容2
- 【应用用户旅程：完整映射3
- [应用程序线框图：视觉结构指南4
- [交互设计：直观数字体验指南5