赞助商
立即赞助

写给UI新手的APP结构指南:用户引导和提示

UI设计3年前 (2021)更新 流光
3K 0 0

这主题是用户引导和提示,它们打扰到用户,也有很的共通点,就暂且归到一集中聊一下。

先看下体内容:

写给UI新手的APP结构指南:用户引导和提示

△ 以下图片来于网络和应用截图,仅作为学习交流使用

我们先来说说户引导,户引导在 app 的使过程中是十分见的,是必可的,旨在降低户的习成本,快速了解和上手产或者是增功,避免户使过程中的迷茫,减犯错率,是升产整体愉快体验的必要手。

一、用户引导的种类

1. 闪屏引导页

闪屏引导页主要目是用户展示品新功能操作法,这个部分上篇文章里有过描述,这里不多赘述了。

写给UI新手的APP结构指南:用户引导和提示

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

顾名思义就是教新用户何使用产品,用户打开应用是为达到某个目的,而不是为花时间学习怎样使用,新手引导的用就是短时间内让用户快速上手产品或者是新增功能,目的是节约用户的时间,减少犯错率。但是我现在现类的引导有一个现象就是整页一次展示出部提示或是文字,每次看到种引导页的感就是害怕,么内容竟要我一个个住,而短期忆又容易遗忘,越想住能就忘的越快,给我造成负担,相信你们也有同样的感受。(下图就是一反例)所以在设计类引导的时建议一定要突出重点功能,文字要精简;或者是能够采用分步引导,寻找恰当的时机,比正使用到某个功能,出现引导,样更一点。分步引导切忌,不一次次的点击只让用户感到厌烦。

写给UI新手的APP结构指南:用户引导和提示

3. 操作引导

这类引导旨希望用户完产品希望完的某种指的操作,比如完善人资料、身份认证、充会员、点击收藏/关注……这类操作都不强制用户完,但可能设的会让人很欲望的去完操作。一些 app 会采用 FAB 按钮,置一些核功能,又或者让用户产粘性的功能,比如氧气的签到功能,方便用户去使用;还一些页面出动图行引导的况,一般常见于电商或者视频类app中,这种会直观,比如下图中支付宝 – 口碑页面的签到icon一直闪烁,蘑菇街首页的动图一直也闪……这类例子很多,特点都特别显眼,很去一探究竟的冲动。

写给UI新手的APP结构指南:用户引导和提示

4. 功能性引导

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

写给UI新手的APP结构指南:用户引导和提示

5. 对话式引导

这类引导方式较见,一般是悬浮在页面上,几秒钟后就会自消失。颜色取上最好要跟页面颜色区分开来,如略带透明的红色、黑色等,要有较明确的箭头指示,它可现在页面任意位置,可带有上浮效果,人很有点击对象查看的欲望,点击页面他位置就会自消失,对话式引导目的性较明确。

写给UI新手的APP结构指南:用户引导和提示

6. 弹框引导

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

写给UI新手的APP结构指南:用户引导和提示

7. 局部引导

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

写给UI新手的APP结构指南:用户引导和提示

8. 全局引导

全局引导就比较好理解了,就整页面都引导提示,属于主动型引导。常见的就空页面:文字提示+插图占符+跳转button,点击button 会入某页面,避免出下面第三整页空白的况,不然用户会觉得卡住了或出了 bug。

写给UI新手的APP结构指南:用户引导和提示

9. 其引导

  • 小红/数+红:常见是未读消息,相信很多强迫症患者都会有把小红掉冲动,我是度强迫症患者,看见必须掉,这是利用了用户这心理作用,来到查看品类似促销等信息目;
  • 字醒:经看见应里的某个模有促销就会现这类引导,一般会伴有红点使,相信大已经见怪怪了;
  • toast 引导:式是 toast 类型,但是用作引导,例如下拉刷新后,出现提示刷新数据,点击进行查内容。

写给UI新手的APP结构指南:用户引导和提示

小结

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

二、提示

每一款应用离不开提示,提示的用就是告用户当前操的结果,及时的反馈,什么时用什么提示是有区别的,也是有讲究的,要尽能的减少对用户的打扰。

1. 弹框(模态弹框)

类提示和上面说的弹框引导出一辙,对用户的打扰大,也最受重视,属强互。弹框包含黑遮罩,主页面不以进行操,要通某种操退出,一般用告促销活动,比红包、优券,又或是版升级、对应用进行评价、允许定位、打开消息通等。弹框以分为告弹框、操弹框、底部弹框/功能弹框(换头像、选期、分享至双微等)、选择弹框、信息录弹框(输密码)……弹框的设计要有能吊用户的积极,比生动有趣的文案或是插画,即使是讨厌的弹框也以让用户容易接受。另外弹框要避免叠加的情况,就是在弹框的基础上次弹出弹框。

写给UI新手的APP结构指南:用户引导和提示

2. 浮层提示(模态弹框)

比较常见的一种提示类型,比如微信页面右角点击添加 button,或按复制。

写给UI新手的APP结构指南:用户引导和提示

3. toast 提示(非模弹框)

toast 是一种比较常见的提示方式,最初是安卓系统控件,现在 iOS 也广泛运用,比较轻量化,属于弱交互,对用户扰较轻,出现的间较短,一3秒以内,不需要用户进行操作,如果文字过长,用户也不会记住,比较容易忽视,所以文字要简短、炼。一比较常见的就是成功提示、失败提示、警告、加载中……有的出现在页面中间,也有的出现在页面顶部或者底部;还有一类 toast 是需要动关闭的,可能是因为提示比较重要,和引导的作用类似,但是不建议这计。

写给UI新手的APP结构指南:用户引导和提示

4. Snakbar(非模态弹框)

它是卓的系统控件,和 toast 类似,区别就是它可进行操作,较见,示字(+button),介于 toast 和弹框之间,点击后消失或是几秒后自消失,一般现在页面。

写给UI新手的APP结构指南:用户引导和提示

注作者的公众微信号:「Eason张UED」

写给UI新手的APP结构指南:用户引导和提示

图片素材作者:totushi .

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

通过APP来构建面向用户的解决方案,是目前企业常见的思路。相比于移动端网站,APP有着功能更加强大的框架和针对性更强的特点...
App设计
UI界面是否设计得足够清晰,各种元素之间是否协调、平衡,用户能否轻松感知到屏幕上的信息,交互是否顺畅舒适,这些因素决定...
Tubik Studio
进入2018年之后,再来审视今年的整个 LOGO 设计趋势,会比之前的预测要清晰了不少。通过对过去几个月的新 LOGO 设计的观察,...
ogo设计
上一篇《用我搭建的 PST 框架,帮你系统掌握产品的信息引导设计方法》讲了信息引导的策略层:可切入的场景和机制。这篇就总结...
交互设计
最近在做迭代改版设计,在这期间遇到了很多问题,其中一个就是我在上篇文章《「瞬间之美」读书笔记:Web界面设计如何让用户心...
一致性原则
不知大家有没有和我一样的疑惑:日常产品的信息引导到底该如何设计? 可能有人第一时间会想到浮层、动效、弹窗等等,但这些...
产品设计
一、字体设计的价值 文字是图像记忆的一种衍生方式,人们为了简明地表达事情、物品、人物等情景画面,而演变出的简明的记载方...
产品设计规范
平时的工作中,经常会遇到一些不舒服但是又说不上理由的交互问题。本文作者从争论的点出发,有理有据的说明这些问题,并给出...
App设计