产品功能体验:移动端导航设计梳理

今天小编给大家带来的文章是移动端-导航设计梳理,如何让用户可以在各个功能页面之间顺滑跳转,让用户明确当前位置、知道如何到达目标功能,并且这中间是快速、高效的呢,一起来看看吧!

产品功能体验:移动端导航设计梳理

移动端产品设计中,因为屏幕物理尺寸相对于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混合的形式)都会对导航设计带来变化。今天我们只是以移动端的页面路径导航中的“返回、关闭、取消”以及它们对应在不同操作系统的一些区别为例,简单描述了对于不用语意导航按钮的使用情况。

本文由 新媒体之家 作者: 应谋鬼计 发表,其版权均为原作者所有,文章内容系作者个人观点,不代表 新媒体之家 对观点赞同或支持,未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
2

发表评论