智能设计-阿里巴巴Banner设计

阿里巴巴Banner设计的核心在于优化会场页面拓展及Banner尺寸拓展两部分低水平重复建设工作，提升设计效率，压缩设计周期，为设计师保留充裕的创意时间。
在这里插入图片描述

色彩转移与页面拓展设计

分会场设计工作大致分为：色彩拓展、产品组合设计、文案修改。分会场设计流程不能产品化，但是色彩转移技术可以代替分会场设计中色彩拓展的环节。

色彩转移

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

页面拓展设计与单点算法技术的创新结合

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

设计与技术产生碰撞后的融合
- 技术会有暂时的局限性
  多色渐变处转移欠佳，衔接不自然或包含诸多杂色，设计师常用的动感模糊及高斯模糊等手段可能受限，需要迎合技术去做一些设计优化及丰富性的取舍。
- 机器缺乏认知理解能力
  设计师需将想要实现的效果抽象成HSL配色规则，需要针对BADCASE进行分析，推断规则的问题点，对其进行优化，通过反复试验才能使得生成的结果达到上线标准。
色彩转移与人工设计之间衔接与流程
采用系统设计思维，将分会场元素拆解成简便的和可组合的形态，外包拿到色彩转移结果及其他元素仅需进行拼装组合，便可实现海量分会场设计的高效完成。

在这里插入图片描述

效果

色彩转移在 CBU1220大促及328大促中都得到很好的应用，在同等周期内，设计师数量不变的情况下，分会场页面完成数量由原来大促的300张+到1220大促的600张+，设计效率提升100%以上；同时两次大促下来，分会场从复杂的模板调整设计到高效拼装，这一单点技术的应用便为公司节省了设计费用25万+。

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

设计抽象与智能多尺寸

智能多尺寸难点

Banner是营销设计中常见的设计形式，banner的制作的痛点即多种不同尺寸的拓展。多尺寸的拓展是一种机械化、重复性的劳动，如果能够由机器代替，用机器进行智能排版布局，将极大提高banner的制作效率，同时节省大量的人工成本。
难点：

banner设计复杂，给智能多尺寸增加了极大的难度。
仅通过上传一个创意banner模板，便可输出所有其它尺寸banner，无先例可循，没有有现成的算法技术或者框架可以参考。相关产品，对事先内置的banner模板，穷举了常见尺寸的布局参数，当用户选择某一内置banner，并选择目标尺寸之后，该系统会在事先生成的各种尺寸的布局参数中选择与该目标尺寸比例和尺寸最相近的尺寸的布局参数，生成banner并输出。
智能多尺寸在可以实现机器生成的同时，仍然保留一定的设计丰富性，不同的风格、构图等等，避免因迎合技术导致设计过于单一和简化。

设计的提炼、抽象及算法化

抽象banner多尺寸的共性，平衡算法通用性与特性，选择解决问题的最佳解决方案。

banner业务特征提炼
通过CBU日常销售1000余张banner的分析，发现其中80%以上在设计上采用左右结构，将此中结构的主模板作为优先解决的对象，降低机器处理的复杂度。分析了现有站内90个+的营销尺寸，共计数千张banner，统计常用的尺寸比例。绘制尺寸比例的散点图，通过数据值的分布和数据点的分簇，将尺寸大致分为三大类：纵向尺寸、横向尺寸及横幅尺寸。
banner设计元素及布局结构化抽象
将banner的版式特征提炼为可以量化的客观布局规则，首先将banner要素抽象为文本（title）、元素（element）、背景（background）、标签（tag）及logo五大类，其中logo及tag为业务性元素，布局特征会随业务场景需要而有所变化。进而再确定各元素的大小、布局位置、尺寸比例和元素见关系，抽象其通用性布局。
多尺寸算法逻辑流程及布局计算
布局特征归纳为三层：
- 基础布局逻辑，最基础通用的布局特征，对于每个尺寸比例区间的banner，统计一个对应的基础布局逻辑；
- 风格布局特征，需要从柱模板中提取，用来表征主模板的一些布局特点，在多尺寸布局时需要继承，比如对齐、间距、比例、平衡、对称等。
- 业务布局逻辑，一些业务场景强制需要的布局特征，比如一些logo、tag的布局。

智能多尺寸生成的算法逻辑流程

整个智能多尺寸生成的算法逻辑流程，如下图所示：
在这里插入图片描述

对各元素布局进行调整，在计算banner布局特征时，采取每个元素的最大外接矩形来表征该元素的位置及大小，其中常用的一些布局特征为对齐、间距、比例、平衡及视觉重心。
对齐方式，定义了三种对齐方式：左对齐、居中对齐、右对齐，采用简单的启发式搜索来计算对齐。

智能多尺寸生成效果

在这里插入图片描述
智能多尺寸通过对算法的不断开发、测试、迭代，完成元素贴边、元素剔除、切图区域、合图清晰度等多项问题优化，生成一套banner仅需2分钟，代替人工一整天（按标准工时完成20个一套计算），效率提升200倍+，从2017年4月至2018年2月的使用数据来看，通过智能多尺寸共为集团节省外包设计费用200万+。