阿里U一點：觸碰智能圖像時代-營銷設(shè)計中的智能化初探

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（二） 我們遇到了什么難點？

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

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

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

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

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

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

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

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

三、與鹿班智能化平臺合作尋求價值深化

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

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

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

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

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