移动应用导航:完整指南
已发表: 2022-02-17你知道 2020 年应用下载量超过 867 亿次吗? 无论是娱乐还是商务,该应用程序都是任何企业的必备软件。 在快速下载方面,Google Play 和 Apple App Store 有数以千计的应用程序可用,但并非所有应用程序都具有相同的质量。
应用导航是定义应用质量的关键特征之一。 以导航作为应用程序的支柱,详细研究它会更多。 让我们使用我们的完整指南帮助您了解有关应用程序导航的所有信息。 让我们首先了解什么是导航?
什么是导航?

在应用程序中导航或从一个地方移动到另一个地方对于许多用户来说是一项重要的日常任务。 无论是从一个页面移动到另一个页面,还是在应用程序上搜索重要内容,导航都可以让用户轻松获得改进的数字体验。 在技术方面,导航还有很多内容需要深入研究。 让我们从不同类型的导航开始。
导航类型
有不同类型的导航可以帮助用户在不同的应用程序屏幕之间移动。 这些类型的导航是使用平台可负担性、将导航行为嵌入内容和不同的导航组件来实现的。
导航的主要类型包括:

航行方向
根据任何应用程序的信息架构,用户可以向三个不同的方向移动。 这三个导航方向包括:
1.横向导航
它表示同一层次中的屏幕之间的移动。 任何应用程序的主导航组件都必须提供对其层次结构顶层所有目的地的访问。 它可以快速访问功能并在一组不同项目之间切换。

用户可以通过两种不同的方式轻松地使用音乐应用程序向前导航对任何应用程序的访问:
- 它可以从音乐专辑到特定歌曲分层完成。
- 通过绕过层次结构中的屏幕直接从歌曲中搜索和导航。

用户可以通过以下两种方式轻松反向导航应用程序:
- 在层次结构中向上到包含歌曲的专辑或歌曲的父级。
- 它会按时间顺序连接到搜索结果屏幕,以防用户刚刚从应用屏幕导航到歌曲。
就像应用程序的主要导航组件应该在层次结构顶层提供对所有目的地的访问一样。 具有多个顶级目的地的应用程序可以使用底部导航栏、导航抽屉等提供横向导航。
| 零件 | 用于 | 目的地 | 设备 | 
| 底部导航栏 | 顶级目的地 | 3-5 | 移动的 | 
| 导航抽屉 | 顶级目的地 | 5+ | 平板电脑、移动桌面 | 
| 标签 | 任何层级 | 2+ | 平板电脑、移动桌面 | 
导航抽屉非常适合五个或更多顶级目的地,并且可以访问以获得一致的导航体验。 底部导航栏提供对移动设备上三到五个目的地、可见性、位置、持久性等的访问,允许在不同目的地之间快速切换。 此外,这些选项卡可用于应用程序层次结构的任何级别,以提供两个或更多对等数据集。




2. 向前导航
向前导航在任何应用程序的屏幕之间具有三种移动类型来完成任务。 这些运动包括:
- 向下:它允许从子屏幕从父屏幕访问深度内容。
- 顺序:它允许像任何结帐过程一样在顺序或有序的屏幕序列中导航。
- 直接:它允许从一个屏幕直接导航到另一个应用程序。
转发导航的实现使用不同的组件嵌入到屏幕的内容中。 因此,它可以使用内容中的链接、一个或多个屏幕上的应用内搜索、前进到另一个屏幕的按钮以及图像列表、列表、卡片等内容容器来实现。



3.反向导航
它是指不同屏幕之间的向后移动。 它有助于按时间顺序移动屏幕历史记录或向上移动应用层次结构。 通过将用户返回到先前的屏幕位置和状态来加速任务恢复或信息召回,从而优先考虑反向导航中的用户体验是很重要的。 如果屏幕的先前状态在隐私信息清除事件中不可用,它必须提供清晰的消息。 此外,任何反向导航都必须指示子屏幕与层次结构中其上方屏幕的关系。
将您的应用创意变为现实
让我们一起构建一个新的应用程序
1. 逆时间导航
它使用应用程序的历史记录以相反的顺序指示应用程序导航。 它可以帮助用户在多个应用程序之间移动,例如网络浏览器上的后退按钮。 反向时间导航由进一步定义其运动并访问其功能的操作平台提供。

2. 向上反向导航
它允许用户在单个应用的层次模型中向上导航一级。 它一直有效,直到到达顶层屏幕或主屏幕,例如,顶部栏中的向上箭头。 向上导航应在进一步遵循平台指导的所有子屏幕上实现。 它是在 iOS 应用程序中通过使用后退按钮和使用 Android 和 Web 应用程序使用材料向上操作来实现的。

什么是移动导航?

从一个屏幕跳转到另一个屏幕是快速导航的一个简单示例。 对于移动导航,它是用户在应用程序中从一个点移动到另一个点的过程。 它可以定义为应用程序的道路系统,进一步使强大的应用程序的背景。 移动导航应该快速、轻松,并支持无缝过渡。
移动导航的最佳实践
现在,让我们通过一些顶级的移动导航实践,让用户更容易使用任何糟糕的移动导航都可能导致客户流失,因为良好的导航会提高应用程序的可用性。 找到不同的东西并充分利用设计团队的成果变得很容易。 因此,了解移动导航的最佳实践非常重要,这可以进一步决定或破坏应用程序的可用性。 四大移动导航良好做法的快速列表包括:
1.导航需要清晰直观

移动设备减少的空间和增加的交互成本使得移动导航尽可能明显和直观变得很重要。 从可用性到目标用户,重要的是要经过卡片分类测试、树测试和心智模型。 因此,简而言之,移动导航应该与客户一起工作,而不是与之对抗。
2. 考虑手指和手的定位

没有用户愿意在迟缓的手指或手部定位上浪费时间,因为它可能会分散注意力和令人沮丧。 因此,任何移动导航应用程序的链接和按钮都应考虑手指的理想尺寸和手的位置。 设计人员可以选择出色的按钮来消除移动应用程序中这个小而强大的问题。
3. 内容需要清晰易读

虽然内容仍然是移动应用程序的王者,但让内容尽可能清晰是很重要的。 使用提供逼真导航模拟的原型工具变得很重要。 它可以是基于文本和汉堡菜单图标的最佳组合。
4.避免杂乱,尊重视觉层次

少即是多——移动导航确实如此。 移动应用程序中不应该杂乱无章,非常适合用户界面的极简风格。 内容必须始终专注于某个层次结构,分析元素的接近程度,并为视觉效果留出足够的空间。
移动导航应用的八个 UI 组件
那么,怎样才能让移动导航应用成功呢? 这一切都在用户界面中,进一步构成了协同工作的不同组件。 移动导航应用程序的前 8 个用户界面组件包括:
1. 汉堡菜单

它有三个小水平线,舒适地放置在移动应用程序的角落,以便快速访问。 汉堡菜单是一种隐藏精细导航的方法,为用户提供更多空间。 此外,所有领先的设计师在他们的项目中至少使用过一次汉堡菜单。
2.底部导航

底部导航是收集主要和次要导航链接的必备栏。 它借助拇指为移动用户提供快速导航。 无需以其他方式抓握设备,减少疲劳。
3. 顶部导航

位于屏幕顶部的导航栏确保用户可以在使用双手的同时充分利用移动应用程序。 它可以将重要的链接快速传达给用户。
4. 卡片

在有效的应用导航方面,UI 卡是现代潮流引领者。 使用不同的形状和大小来聚合不同的信息变得很容易。 此外,很容易在一个地方协作文本、链接、照片等。
5. 标签

它包含多个选项的行,这些选项导致应用程序上的不同页面。 选项卡的覆盖主题有助于在同一上下文中的替代主题之间切换。 选项卡与导航栏属于同一类别,但具有不同的功能。
6. 基于手势的导航
作为广受欢迎的 UI 组件之一,基于手势的导航为有效的应用导航设置了高标准。 触摸、拖动、滑动、缩放等手势提供了无与伦比的动态和交互式用户体验。 新蜜蜂只使用手势就可以轻松地在应用程序上导航。
7.全屏导航

它非常适用于需要全屏细节的产品部分。 它被称为“导航中心”,使用视觉层次结构精心设计。 它确保为寻找详细产品功能的用户提供即时帮助。
8. 3D触控
技术巨头 Apple 推出了 3D touch,可从 iPhone 主屏幕提供直接选项。 它提供了一个导航快捷方式,可在屏幕上显示专用选项的选项范围。 凭借该技术引领市场,3D 触摸现在被用于多种智能设备,进一步允许设计人员将其包含在他们的应用程序导航中。 它进一步提供了一种很好的预览方式。

什么是导航转换?
导航转换是在不同屏幕之间移动的过程,例如从主屏幕移动到详细屏幕。
导航转换使用动作来引导用户在应用程序的两个不同屏幕之间切换。 它使用移动来指示元素之间的关系,并将用户的偏好定位为应用程序层次结构的一种表达。 层次转换帮助用户在应用程序的层次结构中向上或向下移动一个级别。 对等转换帮助用户在同等层次的屏幕之间移动。 让我们一一详细了解这两种类型的转换:
你有一个愿景
我们有办法让您到达那里
1. 分层过渡
它可以帮助用户在一个应用程序中上下移动等。 在这种情况下,屏幕具有相邻的级别,例如父子关系。 嵌入的子元素从父屏幕升起,在其位置进一步扩展并转换过渡模式。 这个动作加强了亲子之间的关系,并专注于子屏幕。
2. 对等转换
它们有两种类型,包括兄弟转换和顶级对等转换。 让我们一一理解:
同级过渡:在此过渡中,屏幕共享同一个父级,以加强两个屏幕之间的关系。 对等屏幕从一侧滑动,而同级屏幕以相反方向移出屏幕。
顶级转换:在此转换中,目标被分组为主要任务,并使用淡入淡出转换进行。
安卓导航
Android导航原理:

- 固定起点和终点
- 导航状态由目标堆栈表示。
- 当您使用向上按钮时,您的应用程序永远不会退出。
- 深度链接是一种用于模拟物理导航的技术。
| 针对不同外形尺寸的设计 | 目的地之间的动画过渡 | 
| 手势导航 | 使用 NavigationUI 更新 UI 组件 | 
| 设计导航图 | 使用选项卡创建滑动视图 | 
| 嵌套图 | 以编程方式与导航组件交互 | 
| 全球行动 | 测试导航 | 
| 条件导航 | 添加新的目的地类型 | 
| 在目的地之间传递数据 | 提供自定义后退导航 | 
| 迁移到导航组件 | 为目的地创建深层链接 | 
iOS 导航
1.分层导航

2.平面导航

3. 内容驱动或体验驱动的导航

Apple iOS 人机界面指南:
- 始终确保有一条清晰的路径。
- 创建允许快速轻松地访问内容的信息结构。
- 要获得流畅性,请使用触摸动作。
- 使用常见的导航元素。
- 使用导航栏导航数据层次结构。
- 使用选项卡栏显示对等内容或功能类别。
- 在 iPad 上使用拆分视图而不是标签栏。
- 当您有许多具有相同类型材料的页面时,请使用页面控制。
| 用户交互 | 系统能力 | 视觉设计 | 图标和图像 | 酒吧 | 意见 | 控件 | 扩展 | 
|---|---|---|---|---|---|---|---|
| 3D 触控 | 增强现实 | 适应性和布局 | 图像尺寸和分辨率 | 导航栏 | 行动表 | 纽扣 | 自定义键盘 | 
| 账户 | 主屏幕操作 | 动画 | 应用程序图标 | 搜索栏 | 活动视图 | 彩色井 | 文件提供者 | 
| 苹果铅笔和涂鸦 | 多任务处理和多个窗口 | 品牌推广 | 系统图标 | 侧边栏 | 警报 | 上下文菜单 | 消息传递 | 
| 声音的 | 通知 | 颜色 | 状态栏 | 收藏品 | 编辑菜单 | 照片编辑 | |
| 数据输入 | 印刷 | 黑暗模式 | 标签栏 | 图像视图 | 标签 | 分享与行动 | |
| 拖放 | 快速查看 | 启动屏幕 | 工具栏 | 页面 | 页面控件 | ||
| 反馈 | 评级和评论 | 材料 | 约夏克布丁 | 拣货员 | |||
| 文件处理 | 截图 | 术语 | 滚动视图 | 进度指标 | |||
| 游戏控制器 | 电视提供商 | 排版 | 床单 | 刷新内容控件 | |||
| 手势 | 视频 | 拆分视图 | 分段控制 | ||||
| 触觉 | 表 | 滑块 | |||||
| 键盘 | 文本视图 | 步进器 | |||||
| 近场通信 | 网页浏览量 | 开关 | |||||
| 指针 (iPadOS) | 文本字段 | ||||||
| 空间交互 | |||||||
| 撤消和重做 | 
十大移动导航示例
借助快速示例,总是很容易理解应用导航的实现。 十大移动导航示例的快速列表包括:
1. 脸书

它是使用有效移动导航的最受欢迎的应用程序之一。 它结合了不同的移动导航模式,包括底部导航栏、顶部导航栏、汉堡菜单等。公司的技术团队确保可以使用不同的导航模式而不会让应用程序不堪重负。 持续可用的按钮使用五个不同的目的地,这是 Facebook 一致性的秘诀。

2. 苹果的 3D Touch

它是一个流行的应用程序,在行业中发明了 3D 触摸。 它通过创建全新的快捷方式为多样化的用户提供了极大的可用性。 它为不同的用户提供了一系列导航选项,以便更好地理解应用导航。
3. Spotify

它是广泛使用的音乐流媒体业务应用程序之一,有趣的是,它是有吸引力的用户界面应用程序之一。 它提供了在整个应用程序内容中发现内容的动态方式。 用户界面进一步鼓励用户充分利用不同的功能。 底部导航栏使应用程序集中与主要应用程序导航功能。
4.优步

理想情况下,优步被评为最受好评的出租车移动应用程序之一,它拥有有效且直接的用户界面之一。 此外,使用该应用程序可以轻松访问 Uber Eats 和 Uber 出租车服务的选项。
5. 网飞

它是最常用的娱乐应用之一,具有独特的应用导航功能。 用户界面确保客户可以滚动浏览适合应用程序和桌面使用的不同媒体内容。 不用说,客户可以通过快速导航按钮浏览内容。

6.火种

作为在线约会的首选应用程序之一,Tinder 是应用程序导航的领先示例,它为日常使用带来了基于手势的导航功能。 经典的左右滑动模式让用户感到鼓舞、娱乐和活跃。 Tinder 是现代科技行业中最受赞誉的动态应用程序之一。

7. 多邻国

作为语言学习应用程序的领导者,Duolingo 提供一系列不同的语言学习。 彩色圆形图标和描述性仪表板确保快速访问所有学习课程选项。

8. 米特拉

它是最畅销的在线购物应用程序之一,以实惠的价格提供优质购物。 易于使用的导航板使新蜜蜂可以轻松找到完美的产品,而不会因选择而不知所措。 Myntra 还使用了不止一种应用导航模式。

9.特雷罗

这个网站超越了方形卡片,创造性地设计了细长的矩形卡片,优化了屏幕空间。 它有助于简化复杂的工作流程,保持用户界面整洁,并使用户可以轻松地在整个应用程序中导航。
10. 推特

它使用不止一种导航模式,其中包括一个涵盖不同导航模式的底栏。 作为领先的社交媒体应用程序之一,Twitter 专注于趋势应用程序导航。
结论
拥有超过
61% 的智能手机用户同意他们最喜欢的应用程序易于使用和导航。
ThinkWithGoogle
因此,迫切需要应用程序导航。 这一切都从了解导航、它的不同类型、移动导航等开始。使用最佳实践和任何移动导航应用程序中的前八个必备组件,移动导航很容易实现。
接下来是导航转换,它是无缝用户体验的核心。 移动导航示例的前十个示例可以很容易地理解专用应用导航的结果。 因此,有了本指南,任何技术人员都可以为快速有效的应用导航做好准备。
如果您有任何应用程序开发项目,请联系我们的专业应用程序开发团队寻求帮助。
关于应用导航的常见问题
允许用户在应用程序中浏览、返回和进入不同内容的交互称为屏幕导航。
从导航器组件上方传递的道具称为 screenProps。 它将额外的选项传递给子屏幕。
出现在 Android 手机屏幕底部的菜单称为 Android 导航栏。 它是手机导航的基础。
- 图片和视频: material.io,justinmind
