CAPCUT AI 模版功能
职责
设计师
产品
CapCut
平台
移动端
时间
2023.7
本项目主要展示我在工作中对 AI 相关功能的设计，这是我第一个参与的 AI 项目，目标是将修改 Prompt 功能简洁清晰地传递给使用模版的小白用户。
All-in-onE
video
editor
//
背景
在 AI 功能爆发后，CapCut 也立刻跟进，上线了 AI 模版功能。其原理为图+文生图，运营根据热点建立 prompt ，模版用户只需要填入素材即可，案例如下所示。
上线后，此种类型的模版迅速传播，产生了大量爆款；但同时也出现了其他声音，如用户反馈通过 AI 生成的发色不对、肤色不对等等。因为 CapCut 主要服务的对象为欧美用户，此问题得到重视，业务方希望能够支持用户修改 AI 模版中的 prompt。
设计过程
在 CapCut 中，模版的主要用户群体年龄较大，对软件的操作熟练度低，所以本次设计方案的主要目标是让这部分用户掌握修改 prompt 的基本技巧。
同时也有一小部分熟练度较高的二创作者，他们可以通过修改初始参数创作出完全不同类型的模版，所以也需要将全部的编辑能力开放。
了解原理
在确定目标后，我首先需要清晰地了解模板中的生图原理。在与开发讨论后，我发现当前 CapCut 的技术与 Midjourney 、 Stable-Diffusion 等主要模型类似，具体如下。
其中模型暂时不支持修改，因此本方案中需要展示给用户的即为 prompt 和强度两种属性。
通用模型 V1.4
Super cute girl IP by pop mart, Black hair, Black skin, Bangs, Pastel color, mockup, Fine luster, 3D render, Soft focus
prompt 强度：48
=
B. 设计核心流程
在推导方案时，我习惯先确定这个方案的核心的流程，再补充其余的枝干和细节。在本方案中，最核心的需求即为告知用户用户如何修改 prompt，所以一个基本流程如下：
C. 信息展示优化
在完成基本流程后，接下来我需要做的是如何将 prompt 和强度这两个技术概念翻译后传递给用户。
对于 prompt 来说，因为 ChatGPT 等产品的影响，输入框+文字的形式符合大众对 AI 产品的认识，因此我保留了这一部分，希望能尝试在形式上对其优化，暗示其生效和修改的逻辑。
可惜因为技术限制，一期时无法实现此方案。
Super cute girl IP by pop mart, Black hair, Black skin, Bangs, Pastel color, mockup, Fine luster, 3D render, Soft focus
Super cute girl IP by pop mart
Black hair
Black skin
Bangs
Pastel color
mockup
luster
对于强度来说，其代表的含义是 prompt 对生成结果的影响强度。强度越高，其生成结果越贴合 prompt，和原图差距越大。
在实际应用场景，用户对强度的调整需求较低，且调整强度反而容易起到反效果，因此我将其放在二级面板，并将纯数值修改为百分比的概念，与图片结合，共同传递此功能的逻辑。
D. 生成结果
在生成结果时，主要设计点在于加载规则和生成结果的展示样式。
在与技术确认后可知，生成时间约为 10 秒左右，因此我采用了进度加载的方式缓解用户焦虑。同时因为此功能为会员功能，生成结果为用户资产，因此对生成结果进行了保留处理。
结果展示
当有大量结果时此布局形式可能存在问题，因此我查询了其他场景的 AI 生图数据，发现使用量级在可接受范围，因此决定采用此方案。
E. 设计细节
在基本方案通过后，我开始对一些设计细节进行打磨。
顶部栏切换
在用户修改 prompt 时，如果仍然保留面板顶部的退出按钮，可能会造成用户理解错误（误以为是退出输入），因此我设计了一个顶部栏切换细节。
加载样式
在进入结果展示页时底部会进行一个滚动效果，暗示用户底部列表可进行滚动。
未准备好的素材也会采用脉冲效果提示用户正在加载中。
效果对比
在设计效果对比功能时，为了让其更有趣味性，我设计了一个可以滑动查看的交互动画。
结果
方案上线后，相比其他场景的 AI 生图功能，本场景的转化率很高，约为 x %。后续其他设计同事也在这个框架的基础上继续迭代了其他的 AI 功能。
不过以现在的眼光看，此方案仍有一些优化空间，比如初始的面板 AI 感不太够，比如是否有更便捷地方法解决用户想要修改“肤色”的问题呢？
方案上线并不是结束，我希望通过复盘来发现问题，把经验沉淀成技能。