本文共 1530 字，大约阅读时间需要 5 分钟。

移动端导航设计是产品设计中的核心环节之一，直接影响用户体验和操作便捷性。本文将深入探讨iOS和Android在导航机制上的差异，以及7种常见的移动端导航设计模式。

1. iOS和Android的UI元素——导航及工具栏

一、Android和IOS在应用内导航机制上的区别

iOS主要依靠底部导航栏和工具栏来实现不同信息层级结构间的导航，而Android 2.3及更早的系统则通过返回按钮来支持应用内的导航。在Android 3.0中，向上按钮成为第二个导航机制。

二、Android和IOS在应用操作栏/工具栏上的区别

Android操作栏包含视图控件，而iOS系统则主要通过底部标签栏来实现视图切换。Android允许使用多操作栏，通常将选项卡展示在主操作栏下方，而iOS通过编辑模式来完成类似操作。编辑模式和情景操作栏的主要区别在于，Android通过长按触发，而iOS则通过编辑按钮触发；Android的操作控件均在CAB显示，而iOS允许在底部单独显示操作控件。此外，Android完成编辑后会自动退出CAB，而iOS则需要用户点击完成按钮。

三、IOS系统

• 导航栏：用于在不同信息层级结构间导航，有时也用于管理当前屏幕内容。导航栏通常包括返回按钮、标题和控件。如果需要放置多个控件或不需要导航时，可以使用工具栏替代导航栏。工具栏是不包括标题的。需要注意的是，屏幕方向的变化会导致导航栏/工具栏的高度自动变化，开发者需要确保自定义的图标可以适应导航栏高度变小的情况（除iPad外）。

四、Android系统

• 操作栏：被分为适应大多数APP的四个不同功能区域：App图标（非顶级含向左符号）、视图控件（切换视图，形式包括下拉菜单或选项卡）、操作按钮（主要操作，最多两个）、更多操作。
• 多操作栏：允许在不同屏幕尺寸和旋转情况下使用多操作栏，包括主操作栏、顶部栏、底部栏，顶部操作栏通常用于放置选项卡进行视图切换。
• 情景操作栏：是一个在执行特定子任务期间，重叠在App操作栏上的临时操作栏，通常用于涉及内容或文字选择的任务。

2. 移动端导航的七种设计模式

（1）标签式导航

标签式导航是最常用、最不易出错的导航方式，通常以底部或顶部Tab形式出现。QQ、微信、淘宝、微博、美团、京东等应用均采用底部Tab式导航；QQ音乐和酷我音乐则使用顶部Tab式导航。腾讯新闻和网易新闻等新闻类APP也采用类似的导航方式。

（2）抽屉式导航

抽屉式导航适合信息层级繁多的情况，可以将辅助类内容放在抽屉中。近年来随着iPhone 6和iPhone 6 Plus的普及，抽屉式导航在iOS中越来越流行。

（3）列表式导航

列表式导航主要用于展示二级甚至更深层级的内容，是每个APP必不可少的导航方式。例如，杂志类APP如Elle就会采用列表式导航来展示文章分类。

（4）平铺式导航

平铺式导航适合内容随意浏览、无需来回跳转的场景。家居杂志类APP的平铺式导航非常适合，最大限度地保持了图片的完整性。

（5）宫格式导航

宫格式导航不建议作为主导航使用，除非有特殊需求。例如，IOS和Android手机桌面中使用宫格式导航，而美图秀秀等应用则在特定场景下采用宫格式。

（6）悬浮式导航

悬浮式导航更适合大屏设备，导航图标可以在屏幕边缘自由移动，依靠悬浮层随时访问功能。Android的Material Design中也提出了悬浮图标的设计概念。

3. 导航框架的选择

选择适合的导航模式需要综合考虑产品层级深度和广度。移动端屏幕尺寸有限，操作方式主要包括点击、滑动和长按，因此导航模式通常分为以下七种（可在此基础上组合）。根据产品需求选择合适的导航模式，是产品设计中的关键环节。

转载地址：http://seik.baihongyu.com/