阿里U一點(diǎn)：觸碰智能圖像時(shí)代-營(yíng)銷(xiāo)設(shè)計(jì)中的智能化初探

近年來(lái)，設(shè)計(jì)圈有兩大趨勢(shì)不容忽視，一是人工智能、神經(jīng)網(wǎng)絡(luò)、深度學(xué)習(xí)無(wú)疑是時(shí)下最熱門(mén)的科技名詞，“人工智能設(shè)計(jì)”這個(gè)詞語(yǔ)在設(shè)計(jì)圈也深受追捧，我們也看到越來(lái)越多的初創(chuàng)公司勾畫(huà)出自己的“人工智能設(shè)計(jì)”藍(lán)圖；二是在阿里巴巴中臺(tái)戰(zhàn)略的背景下，設(shè)計(jì)提效又再次推動(dòng)著設(shè)計(jì)思維的變革，設(shè)計(jì)師們不僅僅需要出色地完成業(yè)務(wù)需求的設(shè)計(jì)，同時(shí)還需要思考設(shè)計(jì)的價(jià)值。人工智能如何在我們這樣的人文語(yǔ)境去理解，如何去啟發(fā)創(chuàng)意性的工作？設(shè)計(jì)師作為人與機(jī)器的翻譯官，又如何利用新的技術(shù)手段更好的解決業(yè)務(wù)問(wèn)題，賦能商業(yè)，擴(kuò)展設(shè)計(jì)價(jià)值？

營(yíng)銷(xiāo)大促是電商最常用的快速出貨手段之一，對(duì)于CBU亦是如此。321上新季、518備貨季、727買(mǎi)手節(jié)、96拿貨節(jié)、1220商人節(jié)、1.18年貨節(jié)、328商人節(jié)……大促頻率如此之高，量級(jí)也在呈倍數(shù)級(jí)增長(zhǎng)，如最近一次的328商人節(jié)，分會(huì)場(chǎng)頁(yè)面數(shù)量達(dá)700張+，BANNER數(shù)量達(dá)17000張+，如需在同等緊急時(shí)間內(nèi)完成，營(yíng)銷(xiāo)設(shè)計(jì)過(guò)程中勢(shì)必產(chǎn)生兩個(gè)嚴(yán)峻的問(wèn)題：其一、我們?yōu)榱祟A(yù)留時(shí)間進(jìn)行頁(yè)面及BANNER拓展工作，被嚴(yán)重壓縮的往往是設(shè)計(jì)師的創(chuàng)意時(shí)間；其二、量級(jí)大背后意味著更多的人員投入以及費(fèi)用的提升，公司將入越來(lái)越大。

我們對(duì)問(wèn)題領(lǐng)域進(jìn)行探索，想要解決以上兩大難題，核心在于優(yōu)化會(huì)場(chǎng)頁(yè)面拓展及BANNER尺寸拓展兩部分低水平重復(fù)建設(shè)工作，提升設(shè)計(jì)效率，壓縮設(shè)計(jì)周期，為設(shè)計(jì)師保留充裕的創(chuàng)意時(shí)間，也為公司節(jié)省人力物力。我們嘗試從單點(diǎn)技術(shù)的創(chuàng)新結(jié)合、設(shè)計(jì)算法化支撐自動(dòng)化工具等多方面逐步進(jìn)行嘗試，推動(dòng)工作方式的工具化及智能化，結(jié)合近一年來(lái)的項(xiàng)目實(shí)踐經(jīng)驗(yàn)，和大家一起探討下我們過(guò)程中面臨的問(wèn)題及思考。

一、頁(yè)面拓展設(shè)計(jì)與單點(diǎn)算法技術(shù)的創(chuàng)新結(jié)合

設(shè)計(jì)師在設(shè)計(jì)過(guò)程中進(jìn)行著諸多大小不一的決策及創(chuàng)意，這是算法技術(shù)很難替代的，但如果談到的是創(chuàng)造性合作，當(dāng)設(shè)計(jì)師與算法一起工作以解決問(wèn)題時(shí)，我們看到了算法驅(qū)動(dòng)設(shè)計(jì)的很多案例和它的明顯潛力，算法可以改良及助力我們的日常設(shè)計(jì)工作，在1220大促中，我們與iDst機(jī)器智能技術(shù)實(shí)驗(yàn)室-視覺(jué)計(jì)算團(tuán)隊(duì)合作的色彩轉(zhuǎn)移項(xiàng)目恰恰可說(shuō)明這一點(diǎn)。

（一） 單點(diǎn)技術(shù)結(jié)合是為了解決什么問(wèn)題？

在營(yíng)銷(xiāo)設(shè)計(jì)過(guò)程中，頁(yè)面拓展工作是困擾我們較大的難題之一，當(dāng)大促分會(huì)場(chǎng)頁(yè)面數(shù)量達(dá)到700張+的量級(jí)時(shí)，需要幾十位外包同學(xué)花費(fèi)近一個(gè)月的時(shí)間進(jìn)行設(shè)計(jì)，這個(gè)周期會(huì)嚴(yán)重影響大促進(jìn)度及上線時(shí)間。如果暫時(shí)還無(wú)法做到分會(huì)場(chǎng)設(shè)計(jì)流程的產(chǎn)品化，那么是否可以利用技術(shù)替代設(shè)計(jì)過(guò)程中某些環(huán)節(jié)及步驟呢？我們將分會(huì)場(chǎng)設(shè)計(jì)工作進(jìn)行拆解，大致分為色彩拓展、產(chǎn)品組合設(shè)計(jì)、文案修改幾大步驟，其中不乏重復(fù)性勞動(dòng)高、可以通過(guò)技術(shù)去取代的，當(dāng)了解到iDst機(jī)器智能技術(shù)實(shí)驗(yàn)室-視覺(jué)計(jì)算團(tuán)隊(duì)有相對(duì)成熟的色彩轉(zhuǎn)移技術(shù)，我們希望嘗試通過(guò)色彩轉(zhuǎn)移技術(shù)代替分會(huì)場(chǎng)設(shè)計(jì)色彩拓展的環(huán)節(jié)。

（二）什么是色彩轉(zhuǎn)移？

背景重上色算法技術(shù)（本文稱之色彩轉(zhuǎn)移），即輸入背景圖片，輸入基于HSL色彩模型系列配色規(guī)則（包含區(qū)間組合方式、度數(shù)間隔等），以每0.5s輸出一張結(jié)果的速度輸出幾百個(gè)背景配色（即幾百種HSL顏色值對(duì)應(yīng)的背景重上色結(jié)果）。比如背景的主體色是A，其中一種配色方案，想轉(zhuǎn)移成主體色B，那么原背景中的每個(gè)像素的顏色都按照A色到B色相應(yīng)的進(jìn)行差值。HSL值規(guī)則越細(xì)，生成結(jié)果越多效果越豐富。

（三）如何進(jìn)行創(chuàng)新結(jié)合？

與色彩轉(zhuǎn)移的創(chuàng)新結(jié)合有兩個(gè)核心關(guān)鍵點(diǎn)，一是設(shè)計(jì)與技術(shù)產(chǎn)生碰撞后的融合，我們?cè)谏兽D(zhuǎn)移試驗(yàn)過(guò)程中，結(jié)果并非一直如設(shè)計(jì)師所預(yù)期，首先技術(shù)會(huì)有暫時(shí)的局限性，例如轉(zhuǎn)移結(jié)果遇到的多色漸變處轉(zhuǎn)移欠佳，銜接不自然或包含諸多雜色，設(shè)計(jì)師常用的動(dòng)感模糊及高斯模糊等手段可能受限，則需要迎合技術(shù)去做一些設(shè)計(jì)優(yōu)化及豐富性的取舍；其次機(jī)器是缺乏認(rèn)知理解能力，設(shè)計(jì)師需將想要實(shí)現(xiàn)的效果抽象成HSL配色規(guī)則，試驗(yàn)的過(guò)程往往也是反復(fù)曲折的，需要針對(duì)BADCASE進(jìn)行分析，推斷規(guī)則的問(wèn)題點(diǎn)，對(duì)其進(jìn)行優(yōu)化，通過(guò)反復(fù)試驗(yàn)，最終使得生成結(jié)果達(dá)到上線標(biāo)準(zhǔn)；二是色彩轉(zhuǎn)移過(guò)程與人工設(shè)計(jì)之間銜接與流程，我們采用是系統(tǒng)設(shè)計(jì)思維，將分會(huì)場(chǎng)元素拆解成簡(jiǎn)便的和可組合的形態(tài)，外包拿到色彩轉(zhuǎn)移結(jié)果及其他元素僅需進(jìn)行拼裝組合，便可實(shí)現(xiàn)海量分會(huì)場(chǎng)設(shè)計(jì)的高效完成。

通過(guò)單點(diǎn)算法技術(shù)引入分會(huì)場(chǎng)設(shè)計(jì)的創(chuàng)新方式，設(shè)計(jì)效率得到大大的提高，機(jī)器每0.5s轉(zhuǎn)移一張結(jié)果，代替人工重復(fù)且低效的勞動(dòng)，通過(guò)細(xì)致規(guī)則的積累，色彩轉(zhuǎn)移的結(jié)果也尤為豐富，再也不用擔(dān)心諸多分會(huì)場(chǎng)的“撞色”問(wèn)題。色彩轉(zhuǎn)移在CBU1220大促及328大促中都得到很好的應(yīng)用，在同等周期內(nèi)，設(shè)計(jì)師數(shù)量不變的情況下，分會(huì)場(chǎng)頁(yè)面完成數(shù)量由原來(lái)大促的300張+到1220大促的600張+，設(shè)計(jì)效率提升100%以上；同時(shí)兩次大促下來(lái)，分會(huì)場(chǎng)從復(fù)雜的模板調(diào)整設(shè)計(jì)到高效拼裝，這一單點(diǎn)技術(shù)的應(yīng)用便為公司節(jié)省了設(shè)計(jì)費(fèi)用25萬(wàn)+。

二、設(shè)計(jì)抽象及算法化支撐多尺寸自動(dòng)化工具

除了單點(diǎn)技術(shù)的創(chuàng)新結(jié)合，在設(shè)計(jì)過(guò)程中，我們也常常思考設(shè)計(jì)的目的、過(guò)程和結(jié)果能不能量化，能不能算法化，能不能數(shù)據(jù)化呢？通過(guò)對(duì)設(shè)計(jì)模式的提煉和抽象，是否可以由規(guī)則和算法支撐自動(dòng)化的設(shè)計(jì)工具，通過(guò)智能生成常規(guī)設(shè)計(jì)，從而將設(shè)計(jì)師從繁重的常規(guī)設(shè)計(jì)任務(wù)中解放出來(lái)，投入到更有價(jià)值的設(shè)計(jì)項(xiàng)目之中。我們與UBNNER項(xiàng)目組合作的智能多尺寸工具，恰好體現(xiàn)了我們這一探索。

（一） 我們?yōu)槭裁匆鲋悄芏喑叽纾?/p>

Banner是營(yíng)銷(xiāo)設(shè)計(jì)中常見(jiàn)的設(shè)計(jì)形式，banner的制作面臨著一個(gè)很大的痛點(diǎn)即多種不同尺寸的拓展。以CBU網(wǎng)站為例，運(yùn)營(yíng)推出一個(gè)站內(nèi)營(yíng)銷(xiāo)活動(dòng)，設(shè)計(jì)出一個(gè)創(chuàng)意banner之后，設(shè)計(jì)師需要花費(fèi)很多時(shí)間去進(jìn)行不同尺寸的排版、調(diào)整及輸出，用于站內(nèi)外幾十處資源位的投放，為活動(dòng)吸引更多的流量。多尺寸的拓展是一種機(jī)械化、重復(fù)性的勞動(dòng)，如果能夠由機(jī)器代替，用機(jī)器進(jìn)行智能排版布局，將極大的提高banner的制作效率，同時(shí)也節(jié)省大量的人工成本。

（二） 我們遇到了什么難點(diǎn)？

由于中文banner極具豐富的特性，使我們的切入遇到了重重困難：
1.中文banner設(shè)計(jì)復(fù)雜，從整體構(gòu)圖來(lái)說(shuō)，有左文右圖及右文左圖，居中結(jié)構(gòu)，還包括復(fù)雜的圖文混排；從文案排版形式上說(shuō)，更不勝枚舉，其中包含字體變形、文案傾斜、豎排版、中文書(shū)法字體自由排版、文案與形狀組合成嵌套關(guān)系、構(gòu)圖常用裝飾性圖形進(jìn)行點(diǎn)綴等等，這無(wú)疑給智能多尺寸增加了極大的難度；
2.集團(tuán)內(nèi)部也有其他多尺寸相關(guān)產(chǎn)品，但主要是針對(duì)事先內(nèi)置的banner模板，窮舉了常見(jiàn)尺寸的布局參數(shù)，當(dāng)用戶選擇某一內(nèi)置banner，并選擇目標(biāo)尺寸之后，該系統(tǒng)會(huì)在事先生成的各種尺寸的布局參數(shù)中選擇與該目標(biāo)尺寸比例和尺寸最相近的的尺寸的布局參數(shù)，生成banner并輸出。我們希望僅通過(guò)上傳一個(gè)創(chuàng)意banner模板，便可輸出所有其他尺寸banner，這一方面無(wú)先例可循，并沒(méi)有現(xiàn)成的算法技術(shù)或者框架可以參考；
3.我們期望智能多尺寸在可以實(shí)現(xiàn)機(jī)器生成的同時(shí)，仍然保留一定的設(shè)計(jì)豐富性，不同的風(fēng)格、構(gòu)圖等等，避免因迎合技術(shù)導(dǎo)致設(shè)計(jì)過(guò)于單一和簡(jiǎn)化，不同的風(fēng)格、構(gòu)圖等等，然而這確是在提高自身的難度。

（三） 如何進(jìn)行設(shè)計(jì)的提煉、抽象及算法化？

如何將設(shè)計(jì)語(yǔ)言轉(zhuǎn)化成邏輯算法？讓人和機(jī)器都可以理解。我們進(jìn)行智能多尺寸解決方案領(lǐng)域的探索，過(guò)程中需抽象banner多尺寸的共性，需平衡算法通用性與特性，選擇解決問(wèn)題的最佳解決方案。

1.banner業(yè)務(wù)特征提煉
通過(guò)CBU日常營(yíng)銷(xiāo)1000余張banner的分析，我們發(fā)現(xiàn)其中80%以上在設(shè)計(jì)上采用左右結(jié)構(gòu)，將此種結(jié)構(gòu)的主模板作為優(yōu)先解決的對(duì)象，降低機(jī)器處理的復(fù)雜程度。分析了現(xiàn)有站內(nèi)90個(gè)+的營(yíng)銷(xiāo)尺寸，共計(jì)數(shù)千張banner，統(tǒng)計(jì)常用的尺寸比例。繪制尺寸比例的散點(diǎn)圖，通過(guò)數(shù)據(jù)值的分布和數(shù)據(jù)點(diǎn)的分簇，將尺寸大致分為三大類(lèi)，縱向尺寸、橫向尺寸及橫幅尺寸。

2.banner設(shè)計(jì)元素及布局結(jié)構(gòu)化抽象
我們要將banner的版式特征提煉為可以量化的客觀布局規(guī)則，首先將banner要素抽象為文本（title）、元素（element）、背景（background） 、標(biāo)簽（tag）及l(fā)ogo五大類(lèi)，其中l(wèi)ogo及tag為業(yè)務(wù)性元素，布局特征會(huì)隨業(yè)務(wù)場(chǎng)景需要而有所變化。進(jìn)而再確定各元素的大小、布局位置、尺寸比例和元素間關(guān)系，抽象其通用性布局。

3.多尺寸算法邏輯流程及布局計(jì)算
我們將布局特征歸納為三層：（1）基礎(chǔ)布局邏輯，最基礎(chǔ)通用的布局特征，對(duì)于每個(gè)尺寸比例區(qū)間的banner，我們統(tǒng)計(jì)一個(gè)對(duì)應(yīng)的基礎(chǔ)布局邏輯；（2）風(fēng)格布局特征，需要從主模板中提取，用來(lái)表征主模板的一些布局特點(diǎn)，在多尺寸布局時(shí)需要繼承，比如對(duì)齊、間距、比例、平衡、對(duì)稱等。（3）業(yè)務(wù)布局邏輯，一些業(yè)務(wù)場(chǎng)景強(qiáng)制需要的布局特征，比如一些logo、tag的布局。進(jìn)一步制定了整個(gè)智能多尺寸生成的算法邏輯流程，如下圖所示。

其中第四步，對(duì)各元素布局進(jìn)行調(diào)整，我們具體采用較詳細(xì)的布局計(jì)算方案，在計(jì)算banner布局特征時(shí)，我們采取每個(gè)元素的最大外接矩形來(lái)表征該元素的位置及大小，其中常用的一些布局特征為對(duì)齊、間距、比例、平衡及視覺(jué)重心。例如對(duì)齊，元素間是否具有良好的對(duì)齊是布局的一個(gè)重要審美標(biāo)準(zhǔn)，布局整齊的banner往往更受用戶歡迎。對(duì)于對(duì)齊方式，我們定義了三種對(duì)齊方式：（1）左對(duì)齊；（2）居中對(duì)齊；（3）右對(duì)齊，我們采用簡(jiǎn)單的啟發(fā)式探索來(lái)計(jì)算對(duì)齊。

智能多尺寸通過(guò)后續(xù)算法開(kāi)發(fā)，不斷進(jìn)行測(cè)試及迭代，完成元素貼邊、元素剔除、切圖區(qū)域、合圖清晰度等多項(xiàng)問(wèn)題的優(yōu)化，并且算法與前端完成對(duì)接，最終實(shí)現(xiàn)線上流程的跑通，通過(guò)系列的運(yùn)營(yíng)及推廣已經(jīng)實(shí)現(xiàn)CBU全站的覆蓋，在近一年時(shí)間內(nèi)成了CBU設(shè)計(jì)師及運(yùn)營(yíng)必不可少的工作神器。智能多尺寸生成一套banner僅需2分鐘，代替人工一整天（按標(biāo)準(zhǔn)工時(shí)完成20個(gè)一套計(jì)算），效率提升200倍+。從2017年4月至2018年2月的使用數(shù)據(jù)來(lái)看，通過(guò)智能多尺寸共為集團(tuán)節(jié)省外包設(shè)計(jì)費(fèi)用200萬(wàn)+。

三、與鹿班智能化平臺(tái)合作尋求價(jià)值深化

自動(dòng)化的設(shè)計(jì)工具基本是從成本、效率、收益等角度切入，賦能業(yè)務(wù)或產(chǎn)生商業(yè)變現(xiàn)，我們不滿足單點(diǎn)技術(shù)及自動(dòng)化工具，希望結(jié)合此前工具化效率提升的想法，尋求智能化平臺(tái)合作為我們解決更多維度的問(wèn)題。希望通過(guò)場(chǎng)景的拓展，人、工具、平臺(tái)能有更多關(guān)聯(lián)，而在有了場(chǎng)景后則開(kāi)始產(chǎn)生大量的內(nèi)容，我們就可以將這些內(nèi)容沉淀下來(lái)進(jìn)行復(fù)用與再組織，并在整個(gè)鏈路中進(jìn)行投放連接，最終獲得寶貴的數(shù)據(jù)資產(chǎn)，數(shù)據(jù)資源又能更多的賦能我們的創(chuàng)意設(shè)計(jì)工作。在CBU328商人節(jié)中我們與鹿班智能設(shè)計(jì)進(jìn)行了初步合作，進(jìn)一步推進(jìn)場(chǎng)景拓展及價(jià)值深化。

此前我們?cè)陧?yè)面及BANNER尺寸拓展方面做過(guò)的諸多探索，均能帶來(lái)效率的提升，但大多數(shù)是斷點(diǎn)的，我們希望鹿班可以幫助我們實(shí)現(xiàn)大促設(shè)計(jì)工作的線性串聯(lián)，實(shí)現(xiàn)頁(yè)面設(shè)計(jì)到尺寸拓展一站式在線智能生成，并借此機(jī)會(huì)往機(jī)器智能化創(chuàng)造方面再邁進(jìn)一點(diǎn)點(diǎn)。機(jī)器智能生成效果基于原始數(shù)據(jù)的學(xué)習(xí)，因此原始數(shù)據(jù)的設(shè)計(jì)顯得尤為重要。設(shè)計(jì)師需將設(shè)計(jì)進(jìn)行結(jié)構(gòu)化、特征量化，可分為兩大部分，一部分是定位設(shè)計(jì)各元素的空間關(guān)系，其中包括文字、主體、標(biāo)識(shí)、修飾、背景5大類(lèi)元素，需要設(shè)計(jì)及定義各元素的大小、方向及形狀；另一部分是定義設(shè)計(jì)各元素的色彩質(zhì)感關(guān)系，其中包括色彩、紋理及質(zhì)感，還需定義各色彩層的比例關(guān)系及色彩層之間的位置關(guān)系。有了較豐富的設(shè)計(jì)數(shù)據(jù)，再在鹿班設(shè)計(jì)師端進(jìn)行模板上傳，將視覺(jué)數(shù)據(jù)化的部分包括構(gòu)圖模型、配色模型、文案模型進(jìn)行數(shù)據(jù)輸入，進(jìn)行智能生成，將數(shù)據(jù)視覺(jué)化，設(shè)計(jì)師再根據(jù)生成結(jié)果進(jìn)行人工評(píng)測(cè)。

想要實(shí)現(xiàn)頁(yè)面設(shè)計(jì)到尺寸拓展一站式生成，其最核心的是拓色及拓版打通這一關(guān)鍵技術(shù)難點(diǎn)，在和鹿班智能設(shè)計(jì)合作中，我們最終實(shí)現(xiàn)了大促頁(yè)面設(shè)計(jì)到尺寸拓展一站式在線智能生成，并為大促定制了特有流程，進(jìn)一步觸碰智能圖像時(shí)代。在此次CUB328商人節(jié)大促試點(diǎn)中，也有了很好的業(yè)務(wù)落地，一周內(nèi)完成了近萬(wàn)張BANNER的智能生成，在確保內(nèi)容豐富性的同時(shí)，大大提高了設(shè)計(jì)效率、節(jié)省設(shè)計(jì)費(fèi)用。

展望：
人工智能設(shè)計(jì)是個(gè)不可阻擋的時(shí)代，我們的探索僅僅是邁出的短短一小步，我們?nèi)匀徊煌跣?，致力于通過(guò)利用新的智能化技術(shù)手段更好的解決業(yè)務(wù)問(wèn)題，服務(wù)商業(yè)，擴(kuò)展設(shè)計(jì)價(jià)值。我們期待的是，設(shè)計(jì)和技術(shù)能夠真正的做到融合，設(shè)計(jì)師將更多精力放在創(chuàng)造、創(chuàng)意，以及理解用戶層面，而將數(shù)據(jù)、計(jì)算、學(xué)習(xí)交由機(jī)器，建立一個(gè)良好的共生關(guān)系，讓大家可以真正的改變自己的工作方式。希望我們一起加油，創(chuàng)變未來(lái)，擁抱智能化設(shè)計(jì)時(shí)代！

感謝：
感謝色彩轉(zhuǎn)移項(xiàng)目中iDst機(jī)器智能技術(shù)實(shí)驗(yàn)室-視覺(jué)計(jì)算團(tuán)隊(duì)的禾朔及艾劼的鼎力協(xié)助，感謝智能多尺寸項(xiàng)目中不飽以及算法秉恕、晨皋及前端芻牧的齊心協(xié)作，感謝328大促項(xiàng)目中樂(lè)乘及鹿班項(xiàng)目組的大力支持！期待以后可以碰撞出更多的火花！
感謝楊真、項(xiàng)虹的全力支持與悉心引導(dǎo)，感謝盧俊的全程指導(dǎo)與相助，感謝創(chuàng)意設(shè)計(jì)組宋義、大薛、漁軒、韓夏等同學(xué)在項(xiàng)目落地過(guò)程中的通力協(xié)作！