层层剖析，深度了解AI智能设计实现的原理和背后的艰辛。
俗话说，千里之行始于足下，复杂的事物简单化，大事拆成小事慢慢做。
设计师日常设计的时候，也是先分析内容，考虑设计风格，确定字体、颜色、布局。
对于神秘的AI智能设计，也是类似逻辑，任何复杂的事情，都可以将其一步步拆分，变成可解决的问题。
有幸相对深入的参与过AI智能设计的工作，作为一个阶段性的总结，本文将结合原子设计理论稍作分析，不妥的地方，还请各位看官指正，谢谢。
·AI智能设计主要应用场景？
·设计师设计banner的流程？
·什么是原子设计理论？
·原子设计理论与AI智能设计的关系？每个环节如何实现？
·AI智能设计背后的庞大工程是什么？
等本文看完，以上问题都能得到解答，并且涉及到的延伸问题，也会一并剖析，让我们一起来看看吧～
首先，我们看下目前AI智能设计主要应用场景？
根据上述banner结构分析情况，我们再来看看，一个设计师日常设计banner的时候，都经历哪些流程？
·需求理解
-设计一个banner
·根据需求确定设计风格、主题内容、调性、尺寸等
-然后这个东西比如说，是什么时期投放的？有没有明确的风格诉求？双十一？还是万圣节？
-放在什么平台什么地方？它的尺寸是多少？
·根据素材和文案确定板式
-需求方提供了哪些设计素材？文案？图片？
·丰富设计，增加点缀和细节元素
-有哪些设计素材？文案？图片？
·整体调整
-整体细节调整，源文件整理，修改图层命名等。
看完了banner设计流程，那我们再来看看什么是原子设计理论？
众所周知，原子是化学反应中的最小微粒，原子设计（AtomicDesign）的化学概念是：
原子构成分子，分子组成有机体。
该方法论的主旨是，由最小颗粒元素有序组合成较为复杂元素，层层递进，组成更富有层次的设计系统。页面既是一个连贯的整体，又是零散的元素集合。
具象化来说，就是细胞组成器官，再由器官组成一个部位，再由这些部位，合理组成一个完整的人。我们在设计的时候，也可以参考这个逻辑。
其中，细胞相当于原子，器官相当于分子，手、头这些部位相当于组织或者是有机体，然后合理的布局相当于头要放在肩膀上面，手要长在手臂上，符合一定的模板，在用户体验五要素中相当于框架层，最后最这些元素组合在一起，形成一个完整的人，明眸皓齿（我也不知道为啥要加上这个词，大概想凸显出表现层的意思，这种比较有画面感）。
可能栗子不是特别的准确，看懂大概意思就行。
此处再把刚刚的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智能设计中运用到的主要有语义理解和智能图像功能。具体体现在：
·语义理解
-“智能文案生成能力”，在理解商品标题和介绍的情况下，提取出关键信息，组合成新的主标题文案；
·智能图像
-当提供的商品图不是透明图的情况下，需要“智能抠图能力”；
-当一个banner需要投放在不同的平台，需要很多尺寸的时候，需要“智能尺寸拓展能力”；
-当banner需要色调和谐或者需要多个颜色的时候，需要“颜色迁移能力”；
等等。
每个能力在初期的时候，尤其是尺寸拓展与颜色迁移，需要设计师的配合介入，根据算法生成的结果，提出优化方案。
AI智能设计背后的庞大工程？-素材库准备、组件化构建
综合上述完整的流程，我们发现，虽然最终目标是一张图，但是它的背后并不那么简单。我们多次提到了“素材库”的概念，素材库本质上也是算法学习的口粮，只有“吃”的够多，“看”的够多，才能生成更加丰富的、优质的界面。
在这大量口粮的背后，需要算法和设计同志准备大量的素材积累和处理：
·然后给到设计的同志进行二次筛选，部分微调可用的素材，单独拎出备用，比较差的素材，就直接舍弃；
·对素材进行二次、三次甚至更多次处理后，才可入库；
·入库的时候，算法or标注人员同时还需要做一件事，就是对素材进行分类&打标签（这个是按钮，这个是中国风）；
·机器对素材进行学习，学会哪些是可以的素材，哪些是不OK的，下次在初筛的时候直接过滤掉。
除了这些批处理素材，设计师还需要额外设计一部分高质量素材，来扩充素材库，提升整体的质量。
此时我们就需要知道，哪些素材库需要扩充，一般从素材数量较少的库开始补充。
那我们背后的素材库or组件库有哪些呢？此时也可以参考上方原子拆解的结果，一般是根据使用场景来，不同的使用场景需要不同的素材。
素材库
·文字背板库（有时候文字无法从背景中凸显出来，会增加的装饰衬底）
·按钮背板库（不同风格调性的按钮、丰富的样式、边框以及颜色）
·台面库（现在主流的商品展示，都习惯性的放在各种台面上，我们也需要设计丰富多样的台面摆放商品，此处也需要细分，比如说柜式落地冰箱总不能放在桌子上吧）
·装饰素材库（一般为绿植、几何图形、圣诞彩带这种装饰性素材，可根据不同主题or标签进行扩充）
素材库准备的时候，一般情况下，除了可单独使用的素材，如随机出现的装饰贴or其他无关联关系的素材，都可以组件化的形式出现，比如说文案组可以和按钮同步出现，这样可以知道各原子元素之间的大小、距离等比例关系。
组件式素材库
·文案组件库（除了文案字体、颜色等样式，还涉及到模板属性，需要考虑多行文案的大小关系）
·按钮组件库（文案+按钮背板，需有颜色和字体大小组合等）
·商品组合库（多商品的时候，怎么布局好看？）
·模板库（此处模板指的是，框架层，这个banner哪边放商品，哪边放文案，哪边放行动按钮or爆炸贴等信息，此种模板一般接近成品效果，除了文案可无实际含义，其他颜色组合及尺寸信息，都会用于算法学习）
既然有了上面提到的组合出现的情况，那势必需要告诉算法，这个文案是什么，是主文案吗？还是辅文案？这个仅仅是个装饰元素还是按钮的背景图呢？算法单单看图，是看不出来的，这个时候，就需要我们每个人都拥有的名字来派上用场。
对所有的素材进行，命名！
对所有的元素类型进行细分，其实在前面分素材库的时候已经细分了，比如说文案、按钮、台面等。
目前我们主要设定的名称有：text-1、text-2、goods-1、bg等。
仔细观察我们的素材会发现，有的元素不全，虽然在画布中看不出来，实际上是残缺的，比如贴边的绿植装饰，这种元素只能摆放在固定的位置，于是他们也可以有专门的名字。
总有人负重前行
一路走来，是不是发现，很多看似很轻轻松松的事情，其背后其实隐藏了大量的人力物力。
有些支线还有很多东西值得展开细细地说一说，道一道，下次有机会再聊。比如说：
·模板框架怎么定义？
·贴边素材怎么处理？
·商品如何完美的落在台面上？
·有的商品像牙膏比较细长，有的像电饭煲比较正，如何决定商品大小保证整体的美观？
·尺寸拓展的时候，哪些可以动，哪些不能动？
·有些平台有自己的规则，画布上有禁区怎么办？
·颜色迁移到底遵循什么样的规则？如果出现很不好看的颜色怎么办？
·文案中出现繁体字怎么办？
·示例文案只有6个字，实际文案有8个字怎么办？可以换行吗？
·组件库以什么格式入库？具体有什么制作要求？
·等等。
2人已收藏
你确定要举报从原子设计理论角度解密AI智能设计-AI设计到底怎么实现的？？
如果查出恶意举报，十天内禁止提交任何举报申请。
0/200
点击上传附件
外链地址：
对谁可见：
完整度
启发性
勤奋性
排版布局
手机打开
删除经验
您将要删除您的编辑推荐大作
从原子设计理论角度解密AI智能设计-AI设计到底怎么实现的？