从交互角度聊聊四类弹框的四大设计准则

今天从交互角度给你们讲讲弹框的设计，包括系统提示弹框，操做引导弹框，信息反馈弹框和广告弹框，每一种都总结了4个相关的设计准则，案例丰富，深刻浅出，建议阅读。

原本传统意义上的弹框通常有三种：

1. 系统自动弹出的提醒
2. 帮助用户快速的作出选择
3. 对用户的操做给予反馈

可是如今还多了一种，并且不少产品都在用这种弹框方式，由于它很赚钱 — 广告。因此广告类的弹框已经被我列入弹框设计的第四个类别，今天就跟你们具体来讲说这四块内容。这篇文章注定篇幅比较长，但绝对是值得你收藏的文章。

在说以前，先来给这几个类别定个清晰的术语：

1. 系统自动弹出的提醒 — 系统提示
2. 帮助用户快速作选择 — 操做引导
3. 对用户的操做给予反馈 — 信息反馈
4. 广告 — 广告弹框

系统提示

其实系统提示这一种弹框，就能够写很长的篇幅，可是为了避免把你们越带越深，省得逻辑理不清，因此我说几个相对重要的。

有一种是你们见得最多的，就是评分类弹框。这种自动弹出的提醒，每次都会让我有想卸载App的冲动（就是那种没法克制的冲动，不知道大家懂不懂那种感受）。

这类弹框，须要遵照的四个设计准则:

1. 不要在用户第一次登陆就立马出来。别人都没用你产品，你就要别人评价，是想怎么样？

2. 注意弹框的频率。别一会就弹一会就弹的，弹出鱼尾纹怎么办。

3. 专门定个入口。有些用户确实人品不错，他会在使用以后去给产品评价，因此留个这样的入口，层级能够深一点，让用户本身去操做，会更好。如：

微信直接在页面里留个评价入口。虽然层级深，可是总比一直弹框提醒和干脆取消这种弹框提醒的方式要好得多。要记住，用户想要评价天然会去作，若是不想，你作得多了反而会有负面效果。

4. 老生常谈的四个字:注意美化。想要让本身产品在同行业中脱颖而出，在功能作的较好的前提下，要展现出不同凡响的特点。如:

小红书在这方面作得仍是很不错的。固然还有不少其余的，我就是正好看到他们家的，你们能够借鉴下。多思考思考，有时候细节真的是能够决定成败的。

再来讲说另外一类系统提示弹框。就是产品更新以后，进入页面会让用户查看更新详情，也能够点击“知道了”选择不看（也有人会把它设计为引导页，不过这里不对引导页作说明，后期会专门另写一篇文章详说）。如：

一样能够用上面说到的四个点中的几个来设计这类提醒:

1. 注意弹框频率（这类提醒通常只有更新产品以后第一次打开会弹出）

2. 专门定个入口（通常来讲在评价的相同层级留个路口，展现新功能详情会更好）

3. 美化（这个就很少说了）。

举了两个例子，用了四个准则来讲明这类弹框的设计方法，我把它们称做为系统提示类的弹框设计四大准则。固然还有系统会提醒用户是否接收推送消息等等，这些弹框都是系统提示类弹框，这里就很少说了。只要遵照这四个准则，设计思路都是同样的。

操做引导

什么是操做引导？上个图：

看到这个是否是很疑惑？有人可能会认为这类引导顶多算是弹出层，算不上是框，但只是名词的差别而已。因此这里我把它也归为弹框，其实概念仍是同样的，它也是操做引导的一个弹框提醒。

再来看看操做引导的第二种弹框：

有印象么？这类弹框常常会出如今一些用户没有把握的页面，避免用户操做失误。不过目前不少人都以为这类弹框有利有弊，有的地方出现的不合时宜，打断了用户的使用状态。因此在设计这类弹框时要很是谨慎，得经过屡次讨论、研究确认是否有必要出现。

这类弹框，也有四个设计准则：

1. 注意出现的频率。若是是自动弹出作引导，那必须注意频率，它们通常在下载以后第一次打开应用才会出现。

2. 文案要简洁明了。有些弹框颇有趣，出现的文案让你不知道该选择什么，其实明明就两个选项。如:这是真的，由于我怕把这个App发出来会被人说，因此本身随便弄了个，丑是丑了点，随便看看。里面的文案内容我是照抄的。这种弹框会让用户纠结的，就算是几秒钟也是纠结，因此设计的时候必定要注意文案。

3. 按钮的主次之分。这个准则正好能够用在上面那个图上。颜色或字体的粗细都是能够进行区分的，要学会引导用户，去作你想让他作的事情。

4. 美观依然重要。

在设计操做引导类的弹框时，遵照这四个准则，设计出来的弹框必定不会差。

信息反馈

信息反馈类的弹框相信你们常常会有看到，只是印象不深，由于这个弹框给人一种好像不存在的感受，可是其实是存在的。来个图：

有印象了吧？这类弹框通常出如今会有反馈的操做以后，提醒用户页面正在加载中、保存成功、已删除、已刷新等等。就不过多上图了，相信大家能理解。

那么这类弹框一样也有四个准则：

1. 提供一个小动效，如菊花。为何呢？由于这类反馈弹框都会让用户等待，因此要跟用户产生互动，让用户知道如今已经在加载，而不是卡住了。若是实在懒，不想作图片动效，那来个省略号动效也行吧。

2. 让用户选择关闭。不知道大家有没有遇到一种状况，就是点击了某个按钮以后会有加载，而后不知道为何就是加载不出来，速度很是缓慢，一直在转菊花，而后点哪里都没反应，只有一层黑色蒙版的背景，结果只能退出应用从新打开它。是否是很烦？因此提供一个关闭按钮，绝对是很是合理的。

3. 文案简洁明了。一个信息反馈类弹框，千万不要有多余的文字，有些App为了彰显独特的个性，非要来一些非主流的文案，说实话，用户一点都不关心。不要把时间浪费在这类所谓的“细节”上，意思明确且简单是最好的。

4. 美观，仍是那么重要。

反馈信息类弹框的设计较为简单，也没那么多篇幅，可是若是要细说仍是有不少内容了，这里就不延展开来讨论了。只要遵照这四个准则，基本能完成这类弹框的设计了。

广告弹框

最后一类，这是最近常看到的一类，它存在于各种弹框中，固然也包括系统提示、操做引导、信息反馈。有些产品的弹框是为了广告而弹，这也是很常见的。来看看出现最多的一种方式:

有时候外卖点完会让你分享红包，这类弹框是很是典型的广告类弹框。还有不少其余的，不过今天我先说说这一种。

也是同样，广告类弹框的设计也须要遵照四个准则:

1. 广告内容明确，主体不要偏。作过平面设计的同窗都知道，每次领导来一个需求，要求你设计一张banner或者海报之类的物料，巴不得把全部东西都摆上去，显得内容丰富（其实咱们都知道，low爆了）。可是在设计App广告弹框时，必需要记住，你要宣传的东西得很清晰，很明确。

2. 按钮设计要突出。想要让用户使用你宣传的东西，就干脆点，别小家子气的来几个小按钮，而后内容特别多，你是要让用户看仍是让用户用呢。况且一个弹框就那么一点大小，真要说不少的话就专门留个路口给用户好好介绍下。

3. 优化文案。

4. 仍是美观。这两点就不重复了，上面都说过了。广告类弹框的四个设计准则就是这样了。

总结

必定要记住不管什么类型的弹框，必需要作到文案简洁。不要让用户看半天还没明白你要说的是什么，而后才没办法也无所谓的点了肯定或取消（大部分这种状况，他们都会点击取消）。

四个弹框种类的四大设计准则都说完了，不知道你们有没有注意到四类弹框都提到的一点：美观。

不少团队都认为弹框就是一个提醒，有就行了，不用在乎这么多。可是一个App的好坏就在这里能看出。弹框是交互设计中很是重要的一个点，这类设计不只考验交互设计师的综合能力，也能从产品看出整个团队的总体水平如何。这就是一个细节，可是细节每每决定成败。