弹出式提醒二三事
Something about Pop-up Reminders
在设计移动应用时，我们总是需要和用户沟通与交流。特别是当用户在操作上下文时为用户提供一些有效的提示，比如告诉用户操作成功、操作错误、提示或者警告等。
在iOS系统中，通常用到的系统级的提醒形式为警示框(Alert)和操作列表(Action Sheet)，而在Aandroid系统中，常用的提醒形式为提示框(Dialog)、消息栏(Snackbar)和弹出消息(Toast)。在开发应用的过程中，为了节省时间和人力成本，我们往往不会单独针对系统去做多套设计，而是尽可能开发同一套界面应用在不同的设备上。这就导致了我们会同时混用两个系统的提醒，好在iOS和Android系统通过技术手段能够一定程度上实现对方系统的提醒样式，这也使得用户在跨系统使用同一应用时的体验更加一致。
当然现在不同的应用会根据自己应用的特点定制一些特殊的提醒样式，这些往往是在以上几种提醒样式的基础上进行的定制，我们先撇开不谈。这里主要谈一下常见的系统级的移动端应用内弹出式提醒的各自特点，以及在不同场景下如何选用合适的弹出式消息。
常见的应用内弹出式提醒
1.提示框
提示框（iOS中称为警示框）用于提示用户作一些决定，或者是完成某个任务时需要的一些其它额外的信息。
图1 iOS提示框
图2 Android提示框
提示框可以是用一种“取消/确定”的简单应答模式，也可以是自定义布局的复杂模式，iOS系统下支持输入文本内容，Android系统支持文本设置或者是文本输入等内容。
图3 iOS输入文本提示框
图4 Android选择项目提示框
提示框通常包含标题(Title)、内容(Content)和操作(Action)，如下图所示。标题主要是用于简单描述地描述当前情景，并告诉用户他们可以做什么。内容主要是描述要作出一个什么样的决定，是一个完整的句子。操作主要是允许用户通过确认一个具体操作来继续下一步活动。一般情况下，使用两个按钮的警告框，这是最为常见和有用的，因为它最便于用户在两个按钮中做选择。
图5 Android提示框的主要组成部分
提示框的提示强度最高，必须要用户做出反馈才消失。一般来说，提示框出现的频率较低，也正因为如此，提示框的出现通常会让用户额外重视。请严格控制你的APP中提示框的个数，并且保证每一个提示框都能提供重要的信息，或者有用的选项。
2.操作列表
操作列表展示了与用户触发的操作直接相关的一系列选项。操作列表可以提供一系列在当前情景下可以完成当前任务的操作，而这样的形式不会永久占用页面的空间。也可以在用户完成一项可能有风险的操作前获得用户的确认，让用户有机会停下来充分考虑当前操作可能导致的危险结果，并为他们提供了一些其它的选项。
图6 iOS默认操作列表样式
操作列表一定是由用户某个操作行为触发，不能自动弹出。操作列表位于页面底部，单手操作时更容易点击。操作列表至少包含两个及以上的选项，但是选项数量也不宜过多。如果你的操作列表中存在过多按钮，用户必须要滚动才能看完所有操作，这样的体验是可能让用户不安。
在操作列表中，不同的颜色可以指代不同的含义。使用红色文字来表示可能存在破坏性的操作。在操作列表的顶部使用文字颜色为红色的按钮，因为越靠近列表顶部的操作越容易引起用户注意。潜在风险的操作离列表底部越远，用户在关注Home键的时候就越不容易误点它。
图7 操作列表中不同的颜色可以指代不同的含义
3.消息栏
消息栏是一种针对操作的轻量级反馈机制，通常出现在手机屏幕下方，以浮 动弹出框的形式存在。它们会在屏幕所有层的最上方，有时会包含浮动操作按钮。
图8 Android默认消息栏样式
它们会在设定时间内或者用户在屏幕其他地方触摸之后自动消失。消息栏可以在屏幕上滑动关闭。当它们出现时，不会阻碍用户在屏幕上的输入，在屏幕上同时只能显示一个提示消息。
通常消息栏会调整高度来适应所有的文本，而文本应该与执行的操作相关联。消息栏中不能包含图标，只能以纯文本的形式存在。
为了保证可用性，消息栏不应该成为通往核心模块的唯一方式。作为被置于顶层的元素，消息栏不应该长时间存在并且相互堆叠。
4.弹出消息
弹出消息主要用于提示系统消息，弹出消息和消息栏非常相似，但是弹出消息并不能操作也不能滑动关闭。弹出消息的思想就是尽可能不引人注意，同时还向用户显示信息，希望他们看到。
图9 iOS弹出消息
图10 Android弹出消息
弹出提醒与其他提醒样式都不同的是它无法获得焦点，无法被点击。弹出消息的显示时间有限，过一定的时间就会自动消失。这就要求提示文字要尽可能的简短，避免弹出提醒自动消失时用户还未读完消息。同时，弹出消息可以自定义出现在页面的位置，也可以显示图片，形式较为丰富。
如何正确选择弹出式提醒
1.根据提醒重要程度来判断
如果提醒强度较弱，只是需要告知用户当前页面内容的变化，不需要用户过度关注甚至中断当前的操作，可以使用弹出提醒或消息栏，因为它们出现几秒钟活在用户点击其他位置时会自动消失。
如果提醒强度适中，主要让用户确认操作或者判断当前页面，则应该使用操作列表，而非提示框。如下图所示，快车的退出登录使用的是提示框，在退出动作没有明显的损失时，采用提示框的话强度过强，容易打断用户的思路，且不容易点击。同时确定按钮为高亮显示，让用户误以为确定是安全操作。右侧的微信采用的则是操作列表，而且退出登录标为红色，具有一定警示性，更便于用户理解。
图11 快的退出登录确认界面
图12 微信退出登录界面
如果提醒强度很强，或者当前的操作会造成明显的损失需要用户知道，则这时最好使用提示框，这样更容易引起用户的注意，避免意外发生。
2.根据内容的丰富程度来判断
根据文字字符长度。如果提示内容为纯文字，以上四种提醒样式都可以采用，但是提醒消息和消息栏能显示的字符数较少，不适宜过长的文案。
根据是否有图片。如果提示内容包含图片内容，则只能使用弹出消息或提示框，再根据信息的重要程度及相应的操作数量来选择。
根据是否有文本输入或文本设置内容。如果提示内容包含输入框或单选框、复选框、列表项等文本设置内容，则应该使用弹出框。若内容过多，建议直接打开新的页面来展示。
最后，根据需要的操作按钮数量。
如果提示不需要用户点击反馈，则应该使用弹出提醒或不包含按钮的消息栏。弹出提醒的停留时间比较短，一定时间后自动消失，消息栏可以停留在页面内，直到用户在屏幕其他地方触摸之后自动消失。
如果提醒只需要一个操作，可以使用消息栏或提示栏。如果提示信息不需要打断用户当前的操作，不影响用户进行其他的操作，则应当使用消息栏。消息栏最多支持1个动作，且不能有取消操作，若操作内容为取消，则只能使用提示栏。如果提示的操作重要到需要打断屏幕上正在进行的操作，那么也应当使用提示框。
如果有两个操作，可以根据页面内容选择提示栏或者操作列表。如果是让用户确认触发的动作，则应该使用操作列表。如果提示的操作非常重要，且需要用户做出判断，则应当使用提示框。
如果按钮有三个或三个以上，可以使用操作列表及提示框，操作列表便于让用户一次看清所有的操作项，更适合多个操作的情景。但是操作列表都是由用户主动触发后才出现的，因此如果消息提醒为主动弹出，则只能使用提示框，详情见下表。
表1 根据需要的操作按钮数量选择弹出式提醒
总之，我们要综合提醒的重要程度及要向用户展示的内容来选择合适的提醒样式，并且严格遵守各提醒的设计规则，同时保证能很好的兼容各设备性能。弹出式提醒会给用户反馈或判断时间，这有利于提升产品体验，但是如果提醒过多或者在不合时宜的时候弹出，则会对用户的操作造成干扰，反而会影响体验。所以我们要合理地控制提醒出现的时机和频率，保障既提醒用户关注页面内容，又不显得过于突兀。
本文出自58用户体验设计部（58UXD），转载时请连同下方内容一起转载。
回复关键字，获取文章：
回复：UXD课堂，获取UXD精彩讲座集锦；
回复：你好设计，获取《你好，设计》杂志文章；
回复：用户招募，参与用户调研，更有好礼相送；
如果您有任何想法，请联系我们，我们期待您宝贵的建议，E-mail:hanxiaoting@58ganji.com或直接留言给我们。
本篇文章来源于微信公众号:58UXD
