Saga

Wx: saga_jeanne
欢迎互联网同好加weixin

贴心的提示弹窗设计

夏影姐姐可以看一下这个

Sim_H:

或许,我们未曾看过它们一眼;


或许,我们曾因为它的出现愤怒不已;


或许,它们来去匆匆不带走一丝留念;


它们,是谁呢?


它们,就是传说中的提示弹窗。


说到提示,大家可能第一反应可能就是toast提示,例如下图所示的搜狗地图收藏成功的提示。toast提示尽量不遮挡页面的主要内容,无需用户手动点击,只需等待1s左右即会自动消失。




其实不然,除了toast之外,提示还有气泡、Dialog(弹框)等样式。不同的时机,提示出现的样式不同,给用户的感受也各不相同。正如开篇所描述的,有些提示大隐隐于无形,以至于你感受不到它的存在;有些提示你看到了就生恨,就想快点让它消失;有些提示很快出现又很快消失,不带走一丝留念。




一、提示存在的意义


提示,顾名思义就是提醒警示的意思。在手机界面设计中,提示存在的意义主要在以下三个方面:状态反馈、警告提醒、操作引导。


1.状态反馈


即便你不是互联网圈子的人,相信对人机交互这个词也不会太陌生。因为使用手机、电脑、平板电脑这些智能设备的过程,实际上就是和机器进行对话的过程。既然是对话,肯定就会有人说有人答。如果用户说了半天,界面没有给出任何反馈,那用户可能就会怀疑自己说的机器是否听到、听懂了。


因此,当用户执行了一个操作行为时,应该明确地给出状态反馈。否则,用户傻傻地等半天不知所以然,不清楚操作是否成功。


2.操作引导


互联网面向的是普罗大众,可能是智商超群的学霸,也可能是跳广场舞的大妈,又或是饱经沧桑的老者。因此,在面对新新事物可能会存在认知上的障碍,这就需要操作的提示引导。


从开发者的角度来说,操作引导还有另外一个好处,那就是让用户快速注意到开发者想重点突出的功能和操作。


3.警告提醒


与第二点类似,不同用户的文化水平和生活经验都各不相同,对界面操作的认知和掌握程度也不一致。所以很容易就会发生误操作的情况,尤其是删除等操作,这时给出一个警告提醒就变得十分有必要了。


当然,也有的时候是开发者们故意在咋呼,例如用户点击退出登录按钮时通常会弹出一个大大的提示框。意思就是,你轻易不要退出,退出之后你就没办法收藏、及时收到消息等等。




二、提示的形式


提示的形式在文章前面部分已经提到了,包括toast、气泡、Dialog等等。


1.Toast提示


Toast常见于系统通知的形式,目的主要是给用户提供状态的反馈。通常1-2s就会自动消失,包括收藏成功、发送成功、分享成功等等,就像前面举的搜狗地图的例子。这里有几点细节需要注意:


a、图标+文字


可以对比下面两个应用的收藏成功toast提示,左边是百度糯米,右边是搜狗地图。有没有发现什么不同?对,没错,搜狗地图收藏成功提示前面有一个对号图标。


我想在相同的情况下,搜狗地图的提示用户获取信息的效率相对来说更高一些,毕竟图标相对于文字来说更易读。其实在我们平常的很多提示中,都可以考虑加上图标,“图标”和“文字”就像是黄金搭档,百看不厌。




b、toast的位置


toast常见于系统的通知,系统的通知通常位于屏幕中间位置。当然,也有不按规矩出牌的,比如百度地图的收藏成功提示,猜测可能的原因是减少用户视线的来回移动,又或者是不想让收藏成功的提示变得过分突出。


对比下面两张图可以发现,百度地图(左)收藏图标位于屏幕的左下角,用户视线移动距离明显要短一些。当然,还有没有其他更好地表现收藏成功的方式呢?答案肯定是有的,这里就不深入探讨下去了。




因而,可以发现其实有的时候并不一定要完全遵守系统的约定,而更应该结合实际情况进行设计。


c、是否需要蒙灰


细心的朋友会发现有一些toast提示会加上蒙灰,而通常toast则是没有蒙灰处理。这是为啥呢?道理很简单,就是要和背景区别开来。




除了蒙灰这个差异点之外,还有另外一个不同点:右侧的toast中带有取消操作的“X”,点击可以取消进程。这里的toast除了告诉用户操作结果之外,实际上还充当了进度提示的作用。


与toast功能类似,可以说是toast提示的表兄弟,虽然长的不一样,但是有本质上的联系。例如下图所示的新浪微博APP刷新后的提示。




这种提示方式显示在顶部,显眼但又不遮挡页面主要内容,不影响阅读,也不影响操作,并且和之前下拉刷新的动作一气呵成。


2.气泡提示


气泡提示这个名字得益于它的样式,长的有些像气泡,带有一个指向具体位置的小尖尖。这里的气泡提示可以理解为新手引导,新上线的功能后,为了便于用户知晓和掌握,可以加上一些气泡提示。下图所示的是百度地图的登录引导气泡提示。




在设计气泡提示时,要提供明确的关闭按钮,可同时支持点击空白处关闭。


提示的文案也很重要,这是因为用户进入此页面的通常会有一个主要目的,通常和气泡提示的功能不相关。因此,作为新功能的引导的文案,要尽量让用户对其产生浓厚兴趣才会去点击,例如文案上要一针见血戳中用户要害。


3.Dialog提示


Dialog提示又叫对话框提示,常见形式是一两句说明文字配以两个操作按钮,例如确认和取消。对话框提示会占领当前界面,打断用户的操作,甚至用蒙灰屏蔽界面内容,并且强求用户进行选择后才能进行下一步操作。


对话框提示的时机,最常见的有退出登录,删除操作。下面左图所示的是百度地图删除公司的操作,右图所示的是搜狗地图退出登录的操作。




这里也有几个细节需要注意的:


a、按钮的颜色和位置


从下图的两个例子就可以看出区别,百度地图将“确定”放在左边,搜地图将“确定”放在右边。其实,放左放右主要看开发者的用心。通常放在左边的按钮是相对弱化的,因为我们大部分用户是右撇子,右侧的按钮相对来说更容易点击。


按钮的颜色也是影响因素之一,用特殊颜色突出可能造成用户损失的操作项,例如上图搜狗地图用红色突出退出登录的“确定”按钮。红色是警示色,“确定”按钮用红色寓意用户要慎重点击。那如何引导点击正确的按钮呢?加粗是一个折中的选择,但是相对来说较弱化,用户轻易难以察觉。


b、倒计时自动消失


我们通常看到的对话框都需要用户点击才能关闭,在一些特殊场合下用户没有时间去操作,这个时候应该默认帮用户做出正确的选择,可以通过倒计时形式提供用户修改的机会。例如导航中的一些提示,用户正在驾车,此时点击屏幕实际上是一种不安全的行为,默认帮助用户进行正确选择岂不是更好。一时半会,难以找到合适的例子,就在百度里找了一张图示意一下,但通常倒计时是在“确定”或“取消”按钮后。




也有人质疑,如果此时用户发现倒计时快要结束,会不会因为时间不够产生紧张情绪,从而导致用户误操作或出事。这种怀疑不无道理,可以在弹出时配以语音播报,提示用户去操作,同时选择一个合适的消失时间。


c、文字言简意赅


对话框提示弹出时,用户之前的操作是被打断的,此时的心情必然不好受。此时如果提示的文字晦涩难懂、啰哩啰嗦,很有可能就会造成用户的反感,久而久之甚至会将应用卸载掉。


因此,在设计对话框提示文案时尽量言简意赅,一目了然。




三、总结


无论是toast提示,还是气泡提示,又或是对话框提示,都是针对不同时机弹出的。在设计时需要考虑具体的使用场景,同时也应该注意这些细节,尽量避免对用户的体验造成伤害。


APP界面设计里除了这些提示之外,还有声音、震动、闪光等物理提示形式。这和今天讨论的话题有些偏差,固不再细述了。




微信搜索“wujizhitan168”,长按、扫描下方二维码关注,阅读更多优质文章





评论
热度 ( 8 )
  1. SagaSim_H 转载了此文字
    夏影姐姐可以看一下这个

© Saga | Powered by LOFTER