UI界面设计 ·

关于app中的反馈提示设计

我们使用和设计App的时候一定会有一个避不开的“坑”,就是提示样式的规范。之所以称之为“坑”,是因为它的样式很多,作用繁复。运用时,要注意如果样式不统一很容易造成用户的误解;如果在APP中用的太多,也会造成用户的反感。除此之外,我们在制定规范的时候,要注意提示的强度,以及用户在使用app时,是否会被提示信息打断和影响,致使用户体验下降等。所以,我们在设计的时候一定要定好规范,并留意频次和强度。今天,我们就来818这个APP设计中用到的小心机。

1、Toast - 提示

说到会自动消失的提示,大家一定会想到最常见的Toast提示。

Toast-多为浮动显示简短的提示信息给用户,它多出现在屏幕中间,会自动消失,以做到尽量不影响用户的输入等操作,主要用于一些帮助和警示。

在我们的交互应用中,这种提示样式是最常见的,多为纯文字的和带提示意义图的提示。能够在快速让用户知道目前状况的同时(比如,交易成功或失败等等),也不对用户造成太多的干扰,一带而过。同时这种提示也是比较容易被忽略掉的,所以对于一些比较重要的提示/警示最好不要用这种样式。

优点:不打断用户操作

缺点:容易被忽略

常用于操作反馈、错误提示、成功提示等等。

 

2、Snackbar - 顶部提示

如图,左一,操作出错或者页面数据获取等场景下会出现,针对整个页面发生的错误进行提示或其他信息提示,显示一段时间后会自动消失,这个形式个之前提到的toast有点像,但是更大更显眼。

优点:不打断用户操作

缺点:容易被忽略

常用于信息流、消息提示、和信息获取页面发生错误的提示。比如微博刷新信息时的新消息提示,服务器获取信息失败等。

如图,左二,需要用户交互操作才会关闭,或完成选项才会关闭。这种类型对用户操作的影响比较大,要注意不能频繁使用于界面中,只能用于权重较高必要性强的提示。

优点:警示效果优

缺点:占用界面的位置

常用于断网、异地登录等这类对用户账号安全及操作有极大影响的时候。

如图,右一,一般这种提示都可以进行下一步操作,这种操作很难说好坏,它们虽然占据了一部分界面空间,但却能友好的存在。不但起到了减少用户操作步骤的作用,还有很好的警示作用等。

比如微信的多方登录提示,一方面起到了多方登录的警示作用如果不是自己登录的可以强制对方下线,另一方面它确需要长时间的占据界面的固定位置,所以使用需谨慎。

又比如微信的音频播放提示,他让我们可以一边听公众号的音频一边聊天,如果没有这个功能我们可能听难听完一个20分钟的音频,因为你无法保证这20分钟内没有别人呼唤你。

优点:增加了功能项、起到警示作用

缺点:占用界面的位置

常用于警示用户、方便用户同时使用多个功能和待操作步骤提示等。

在使用App的时候有没有被一些信息框弹层打断过操作呢?尤其是在打游戏的时候,大多情况下大家都会觉得很反感。所以既然我们自己的体验不好,那么我们在做界面设计的时候,就要慎用会打断用户操作的提示样式。

3、信息框

信息框,即信息确认框。多在所处界面上方增加蒙层,主要以以弹框加按钮的形式出现。主要用于向用户询问确认信息,会非常粗鲁的打断用户操作,且用户必须进行选择才做后才能将其关闭继续使用或浏览App。

样式一

如图,左一,信息框加一个按钮的形式,多用于向用户提出操作成功或未成功提示等。也会用于提示或征求用户修改应用外的系统设置,以获取用户信息。

样式二

如图,右一,信息框加两个按钮的形式,多用于向用户征求隐私、及其他非常重要的信息的获取许可,也会用在后果不可逆的操作流程中,比如删除不可恢复资料等等。我们在做这类弹框提示设计的时候,必须区分出用户可以操作的选项。有时候我们可以用一些小心机去引导用户操作,比如会突出我们希望用户选择的按钮,弱化另一按钮。

优点:直接将提示信息/警告信息推送给用户

缺点:非常粗鲁的打断用户操作,用户体验不好

常用于要求对app评价、或初次使用App是设置隐私设置、流量或wifi选择及定位信息的时候,以及确认关闭等。

信息框的提示样式会严重的影响用户的操作,所以我们很少会在交互中用到他,因为过多的出现不但会让用户厌烦,也会降低这类提示的警示权重。

4、提示气泡

可操作提示气泡,是由一个圆角矩形、三角箭头和关闭按钮组成的弹出窗口,悬于主要操作页面上方,箭头指向的地方通常是该气泡要提示的位置。

用于提示相关操作或新功能提示,用户根据引导操作后,可点击关闭按钮之后消失。

如图,我们在第一次使用App的时候,或是App新增功能更改界面布局等,经常会见到这样的气泡提示。这样的提示气泡需要用户点击关闭时才会消失,在页面中可能并不明显但指向性很强,并且不会打断或影响用户的操作。

优点:提示效果优

缺点:没有关闭前会挡住界面部分信息

常用于用户操作提示和主功能、主流程未曾小改版时的局部提示。

5、误区

1.样式不统一

在我们做设计或者改版的时候,一定要制定好整体的设计样式,然后按照提示信息相对的设计规范去进行设计,尤其是对提示种类的规范。

如图,提交成功可以有多种表现方式,但是我们做规范的时候应该有所归类,相同类别或者相同重要等级下的提交信息提示应该保持统一样式。

另外比如实时更新提示一般显示几秒就会自动消失,所以也不会用弹框去表示。

2.打断用户的频率过高

在我们设计流程的过程中,除了必要的系统报错及用户反馈,切记不要让弹框提示高频出现,经常打断用户操作会让用户分分钟想卸载你的app。

如图,右一,歌曲添加成功需要点击“知道了”按钮,才能关闭对话框继续听歌操作。这样做会打断了用户的听歌选歌操作,试想如果用户同时添加多首歌曲那这个体验会多难受?所以其实只要一个Toast提示就可以达到效果。

如图,右二,我们在体验App时,一定有被邀请评价打断过。设想一次2次还好,但如果频次过高或是在游戏PK时被打断,用户一定分分钟想要卸载你的应用。

总结

提示信息的样式主要分为,会自动消失的样式和必须由用户操作关闭,即会打断用户操作的提示样式。

自动会消失的样式,主要有Toast提示和Snackbar提示。Toast提示常用于操作反馈、错误提示、成功提示;Snackbar提示常用于信息流、用户状态、和待操作步骤提示等。适用于指向性很强的细节信息和新增功能的提示等。

必须由用户操作关闭的样式,有信息框和提示气泡。信息框常用于要求对app评价、或初次使用App是设置隐私设置、流量或wifi选择及定位信息的时候,以及确认关闭;提示气泡常用于用户操作提示和主功能、主流程未曾小改版时的局部提示。

提示信息的样式灵活多变,但无论那种提示都不宜出现太多太频繁,我们要尽量让用户自然生长。

参与评论