美文网首页小阿田的设计笔记
浅谈用户交互关于“引导”设计的常见类型;

浅谈用户交互关于“引导”设计的常见类型;

作者: 九天来仪箫 | 来源:发表于2018-07-06 17:51 被阅读297次

用户交互_引导

引导,可以让用户在短时间内快速了解产品的特色及使用方式,轻松上手去体验产品的功能,完成自己的目标。针对使用场景的不同我们对引导提出了几种方式和使用指南。

常见的引导方式由轻至重分为为如下类别

- 红点引导

- 气泡引导

- 蒙层引导

- 缺省页和结果页引导

- 互动式引导

- 教学式引导

- 产品引导页




一、红点引导

红点”是非常强大的引导用户前往某个地方和提醒用户处理信息的方式;

“红点”是不利于用户体验的,他的出现会对用户是不和谐的,利用这种不和谐使得用户按照产品的思路来操作,高效简洁的传达信息。

-红点引导的类型

数字红点:

带数字的红点用在出现的频率高且需要提醒用户做出操作的地方,例如新消息的提示,通知,评价的数量等等;

数字红点基于圆做兼容处理,面对个位、十位及十位+情况作出兼容形式,数字极大值需控制在“99+”

通常用于多条待处理信息和多项待查看消息;待处理信息处理后消失,待查看信息则查看后消失;

纯红点:

频率低且需要用户处理或查看的地方,适用于目的性非常强的事件;引导用户前往某一地方查看,

到达最终路径处理或查看后一起消失;

“New”等也是红点的变形,但这类红点一般用于应用更新后首次出现时的提示作用,之后不再出现。


二、气泡引导

用户初次进入页面时,在操作区域旁边弹出一个配有箭头的气泡浮层;此类引导目的指向性强,对用户的干扰小;

注意:通常纯注释类气泡需含“关闭”或“我知道了”按钮,当前页面的主要或特色功能可无关闭按钮;

常用于以下场景:新功能上线、引导使用某功能、告知用户一些隐藏菜单的内容等;




三、蒙层引导

产品的整个界面上方用一个黑色半透明蒙层进行遮罩,蒙层上方对界面进行圈注,旁边配以手势、文字、符号、插画等。这种引导方式可以让用户聚焦了解被圈注的功能点或手势说明,不被页面中其他的元素所干扰;

同时,考虑到引导的复杂程度,蒙层引导也具有单页和步进制两类。

3.1、单页

单页蒙层适用于新功能介绍、功能位置的变动、操作方式说明、特定的交互手势说明、隐藏较深的待触发功能,界面的整体结构等,以下针对部分商用场景对单页蒙层引导做出了示例,供查看;

3.2、多页,步进制

步进制引导由浅到深地引导用户进行操作。常用于界面相对复杂或完整交互流程较长的工具类产品,带领用户快速了解功能的位置,让用户以最短路径体验完整操作流程;

相反,此类引导联系性较强,会导致用户产生烦躁情绪,通常此类引导需搭配“跳过”或“关闭”按钮使用,用户可随时终断引导流程。




四、缺省页及结果页引导

用户在操作某一项任务时,操作路径分别会走向两个正、逆向两条最终节点;

分别为:

1、走向该任务路径的最终节点

2、中途因空数据、网络异常等情况出现路径异常进入缺省页

如果在最终节点告诉用户“您已经完成该任务”或“该任务完成失败”用户往往会不知所措,不知道接下来如何使用,所以这时我们应当引导用户去尝试对应操作或回到该任务的发起处,寻找新的任务路径。

以下针对缺省页和完成页进行示例,具体设计过程中供参考




五、互动式引导

互动式引导是在用户使用过程中出现在产品的交互过程中。

如:录入语音时,在语音器上提示“手指上滑,取消发送”,取消发送后会提示取消结果;

      刷新页面时,在下拉到某一位置时会提示释放刷新,刷新成功后提示刷新结果等




六、教学式引导

教学式引导会结合产品实际使用场景,一步一步地引导你进行操作,鼓励用户参与其中,边学边用。这种方式很容易让用户沉浸其中、快速学习,并且因为有及时的操作反馈,所以用户很容易获得强烈的成就感。

这种引导方式常见于游戏类产品,当前应用不涉及到此类引导方式。


七、产品引导页

引导页出现在用户首次打开APP的时候,基本上由3-5个页面组成。在用户使用产品前先给用户营造好产品的基调和氛围,宣传产品功能和亮点或告知用户最核心的操作方式。

引导页的内容一定要仔细挑选,保证能带给用户新鲜感和吸引他们的注意力,否则对用户来说反而是种干扰,只会直接选择快速划过。



总结

以上为本次针对引导做出的归类和总结;

在整理公司移动端交互规范指南时,突发奇想发篇文章与大家进行交流;如有不足,还请各位看官加以指正;

后续小编将持续更新关于,交互设计指南用户交互章节的相关设计要点。

注:图片资源来源于网络,设计资料内容来自于个人的相关看法及一些相关资料的总结。

相关文章

  • 浅谈用户交互关于“引导”设计的常见类型;

    用户交互_引导 引导,可以让用户在短时间内快速了解产品的特色及使用方式,轻松上手去体验产品的功能,完成自己的目标。...

  • iOS 半透明新手引导 手把手教你做

    一、效果展示 这种类型的新手引导比较常见,用于告诉用户某个按钮的作用,或者提醒用户可以进行某种交互操作。引导样式是...

  • 交互反馈的设计方法(附学习视频地址)

    反馈的用处:用以给用户正确的交互操作引导,帮助用户判断和决策。 交互反馈的模型: 上文--反馈--下文 反馈的类型...

  • 经典交互设计原则图文解析

    所谓的“用户体验”,其实用户可感知的就是前端的交互设计,所以交互设计一定是互联网人的必备技能。 其实关于交互设计的...

  • 交互设计师注定要学习的重要技能

    交互设计作为用户体验设计的一部分,重要性越来越高。很多学校还开设了交互设计的专业来引导学生如何更好的进行交互设计。...

  • 交互设计师注定要学习的重要技能

    交互设计作为用户体验设计的一部分,重要性越来越高。很多学校还开设了交互设计的专业来引导学生如何更好的进行交互设计。...

  • Axure入门案例系列 -- 上下滚动切换

    上下滚动切换是APP中常见的交互之一,通过动态的交互,能够更好的引导用户的视觉。 准备 Axure 8(或Axur...

  • 《交互设计精髓》读书笔记

    1 交互设计是什么 视觉设计是关于界面形态的设计,交互设计是关于产品行为的设计。良好的视觉效果可以让初次体验的用户...

  • 用户思维

    用户动线 用户动线,指用户使用互联网产品的行为轨迹,即用户行为路径设计。常见的用户动线设计方法有视觉引导用户注意力...

  • 认识交互设计

    一、交互设计认知与理解 1、什么是交互设计? a.交互设计的含义:用户-产品-环境 用户:目标用户群体(典型用户)...

网友评论

    本文标题:浅谈用户交互关于“引导”设计的常见类型;

    本文链接:https://www.haomeiwen.com/subject/loebuftx.html