时间: 2021-07-30 10:25:55 人气: 35 评论: 0
最近做交互总结，又碰到了页面弹窗提示的问题，于是便总结了下。我按弹窗提示的样式分为了以下几种来进行说明。每种样式的提示强度不同，对用户在使用app时的打扰与影响也不同。这些提示并不是说哪种好哪种不好，按照自己的规范选择合理的就好。
以下总结，前三个提示的名称是大家习以为常的，但后面几个的命名是以我个人的经验来命的，不一定很合理，但至少可以说明点问题。
Action sheet 即为操作列表，通常用于在当前页面给用户提供快捷的选择按钮，用在功能较多，对次要功能进行收纳的界面中。
Action sheet的IOS与Android的展示样式有所不同。IOS主要是以我们所熟知的半覆盖式浮层，而Android以弹框菜单为主。如下图：
iOS的半覆盖式浮层&android的弹框菜单
上图是app中最常见的样式了，当然也**遇到一些其它的样式，如在adroid中有时也**用到半覆盖式浮层，大多是用于分享到第三方的页面。
还有一种情况是选择菜单与当前选项关系比较紧密，选择菜单直接原地展开，当前选项为选择菜单中的一项。如下图左边是ios的popper样式，右边是android的卡**菜单。但在实际应用当中，两个平台并没有很明显的区分，一般就通用成左图的样式了。但手机屏幕比较小，用这咱展示样式**很界面显得比较碎，所以在app的实际应用中，这种样式很少用到。目前大家熟知的app中，微博首页的分组用了这种方式切换，还有qq的v6.3.1版本的空间也带入了这种设计。
iOS的popper样式 &android的卡**菜单
Alert 即为弹框提示，也叫警示框，用于向用户提供警示，用户必须进行操作后才能进行下一步操作。主要用于系统向用户提示操作后涉及隐私、及其他非常重要的信息或后果不可逆的操作流程中。必须给出明确的操作按钮，主要以以下几种样式展现。为了引导用户操作，有时**强化某按钮，弱化另一按钮。
常见的几种alert样式
alert打断用户的操作，因此应减少其在app中的出现次数，同时也避免出现过多导致用户对alert不重视。
还有一种alert提醒，在使用app时经常遇到的，同时也是很另人生烦的，那就是要求对app评价的alert。这种提醒，往往**打断用户的操作，如果出现时机不恰当，**让人产生很厌烦的感觉。这里提到它，是因为它下方的操作按钮，一般有三个，所以上下排列，这咱排列相较于左右排列，按钮间的间距比较小，所以也加大了操作失误的机率。所以一般情况下慎用这种排布方式。
app引导好评
Toast即为浮层提示，快速地为用户显示少量的信息。
Toast浮动显示信息给用户，它永远不**获得焦点，不影响用户的输入等操作，主要用于一些帮助/提示。常用的有两种样式，纯文字的和带图的。
常见的两种toast样式
这种提示样式是最常见的，能够告诉用户目前的状况，但又不**对用户造成太多的干扰，一带而过。同时这种提示也是比较容易被忽略掉的，所以对于一些比较重要的提示最好不要用这种样式。
这也是一种比较常见的提示，主要用于对页面内容或是某个输入框或按钮进行说明的文字。一般以淡而小的文字存在于页面上，对用户的操作影响比较小，提示性比较弱，仅仅是对当前位置的说明，不**影响页面的视觉焦点。
如下图是支付宝蚂蚁花呗的首页，红框中的文字是对前面描述的进一步说明，不影响视觉焦点，看下月应还金额时才**看到它们。在输入界面这种提示比较多见，如注册界面密码规则的提示语等。
支付宝蚂蚁花呗
位于页面顶部的提示，有三种样式，这三种样式表达的轻重性不一，所用场景不同，对用户的打扰程度也不同，是其它提示样式的一种变体。
第一种：一直存在于页面顶部，用于重要的提示或是没网这种严重影响操作的提示。
如下图，没有网络时，qq顶部的提示。
第二种：操作出错或是页面内容出错是从页面顶部滑下，之后马上消失，是toast的一种变形。这样的提示比普通toast提示更显眼些，更能引人注意到。
第三种，位于电池条的位置，用于一些上传的地方，上传需要时间，又要保证APP的流畅性，削弱对用户的干扰，甚至把干扰减少至零。如发布动态时，后台上传，在最顶部提示，这种提示更弱，很容易被忽略掉。这种提示也越来越少见了，没找到图**，请允许我ps乱入一张。
一般用于第一次出现的页面，提示一些重要或是常用的功能，或是页面功能搬家的提示。这种提示一般常见的一有两种形式，突出重点的强弱性不同。
如下图左边的页面，功能提示比较强，必须点击掉提示才可进入下一步操作。而右边的形式就弱了好多，可看可不看，不影响页面的操作。当然这样的功能说明的提示还可以从二者延伸出一些其它样式，但终归也就是必须看和无须看两种吧。
必须看的功能提示&无须看的功能提示
通过页面的变化进行的提示，不影响页面的整体布局，同时在用户操作的地方提示，不容易被忽略。
支付宝的手势密码错误的提示是个很好的例子，通过头像的后退缩小，错误提示文字的出现，很好的提示了用户操作的错误。最常见到这种提示的地方还有登录注册页面，输入错误时，页面出现细小而精致的变化，同时很好的提醒用户。
大体上最常见的提示样式都在这了吧，如有遗漏或是有更好的提示，后续更新。同时也欢迎小伙伴们砸**。
作者：snowgrain
来源：http://www.jianshu.com/p/3dc14c3733d4
本文由 @snowgrain 授权发布于人人都是产品经理，未经作者许可，禁止转载。
