起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識觸碰智能圖像時代 —— 營銷設計中的智能化初探
這是一篇干貨十足的實戰案例，一起來看阿里巴巴如何用人工智能做Banner 設計，enjoy~
近年來，設計圈有兩大趨勢不容忽視：
- 一是人工智能、神經網絡、深度學習無疑是時下最熱門的科技名詞，“人工智能設計”這個詞語在設計圈也深受追捧，我們也看到越來越多的初創公司勾畫出自己的“人工智能設計”藍圖；
- 二是在阿里巴巴中臺戰略的背景下，設計提效又再次推動著設計思維的變革，設計師們不僅僅需要出色地完成業務需求的設計，同時還需要思考設計的價值。
人工智能如何在我們這樣的人文語境去理解，如何去啟發創意性的工作？設計師作為人與機器的翻譯官，又如何利用新的技術手段更好的解決業務問題，賦能商業，擴展設計價值？
營銷大促是電商最常用的快速出貨手段之一，對于CBU亦是如此。321上新季、518備貨季、727買手節、96拿貨節、1220商人節、1.18年貨節、328商人節……大促頻率如此之高，量級也在呈倍數級增長，如最近一次的328商人節，分會場頁面數量達700張+，BANNER數量達17000張+，如需在同等緊急時間內完成，營銷設計過程中勢必產生兩個嚴峻的問題：
- 其一，我們為了預留時間進行頁面及BANNER拓展工作，被嚴重壓縮的往往是設計師的創意時間；
- 其二，量級大背后意味著更多的人員投入以及費用的提升，公司將入越來越大。
我們對問題領域進行探索，想要解決以上兩大難題，核心在于優化會場頁面拓展及BANNER尺寸拓展兩部分低水平重復建設工作，提升設計效率，壓縮設計周期，為設計師保留充裕的創意時間，也為公司節省人力物力。我們嘗試從單點技術的創新結合、設計算法化支撐自動化工具等多方面逐步進行嘗試，推動工作方式的工具化及智能化，結合近一年來的項目實踐經驗，和大家一起探討下我們過程中面臨的問題及思考。
一、頁面拓展設計與單點算法技術的創新結合
設計師在設計過程中進行著諸多大小不一的決策及創意，這是算法技術很難替代的，但如果談到的是創造性合作，當設計師與算法一起工作以解決問題時，我們看到了算法驅動設計的很多案例和它的明顯潛力，算法可以改良及助力我們的日常設計工作，在1220大促中，我們與iDst機器智能技術實驗室-視覺計算團隊合作的色彩轉移項目恰恰可說明這一點。
1. 單點技術結合是為了解決什么問題？
在營銷設計過程中，頁面拓展工作是困擾我們較大的難題之一，當大促分會場頁面數量達到700張+的量級時，需要幾十位外包同學花費近一個月的時間進行設計，這個周期會嚴重影響大促進度及上線時間。
如果暫時還無法做到分會場設計流程的產品化，那么是否可以利用技術替代設計過程中某些環節及步驟呢？
我們將分會場設計工作進行拆解，大致分為色彩拓展、產品組合設計、文案修改幾大步驟，其中不乏重復性勞動高、可以通過技術去取代的，當了解到iDst機器智能技術實驗室-視覺計算團隊有相對成熟的色彩轉移技術，我們希望嘗試通過色彩轉移技術代替分會場設計色彩拓展的環節。
2. 什么是色彩轉移？
背景重上色算法技術（本文稱之色彩轉移），即輸入背景圖片，輸入基于HSL色彩模型系列配色規則（包含區間組合方式、度數間隔等），以每0.5s輸出一張結果的速度輸出幾百個背景配色（即幾百種HSL顏色值對應的背景重上色結果）。比如背景的主體色是A，其中一種配色方案，想轉移成主體色B，那么原背景中的每個像素的顏色都按照A色到B色相應的進行差值。HSL值規則越細，生成結果越多效果越豐富。
3. 如何進行創新結合？
與色彩轉移的創新結合有兩個核心關鍵點：
一是設計與技術產生碰撞后的融合，我們在色彩轉移試驗過程中，結果并非一直如設計師所預期。首先技術會有暫時的局限性，例如轉移結果遇到的多色漸變處轉移欠佳，銜接不自然或包含諸多雜色，設計師常用的動感模糊及高斯模糊等手段可能受限，則需要迎合技術去做一些設計優化及豐富性的取舍；其次機器是缺乏認知理解能力，設計師需將想要實現的效果抽象成HSL配色規則，試驗的過程往往也是反復曲折的，需要針對BADCASE進行分析，推斷規則的問題點，對其進行優化，通過反復試驗，最終使得生成結果達到上線標準；
二是色彩轉移過程與人工設計之間銜接與流程，我們采用是系統設計思維，將分會場元素拆解成簡便的和可組合的形態，外包拿到色彩轉移結果及其他元素僅需進行拼裝組合，便可實現海量分會場設計的高效完成。
通過單點算法技術引入分會場設計的創新方式，設計效率得到大大的提高，機器每0.5s轉移一張結果，代替人工重復且低效的勞動，通過細致規則的積累，色彩轉移的結果也尤為豐富，再也不用擔心諸多分會場的“撞色”問題。
色彩轉移在CBU1220大促及328大促中都得到很好的應用，在同等周期內，設計師數量不變的情況下，分會場頁面完成數量由原來大促的300張+到1220大促的600張+，設計效率提升100%以上；同時兩次大促下來，分會場從復雜的模板調整設計到高效拼裝，這一單點技術的應用便為公司節省了設計費用25萬+。
二、設計抽象及算法化支撐多尺寸自動化工具
除了單點技術的創新結合，在設計過程中，我們也常常思考設計的目的、過程和結果能不能量化，能不能算法化，能不能數據化呢？通過對設計模式的提煉和抽象，是否可以由規則和算法支撐自動化的設計工具，通過智能生成常規設計，從而將設計師從繁重的常規設計任務中解放出來，投入到更有價值的設計項目之中。我們與UBNNER項目組合作的智能多尺寸工具，恰好體現了我們這一探索。
1. 我們為什么要做智能多尺寸？
Banner是營銷設計中常見的設計形式，banner的制作面臨著一個很大的痛點即多種不同尺寸的拓展。以CBU網站為例，運營推出一個站內營銷活動，設計出一個創意banner之后，設計師需要花費很多時間去進行不同尺寸的排版、調整及輸出，用于站內外幾十處資源位的投放，為活動吸引更多的流量。多尺寸的拓展是一種機械化、重復性的勞動，如果能夠由機器代替，用機器進行智能排版布局，將極大的提高banner的制作效率，同時也節省大量的人工成本。
2. 我們遇到了什么難點？
由于中文banner極具豐富的特性，使我們的切入遇到了重重困難：
（1）中文banner設計復雜，從整體構圖來說，有左文右圖及右文左圖，居中結構，還包括復雜的圖文混排；從文案排版形式上說，更不勝枚舉，其中包含字體變形、文案傾斜、豎排版、中文書法字體自由排版、文案與形狀組合成嵌套關系、構圖常用裝飾性圖形進行點綴等等，這無疑給智能多尺寸增加了極大的難度；
（2）集團內部也有其他多尺寸相關產品，但主要是針對事先內置的banner模板，窮舉了常見尺寸的布局參數，當用戶選擇某一內置banner，并選擇目標尺寸之后，該系統會在事先生成的各種尺寸的布局參數中選擇與該目標尺寸比例和尺寸最相近的的尺寸的布局參數，生成banner并輸出。我們希望僅通過上傳一個創意banner模板，便可輸出所有其他尺寸banner，這一方面無先例可循，并沒有現成的算法技術或者框架可以參考；
（3）我們期望智能多尺寸在可以實現機器生成的同時，仍然保留一定的設計豐富性，不同的風格、構圖等等，避免因迎合技術導致設計過于單一和簡化，不同的風格、構圖等等，然而這確是在提高自身的難度。
3. 如何進行設計的提煉、抽象及算法化？
如何將設計語言轉化成邏輯算法？讓人和機器都可以理解。我們進行智能多尺寸解決方案領域的探索，過程中需抽象banner多尺寸的共性，需平衡算法通用性與特性，選擇解決問題的最佳解決方案。
（1）banner業務特征提煉
通過CBU日常營銷1000余張banner的分析，我們發現其中80%以上在設計上采用左右結構，將此種結構的主模板作為優先解決的對象，降低機器處理的復雜程度。分析了現有站內90個+的營銷尺寸，共計數千張banner，統計常用的尺寸比例。繪制尺寸比例的散點圖，通過數據值的分布和數據點的分簇，將尺寸大致分為三大類，縱向尺寸、橫向尺寸及橫幅尺寸。
（2）banner設計元素及布局結構化抽象
我們要將banner的版式特征提煉為可以量化的客觀布局規則，首先將banner要素抽象為文本（title）、元素（element）、背景（background） 、標簽（tag）及logo五大類，其中logo及tag為業務性元素，布局特征會隨業務場景需要而有所變化。進而再確定各元素的大小、布局位置、尺寸比例和元素間關系，抽象其通用性布局。
（3）多尺寸算法邏輯流程及布局計算
我們將布局特征歸納為三層：
- 基礎布局邏輯，最基礎通用的布局特征，對于每個尺寸比例區間的banner，我們統計一個對應的基礎布局邏輯；
- 風格布局特征，需要從主模板中提取，用來表征主模板的一些布局特點，在多尺寸布局時需要繼承，比如對齊、間距、比例、平衡、對稱等。
- 業務布局邏輯，一些業務場景強制需要的布局特征，比如一些logo、tag的布局。進一步制定了整個智能多尺寸生成的算法邏輯流程，如下圖所示。
其中第四步，對各元素布局進行調整，我們具體采用較詳細的布局計算方案，在計算banner布局特征時，我們采取每個元素的最大外接矩形來表征該元素的位置及大小，其中常用的一些布局特征為對齊、間距、比例、平衡及視覺重心。例如對齊，元素間是否具有良好的對齊是布局的一個重要審美標準，布局整齊的banner往往更受用戶歡迎。對于對齊方式，我們定義了三種對齊方式：
- 左對齊；
- 居中對齊；
- 右對齊。
我們采用簡單的啟發式探索來計算對齊。
智能多尺寸通過后續算法開發，不斷進行測試及迭代，完成元素貼邊、元素剔除、切圖區域、合圖清晰度等多項問題的優化，并且算法與前端完成對接，最終實現線上流程的跑通，通過系列的運營及推廣已經實現CBU全站的覆蓋，在近一年時間內成了CBU設計師及運營必不可少的工作神器。智能多尺寸生成一套banner僅需2分鐘，代替人工一整天（按標準工時完成20個一套計算），效率提升200倍+。從2017年4月至2018年2月的使用數據來看，通過智能多尺寸共為集團節省外包設計費用200萬+。
三、與鹿班智能化平臺合作尋求價值深化
自動化的設計工具基本是從成本、效率、收益等角度切入，賦能業務或產生商業變現，我們不滿足單點技術及自動化工具，希望結合此前工具化效率提升的想法，尋求智能化平臺合作為我們解決更多維度的問題。希望通過場景的拓展，人、工具、平臺能有更多關聯，而在有了場景后則開始產生大量的內容，我們就可以將這些內容沉淀下來進行復用與再組織，并在整個鏈路中進行投放連接，最終獲得寶貴的數據資產，數據資源又能更多的賦能我們的創意設計工作。在CBU328商人節中我們與鹿班智能設計進行了初步合作，進一步推進場景拓展及價值深化。
此前我們在頁面及BANNER尺寸拓展方面做過的諸多探索，均能帶來效率的提升，但大多數是斷點的，我們希望鹿班可以幫助我們實現大促設計工作的線性串聯，實現頁面設計到尺寸拓展一站式在線智能生成，并借此機會往機器智能化創造方面再邁進一點點。機器智能生成效果基于原始數據的學習，因此原始數據的設計顯得尤為重要。
設計師需將設計進行結構化、特征量化，可分為兩大部分，一部分是定位設計各元素的空間關系，其中包括文字、主體、標識、修飾、背景5大類元素，需要設計及定義各元素的大小、方向及形狀；另一部分是定義設計各元素的色彩質感關系，其中包括色彩、紋理及質感，還需定義各色彩層的比例關系及色彩層之間的位置關系。
有了較豐富的設計數據，再在鹿班設計師端進行模板上傳，將視覺數據化的部分包括構圖模型、配色模型、文案模型進行數據輸入，進行智能生成，將數據視覺化，設計師再根據生成結果進行人工評測。
想要實現頁面設計到尺寸拓展一站式生成，其最核心的是拓色及拓版打通這一關鍵技術難點，在和鹿班智能設計合作中，我們最終實現了大促頁面設計到尺寸拓展一站式在線智能生成，并為大促定制了特有流程，進一步觸碰智能圖像時代。
在此次CUB328商人節大促試點中，也有了很好的業務落地，一周內完成了近萬張BANNER的智能生成，在確保內容豐富性的同時，大大提高了設計效率、節省設計費用。
展望：
人工智能設計是個不可阻擋的時代，我們的探索僅僅是邁出的短短一小步，我們仍然不忘初心，致力于通過利用新的智能化技術手段更好的解決業務問題，服務商業，擴展設計價值。我們期待的是，設計和技術能夠真正的做到融合，設計師將更多精力放在創造、創意，以及理解用戶層面，而將數據、計算、學習交由機器，建立一個良好的共生關系，讓大家可以真正的改變自己的工作方式。希望我們一起加油，創變未來，擁抱智能化設計時代！
感謝：
感謝色彩轉移項目中iDst機器智能技術實驗室-視覺計算團隊的禾朔及艾劼的鼎力協助，感謝智能多尺寸項目中不飽以及算法秉恕、晨皋及前端芻牧的齊心協作，感謝?328大促項目中樂乘及鹿班項目組的大力支持！期待以后可以碰撞出更多的火花！
感謝楊真、項虹的全力支持與悉心引導，感謝盧俊的全程指導與相助，感謝創意設計組宋義、大薛、漁軒、韓夏等同學在項目落地過程中的通力協作！
作者：李郭
來源：阿里巴巴UED
題圖來源于阿里巴巴UED
- 目前還沒評論，等你發揮！
