（2）集团内部也有其他多尺寸相关产品，但主要是针对事先内置的banner模板，穷举了常见尺寸的布局参数，当用户选择某一内置banner，并选择目标尺寸之后，该系统会在事先生成的各种尺寸的布局参数中选择与该目标尺寸比例和尺寸最相近的的尺寸的布局参数，生成banner并输出。我们希望仅通过上传一个创意banner模板，便可输出所有其他尺寸banner，这一方面无先例可循，并没有现成的算法技术或者框架可以参考；

设计师需将设计进行结构化、特征量化，可分为两大部分，一部分是定位设计各元素的空间关系，其中包括文字、主体、标识、修饰、背景5大类元素，需要设计及定义各元素的大小、方向及形状；另一部分是定义设计各元素的色彩质感关系，其中包括色彩、纹理及质感，还需定义各色彩层的比例关系及色彩层之间的位置关系。

题图来源于阿里巴巴UED返回搜狐，查看更多

（2）banner设计元素及布局结构化抽象

背景重上色算法技术（本文称之色彩转移），即输入背景图片，输入基于HSL色彩模型系列配色规则（包含区间组合方式、度数间隔等），以每0.5s输出一张结果的速度输出几百个背景配色（即几百种HSL颜色值对应的背景重上色结果）。比如背景的主体色是A，其中一种配色方案，想转移成主体色B，那么原背景中的每个像素的颜色都按照A色到B色相应的进行差值。HSL值规则越细，生成结果越多效果越丰富。

2. 我们遇到了什么难点？

与色彩转移的创新结合有两个核心关键点：

由于中文banner极具丰富的特性，使我们的切入遇到了重重困难：

智能多尺寸通过后续算法开发，不断进行测试及迭代，完成元素贴边、元素剔除、切图区域、合图清晰度等多项问题的优化，并且算法与前端完成对接，最终实现线上流程的跑通，通过系列的运营及推广已经实现CBU全站的覆盖，在近一年时间内成了CBU设计师及运营必不可少的工作神器。智能多尺寸生成一套banner仅需2分钟，代替人工一整天（按标准工时完成20个一套计算），效率提升200倍+。从2017年4月至2018年2月的使用数据来看，通过智能多尺寸共为集团节省外包设计费用200万+。

如果暂时还无法做到分会场设计流程的产品化，那么是否可以利用技术替代设计过程中某些环节及步骤呢？

我们要将banner的版式特征提炼为可以量化的客观布局规则，首先将banner要素抽象为文本（title）、元素（element）、背景（background） 、标签（tag）及logo五大类，其中logo及tag为业务性元素，布局特征会随业务场景需要而有所变化。进而再确定各元素的大小、布局位置、尺寸比例和元素间关系，抽象其通用性布局。

1. 单点技术结合是为了解决什么问题？

其中第四步，对各元素布局进行调整，我们具体采用较详细的布局计算方案，在计算banner布局特征时，我们采取每个元素的最大外接矩形来表征该元素的位置及大小，其中常用的一些布局特征为对齐、间距、比例、平衡及视觉重心。例如对齐，元素间是否具有良好的对齐是布局的一个重要审美标准，布局整齐的banner往往更受用户欢迎。对于对齐方式，我们定义了三种对齐方式：

通过单点算法技术引入分会场设计的创新方式，设计效率得到大大的提高，机器每0.5s转移一张结果，代替人工重复且低效的劳动，通过细致规则的积累，色彩转移的结果也尤为丰富，再也不用担心诸多分会场的“撞色”问题。

感谢：

二是色彩转移过程与人工设计之间衔接与流程，我们采用是系统设计思维，将分会场元素拆解成简便的和可组合的形态，外包拿到色彩转移结果及其他元素仅需进行拼装组合，便可实现海量分会场设计的高效完成。