赞助商
立即赞助

实战案例!阿里巴巴如何用人工智能做Banner 设计?

Banner设计3年前 (2021)发布 流光
3.3K 0 0

近年来,设计圈有两大趋势不容忽视,是人工智能、神经网络、深度学习无疑是时下最热门的科技名词,「人工智能设计」个词语在设计圈也深受追捧,我们也看到越来越的初创司勾画出自己的「人工智能设计」蓝图;二是在阿里巴巴中台战略的背下,设计提效又次推动着设计思的变革,设计师们不仅仅需要出地完成业务需求的设计,同时还需要思考设计的价值。人工智能何在我们样的人文语境去理,何去启创意的工?设计师为人与机器的翻译官,又何用新的技术手段更的决业务问题,赋能业,扩展设计价值?

销大促是电商最常用快速出货手段,于 CBU 亦是如此。321上新季、518备货季、727买手节、96拿货节、1220商节、1.18年货节、328商节……大促频率如此高,量级也在呈倍数级增长,如最近328商节,分会场页数量700张+,BANNER 数量17000张+,如需在等紧急时内完成,销设计过程势必生两个严峻问题:其、我们为了预留时进页及 BANNER 拓展工作,被严压缩往往是设计师创意时;其、量级大背后意味着更多员投入以及费用提升,公司将投入越来越大。

实战案例!阿里巴巴如何用人工智能做Banner 设计?

我们问题领域进探索,想要解决以上两大难题,核心在于优化会场页拓展及 BANNER 尺寸拓展两部分低平复设工作,提升设计效率,压缩设计期,为设计师保留充裕创意时,也为公司节省力物力。我们尝试从单技术创新结合、设计算法化支撑自动化工具等多逐步进尝试,动工作工具化及智能化,结合近年来项目实践经验,和大家起探讨下我们过程临问题及思考。

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

设计师在设计过程进着诸多大小不决策及创意,这是算法技术很难替代,如谈到是创造性合作,设计师与算法起工作以解决问题时,我们看到了算法驱动设计很多案例和它明显潜力,算法可以改良及助力我们日常设计工作,在1220大促,我们与 iDst 智能技术实验-视觉计算团队合作色转移项目恰恰可说明这。

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

在销设计过程,页拓展工作是困扰我们较大难题,大促分会场页数量到700张+量级时,需要几十位学花费近个月时进设计,这个期会严影响大促进度及上线时。如暂时法做到分会场设计流程品化,那么是否可以利用技术替代设计过程某些环节及步骤呢?我们将分会场设计工作进拆解,大致分为色拓展、品组合设计、文案改几大步骤,其不乏复性劳动高、可以过技术去取代,了解到 iDst 智能技术实验-视觉计算团队有相成熟色转移技术,我们希望尝试过色转移技术代替分会场设计色拓展环节。

2. 什么是色彩转移?

背景上色算法技术(本文称色转移),即输入背景图片,输入基于 HSL 色模型系列配色规则(含区组合、度数隔等),以0.5s输出张结速度输出几百个背景配色(即几百 HSL 颜色值应背景上色结)。比如背景主体色是 A,其配色案,想转移成主体色 B,那么原背景个像素颜色都按照 A 色到 B 色相应进值。HSL 值规则越细,生成结越多效越丰富。

实战案例!阿里巴巴如何用人工智能做Banner 设计?

3. 如何进行创新结合?

与彩转移的创新结合有两个核心关键点,一是设计与技术产生碰撞的融合,我们在彩转移试验程中,结果并非一直设计师所预期,首先技术有暂时的局,例转移结果遇到的渐变处转移欠佳,衔接不自或包含诸,设计师常用的动感模糊及高斯模糊等手段能受,则需要迎合技术去做一设计优化及富的取舍;其次机器是缺乏认理能力,设计师需将想要现的效果抽象成 HSL 规则,试验的程往往也是反复曲折的,需要针对 BADCASE 进行分析,推断规则的问题点,对其进行优化,通反复试验,最终使得生成结果达到上标准。二是彩转移程与人工设计之间衔接与流程,我们采用是系统设计思,将分场元素拆成简便的和组合的形态,外包拿到彩转移结果及其他元素仅需进行拼装组合,便现量分场设计的高效完成。

实战案例!阿里巴巴如何用人工智能做Banner 设计?

通单点法技术引分场设计的创新方式,设计效率得到大大的提高,机器每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 设计元素及布结构抽象

我们要将 banner 的版式特征炼为可量的客观布规则,首先将 banner 要素抽象为本(title)、元素(element)、背景(background) 、标签(tag)及 logo 五大类,中 logo 及 tag 为务性元素,布特征会随务场景需要而有变。进而再确定各元素的大小、布位置、尺寸例和元素间系,抽象通性布。

实战案例!阿里巴巴如何用人工智能做Banner 设计?

多尺寸算法逻辑流程及布局计算

我们将布局特征归纳为三层:

  • 基础局逻辑,最基础通用的局特征,对每个尺寸比例区间的 banner,我们统计一个对应的基础局逻辑;
  • 风格布局特征,需要从主模板提取,用来表征主模板些布局特,在多尺寸布局时需要继承,比如齐、距、比例、平衡、称等。
  • 务布逻辑,一些务场景强制需要的布特征,如一些 logo、tag 的布。

进步制定了个智能多尺寸生成算法逻辑流程,如下图所示。

实战案例!阿里巴巴如何用人工智能做Banner 设计?

其第四步,各元素布局进调,我们具体采用较详细布局计算案,在计算 banner 布局特征时,我们采取个元素最大接矩形来表征该元素位及大小,其常用些布局特征为齐、距、比例、平衡及视觉心。例如齐,元素是否具有良好齐是布局个要审美标准,布局齐 banner 往往更受用户欢迎。

对于对齐方式,我们定义了种对齐方式:左对齐;中对齐;右对齐,我们采简单的启发式探索来计算对齐。

实战案例!阿里巴巴如何用人工智能做Banner 设计?

实战案例!阿里巴巴如何用人工智能做Banner 设计?

智能多尺寸过后续算法开发,不断进测试及迭代,完成元素贴边、元素剔除、切图区域、合图晰度等多项问题优化,并算法与前端完成接,最终实现线上流程跑,过系列运及广已经实现 CBU 全站覆盖,在近年时内成了 CBU 设计师及运必不可少工作神。智能多尺寸生成套 banner 仅需2分钟,代替工天(按标准工时完成20个套计算),效率提升200倍+。从2017年4月至2018年2月使用数据来看,过智能多尺寸共为团节省设计费用200+。

三、与鹿班智能化平台合作寻求价值深化

自动化设计工具基本是从成本、效率、收益等度切入,赋能业务或生商业变现,我们不满足单技术及自动化工具,希望结合此前工具化效率提升想法,寻求智能化平台合作为我们解决更多维度问题。希望过场景拓展,、工具、平台能有更多关联,而在有了场景后则开始生大量内容,我们可以将这些内容沉淀下来进复用与再组织,并在个链路进投放连接,最终获宝贵数据资,数据资又能更多赋能我们创意设计工作。在 CBU328商节我们与鹿班智能设计进了初步合作,进步进场景拓展及价值深化。

此前我们在页面及 BANNER 尺寸拓展方面做过的诸多探索,均带来效率的升,但大多数是断点的,我们希望鹿班可帮助我们实现大促设计工作的线性串联,实现页面设计到尺寸拓展一式在线智生成,并借此机会往机器智创方面再迈进一点点。机器智生成效果基于原始数据的习,因此原始数据的设计显得尤为重要。设计师需将设计进行结构、特征量,可分为两大分,一分是定位设计各元素的空间系,中包括字、体、标识、修、背景5大类元素,需要设计及定义各元素的大小、方向及形状;另一分是定义设计各元素的色彩质感系,中包括色彩、纹及质感,还需定义各色彩层的例系及色彩层之间的位置系。有了较丰富的设计数据,再在鹿班设计师端进行模上传,将视觉数据的分包括构图模、配色模、案模进行数据输入,进行智生成,将数据视觉,设计师再根据生成结果进行人工评测。

实战案例!阿里巴巴如何用人工智能做Banner 设计?

实战案例!阿里巴巴如何用人工智能做Banner 设计?

想要实现页设计到尺寸拓展站生成,其最核心是拓色及拓版打这关键技术难,在和鹿班智能设计合作,我们最终实现了大促页设计到尺寸拓展站在线智能生成,并为大促定制了特有流程,进步触碰智能图像时代。在此 CUB328商节大促试,也有了很好业务落地,内完成了近张 BANNER 智能生成,在确保内容丰富性时,大大提高了设计效率、节省设计费用。

展望

工智能设计是个不可阻挡时代,我们探索仅仅是迈出短短小步,我们仍然不忘初心,致力于过利用新智能化技术手段更好解决业务问题,服务商业,扩展设计价值。我们期待是,设计和技术能够真正做到融合,设计师将更多精力放在创造、创意,以及理解用户层,而将数据、计算、学习交由,立个良好共生关系,让大家可以真正改变自己工作。希望我们起加油,创变未来,拥抱智能化设计时代!

感谢

感谢色转移项目 iDst 智能技术实验-视觉计算团队禾朔及艾劼鼎力协助,感谢智能多尺寸项目不饱以及算法秉恕、晨皋及前端刍牧齐心协作,感谢​328大促项目乐乘及鹿班项目组大力支持!期待以后可以碰撞出更多花!

感谢真、项虹的全支持与悉心引导,感谢卢俊的全程指导与相助,感谢创意设计组宋义、大薛、渔、韩夏等同在项目落地过程中的通协作!

欢迎关注「阿巴巴UED」的公众号:

实战案例!阿里巴巴如何用人工智能做Banner 设计?

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

一个好的设计,要兼顾可视性和易通性。所谓可视性,就是让用户知道这个产品怎么用,怎么操作才是合理的。所谓易通性,就是要...
交互设计
用户测试其实相当于在收集用户对某一个功能,或流程的行为反馈数据以及满意度指标数据,但很多时候你的用户测试是无效的,那...
可用性测试
编者按:文章用诸多案例讲解关于「峰终定律」的概念、应用、改善用户体验的步骤。 一、什么是峰终定律 峰终定律是由诺贝尔奖...
入门
作为设计师,你是否遇到过这些问题:一直都在做产品的体验优化设计,但怎么知道是否真的有所改进?有 A、B 两种设计方案,要...
入门
@Daidai丶呆 :许久没发文(虽然距离上一篇文章不过 20 天时间),这阵子,我依旧把工作之余的所有时间都放回在了阅读上。18 ...
经验分享
在做设计时,经常为该使用网格还是列表所纠结,一直想找资料来深入了解下这两者的区别。为此呢,我找到了这篇文章,文章作者...
APP界面
「猜你喜欢」当然还有很多词汇可以形容,比如:为您推荐、为您精选……经常在移动端购物的剁手一族们肯定都不会陌生。它似乎无...
京东设计中心
随着技术的发展,我们常常会觉得,如果想要做好产品必须遵循新的规则。实际上,这并不是真的。人类本身并没有我们想象中变化...
Eugen Eşanu