Date 2026-05-11 10:23:16
近年来，设计界有两大趋势不容忽视，一是人工智能、神经网络、深度学习无疑是当今最流行的科技术语，「人工智能设计」这个词在设计界也很受欢迎，我们也看到越来越多的初创公司勾画自己「人工智能设计」蓝图；第二，在阿里巴巴中台战略的背景下，设计效率再次促进了设计思维的变化。设计师不仅需要优秀地完成业务需求的设计，还需要思考设计的价值。人工智能如何理解我们的文化背景，如何激发创造性的工作？作为人和机器的翻译，设计师如何利用新的技术手段更好地解决业务问题，实现业务，扩大设计价值？
营销促销是电子商务最常用的快速出货手段之一 CBU 也是如此。321新季、518备货季、727买家节、96拿货节、1220商人节、1.18年商人节、328商人节...大促销频率如此之高，量级也呈倍数级增长。比如最近的328商人节，分会场页面数量达到700+。BANNER 1.7万+，如果需要在同样的紧急时间内完成，营销设计过程中必然会出现两个严重的问题：一是为了保留页面和时间 BANNER 扩大工作，往往是设计师的创意时间；其次，大规模的背后意味着更多的人员投资和成本的增加，公司将投资越来越多。
我们探索问题领域，解决上述两个问题的核心是优化场地页面的扩展和 BANNER 低水平重复建设工作的尺寸扩展，提高设计效率，压缩设计周期，为设计师保留充足的创意时间，为公司节省人力物力。我们试图逐步尝试单点技术的创新组合，设计算法化支持自动化工具，以促进工作模式的工具化和智能化。结合过去一年的项目实践经验，我们将与您讨论我们在这个过程中面临的问题和想法。
在设计过程中，设计师做出了许多不同大小的决策和想法，这些决策和想法很难被算法技术所取代。然而，如果我们谈论创造性合作，当设计师与算法一起工作以解决问题时，我们可以看到许多算法驱动设计的案例及其明显的潜力。算法可以改进和帮助我们的日常设计工作，在1220年的推广中，我们与我们合作 iDst 机器智能技术实验室-视觉计算团队合作的色彩转移项目正好说明了这一点。
在营销设计过程中，页面扩展是困扰我们的最大问题之一。当分支机构的页面数量达到700+时，数十名外包学生需要花费近一个月的时间进行设计，这将严重影响大促销和在线时间。如果分支机构的设计过程暂时无法产品化，我们能否在设计过程中使用技术取代某些环节和步骤？我们将分解分支机构的设计工作，大致分为色彩拓展、产品组合设计和文案修改几个步骤，其中许多步骤具有重复性，可以通过技术替代 iDst 机器智能技术实验室-视觉计算团队拥有相对成熟的色彩转移技术，我们希望尝试通过色彩转移技术取代分会场设计的色彩扩展。
背景重色算法技术(本文称为色彩转移)，即基于背景图片输入背景图片 HSL 色彩模型系列配色规则(包括间隔组合、度数间隔等。)以每0.5s输出一个结果的速度输出数百个背景配色(即数百个 HSL 颜色值对应的背景重上色结果)。例如，背景的主要颜色是 A，其中一种配色方案想要转移到主色 B，所以原始背景中每个像素的颜色都是根据 A 色到 B 相应的色差。HSL 值规则越细，产生的结果越多，效果越丰富。
与色彩转移的创新相结合有两个核心关键点。一是设计与技术碰撞后的融合。在色彩转移试验过程中，结果并不总是像设计师预期的那样。首先，技术会有暂时的局限性，比如转移结果遇到的多色渐变处转移不好，连接不自然或者包含很多杂色。设计师常用的动态模糊和高斯模糊可能是有限的，所以他们需要迎合技术来做一些设计优化和丰富的选择。其次，机器缺乏认知理解能力，设计师需要将想要实现的效果抽象成 HSL 配色规则，试验过程往往是反复曲折的，需要针对 BADCASE 通过反复试验，对规则的问题点进行分析、推断、优化，最终使生成结果达到在线标准。二是色彩转移过程与人工设计之间的联系和过程。我们采用系统设计思维，将分场元素分解成简单、可组合的形式。外包获得色彩转移结果和其他元素，只需组装和组合即可实现大量分场设计的有效完成。
通过单点算法技术引入分会场设计的创新方法，大大提高了设计效率。机器每0.5s转移一个结果，而不是人工重复和低效的劳动。通过细致规则的积累，色彩转移的结果特别丰富，不用担心很多分会场。「撞色」问题。颜色转移在 CBU1220大促销和328大促销都得到了很好的应用。在同一周期内，当设计师数量保持不变时，分会场页面的完成数量从300+增加到600+1220，设计效率提高了100%以上；同时，经过两次大促销，分会场从复杂的模板调整设计到高效组装。该单点技术的应用为公司节省了25万+的设计成本。
除了单点技术的创新结合外，在设计过程中，我们还经常考虑设计的目的、过程和结果是否可以量化、算法化和数据化？通过对设计模式的细化和抽象，规则和算法是否可以支持自动化设计工具，通过智能生成传统设计，从而解放设计师从繁重的传统设计任务中，并投资于更有价值的设计项目。我们和 UBNNER 智能多尺寸工具与项目组合作，恰恰体现了我们的探索。
Banner 是营销设计中常见的设计形式，banner 生产面临着一个很大的痛点，即各种不同尺寸的扩展。以 CBU 以网站为例，运营推出站内营销活动，设计创意 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 用户往往更受欢迎。
对于对齐，我们定义了三种对齐：左对齐；中间对齐；右对齐，我们使用简单的启发性探索来计算对齐。
智能多尺寸通过后续算法开发，不断测试迭代，完成元素边缘优化、元素去除、切割区域、合图清晰度等问题，算法与前端对接，最终实现在线流程运行，通过一系列运行和推广实现 CBU 在过去的一年里，全站的覆盖已经成为 CBU 设计师和操作必不可少的工作神器。智能多尺寸生成一套 banner 用2分钟代替一整天的劳动力（按标准工作时间计算20套），效率提高200倍+。根据2017年4月至2018年2月的使用数据，该集团通过智能多尺寸节省了200万+的外包设计成本。
自动化设计工具基本上是从成本、效率、收入、授权业务或商业实现的角度出发，我们不满足单点技术和自动化工具，希望结合以往提高工具效率的理念，寻求智能平台合作，为我们解决更多维度的问题。希望通过场景的扩展，人、工具、平台可以有更多的联系，在场景开始产生大量的内容后，我们可以沉淀这些内容重用和再组织，在整个链接中，最终获得宝贵的数据资产，数据资源可以更多地授权我们的创意设计工作。在 在CBU328商人节期间，我们与鹿班智能设计进行了初步合作，进一步推动了场景拓展和价值深化。
我们以前在页面和页面上 BANNER 尺寸扩展做了很多探索，可以带来效率提高，但大多数是断点，我们希望鹿班能帮助我们实现线性系列推广设计工作，实现页面设计到尺寸扩展一站式在线智能生成，并借此机会进一步推进机器智能创造。基于原始数据学习的机器智能生成效果，因此原始数据的设计尤为重要。设计师需要结构化和量化设计的特点，可以分为两部分，一部分是定位设计元素的空间关系，包括文本、主题、标志、装饰、背景，需要设计和定义元素的大小、方向和形状；另一部分是定义设计元素的颜色纹理关系，包括颜色、纹理和纹理，以及颜色层之间的比例关系和位置关系。设计数据丰富，然后在鹿班设计师端上传模板，输入构图模型、配色模型、文案模型等视觉数据部分进行数据输入，智能生成，视觉数据，设计师根据生成结果进行人工评估。
为了实现页面设计到尺寸扩展一站式生成，其核心是扩展颜色和扩展版本通过这一关键技术困难，在与鹿班智能设计合作中，我们最终实现了页面设计到尺寸扩展一站式在线智能生成，并定制了独特的流程，进一步触及智能图像时代。在这个时候 在CUB328商人节大促试点中，也有不错的业务落地，一周内完成了近万张 BANNER 在保证内容丰富性的同时，智能生成大大提高了设计效率，节约了设计成本。
人工智能设计是一个不可阻挡的时代。我们的探索只是一小步。我们仍然不忘初衷，致力于利用新的智能技术更好地解决业务问题，服务业务，扩大设计价值。我们期待的是，设计和技术可以真正整合。设计师更注重创造力、创造力和理解用户，将数据、计算和学习交给机器，建立良好的共生关系，让每个人都能真正改变自己的工作方式。我希望我们能共同努力，创造未来，拥抱智能设计时代！
感谢色彩转移项目 iDst 机器智能技术实验室-视觉计算团队合朔和艾杰的全力协助，感谢智能多尺寸项目的不足，以及算法原谅、晨皋和前端牧羊人的共同合作，感谢328大促销项目中乐成和鹿班项目组的大力支持！我期待着将来会有更多的火花！
感谢杨震和项红的全力支持和精心指导，感谢陆军的全过程指导和帮助，感谢创意设计团队宋毅、大雪、玉轩、韩霞等学生在项目实施过程中的全力合作！
欢迎关注「阿里巴巴UED」微信公众号：微信公众号：
「用人工智能帮助你提高效率」
“自动生成调色板！配色也可以用人工智能完成”“这个免费图库不仅有5万多个，还可以用人工智能帮你挑出最好的！”“人工智能字体来了？！阿里×世界上第一个汉仪人工智能中文字库出来了！"================推荐明星栏目================
优秀教程网: UiiiUiii.com 它是一个优质的中文教程网站，共享了大量的PS、AE、AI、C4D和其他中文教程也为零基础设计爱好者准备了亲密的知识树专栏。打开免费自学的新篇章，根据我们的专栏一步一步地学习，你可以快速开始并产生酷的视觉效果。
设计导航：国内最受欢迎的设计网站导航，设计师必备： http://hao.uisdc.com