在进行具体的 AI 绘图实验之前，我们先把商业化运营设计需求分类，以活动类型、周期、对应设计复杂程度，可将其大致分为 A、B、C 三个种类。其中 A 级别以专题活动为主，页面以banner 和海报为代表；B 级别以主图/详情图为主；C 级别为运营设计，以 H5 的弹窗广告和入口引导需求居多。
电商设计分类
| 运营弹窗设计 | ||
 |  |  |
由于以上几类日常运营图的需求频次较高且生命周期不长，在项目进度紧张的情况下，这些图形设计会占用大量的设计人力和项目时间。考虑到 AI 绘图模型具有低成本、批量产出的特点，我们决定尝试使用 AI 绘图工具来辅助完成日常的运营设计工作。值得一提的是，每种工具都有其擅长的风格，我们选择了目前最流行、也是学习资料最丰富的 Midjourney 来进行尝试。
今天的文章给大家介绍 C 类运营弹窗设计篇：
C 类运营弹窗设计类流程分析
那么我们尝试把目光聚焦在需求本质上，将弹窗设计的结构拆散，可以发现绝大部分的弹窗都由这几个元素构成：背景氛围 + 文案 + 按钮； 或者 背景氛围 + 产品 + 文案 + 按钮
实战案例解析
这个教程非常简单，无论你是初学者还是有一定设计经验的人，都能轻松上手～
首先我先模拟一个打车软件的弹窗设计，日常点进打车页面经常会弹出来活动入口的弹窗，不管是微信小程序、还是各平台打车 app，都会弹出来一些促销信息。把自己的思路整理好之后，得出一个夏季出行的画面。先在 Midjourney 的对话框里输入 /imagine 的指令，简单描述一下画面，看看初图的效果。
| prompt | 初图 |
| small, red car, in the style of light green and blue, soft and dreamy depictions, gesture driven, colorful animations, white and green, pastoral charm, luminous quality |  |
现在得到了一张动漫风格的插画，接下来我在提示词中加入 3D illustration, white background, small red car, in the style of light green and blue, C4D，这时候达到了三维插画的图了，但是 AI 算法没有把白背景的提示词精准地呈现出来，后续可以用去背景的抠图工具来辅助完成：
- Chrome: https://chrome.google.com/webstore/detail/oadjckehgdokecialgdhjkjdmjonfkkf
- Edge：https://microsoftedge.microsoft.com/addons/detail/ehcklkanebjdkajfacgkmpnhgpmchdhm
生成图 1 后使用 V2 按钮重绘，看看下图的效果：
| 图 1 | 图 2：使用 V2 按钮重绘 |
 |  |
经过调整描述词与图像重绘，逐步接近目标效果。最终选择了图 2 的第三张图片，使用 U3 按钮放大。刚好那朵独立的大白云有留白的位置，方便放促销信息，图片去背景后就可以开始设计啦。
| 原图 | 去背景 |
 |  |
最终效果图
我们根据上面总结的流程分析：把 “背景氛围 + 文案 + 按钮 ”这几个结构结合起来。注意折扣信息和按钮需要突出，就得到下图弹窗设计啦！
结语
利用 AI 辅助生图是不是省了不少的建模时间呢，也可以用这个方法生成二维的插画运用在弹窗里。目前在 AIGC 领域还不能精准地在画面上设计文字和排版，但可以使繁琐的工作量可以得到有效压缩，从而把大家从繁杂的工作中解放出来。
