移动端-导航设计梳理

移动端产品设计中，因为屏幕物理尺寸相对于PC电脑更小，所以每一屏承载的内容在考虑精简有效的同时，也需要利用布局样式及更多的页面串联撑起整个产品的功能和内容。那么如何让用户可以在各个功能页面之间顺滑跳转，让用户明确当前位置、知道如何到达目标功能，并且这中间是快速、高效的呢？

这时就需要一套合理的导航设计，选择符合产品功能性的导航尤为重要，甚至有些情况下，为了产品体验，我们还要定义新的导航样式，以便达到更好的用户体验（注：除非有更好的选择，否则遵循标准）。所以写下一篇小文，在自己梳理总结的同时，希望也可以对大家有所帮助。

导航设计的定义 类型 设计原则

导航的定义

导航的设计是整个移动端UI界面设计中非常重要的部分，也是用户判断一个App是否好用的关键。我们在设计导航时尽可能提供标识，避免用户迷路；保持导航样式和行为一致或减少导航数量来降低用户学习成本；尽可能减少页面间的跳转，移动距离保持简短。让用户明确知道要去往什么地方，并且快速的到达，可以有效提高用户体验。

导航设计原则

导航组织了内容,因此它的主要作用就是为用户提供清晰的路径选择，能够让用户更快速、更轻松的在应用中找到所需的信息。

我们在导航设计的时候要注意以下4点内容，大家要牢记哦～

导航设计类型 — 按操作方式划分

按照操作方式，导航设计大致分为四种不同的类型：全局型、瞬时型、混合型、内容驱动型。

1.全局型导航操作模式及分类

宫格式、TAB切签、底部标签（菜单栏）、列表式...

特点：

1.功能入口直观，可见性、操作性好；

2.结构清晰、逻辑性强、易于理解、帮助用户快捷定位到目标。

2.瞬时型导航操作模式及分类

抽屉式/侧边式、下拉菜单、点聚式...

特点：

节省页面空间，聚焦核心内容，扩展性好、可容纳很多功能，适应性良好。

3.混合型导航操作模式及分类

舵式、轮播式...

特点：

全局导航与瞬时导航的结合，拥有直接展示功能入口并结合需要操作才展示的其他剩余功能。

4.内容驱动型导航操作模式

特点：

多见游戏化娱乐型产品，这类具备丰富的多样性。

导航设计类型 — 按进行状态划分

按照用户操作的行进状态，导航设计大致分为3种不同的类型：递进式导航、反向导航、终止导航，三者结合，给用户提供操控页面跳转的完整能力。

今天我们要着重说的是产品使用过程中的，完成各类任务路径的导航栏使用规则，对于一二级频道页涉及的其他导航形式，暂不做分析。其中重点要说到是：反向、终止导航。

反向 终止导航中重要操作元素的区别及应用场景

怎样通过“返回、关闭、取消”这些单一的动作，让用户在不同的场景下分别“跳跃”地回退到不同的页面，很多时候需要精心设计。

常用的导航操作

移动端产品导航栏一般包含：导航区域、标题区域以及操作区域。其中导航区控制程序页面进程。

接下来我们做一个具体解释（注意：导航栏样式，在iOS和Android展示会有所不同）

1.返回操作

什么时候用返回？

用于父子层级关系中的子页面当中，一般用于页面上的主任务流程。

举个例子：

微信的聊天列表，当点击某一项进入其详细信息页面时，左上角就会显示“返回”操作；

考虑国内安卓手机厂商都对系统进行了深度定制，及市场上各类产品规范不一，所以我们在举例时将以微信作为主要示例产品，微信界面交互设计相对尊重iOS及Android界面设计规则，更符合两大平台设计规范。

2.关闭操作

什么时候用关闭？

页面的承载功能仅为浏览查看作用,或者是临时调用页面（如弹窗）；

举个例子：

微信中把内容对好友转发时，会调用好友列表，此时iOS中断操作为”关闭“，Android依旧使用”返回“

问题原因：

在安卓原生设计语言中没有“关闭/取消”操作，只有“返回”操作

3.取消操作

什么时候用取消？

用于对上级页面的临时调用的页面当中，带有操作性功能的用“取消”，操作性动作包括编辑、分享、新建等。

举个例子：

微信朋友圈点击发布，发布内容编辑页，当用户中断此操作可点击“取消”，Android为“返回”

问题原因：

在安卓原生设计语言中没有“关闭/取消”操作，只有“返回”操作

返回、关闭、取消三者之间区别

1.返回

应用场景：常用于父子层级关系中的子页面；

具体描述：返回应该说是最常用的图标，适用于一个模块中的页面跳转或随机浏览页面中运用。除了主页面和弹窗，其他页面基本上都可用返回；在单个任务上是有流程顺接性的，就用“返回”，一般用于页面上的主任务流程；

共性/特性：具有流程性（连贯性）的操作一般用返回按钮。

2.关闭

应用场景：常用于产品公共调用的页面当中；

具体描述：A与B页面，没有上下级关系、也不是临时页面，A为正在操作的页面，B可能就所有页面中的其中一个，然而A可以调出来进行关系操作；关闭适用于创建任务的模态页面，或者跳转到另一种形态或模块中；

3.取消

应用场景：用于对上级页面的临时调用的页面当中；

具体描述：A与B页面有上下级关系，A为主页面，B页面是对A的操作页面，对A页面编辑或内容添加，所以B页面可以使用取消，在B页面停留操作时间要短于A页面；

共性/特性（关闭/取消）：比较独立，且是次要的任务入口用“取消”或者“关闭”，具有执行性的场景下使用取消按钮，无则使用关闭按钮。

好的，根据安卓与IOS设计规范的不同，导航在双端也存在着一些差别，我们再来梳理一下它们的区别。

安卓与IOS导航主体结构区别

在android系统中，顶部导航栏会有区别于iOS的结构：一二级页面都存在导航栏，二级页面带返回操作。安卓二级导航栏不支持下拉扩展，在一级导航栏可以完成此操作。安卓标题栏不支持分段控件。

IOS与Android系统导航栏主要差异

IOS

导航区域：通常只有一个操作，即返回上一级界面；

标题区域：页面标题可以定义，但需控制长度，超出长度则会省略；缺省则默认显示服务／应用的名称；

操作区域：最多定义两个图标的操作按钮或者单文本（两个字）的操作按钮；默认“更多”图标，点击唤起分享菜单。

Android

导航区域：二级及以下页面有返回按钮，点击后返回上一层界面；

标题区域：页面标题可以定义，但需控制长度，超出长度则会省略；缺省则默认显示服务／应用的名称；

操作区域：最多定义3个图标的操作按钮，其他的作为更多图标中的内容出现。

总结

导航设计看似很简单，只是页面间路径跳转的开关，但其实不然，深入分析后，我们会发现针对不同的操作系统（iOS与Android）、不同操作端（移动端/PC端）、不同的产品架构（例：部分APP采用Native与web混合的形式）都会对导航设计带来变化。今天我们只是以移动端的页面路径导航中的“返回、关闭、取消”以及它们对应在不同操作系统的一些区别为例，简单描述了对于不用语意导航按钮的使用情况。

之后，有时间我还会继续全面系统的整理关于移动端导航使用的规则及对应应用场景，请大家多多关注，多多期待！