App页面提示样式小总结

最近做交互总结，又碰到了页面弹窗提示的问题，于是便总结了下。

我按弹窗提示的样式分为了以下几种来进行说明。每种样式的提示强度不同，对用户在使用app时的打扰与影响也不同。这些提示并不是说哪种好哪种不好，按照自己的规范选择合理的就好。

以下总结，前三个提示的名称是大家习以为常的，但后面几个的命名是以我个人的经验来命的，不一定很合理，但至少可以说明点问题。

Action sheet

Action sheet 即为操作列表，通常用于在当前页面给用户提供快捷的选择按钮，用在功能较多，对次要功能进行收纳的界面中。

Action sheet的IOS与Android的展示样式有所不同。IOS主要是以我们所熟知的半覆盖式浮层，而Android以弹框菜单为主。（如下图）

上图是app中最常见的样式了，当然也会遇到一些其它的样式，如在adroid中有时也会用到半覆盖式浮层，大多是用于分享到第三方的页面。

还有一种情况是选择菜单与当前选项关系比较紧密，选择菜单直接原地展开，当前选项为选择菜单中的一项。如下图左边是ios的popper样式，右边是android的卡片菜单。但在实际应用当中，两个平台并没有很明显的区分，一般就通用成左图的样式了。但手机屏幕比较小，用这咱展示样式会很界面显得比较碎，所以在app的实际应用中，这种样式很少用到。目前大家熟知的app中，微博首页的分组用了这种方式切换，还有qq的v6.3.1版本的空间也带入了这种设计。

Alert 即为弹框提示，也叫警示框，用于向用户提供警示，用户必须进行操作后才能进行下一步操作。主要用于系统向用户提示操作后涉及隐私、及其他非常重要的信息或后果不可逆的操作流程中。必须给出明确的操作按钮，主要以以下几种样式展现。为了引导用户操作，有时会强化某按钮，弱化另一按钮。

alert打断用户的操作，因此应减少其在app中的出现次数，同时也避免出现过多导致用户对alert不重视。

还有一种alert提醒，在使用app时经常遇到的，同时也是很另人生烦的，那就是要求对app评价的alert。这种提醒，往往会打断用户的操作，如果出现时机不恰当，会让人产生很厌烦的感觉。这里提到它，是因为它下方的操作按钮，一般有三个，所以上下排列，这咱排列相较于左右排列，按钮间的间距比较小，所以也加大了操作失误的机率。所以一般情况下慎用这种排布方式。

Toast

Toast即为浮层提示，快速地为用户显示少量的信息。

Toast浮动显示信息给用户，它永远不会获得焦点，不影响用户的输入等操作，主要用于一些帮助/提示。常用的有两种样式，纯文字的和带图的。

这种提示样式是最常见的，能够告诉用户目前的状况，但又不会对用户造成太多的干扰，一带而过。同时这种提示也是比较容易被忽略掉的，所以对于一些比较重要的提示最好不要用这种样式。

页面文字提示

这也是一种比较常见的提示，主要用于对页面内容或是某个输入框或按钮进行说明的文字。一般以淡而小的文字存在于页面上，对用户的操作影响比较小，提示性比较弱，仅仅是对当前位置的说明，不会影响页面的视觉焦点。

如下图是支付宝蚂蚁花呗的首页，红框中的文字是对前面描述的进一步说明，不影响视觉焦点，看下月应还金额时才会看到它们。在输入界面这种提示比较多见，如注册界面密码规则的提示语等。

页面顶部的提示

位于页面顶部的提示，有三种样式，这三种样式表达的轻重性不一，所用场景不同，对用户的打扰程度也不同，是其它提示样式的一种变体。

第一种，一直存在于页面顶部，用于重要的提示或是没网这种严重影响操作的提示。如下图，没有网络时，qq顶部的提示。

第二种，操作出错或是页面内容出错是从页面顶部滑下，之后马上消失，是toast的一种变形。这样的提示比普通toast提示更显眼些，更能引人注意到。

第三种，位于电池条的位置，用于一些上传的地方，上传需要时间，又要保证APP的流畅性，削弱对用户的干扰，甚至把干扰减少至零。如发布动态时，后台上传，在最顶部提示，这种提示更弱，很容易被忽略掉。这种提示也越来越少见了，没找到图片，请允许我ps乱入一张。

页面上的新功能提示

一般用于第一次出现的页面，提示一些重要或是常用的功能，或是页面功能搬家的提示。这种提示一般常见的一有两种形式，突出重点的强弱性不同。

如下图左边的页面，功能提示比较强，必须点击掉提示才可进入下一步操作。而右边的形式就弱了好多，可看可不看，不影响页面的操作。当然这样的功能说明的提示还可以从二者延伸出一些其它样式，但终归也就是必须看和无须看两种吧。

特殊提示

通过页面的变化进行的提示，不影响页面的整体布局，同时在用户操作的地方提示，不容易被忽略。

支付宝的手势密码错误的提示是个很好的例子，通过头像的后退缩小，错误提示文字的出现，很好的提示了用户操作的错误。最常见到这种提示的地方还有登录注册页面，输入错误时，页面出现细小而精致的变化，同时很好的提醒用户。

大体上最常见的提示样式都在这了吧，如有遗漏或是有更好的提示，后续更新。同时也欢迎小伙伴们砸砖。