触碰智能图像时代 —— 营销设计中的智能化初探

原标题：触碰智能图像时代 —— 营销设计中的智能化初探这是一篇干货十足的实战案例，一起来看阿里巴巴如何用人工智能做Banner 设计，enjoy~近年来，设计圈有两大趋势不容忽视：人工智能如何在我们这样的人文语境去理解，如何去启发创意性的工作？设计师作为人与机器的翻译官，又如何利用新的技术手段更好的解决业务问题，赋能商业，扩展设计价值？营销大促是电商最常用的快速出货手段之一，对于CBU亦是如此。321上新季、518备货季、727买手节、96拿货节、1220商人节、1.18年货节、328商人节……大促频率如此之高，量级也在呈倍数级增长，如最近一次的328商人节，分会场页面数量达700张+，BANNER数量达17000张+，如需在同等紧急时间内完成，营销设计过程中势必产生两个严峻的问题：我们对问题领域进行探索，想要解决以上两大难题，核心在于优化会场页面拓展及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极具丰富的特性，使我们的切入遇到了重重困难：（1）中文banner设计复杂，从整体构图来说，有左文右图及右文左图，居中结构，还包括复杂的图文混排；从文案排版形式上说，更不胜枚举，其中包含字体变形、文案倾斜、竖排版、中文书法字体自由排版、文案与形状组合成嵌套关系、构图常用装饰性图形进行点缀等等，这无疑给智能多尺寸增加了极大的难度；（2）集团内部也有其他多尺寸相关产品，但主要是针对事先内置的banner模板，穷举了常见尺寸的布局参数，当用户选择某一内置banner，并选择目标尺寸之后，该系统会在事先生成的各种尺寸的布局参数中选择与该目标尺寸比例和尺寸最相近的的尺寸的布局参数，生成banner并输出。我们希望仅通过上传一个创意banner模板，便可输出所有其他尺寸banner，