[设计思维][人工智能]
在2015年之前的淘宝“双11”,商品推荐都是人来控制的,由运营决定给用户推荐什么产品,而2015年的“双11”,是阿里第一次基于算法和大数据,为用户做大规模的、个性化的商品推荐,叫做“千人千面”,是阿里流量分发模式很大的升级和转型。“双11”结束后,设计、工程和算法团队聚在一起,商量下一年要做些什么。我们当时想,我们已经做到的个性化推荐,但都是基于白底图商品推荐,能不能往前迈一步,让强营销导向的广告资源位的设计也“千人千面”呢?从纯商品个性化跨到广告资源位个性化,中间几个关键的技术点打通之后,我们就着手做了。
第一点:图像算法“抠图”。因为高质量的广告设计需要把商品图片抠出来,放到精美的设计主题里。以前都是设计师给商品抠图后再做设计,现在我们用机器做海量设计,就得让机器来做这个事情。我们跟阿里搜索部门做图像切割的算法团队合作,处理海量的商品自动抠图。
第二点:把设计变成“数据”。一张广告设计图片是像素组成的“信息”,不是“数据”。我们利用机器把商品、文字和设计主题进行在线合成,这样每张广告图片就带上了商品信息,可以根据消费者偏好进行个性化投放。所以鲁班产品上线初期,我们请设计师根据活动主题做了大批量风格确定的模板,证明了这种模式投放效果可以大幅提升点击率。
第三点:让机器学习设计。靠“人肉设计模板”度过了第一个阶段,但长远发展角度我们必须让机器来做设计。大概是16年8月份开始的,有一位之前负责淘宝“拍立淘”(在淘宝内通过图片搜索找同款,随拍随找)产品开发的图像算法专家加入进来,主导整个智能设计的算法框架。
因为我们在做一件很新的事情,行业里没有什么参考对象,只能不断试错。刚开始的时候,我们的数据不太够,就制定了很强的设计规则去控制,结果就是机器要么跑不出设计结果,要么设计出来的结果很失控。设计是有无穷可能性的,靠弱数据强规则必然走不通。意识到这一点以后,我们就集中精力去解决数据问题,把内部设计师电脑里的设计图和供应商的设计图都收集过来。我们有自己开发的设计协同工具“设计板”,有点类似Slack(一款协作办公应用),但是是专门用于设计协同的。这样才能方便我们大批量、规模化的找到这些数据。因为收集过来的数据是很杂乱的。比如“双11”期间“魔性”的设计风格跟无印良品这种“性冷淡”风格差异很大,这是完全不一样的品牌调性和设计需求。我们花了很大的力气去整理和建立了一套数据体系去管理设计数据,让机器生产出更匹配的结果。
第一步:让机器理解设计是什么构成的。我们通过人工数据标注,对设计的原始文件中的图层做分类,对元素做标注。设计专家团队也会提炼设计手法和风格。通过数据的方式告诉机器这些元素为什么可以放在一起,我们把专家的经验和知识通过数据输入。这部分核心是深度序列学习的算法模型。
第二步:建立元素中心。当机器学习到设计框架后,需要大量的生产资料。我们会建立元素库,通过机器做图像特征提取,然后分类,再通过人工控制图像质量以及版权问题,我们买了有版权的图库,也是希望从一开始就避免版权方面的纠纷。
第三步:生成的系统。原理有点像AlphaGo下围棋。我们在设计框架上构建起虚拟画布,类似棋盘,生成的系统把元素中心的元素往棋盘放,在这里我们采用了“强化学习”,就好像你在家里放一台扫地机器人,让它自己跑,跑个几圈,它自己会知道哪里有障碍要避开。在强化学习的过程中,机器参考原始样本,通过不断尝试,得到一些反馈,然后从中学习到什么样的设计是对的、好的。
第四步:评估的系统。我们会抓取大量设计的成品,从“美学”和“商业”两个方面进行评估。美学上的评估由人来进行,这方面有专业众包公司;商业上的评估就是看投放出去的点击率浏览量等等。
“双11”的风格是比较确定而且需要严格执行,所以设计师制作了很多“双11”特定风格的固定模板。机器在这个基础上,把调整尺寸这些行为进行优化,节省了尺寸拓版的人力。用机器生成亿级设计从而带来商业效果提升,总体来说也是一次非常成功的应用实践。我想未来的“双11”仍然会是设计师带着机器做设计的模式,重大活动中设计机器是提升效率的助理角色。
引用阿里CEO的话——“鲁班是数据业务化的代表”,之前我们有很多数据,但都是闲置的或者利用效率不高的,比如海量的商品图,而“鲁班”把数据变成了业务,通过大规模设计加精准投放,提高每个广告位的资源效率,带动了流量的效率和业务价值,点击率是翻倍的,收益也接近翻倍。人员倒没有出现缩减,只是做的事情有调整了,要学习这套系统,学习如何训练机器,同时在美学方面做把控。
一是要让智能设计去影响阿里设计生态,让“鲁班”能服务百万量级的商家和设计师。一开始在内部推进“鲁班”的时候,我们也面临过阻力。传统的方式就是,设计一个banner,放很多商品,显得很热闹,而“鲁班”做出来的banner上就是单件商品,但与消费者是相关的,因为是基于算法精准推荐的,是你会感兴趣的,只是这样就要把商品放大、显眼,可能在设计上就不够美。但最后,我们让数据说话,确实后者给业务带来了很好的增长。这个教育过程是比较长的,在内部我们可以做,但面对百万商家和设计师如何去做?这是我们的挑战。
二是数据算法本身的持续升级。AI行业每年都会有很大的变化,新的技术不断涌现出来,如何跟上最新的技术?这也是我们始终不能松懈的点。
用AI绘制孟菲斯风格的Banner1.孟菲斯风格:一种后现代设计风格,设计理念是设计一种生活形式、设计没有固定的风格、具有多边性,用于平面、室内设计、服装设计、产品设计,特点:
(1)用色简单明快
(2)平面上突破空间感、突出立体感(洞、三角体),立体上展示平面
(3)点线面元素的搭配、重组,具有趣味性,撞色搭配
2.波浪线的画法:钢笔画一条直线—效果—扭曲和变换—波纹效果—勾选预览、平滑—调整大小、数量
3.路径转换为图形:两次扩展外观
4.制作立体文字:复制两层文字—使用钢笔工具连接对应点
5.Alt键+左/右键调整字间距
使用工具:符号工具+图案工具
一、符号工具(类似散点画笔)
1.使用系统默认的符号:窗口—符号—打开库—选择一种图案—单击工具栏的喷枪工具—选中所喷图案—选择位移工具可拖动图案
2.自制符号:绘制符号图案—将其拖入符号窗口—使用收拢工具、缩放工具、旋转工具(随机角度)、符号着色器(减色)、滤色工具(减透明度)
3.更改图形样式:窗口—图形样式
4.扩展后可单个编辑图形
二、图案工具(平铺)
全选所有元素—对象—图案—建立—确定
可选择网格、砖型(按行、按列、高度、宽度)、重叠(无缝拼贴效果)
新建一个形状—点击图案—双击图案可继续编辑
背景被锁定—调整好形状的位置后按Ctrl+K—勾选“变换图案拼贴”—移动形状图案背景无变化
制作网页常用的设计工具有哪些，分别有什么特点DreamweaverCS4:网页布局、制作;Html&Css简介;网站管理与维护、上传与下载;
Fireworks:美工设计、网页配色;Banner的制作;常见网页动画制作、网页布局;
FlashCS4:经典网页动画、广告、片头、贺卡设计与分析;MTV制作、交互式网站简介;
PhotoshopCS4:Photoshop操作基础、图像优化处理、经典实例分析与制作、gif动画、广告gif图片
IllustratorCS4:广告招牌制作、灯箱广告、服装广告设计、企业徽标设计、名片设计
三大构成:平面构成、色彩构成、立体构成
Photoshop美工及网页配色、排版设计、网站框架美工设计、网页logo网页设计、banner设计;
Illustrator网页设计、网页字体设计、网页规划设计
软件特点
div+css,javascript,这些是代码方面的。另外,要会几种软件dreamweaver、photoshop、firework、flash。
dreamweaver是可视化的网页布局软件,ps、fr和fl是网页里素材的制作软件。而div+css
是负责结构的,javascript是负责制作互动的