弹窗设计怎么做才更受欢迎？

更新时间：2024-01-11 17:00:09

UI 设计服务于产品，而产品说到底，是服务于用户、服务于大众，但产品基于投资者利益又需要兼顾诸如营销等目的，一定程度上会让部分用户体验不好。弹窗则可谓是此种设计中，较易不被用户所喜的一种。弹窗设计怎么做才更受欢迎？本篇小编将从弹窗的不同分类中，分享好的案例，以及可优化案例的优化建议，从底层逻辑上帮助更多设计师同学设计出惹人喜爱的弹窗。

点击图片即可一键获取超多弹窗设计资源，一键获取超便捷👇

1、弹窗的两种分类

从专业术语角度来说，弹窗的交互形式分为【模态弹窗】和【非模态弹窗】，其区分点为是否需要用户与其完成交互，模态才会消失。模态弹窗是需要用户完成交互行为，才会消失，常见的有对话弹窗、复杂信息展示、文件选择等等；非模态弹窗则一般用于消息通知等，今天我们着重讨论模态弹窗。

2、警告 / 对话框场景弹窗设计

警告框或者对话框（Alert/Dialog）弹窗设计怎么做？这两个是一样功能的组件，在 IOS 系统中称为 Alert 警告，在安卓系统中称为 Dialog 对话框。这是最传统的模态弹窗，一般作为系统最高优先级，需要用户完成实时判断或操作的弹出式控件。这种弹窗一般界面都比较简洁明了，匹配系统整体的 UI 设计风格，其设计建议是：

① 指令清晰明了，容易操作；

② 将用户需求更高的选项做加重设计，比如确定键为加粗且放置为右侧等。

下面不同系统的界面相比而言，左侧的操作会更易完成。

3、运营类场景弹窗设计

运营类场景弹窗设计怎么做？相较于系统警告弹窗而言，此种弹窗是随着互联网新时代深入发展渐渐产生的，由于携带着营销的目的，如果设计的界面不够匹配产品风格 / 活动主题，或跳转 / 关闭不够灵敏，会比较容易遭到用户的不喜欢。比如下图所示的部分活动弹窗，如果可以更契合其品牌风格，相信效果会更出彩。

点击图片即可一键获取由通知提示、签到提醒、会员引导、红包卡券组成的 APP 弹窗资源👇

下图所示的则是效果很好的几个 APP 营销弹窗设计截图，可以看到他们具有以下优势：

在用色和风格上与其底图的 APP 一致，虽然弹窗出现时，为了引起用户注意，其背景一般会暗化处理，但再暗化，APP 本身的风格用色还是可以看到的；契合活动主题及风格的特色设计：异形设计、拟物风设计、卡片式弹窗等等，视觉效果较好的弹窗一般都使用了这些创意设计，在争夺用户注意力时，给足了趣味，让用户在 “被打断” 时，被好看的设计安抚了烦躁的情绪。

3、弹窗设计这样做

① 两种弹窗的三段式主体：一般都包含了【标题区】【描述区】【交互区】，警告弹窗的设计比较简单，一般比较建议遵循标题区与描述区保持对齐一致，标题与正文保持均左对齐或居中对齐，交互区则需要按用户需求操作做着重设计，不要都设计成一样的灰色等；

（警告弹窗的三段式主体）

（运营弹窗的三段式主体）

② 运营弹窗：

A. 其关闭按钮元素设计及位置都建议用比较醒目的设计，虽然目的是为了营销，但不要让用户产生摆脱不了的烦躁感，从而给他们带来不好的使用体验；

B. 点击跳转至活动时，注意如果会跳转至视频 / 音频，请一定设置成静音播放，不要给用户带来不必要的尴尬麻烦；

C. 最好不要设计摇晃手机就自动跳转，相信很多人最近都看到了对小米手机最新功能的调侃，其中很重要的一条就是年轻人真的比较厌烦很多软件不小心晃动手机就判断为自动跳转至广告页面的操作，而小米最新款则因为添加了此项禁止跳转的设计大受好评。

看完本篇，有没有给你的运营弹窗设计带来好的灵感或建议呀？希望这些建议可以辅助你的设计让你们的品牌活动大卖哦！另外，如果灵感不够，可以戳这里，看看不同行业的弹窗设计思路

——————文章来源：BIGD 团队————