美文网首页控件和规范方法产品交互设计
界面反馈提示设计知识点大全——由淘宝的一句提示语想到的

界面反馈提示设计知识点大全——由淘宝的一句提示语想到的

作者: 拾脚印 | 来源:发表于2017-04-16 23:55 被阅读1785次

    本文主要包括以下几个方面的内容

    1、何时给用户反馈提示才显得及时而又不多余?

    2、不同的反馈形式都有哪些特征?

    3、设计时如何选择反馈提示出现的位置?

    4、反馈提示文案设计的目标和原则有哪些?

    淘宝个人中心完成实名认证后的提示

    在淘宝瞎逛,突然看到这句“很高兴认识你,现在您可以享受更多的服务和保障”时,怔在电脑前,有种尸体男爵布鲁克元神出窍的感觉,一个哲学问题,没错,绝对是一个哲学问题突然奔进了我的脑海。

    元神:被称为“你”的时候,我是谁?

    被尊称为“您”的时候,我又是谁?

    在同一语境下,被尊敬程度不一的“我”,是否是同一个“我”?

    难道……我是无数个我奔跑成一个我,变成了一个淘宝账号?

    Body:赶紧元神归位,还有需求文档没写呢。

    元神:好吧……但是我又想到了一个南北差异问题,你想知道我对“您”这个字的看法吗?

    Body:您请说吧(白眼)!

    元神:“您”字宋元时才出现在汉文化里,本是北方小地方方言,随着普通话的推广得以全国使用,但即使是现在,也仍然是北方用得多,南方用得少。在我老家(闽)的方言里,根本没有“您”这个词,遇人都是称呼“你”,当我们按照普通话的习惯,称呼他人“您”的时候,除了尊敬,往往还有距离和隔阂,对方一定是陌生人。若是年轻人之间使用这个词,往往含有戏谑成分,比如怪里怪气的“拜拜了您呐”,对真正的长辈反而不使用这个称呼,直接称呼“你”或者按辈分称呼。称呼“你”的时候也没有不敬的意思,只是一个称谓而已,我们的敬意往往体现在语气和举止上。举一个避让的例子,在路上迎面遇到一位长辈,晚辈往往先停下来,让出宽敞安全的一侧,微笑招呼:“你从哪里来?”“你要到哪里去?”这就是我们对长辈的敬意了。

    Body:赶紧元神归位,还有原型没画呢。

    元神:你就是一具无趣的躯壳,说的话句式都不变一下。作为一个PM,那我聊聊产品总可以吧。

    Body:再瞎扯扯,拿你生祭东皇钟(白眼)!

    元神:(白回去,自顾自继续说)不管是南方还是北方,“您”字都不具备亲民属性,不适合淘宝努力营造的亲亲文化。不如把提示语中的“你”和“您”都换成“亲”,你感受一下换过的句子:很高兴认识亲,现在亲可以享受更多的服务和保障啦。有没有一种更像是淘宝给用户的提示的感觉?

    Body:别的产品用“亲”确实不如淘宝用来得地道,不过这种感受是受网民的教育、知识、经历等背景因素影响的,那些不知道“亲”的流行起源于淘宝的网民就不一定有这种感受了。

    元神:所以啊,淘宝更应该固化、延续这种文化,把它融入自己的品牌软实力中,不要把这一网络文化现象的“发源地”让棒子国给申请认证了去。其实,从这个简单的例子中可以看出,提示文案作为界面反馈设计的一部分,看似简单,其实内有门道。我整理了一些大神的分享,加上自己的项目经验,总结一下整个界面反馈提示功能,耳朵凑过来,与你细说。

    Body:……

    元神:互联网产品存在两套界面反馈机制,一套是通过快速明显的界面变动来进行反馈,例如你点击视频播放按钮,视频立即开始播放;点击微信“发消息”按钮,立即跳转至聊天界面等。正常情况下,这类反馈无需设置任何反馈提示。

    但有些特殊情况导致界面变动很慢或者界面没有响应,这时候如果不给予提示,用户不确定自己的操作是否成功,会让用户感到困惑,这类提示就是我们今天要聊的界面反馈提示。

    Body:你刚才提到响应速度,那么何时给用户界面反馈提示才显得及时而又不多余呢?

    元神:如果网络正常,用户点击视频播放按钮,先提示:视频即将播放,提示被关闭或自动消失后视频才开始播放;填表单时,点击“下一步”,提示“操作成功”,关闭提示才跳转到下一步的操作页面;这样的提示显然是很多余的,中断了用户的正常操作流程,容易引起用户的反感。下面来具体看一下多长时间给出反馈提示才是合适的。

    0.1秒:这是用户感受系统是在即时反应的阈值,系统除了直接显示操作结果外,不需要其它特殊的反馈提示。例如,用户点赞时,桃心icon立即变为红色,而不需要另外提示:点赞成功。

    1秒:通常来说,操作反馈的延迟时间在0.2秒到1.0秒之间仍然不需要特殊的反馈提示,但此时用户已经感觉到自己对数据失去了直接操控。仍以点赞为例,如果不能在1秒内响应,用户就会感到UI控件响应很慢,失去了操作的流畅感,极有可能点击以后再次点击才发现已取消点赞,连续多次点击导致操作失败。不用怀疑才1秒,怎么可能导致连续点击?别忘了信息经过神经传到人的大脑进行处理也是需要时间的,等大脑做出反应,时间早已不止过去1秒。

    1秒到10秒:对于超过1秒的延迟,有必要通过加载动画、反馈提示语等手段进行提示,告知用户没有宕机,程序正在处理相关任务,安心使用,这也是整个界面反馈提示的重点内容。

    10+秒:10秒是用户将注意力保持在当前任务的时间阈值。任何需要超过10秒才能完成的任务,需要有明确的进度指示器(条状进度条、饼状进度条、倒计时等)提醒用户,缓解他们的焦虑。同时为用户指明中断当前操作的方法,让用户可以切换任务,合理安排自己的时间去处理其它事务。如未全屏时,爱奇艺片头广告的倒计时提示,同时可以下滑页面查看其它内容;举个反面的例子,试想一下你在下载一个大型文件的时候没有进度提示,会是一种什么样的体验?会不会怀疑自己点了个假链接而过于着急?

    界面反馈提示时间

    Body:从时间这个维度,大概明白什么时候提示用户了。除了提示时间,界面反馈提示设计还涉及哪些内容?

    元神:界面反馈提示设计主要涉及以下三个方面

    1、选择提示形式

    2、选择提示位置

    3、设计提示文案

    界面反馈提示形式主要包含以下几种

    1、气泡提示(toast提示)属于弱反馈,常以圆角矩形的形式出现,点击提示框以外区域不会消失,一两秒后自动消失,无操作按钮。

    会自动消失的气泡提示

    2、Snackbar提示具有toast的所有特性,小弹窗,会自动消失,但也有几个差异化:1)除了取消按钮外,还有一个“确定”或其它操作按钮;2)点击Snackbar以外的区域,Snackbar会消失;3)一般只出现在屏幕底部;4)Snackbar只出现在Android平台。

    3、对话框弹窗提示一般不会自动消失(也有部分运营活动弹窗在四五秒后自动消失),用户必须点击确定或关闭按钮才会消失,所以会打断用户当前任务,增加用户的焦虑和不安感,影响用户体验,需慎重使用。如果一定要用对话框形式来提示用户,可以尝试在UI上做得更美观有趣,以取悦用户。

    需要用户操作的对话框提示 卡片式对话框提示,常用在营销活动中

    4、声音提示,通过音频或者模拟音效提醒用户,如:来电语音提醒、地图的女明星语音导航、虚拟键盘在按下时的咔咔声、微信“摇一摇”的咔嚓声。恰当使用声音反馈有点睛效果,但过多的使用反而会变成一种打扰,不能将声音作为主要反馈形式,而且要给用户关闭提示音的权利,因为用户所处的环境多样,可能很吵而听不见声音,也可能不适合打开声音。

    5、震动提示是一种比较强烈的触觉反馈,可用来代替或加强声音提示,在手机系统中应用广泛,比如来电、短信、已连接充电,但在手机App中较少用到。

    6、动画作为情感化设计中的一个重要元素,它能给用户提供有意义的反馈,帮助用户直观了解操作的结果,精美有趣的动画,能提升使用时的愉悦感,给用户留下深刻印象,甚至成为产品吸引用户的一个因素。例如:

    微信、QQ的PC端新消息提示,在状态栏连续闪烁,直到用户做出相应的操作。

    iOS系统在删除邮件、照片时,通过拟物化的动画效果,让用户知道操作已经生效,即不要的邮件和照片已经被丢入了垃圾桶。这种形象的动画,帮助用户清晰感受到操作的执行过程,并增添了乐趣。

    在一些持续比较久的操作里,比如下载、删除大量文件,用动态的进度条展示已完成的进度,并提供解释信息,能够减少用户的焦虑。

    软件安装的进度提示

    很多有趣的下拉刷新、上滑加载更多的动画,让等待不再枯燥。

    same的上拉提示——一只脖子可长可短的尖叫鸡

    7、灯光提示被应用在一些特殊环境中,比如在黑暗的地方或者用户的视线不在手机屏幕上时,灯光的反馈提示以它独特的闪烁方式引起用户的注意。如电量不足或充电的时候,红色指示灯常亮,充满电之后变成绿色指示灯。比如有新消息、未接来电的时候,屏幕会自动亮起提示用户。

    8、文本提示作为最常见的一种提示方式,常和图标、字体颜色等一起使用,及时给予用户反馈。

    与图标、文本颜色搭配使用的文本提示

    Body:有这么多种的界面反馈提示,PM在设计的时候应该根据什么选择提示形式呢?

    元神:这主要是由不同的界面反馈形式对用户的打扰程度和提示的使用场景共同决定的。过度的界面反馈会影响用户的操作体验,必须根据提示信息的重要程度来选择提示的强弱程度。试想如果频繁跳出对话框弹窗来打断用户的操作,用户会是怎样的心情?这就需要理解不同的反馈形式对用户打扰强度的差异。反馈的强弱程度,主要看该反馈提示是否会打断用户的当前操作,如果是,则为强反馈提示,如果不是,则属于弱反馈提示。

    下面通过例子进行说明。比如当用户在填写注册表单时,用户每填错(或填对)一项时,系统会在文本框的附近显示实时校验结果,用户根据看到的提示结果,了解填写是否正确,并做出相应操作,整个过程用户始终处于主任务流程之中(填写表单),任务流程没有被中断或替代,所以该反馈提示可以定义为弱反馈提示。弱反馈提示最明显的特点就是单方向向用户传递反馈信息和引导,无需用户对反馈进行回应确认。其主要作用是告诉用户当前操作是否被执行以及执行的结果,是一种友好而又不过分打扰用户操作的提示,这种形式常常被用在用户的操作不会产生严重后果、不涉及利益交易(如金钱、资源等)、可以及时撤销、修改等操作成本小、对人对己都无害的场景。如:收藏、喜欢、点赞、表单填写、加入购物车、添加、关注等。

    而与弱反馈相对应则是强反馈。强反馈一般会以对话框的形式展现,在向用户传递提示信息的同时让用户为自己接下来的操作做出决定和选择,使用户暂时脱离主流程,只能对提示框进行操作,无法同时进行其他操作。比如当用户进行删除本地图片、状态、联系人、退出登录等操作时,系统会提醒用户并需要用户确认该操作是否继续执行。强反馈相对于弱反馈则显得不那么“友好”,但是却能够让用户对当前操作有一个很清晰的认识和判断,从而决定是否继续进行,起到警告的作用,同时也降低了误操作的可能性。强反馈主要用于该操作会产生严重后果(这种后果往往需要用户自己承担)、涉及到自身利益、不能够及时撤销修改操作(一旦操作便无法挽回,永久性生效)等高成本且带有一定风险性的场景,比如说因为失误而触碰到删除按钮,导致资料丢失,或者因为误点击购买按钮购买了不想买的商品。

    常用场景:删除、文件迁移、购买交易、系统调取访问权限、版本升级、营销活动提醒等。

    重要的需要用户确认的提示信息

    Body:原来如此

    元神:在设计界面反馈提示时,除了应根据它的强弱程度和不同场景下提示内容的重要程度进行选择。反馈提示出现的位置也是需要精心考虑的,比如:

    1、状态栏

    虽然可以很好地利用空间,不干扰用户浏览内容区,但位置不是很明显,只能显示重要程度不高或有跨界面显示需求的提示

    显示在状态栏的提示,常被用户忽略

    2、导航栏

    代替导航栏的内容,适合显示临时的较重要的提示类信息,如:网络连接状态展示、拉取数据等

    信息更新与网络连接状态提示 操作结果与信息加载提示

    3、内容区上方

    位于内容区上方、导航栏下方,通常为下拉刷新,是加载新内容的一种快捷方式。默认的提示信息是隐藏的,向下拉界面时才显示对应的提示信息,以引导用户操作。也常用来做操作结果反馈等不影响用户继续浏览其它内容的提示。

    下拉刷新提示 新浪微博的更新提示 京东的无网络提示

    4、屏幕中心

    通常是比较重要的信息提示,需要引起用户的足够重视,常与对话框提示配合使用。

    占据屏幕中心的对话框提示

    5、菜单栏上方

    可根据需要,灵活使用,基本没什么限制,可以是应用的整体信息的提示;也可以是与界面底部内容相关的提示。

    新浪微博的发微博按钮提示 淘宝的购买引导提示

    6、底部(覆盖菜单栏)

    此位置较为明显也不会影响用户浏览内容区,上文提到的snackbar提示常显示在此位置。

    keep的下载提示

    7、操作区域附近

    把反馈提示直接显示在操作区域附近,用户无须过多移动视线,是效率最高的提示,常用在表单填写等场景。

    注册表单填写的反馈提示

    元神:大概就以上这几种常见的提示位置。

    Body:在平时的使用过程中,经常看到不同风格的提示文案设计,或简单直接,或幽默风趣,能简单地说说在设计的时候是如何考虑的吗?

    元神:提示的文案设计应该达到三个目标:教育用户、引导用户、取悦用户。而风格的差异和要达到的目标有很大的关系,为了教育用户、引导用户,文案常常简单直接、一目了然,为了取悦用户,则需幽默风趣、耍贱卖萌。

    1、教育用户是指告知用户这个功能是做什么的,如何做,何时做,做完会如何。教育用户往往发生在用户对产品还不熟悉的探索期,这也是用户由浅入深接触产品的必经之路。

    例:回收站页面提示:回收站里的东西将在60天后被清空

    收藏夹提示:你收藏的商品、店铺将会出现在这里

    淘宝我的小秘页面提示文案设置

    2、引导用户,根据用户的操作引导用户的下一步行动,常常伴有操作按钮,引导文案需要包含以下三点:

    动机:向目标用户展示激励性的语言,例如:“现在就开始!”

    劝说:当用户与你的产品交互时,可以反复展示利益点,说服用户继续下一步操作。

    直接:向用户展示唯一且最优的路径,尽量不让用户做选择题,并提供行动按钮。如果是复杂或者其它易错的操作,应该提供一些模板让用户可以借鉴,做到功能易发现、易学、易操作。

    某论坛评论区的注册登录引导提示

    3、取悦用户,用幽默挑逗性的文案配合图片,在用户操作失败时,安抚他,逗乐他;在用户操作成功时,鼓励他,为他庆祝。

    某茶叶APP评价引导 404错误提示(404后面备注普通用户易于理解的提示文案) 歪理名言的弱网络提示

    元神:除了以上这些内容,界面反馈提示设计还有一些总的原则需要注意。

    1、为用户在各个阶段的操作提供必要、积极、即时的反馈,让用户用最便捷的方式完成选择,但能够及时看到效果的简单操作,尽量省略反馈提示,避免过渡反馈,以免给用户带来不必要的打扰

    2、文字信息应该简洁易懂,避免使用倒装句,最好一两句就能将意思表达清楚,避免使用过于程序化的语言;例:“开启定位,精确到街道级别”,不及格!“使用卫星,找到您的准确位置”,及格!

    3、页面已有详细说明文字的操作,其反馈信息可以简单一些,不必重复页面已有文字。比如昵称设置,界面上已有格式要求,反馈错误时只需提示“昵称不符合要求”即可。

    4、提示语设计应该和产品的格调一致,如文章开头提到的淘宝的提示语设计。

    Body:……

    元神:……

    Body:说完了?

    元神:还有,但我口渴,不想说了。

    Body:你不想说了,那就留给读者在评论区补充、纠正吧。

    元神:你总算和我意见一致了一回。

    相关文章

      网友评论

      • Zero_杀:感谢分享!
      • 檐下风铃舞动:不是还有一种卡片式提示框吗,像携程旅游老是弹出来的那种
        檐下风铃舞动:@拾脚印 受教了
        拾脚印:@吖杰说设计 其实,每个产品因为设计风格的差异,各种设计形式并不是千篇一律的,会有很多变种。光是起泡提示,就可以找出很多种来。
        拾脚印:@吖杰说设计 不知道你说的是不是和营销活动提示类似的那种提示,在屏幕中间弹出一个小矩形弹窗。如果是,我把它归到对话框提示了,因为它除了会有链接,一般还有确定或关闭按钮,需要用户手动操作。
      • 相逢何必曾相识_f4f0:非常实用,且讲得不枯燥充满趣味性,就是内容可能多了点,要花好长时间才能看完😃
        拾脚印:@相逢何必曾相识_f4f0 你能把它看完,我也是挺佩服的。这种长文,我一般看一半,收藏,然后就忘了:sweat_smile:
      • 拾脚印:这篇文章的大部分观点来自网络,写它更多的是集结分享,方便自己总结查阅

      本文标题:界面反馈提示设计知识点大全——由淘宝的一句提示语想到的

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