设计干货推荐｜四类弹框四大设计准则.pdf

设计干货推荐 ｜四类弹框的四大设计准则 弹框是交互设计中非常重要的一个点 ，这类设计不仅考 交互设计师的综合能力 ，也能从产 品看出整个团队的整体水平如何。这就是一个细节 ，但是细节往往决定成败。 最近很多文章都在说弹框设计 ，其实一个弹框就是一个弹框而已 ，没那么多讲究。 本来传统意义上的弹框一般有三种 ： 系统自动弹出的提醒 帮助用户快速的做出选择 对用户的操作给予反馈 但是现在还多了一种 ，而且很多产品都在用这种弹框方式 ，因为它很赚钱 — 广告。所以广告类的弹 框已经被我列入弹框设计的第四个类别 ，今天就跟大家具体来说说这四块内容。这篇文章注定篇幅 比较长 ，但绝对是值得你收藏的文章。 在说之前 ，先来给这几个类别定个清晰的术语 ： 系统自动弹出的提醒 — 系统提示 帮助用户快速做选择 — 操作引 对用户的操作给予反馈 — 信息反馈 广告 — 广告弹框 （想不到了 ，脑子不好使 ） 系统提示 其实系统提示这一种弹框 ，就可以写很长的篇幅 ，但是为了不把大家越带越深 ，免得逻辑理不清 ， 所以我说几个相对重要的。 有一种是大家见得最多的 ，就是评分类弹框。这种自动弹出的提醒 ，每次都会让我有想卸载A pp的 冲动 （就是那种无法克制的冲动 ，不知道你们懂不懂那种感觉 ）。 这类弹框 ，需要遵守的四个设计准则 ： １.不要在用户第一次登录就立马出来。别人都没用你产品 ，你就要别人评价 ，是想怎么样 ？ ２.注意弹框的频率。别一会就弹一会就弹的 ，弹出鱼尾纹怎么办。 ３.专门定个入口。有些用户确实人品不错 ，他会在使用之后去给产品评价 ，所以留个这样的入口 ， 层级可以深一点 ，让用户自己去操作 ，会更好。如: 微信直接在页面里留个评价入口。虽然层级深 ，但是总比一直弹框提醒和干脆取消这种弹框提醒的 方式要好得多。要记住 ，用户想要评价自然会去做 ，如果不想 ，你做得多了反而会有负面效果。 ４.老生常谈的四个字 ：注意美化 。想要让自己产品在同行业中脱颖而出 ，在功能做的较好的前提下 ，要展示出与众不同的特色。如 ： 小红书在这方面做得还是很不错的。当然还有很多其他的 ，我就是正好看到他们家的 ，大家可以借 鉴下。多思考思考 ，有时候细节真的是可以决定成败的。 再来说说另一类系统提示弹框。就是产品更新之后 ，进入页面会让用户查看更新详情 ，也可以点击“ 知道了”选择不看 （也有人会把它设计为引导页 ，不过这里不对引导页做说明 ，后期会专门另写一篇 文章详说 ）。如 ： 同样可以用上面说到的四个点中的几个来设计这类提醒 ： 注意弹框频率 （这类提醒一般只有更新产品之后第一次打开会弹出 ） 专门定个入口 （一般来说在评价的相同层级留个路口 ，展示新功能详情会更好 ） 美化 （这个就不多说了 ）。 举了两个例子 ，用了四个点来说明这类弹框的设计方法 ，我把它们称作为系统提示类的弹框设计四 大准则。当然还有系统会提醒用户是否接收推送消息等等 ，这些弹框都是系统提示类弹框 ，这里就 不多说了。只要遵守这四个准则 ，设计思路都是一样的。 操作引 什么是操作引导 ？上个图 ： 看到这个是不是很疑惑 （路人甲 ：这哪里是框 ，耍我啊 ）？有人可能会认为这类引导顶多算是弹 出层 ，算不上是框 ，但只是名词的差异而已。所以这里我把它也归为弹框 ，其实概念还是一样的 ， 它也是操作引导的一个弹框提醒。 再来看看操作引导的第二种弹框 ： 有印象么 ？这类弹框经常会出现在一些用户没有把握的页面 ，避免用户操作失误。不过目前很多人 都觉得这类弹框有利有弊 ，有的地方出现的不合时宜 ，打断了用户的使用状态。所以在设计这类弹 框时要非常谨慎 ，得通过多次讨论、研究确认是否有必要出现。 这类弹框 ，也有四个设计准则 ： 1.注意出现的频率。如果是自动弹出做引导 ，那必须注意频率 ，它们一般在下载之后第一次打开应 用才会出现。 2.文案要简洁明了。有些弹框很有趣 ，出现的文案让你不知道该选择什么 ，其实明明就两个选项。 如 ：这是真的 ，因为我怕把这个A pp发出来会被人说 ，所以自己随便弄了个 ，丑是丑了点 ，随便 看看。里面的文案内容我是照抄的。这种弹框会让用户纠结的 ，就算是几秒钟也是纠结 ，所以设计 的时候一定要注意文案。 3.按钮的主次之分。这个准则正好可以用在上面那个图上。颜色或字体的粗细都是可以进行区分的 ，要学会引导用户 ，去做你想让他做的事情。 4 .美观依然重要。 在设计操作引导类的弹框时 ，遵守这四个准则 ，设计出来的弹框一定不会差。 信息反馈 信息反馈类的