运营弹窗设计篇 – 电商设计如何玩转 AI

在进行具体的 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 领域还不能精准地在画面上设计文字和排版，但可以使繁琐的工作量可以得到有效压缩，从而把大家从繁杂的工作中解放出来。