近年来，设计圈有两大趋势不容忽视，是人工智能、神经网络、深度学习无疑是时下最热门的科技名词，「人工智能设计」个词语在设计圈也深受追捧，我们也看到越来越的初创司勾画出自己的「人工智能设计」蓝图；二是在阿里巴巴中台战略的背下，设计提效又次推动着设计思的变革，设计师们不仅仅需要出地完成业务需求的设计，同时还需要思考设计的价值。人工智能何在我们样的人文语境去理，何去启创意的工？设计师为人与机器的翻译官，又何用新的技术手段更的决业务问题，赋能业，扩展设计价值？
销大促是电商最常用快速出货手段，于 CBU 亦是如此。321上新季、518备货季、727买手节、96拿货节、1220商节、1.18年货节、328商节……大促频率如此高，量级也在呈倍数级增长，如最近328商节，分会场页数量700张+，BANNER 数量17000张+，如需在等紧急时内完成，销设计过程势必生两个严峻问题：其、我们为了预留时进页及 BANNER 拓展工作，被严压缩往往是设计师创意时；其、量级大背后意味着更多员投入以及费用提升，公司将投入越来越大。
我们问题领域进探索，想要解决以上两大难题，核心在于优化会场页拓展及 BANNER 尺寸拓展两部分低平复设工作，提升设计效率，压缩设计期，为设计师保留充裕创意时，也为公司节省力物力。我们尝试从单技术创新结合、设计算法化支撑自动化工具等多逐步进尝试，动工作工具化及智能化，结合近年来项目实践经验，和大家起探讨下我们过程临问题及思考。
一、页面拓展设计与单点算法技术的创新结合
设计师在设计过程进着诸多大小不决策及创意，这是算法技术很难替代，如谈到是创造性合作，设计师与算法起工作以解决问题时，我们看到了算法驱动设计很多案例和它明显潜力，算法可以改良及助力我们日常设计工作，在1220大促，我们与 iDst 智能技术实验-视觉计算团队合作色转移项目恰恰可说明这。
1. 单点技术结合是为了解决什么问题？
在销设计过程，页拓展工作是困扰我们较大难题，大促分会场页数量到700张+量级时，需要几十位学花费近个月时进设计，这个期会严影响大促进度及上线时。如暂时法做到分会场设计流程品化，那么是否可以利用技术替代设计过程某些环节及步骤呢？我们将分会场设计工作进拆解，大致分为色拓展、品组合设计、文案改几大步骤，其不乏复性劳动高、可以过技术去取代，了解到 iDst 智能技术实验-视觉计算团队有相成熟色转移技术，我们希望尝试过色转移技术代替分会场设计色拓展环节。
2. 什么是色彩转移？
背景上色算法技术（本文称色转移），即输入背景图片，输入基于 HSL 色模型系列配色规则（含区组合、度数隔等），以0.5s输出张结速度输出几百个背景配色（即几百 HSL 颜色值应背景上色结）。比如背景主体色是 A，其配色案，想转移成主体色 B，那么原背景个像素颜色都按照 A 色到 B 色相应进值。HSL 值规则越细，生成结越多效越丰富。
3. 如何进行创新结合？
与彩转移的创新结合有两个核心关键点，一是设计与技术产生碰撞的融合，我们在彩转移试验程中，结果并非一直设计师所预期，首先技术有暂时的局，例转移结果遇到的渐变处转移欠佳，衔接不自或包含诸，设计师常用的动感模糊及高斯模糊等手段能受，则需要迎合技术去做一设计优化及富的取舍；其次机器是缺乏认理能力，设计师需将想要现的效果抽象成 HSL 规则，试验的程往往也是反复曲折的，需要针对 BADCASE 进行分析，推断规则的问题点，对其进行优化，通反复试验，最终使得生成结果达到上标准。二是彩转移程与人工设计之间衔接与流程，我们采用是系统设计思，将分场元素拆成简便的和组合的形态，外包拿到彩转移结果及其他元素仅需进行拼装组合，便现量分场设计的高效完成。
通单点法技术引分场设计的创新方式，设计效率得到大大的提高，机器每0.5s转移一结果，代替人工重复且低效的劳动，通细致规则的积累，彩转移的结果也尤为富，也不用担心诸分场的「撞」问题。彩转移在 CBU1220大促及328大促中得到很的应用，在同等周期内，设计师数量不变的情况下，分场页面完成数量由原来大促的300+到1220大促的600+，设计效率提升100%以上；同时两次大促下来，分场从复的模板整设计到高效拼装，一单点技术的应用便为司节省设计费用25万+。
二、设计抽象及算法化支撑多尺寸自动化工具
除单点技术的创新结合，在设计程中，我们也常常思考设计的目的、程和结果能不能量化，能不能法化，能不能数据化呢？通对设计模式的提炼和抽象，是否以由规则和法支撑自动化的设计工具，通智能生成常规设计，从而将设计师从繁重的常规设计任务中放出来，投到更有价值的设计项目之中。我们与 UBNNER 项目组合的智能尺寸工具，恰现我们一探索。
1. 我们为什么要做智能多尺寸？
Banner 是营销设计中常见的设计形式，banner 的面临着一个很大的痛点即种不同尺寸的拓展。以 CBU 网站为例，运营推出一个站内营销活动，设计出一个创意 banner 之，设计师需要花费很时间去进行不同尺寸的排版、整及输出，用站内外几处资源位的投放，为活动吸引更的流量。尺寸的拓展是一种机械化、重复的劳动，果能够由机器代替，用机器进行智能排版局，将极大的提高 banner 的效率，同时也节省大量的人工成。
2. 我们遇到了什么难点？
由中文 banner 极具富的特，使我们的切遇到重重困难：
- 中文 banner 设复杂，从整体构图，左文右图及右文左图，居中结构，还包括复杂的图文混排；从文案排版形式，不胜枚举，其中包含字体变形、文案倾斜、竖排版、中文书法字体自由排版、文案与形状组合嵌套关系、构图常用装饰性图形行点缀，这无疑给智能多尺寸增加了极的难度；
- 集团内部也有其他尺寸相关产品，但主要是针对先内置的 banner 模板，穷举常见尺寸的局参数，当用户选择某一内置 banner，并选择目标尺寸之，该系统在先生成的各种尺寸的局参数中选择与该目标尺寸比例和尺寸最相近的的尺寸的局参数，生成 banner 并输出。我们希望仅通上传一个创意 banner 模板，便输出所有其他尺寸 banner，一方面无先例循，并没有现成的法技术或者框架以参考；
- 我们期望智能多尺寸在可以实现生成时，仍然保留定设计丰富性，不风格、构图等等，避免迎合技术导致设计过于单和简化，不风格、构图等等，然而这确是在提高自身难度。
3. 如何进行设计的提炼、抽象及算法化？
如何将设语言转化逻辑算法？让人机器都可以理解。我们行智能多尺寸解决方案领域的探索，过程中需抽象 banner 多尺寸的共性，需平衡算法通用性与特性，选择解决问题的解决方案。
banner 业务特征提炼
通过 CBU 日常营1000余张 banner 的分析，我们发其中80%以设采用左右结构，将此种结构的主模板作优先解决的对象，降低机器处理的复杂程度。分析了站内90+的营尺寸，共数千张 banner，统常用的尺寸比例。绘制尺寸比例的散点图，通过数据的分布数据点的分簇，将尺寸致分三类，纵向尺寸、横向尺寸及横幅尺寸。
banner 设计元素及布结构抽象
我们要将 banner 的版式特征炼为可量的客观布规则，首先将 banner 要素抽象为本（title）、元素（element）、背景（background） 、标签（tag）及 logo 五大类，中 logo 及 tag 为务性元素，布特征会随务场景需要而有变。进而再确定各元素的大小、布位置、尺寸例和元素间系，抽象通性布。
多尺寸算法逻辑流程及布局计算
我们将布局特征归纳为三层：
- 基础局逻辑，最基础通用的局特征，对每个尺寸比例区间的 banner，我们统计一个对应的基础局逻辑；
- 风格布局特征，需要从主模板提取，用来表征主模板些布局特，在多尺寸布局时需要继承，比如齐、距、比例、平衡、称等。
- 务布逻辑，一些务场景强制需要的布特征，如一些 logo、tag 的布。
进步制定了个智能多尺寸生成算法逻辑流程，如下图所示。
其第四步，各元素布局进调，我们具体采用较详细布局计算案，在计算 banner 布局特征时，我们采取个元素最大接矩形来表征该元素位及大小，其常用些布局特征为齐、距、比例、平衡及视觉心。例如齐，元素是否具有良好齐是布局个要审美标准，布局齐 banner 往往更受用户欢迎。
对于对齐方式，我们定义了种对齐方式：左对齐；中对齐；右对齐，我们采简单的启发式探索来计算对齐。
智能多尺寸过后续算法开发，不断进测试及迭代，完成元素贴边、元素剔除、切图区域、合图晰度等多项问题优化，并算法与前端完成接，最终实现线上流程跑，过系列运及广已经实现 CBU 全站覆盖，在近年时内成了 CBU 设计师及运必不可少工作神。智能多尺寸生成套 banner 仅需2分钟，代替工天（按标准工时完成20个套计算），效率提升200倍+。从2017年4月至2018年2月使用数据来看，过智能多尺寸共为团节省设计费用200+。
三、与鹿班智能化平台合作寻求价值深化
自动化设计工具基本是从成本、效率、收益等度切入，赋能业务或生商业变现，我们不满足单技术及自动化工具，希望结合此前工具化效率提升想法，寻求智能化平台合作为我们解决更多维度问题。希望过场景拓展，、工具、平台能有更多关联，而在有了场景后则开始生大量内容，我们可以将这些内容沉淀下来进复用与再组织，并在个链路进投放连接，最终获宝贵数据资，数据资又能更多赋能我们创意设计工作。在 CBU328商节我们与鹿班智能设计进了初步合作，进步进场景拓展及价值深化。
此前我们在页面及 BANNER 尺寸拓展方面做过的诸多探索，均带来效率的升，但大多数是断点的，我们希望鹿班可帮助我们实现大促设计工作的线性串联，实现页面设计到尺寸拓展一式在线智生成，并借此机会往机器智创方面再迈进一点点。机器智生成效果基于原始数据的习，因此原始数据的设计显得尤为重要。设计师需将设计进行结构、特征量，可分为两大分，一分是定位设计各元素的空间系，中包括字、体、标识、修、背景5大类元素，需要设计及定义各元素的大小、方向及形状；另一分是定义设计各元素的色彩质感系，中包括色彩、纹及质感，还需定义各色彩层的例系及色彩层之间的位置系。有了较丰富的设计数据，再在鹿班设计师端进行模上传，将视觉数据的分包括构图模、配色模、案模进行数据输入，进行智生成，将数据视觉，设计师再根据生成结果进行人工评测。
想要实现页设计到尺寸拓展站生成，其最核心是拓色及拓版打这关键技术难，在和鹿班智能设计合作，我们最终实现了大促页设计到尺寸拓展站在线智能生成，并为大促定制了特有流程，进步触碰智能图像时代。在此 CUB328商节大促试，也有了很好业务落地，内完成了近张 BANNER 智能生成，在确保内容丰富性时，大大提高了设计效率、节省设计费用。
展望
工智能设计是个不可阻挡时代，我们探索仅仅是迈出短短小步，我们仍然不忘初心，致力于过利用新智能化技术手段更好解决业务问题，服务商业，扩展设计价值。我们期待是，设计和技术能够真正做到融合，设计师将更多精力放在创造、创意，以及理解用户层，而将数据、计算、学习交由，立个良好共生关系，让大家可以真正改变自己工作。希望我们起加油，创变未来，拥抱智能化设计时代！
感谢
感谢色转移项目 iDst 智能技术实验-视觉计算团队禾朔及艾劼鼎力协助，感谢智能多尺寸项目不饱以及算法秉恕、晨皋及前端刍牧齐心协作，感谢328大促项目乐乘及鹿班项目组大力支持！期待以后可以碰撞出更多花！
感谢真、项虹的全支持与悉心引导，感谢卢俊的全程指导与相助，感谢创意设计组宋义、大薛、渔、韩夏等同在项目落地过程中的通协作！
欢迎关注「阿巴巴UED」的公众号：
浙公网安备33011002017549号