技术分享| UI设计的9种用户引导方法

2018-06-21 16:14:23

用户引导,在生活中随处可见。医院的科室指向标、交通警察的指挥手势、男厕内为了达到“精准射击”的小苍蝇……然而,当我们看到不知是该“推”还是“拉”的门把手、看不出状态的开关、摸不清头绪的指示标,便会产生迷惑甚至焦躁。引导是通过某种手段或方法,干预目标对象的决策和发展,促使其更快地接近目标。

工作中,我们经常纠结如何告知用户功能新增和变更、如何让用户按照我们的预期顺利使用产品。为什么说纠结,因为既然是引导,都是附加在原有产品功能之上的,往往不是用户心理预期之内出现的东西。正因如此,我们更需要谨慎思考,选择最恰当的方式实现我们的既定目标。接下来,西安中软卓越UI设计老师给大家分享9种用户引导方法,希望对大家有所帮助。

技术分享| UI设计的9种用户引导方法.jpg

1、闪屏引导页

技术分享| UI设计的9种用户引导方法1.jpg

闪屏引导页主要目的是向用户展示产品新功能的操作方法

2、新手引导(页面遮罩+提示)

技术分享| UI设计的9种用户引导方法2.jpg

顾名思义就是教新用户如何使用产品,用户打开应用是为了达到某个目的,而不是为了花时间学习怎样使用,新手引导的作用就是短时间内让用户快速上手产品或者是新增功能,目的是节约用户的时间,减少犯错率。但是我现在发现这类的引导有一个现象就是整页一次性展示出全部提示或是文字,每次看到这种引导页的感觉就是害怕,这么多内容竟然要我一个个都记住,然而短期记忆又容易遗忘,越想记住可能就会忘记的越快,会给我造成负担,相信你们也会有同样的感受。(下图就是一些反例)所以在设计这类引导的时候建议一定要突出重点功能,文字要精简;或者是能够采用分步引导,寻找恰当的时机,比如正好使用到某个功能,再出现引导,这样会更好一点。分步引导切忌过多,不然一次次的点击只会让用户感到厌烦。

3、操作引导

技术分享| UI设计的9种用户引导方法3.jpg

这类引导旨在希望用户完成产品希望你完成的某种指定的操作,比如完善个人资料、身份认证、充值会员、点击收藏/关注……这类操作都不是强制用户完成,但是可能设计的会让人很有欲望的去完成操作。有一些app会采用FAB按钮,放置一些核心功能,又或者是让用户产生粘性的功能,比如氧气的签到功能,方便用户去使用;还有一些是在页面上出现动图进行引导的情况,一般常见于电商或者视频类app中,这种会更直观,比如下图中支付宝-口碑页面的签到icon一直在闪烁,蘑菇街首页的动图一直也在闪……这类例子很多,特点都是特别显眼,很有想去一探究竟的冲动。

4、功能性引导

技术分享| UI设计的9种用户引导方法4.jpg

这类引导是指比较隐蔽性的功能层面,不会有确切的指引,而是触及到某个点而出现的引导类型,例如:在支付宝聊天窗口输入数字,会出现给对方转账的引导;在应用中进行截图会引导分享至微信/微博等;或是截图后的一段时间内,在微信聊天页面打开右下角加号按钮会自动出现刚出现的截图,方便发送……

5、对话式引导

a技术分享| UI设计的9种用户引导方法5.jpg

这类引导方式比较常见,一般是悬浮在页面上,几秒钟后就会自动消失。颜色选取上最好要跟页面颜色区分开来,比如用略带透明度的红色、黑色等,也要有比较明确的箭头指示,它可以出现在页面任意位置,也可以带有上下浮动效果,让人很有点击对象查看的欲望,点击页面其他位置就会自动消失,所以对话式引导目的性比较明确。

6、弹框引导

技术分享| UI设计的9种用户引导方法6.jpg

这类引导会打断用户使用产品,对用户的打扰最大,当然也会让用户最重视。组合方式:黑色遮罩(60%-80%#000000+文字/插图+触发button+关闭button)。该类引导需要用户做出选择后才会被关闭,有纯文字说明类,例如退出登录、错误提示弹框等;也有伴有图片类,比如首页领券等,还可能伴有动效,就会显得不那么单调,有趣味性,容易接受。

7、局部引导

技术分享| UI设计的9种用户引导方法7.jpg

局部引导一般会在页面顶部出现,也会有嵌入页面某一地方的情况,通常会用作警示作用,比如消息提醒未打开,网络异常等等,通常的组合是:文字+伴有红色、黄色等警示类色块(+关闭button),足以引起用户的重视。

8、全局引导

技术分享| UI设计的9种用户引导方法8.jpg

全局引导就比较好理解了,就是整个页面都是引导提示,属于主动型引导。最常见的就是为空页面:文字提示+插图占位符+跳转button,点击button会进入某个页面,要避免出现下面第三个整页空白的情况,不然用户会觉得卡住了或是出现了bug

9、其他引导

技术分享| UI设计的9种用户引导方法9.jpg

小红点/数字+红点:常见的就是未读消息,相信很多强迫症患者都会有把小红点点掉的冲动,我就是重度强迫症患者,每次看见必须点掉,这就是利用了用户的这一心理作用,来达到查看产品类似促销等信息的目的;

文字提醒:经常看见应用里的某个模块有促销活动就会出现这类引导,一般会伴有红点使用,相信大家已经见怪不怪了;

toast引导:样式是toast类型,但是用作引导,例如下拉刷新后,出现提示刷新数据,点击进行查看内容。

引导的使用要根据场景进行合理选择,合理、有趣味的引导设计,会给产品加分,增强用户探索新功能的欲望,当然,初衷都是为了方便用户的使用,合适的时机出现合适的引导,切忌乱用,否则只会适得其反。

作为一名开发人员,技术是立身的根本,是拴马桩的尊严;对于一个做教育机构,口碑如水是生命之源,是长盛不衰的根本。13年历经风雨依然昂首前行,未来的西安中软卓越同样会恪守初心,以技术立身,培养IT精英,捍卫教育本质。

本文由中软卓越(西安)汇集整理,转载请注明作者及出处。

如需学习java、UI设计、软件测试、Python、大数据、嵌入式、Linxu云计算,请点击咨询,加入我们让你的未来不再迷茫。

关于我们

“简称中软卓越”,是中软国际教育科技股份有限公司是大型IT人才培训机构,是人才战略的核心组成部分之一,承担集团发展过程中人才储备和培养的任务;专注IT培训37年,国内高端IT培训品牌,教育部指定官方IT人才培训机构。专注java培训、UI设计培训、软件测试培训、Python培训、大数据培训、嵌入式培训、Linxu云计算培训等培训课程。217家合作院校,880家合作企业,真实项目实战,素质拓展,职业规划。零首付,100%保障就业,先就业,后付款。

最牛逼的毕业学员入职名企享受高薪就业。880家合作企业,年培育学员人数逾6000人,毕业学员就职于中软国际、百度、腾讯、阿里巴巴、IBM、华为科技、中兴通讯、软通动力等知名企业。

还有什么疑问?我们全面为你解答!为您提供一对一专人服务,请点击下方咨询

  • 卓越资讯
  • 猜你想看
  • 常见问题

    Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。[详细课程]

    软件开发是根据用户要求建造出软件系统或者系统中的软件部分的过程;软件开发是一项包括需求捕捉、需求分析、设计、实现和测试的系统工程。[详细课程]

    软件测试是在规定的条件下对程序进行操作,以发现程序错误,衡量软件质量,并对其是否能满足设计要求进行评估的过程。[详细课程]

    Python是一种面向对象的解释型计算机程序设计语言,语法简洁清晰,特色之一是强制用空白符作为语句缩进,它常被昵称为胶水语言,能够把用其他语言制作的各种模块。[详细课程]

    UI设计分为实体UI和虚拟UI,互联网说的UI设计是虚拟UI,一般是指对软件的人机交互、操作逻辑、界面美观的整体设计。[详细课程]

    大数据,又称巨量资料,指的是所涉及的数据资料量规模巨大到无法通过人脑甚至主流软件工具,在合理时间内达到撷取、管理、处理、并整理成为帮助企业经营决策更积极目的的资讯。[详细课程]

    云计算是一种按使用量付费的模式,这种模式提供可用的、便捷的、按需的网络访问, 进入可配置的计算资源共享池(资源包括网络,服务器,存储,应用软件,服务),这些资源能够被快速提供,只需投入很少的管理工作,或与服务供应商进行很少的交互。[详细课程]

    西安市长安北路8号高速大厦三楼

    电话:029-61876930