俗话说，千里之行始于足下，复杂的事物简单化，大事拆成小事慢慢做。

设计师日常设计的时候，也是先分析内容，考虑设计风格，确定字体、颜色、布局。

对于神秘的AI智能设计，也是类似逻辑，任何复杂的事情，都可以将其一步步拆分，变成可解决的问题。

有幸相对深入的参与过AI智能设计的工作，作为一个阶段性的总结，本文将结合原子设计理论稍作分析，不妥的地方，还请各位看官指正，谢谢。

关于本篇文章，我们要先尝试问几个问题：

· AI智能设计主要应用场景？

· 不同场景下，广告banner的结构？

· 设计师设计banner的流程？

· 什么是原子设计理论？

· 原子设计理论与AI智能设计的关系？ 每个环节如何实现？

· AI智能设计背后的庞大工程是什么？ 

等本文看完，以上问题都能得到解答，并且涉及到的延伸问题，也会一并剖析，让我们一起来看看吧～

首先，我们看下目前AI智能设计主要应用场景？

据观察，对于大众用户，目前应用最广的是模板的套用，比如“稿定设计”、“可画”，根据需求挑选模板，修改成自己的信息，可快速投放使用，也不会有版权问题（平台解决了）。

淘宝、苏宁、京东、拼多多等在自身PC端和APP端广告中频繁使用，还包括投放的信息流广告、开屏广告等。这些一般分成两部分，一部分是设计师负责设计、运营在平台上传，还有一部分是后台算法生成再投放。前者运营及设计人员参与较多，后者基本根据规则投放较多，当然也包括对人群画像的细分。

不同场景下，广告banner的结构？

根据上述场景，我们不难发现，不同场景的广告在结构上都近乎雷同。比如说客户端内广告，以淘宝为例：主文案（商品名称/活动）+副文案+商品图+行动按钮/利益点+品牌logo+装饰元素+背景图

开屏广告：主文案（商品名称/活动）+副文案+商品图+行动按钮/利益点+品牌logo+装饰元素+背景图

信息流广告：主文案+副文案+商品图+行动按钮+利益点+品牌logo+装饰元素+背景图

根据上述banner结构分析情况，我们再来看看，一个设计师日常设计banner的时候，都经历哪些流程？

· 需求理解

- 设计一个banner

· 根据需求确定设计风格、主题内容、调性、尺寸等

- 然后这个东西比如说，是什么时期投放的？有没有明确的风格诉求？双十一？还是万圣节？

- 放在什么平台什么地方？它的尺寸是多少？

· 根据素材和文案确定板式

-    需求方提供了哪些设计素材？文案？图片？

· 丰富设计，增加点缀和细节元素

-    有哪些设计素材？文案？图片？

· 整体调整

-    整体细节调整，源文件整理，修改图层命名等。

看完了banner设计流程，那我们再来看看什么是原子设计理论？

众所周知，原子是化学反应中的最小微粒，原子设计（Atomic Design）的化学概念是：

原子构成分子，分子组成有机体。

该方法论的主旨是，由最小颗粒元素有序组合成较为复杂元素，层层递进，组成更富有层次的设计系统。页面既是一个连贯的整体，又是零散的元素集合。

具象化来说，就是细胞组成器官，再由器官组成一个部位，再由这些部位，合理组成一个完整的人。我们在设计的时候，也可以参考这个逻辑。

其中，细胞相当于原子，器官相当于分子，手、头这些部位相当于组织或者是有机体，然后合理的布局相当于头要放在肩膀上面，手要长在手臂上，符合一定的模板，在用户体验五要素中相当于框架层，最后最这些元素组合在一起，形成一个完整的人，明眸皓齿（我也不知道为啥要加上这个词，大概想凸显出表现层的意思，这种比较有画面感）。

可能栗子不是特别的准确，看懂大概意思就行。

那我们根据这个理论，再重新回到主题上来，一起看看在信息流广告设计过程中，我们需要考虑哪些问题呢？

此处以信息流广告为例，信息流广告设计的复杂性相对最小，对设计质量要求不是特别的高，主要以信息传达为主，能突出卖点和商品信息，达到引流的效果。这些在“试用期”的AI智能设计，可以勉强达标的程度。（当然复杂性、设计要求这些都是相对来说，相对来说～～强行保命～～～）

此处再把刚刚的banner设计流程拉出来，模拟设计一个banner，挨个来看～

· 需求理解

- 设计一个信息流广告

· 根据需求确定设计风格、主题内容、调性、尺寸等

- 节日活动，最好暖色系

- 百度、今日头条、微博等场景，尺寸有：1242*1786、750*1280、720*1062、1080*1601、1242*2208、720*1280、640*1136等

· 根据素材和文案确定板式

- 本次甲方爸爸需要投放一叶子黄金面膜、提供了几个商品图，折扣力度是199-100，暂时没有提供文案。

· 丰富设计，增加点缀和细节元素

- 一叶子，要不要清新的叶子元素？光感透润粉樱钻石面膜，是不是有一些钻石或者其他的装饰性元素。

· 整体调整

- 整体细节调整，源文件整理，修改图层命名等。

好了，根据以上信息，结合原子理论我们进一步再看看～

· 原子

- 商品图，已提供

- 文案，甲方爸爸提供了一部分，“满199立减100”的折扣力度；

- 商品图如果涉及到抠图，可以通过算法智能抠图；

- 颜色，需求红色系，粉樱面膜本身是粉色+蓝色；

- 背景，可根据风格从素材库选择；

- 点缀和细节元素从哪里来？素材库。

· 分子

 - 如何组成一个按钮？文案+按钮背景，那么按钮样式从哪里来呢？素材库。

· 有机体

- 文案组（主文案、辅文案、行动按钮）根据一定规则组合，“文案+按钮”、“主文案+副文案+按钮”。

· 模板

- 左图右文？左文右图？上图下文？上文下图？

- 横版、竖版、各种结构和尺寸？

- 是否是大促or活动，需要添加活动logo？此处未添加。

· 页面（此处为banner）

- 内容完整填充，具体素材可通过AI能力从相关渠道获得，最终组成完整的界面。

- 此处主文案缺少，可以通过语义理解能力，从商品标题、商品介绍、商品参数等部分进行提取（这个规则由算法人员根据运营需求制定）；

· 最后整理延展

- 当所有设计完成，我们还可以对颜色进行再处理，算法通过颜色迁移规则，生成多种不同颜色基调界面。

那AI智能在整个环节中发挥了什么样的作用呢？

我们知道，算法的几个能力，主要有语音、语义、图像。此处AI智能设计中运用到的主要有语义理解和智能图像功能。具体体现在：

· 语义理解 

- “智能文案生成能力”，在理解商品标题和介绍的情况下，提取出关键信息，组合成新的主标题文案；

· 智能图像 

- 当提供的商品图不是透明图的情况下，需要“智能抠图能力”；

 - 当一个banner需要投放在不同的平台，需要很多尺寸的时候，需要“智能尺寸拓展能力”；

- 当banner需要色调和谐或者需要多个颜色的时候，需要“颜色迁移能力”；

等等。

每个能力在初期的时候，尤其是尺寸拓展与颜色迁移，需要设计师的配合介入，根据算法生成的结果，提出优化方案。

AI智能设计背后的庞大工程？- 素材库准备、组件化构建

综合上述完整的流程，我们发现，虽然最终目标是一张图，但是它的背后并不那么简单。我们多次提到了“素材库”的概念，素材库本质上也是算法学习的口粮，只有“吃”的够多，“看”的够多，才能生成更加丰富的、优质的界面。

在这大量口粮的背后，需要算法和设计同志准备大量的素材积累和处理：

· 一般由算法同志先从相关渠道获取大量的素材，初步筛选（零散的素材or设计源文件拆分）；

· 然后给到设计的同志进行二次筛选，部分微调可用的素材，单独拎出备用，比较差的素材，就直接舍弃；

· 对素材进行二次、三次甚至更多次处理后，才可入库；

· 入库的时候，算法or标注人员同时还需要做一件事，就是对素材进行分类&打标签（这个是按钮，这个是中国风）；

· 机器对素材进行学习，学会哪些是可以的素材，哪些是不OK的，下次在初筛的时候直接过滤掉。

除了这些批处理素材，设计师还需要额外设计一部分高质量素材，来扩充素材库，提升整体的质量。

此时我们就需要知道，哪些素材库需要扩充，一般从素材数量较少的库开始补充。

那我们背后的素材库or组件库有哪些呢？此时也可以参考上方原子拆解的结果，一般是根据使用场景来，不同的使用场景需要不同的素材。

素材库

· 字体库（一般使用平台有版权的字体，可以免去各种纠纷）

· 文字背板库（有时候文字无法从背景中凸显出来，会增加的装饰衬底）

· 按钮背板库（不同风格调性的按钮、丰富的样式、边框以及颜色）

· 台面库（现在主流的商品展示，都习惯性的放在各种台面上，我们也需要设计丰富多样的台面摆放商品，此处也需要细分，比如说柜式落地冰箱总不能放在桌子上吧）

· 装饰素材库（一般为绿植、几何图形、圣诞彩带这种装饰性素材，可根据不同主题or标签进行扩充）

· 背景库

素材库准备的时候，一般情况下，除了可单独使用的素材，如随机出现的装饰贴or其他无关联关系的素材，都可以组件化的形式出现，比如说文案组可以和按钮同步出现，这样可以知道各原子元素之间的大小、距离等比例关系。

组件式素材库

· 文案组件库（除了文案字体、颜色等样式，还涉及到模板属性，需要考虑多行文案的大小关系）

· 按钮组件库（文案+按钮背板，需有颜色和字体大小组合等）

· 商品组合库（多商品的时候，怎么布局好看？）

· 模板库（此处模板指的是，框架层，这个banner哪边放商品，哪边放文案，哪边放行动按钮or爆炸贴等信息，此种模板一般接近成品效果，除了文案可无实际含义，其他颜色组合及尺寸信息，都会用于算法学习）

既然有了上面提到的组合出现的情况，那势必需要告诉算法，这个文案是什么，是主文案吗？还是辅文案 ？这个仅仅是个装饰元素还是按钮的背景图呢？算法单单看图，是看不出来的，这个时候，就需要我们每个人都拥有的名字来派上用场。

对所有的素材进行，命名！

对所有的元素类型进行细分，其实在前面分素材库的时候已经细分了，比如说文案、按钮、台面等。

目前我们主要设定的名称有：text-1、text-2、goods-1、bg等。

仔细观察我们的素材会发现，有的元素不全，虽然在画布中看不出来，实际上是残缺的，比如贴边的绿植装饰，这种元素只能摆放在固定的位置，于是他们也可以有专门的名字。

总有人负重前行

一路走来，是不是发现，很多看似很轻轻松松的事情，其背后其实隐藏了大量的人力物力。

有些支线还有很多东西值得展开细细地说一说，道一道，下次有机会再聊。比如说：

· 模板框架怎么定义？

· 贴边素材怎么处理？

· 商品如何完美的落在台面上？

· 有的商品像牙膏比较细长，有的像电饭煲比较正，如何决定商品大小保证整体的美观？

· 尺寸拓展的时候，哪些可以动，哪些不能动？

· 有些平台有自己的规则，画布上有禁区怎么办？

· 颜色迁移到底遵循什么样的规则？如果出现很不好看的颜色怎么办？

· 文案中出现繁体字怎么办？

· 示例文案只有6个字，实际文案有8个字怎么办？可以换行吗？

· 组件库以什么格式入库？具体有什么制作要求？

· 等等。

AI智能设计，从开始的“不可见人”，到现在已经能普遍应用，承载了众多开发、算法和设计同志的努力和心血。虽然距离优秀的设计还有漫漫长路，但是已经在慢慢成长中，未来可期，在看不见的地方，总有人负重前行。

Powered by Froala Editor