凹凸技術揭秘·羚瓏智能設計平臺·逐夢設計數智化

作者：凹凸曼 - 羚瓏

1、簡介

羚瓏智能設計平臺是由京東零售集團用戶體驗設計部打造的在線設計設計服務平臺，專注于泛零售領域的設計，幫助客戶解決日常經營程序中所碰到的各類設計需求，例如商品上新時的商品主圖視頻、各種節日大促時的商品主圖更新，還有直播帶貨場景時所需要的各種設計物料等等，

羚瓏致力于成為泛零售領域商家、運營生意經營中的設計好伙伴，助力他們實作設計數智化，從而實作設計層面的降本提效、提升設計結果（廣告圖、視頻、頁面等）的商業轉化效果，這是我們的愿景和使命，

從技術和功能形態層面，我們把設計數智化分成了兩個方向，一個方向是「模板化設計」，另一個方向是「程式化設計」，

2、模板化設計

「模板化設計」的核心目標：是實作線下設計物料的數字化，在數字化設計資產的基礎之上，構建廣告圖、短視頻等可視化設計能力，為我們的終端用戶提供所見即所得的在線設計 SaaS 平臺，「模板化設計」為客戶提供三大核心設計能力：圖片、動圖、視頻，還有常用的在線設計輔助工具，此外通過能力的整合打包，以「羚瓏企業專區」的產品形態為企事業單位提供完整的數智化設計、可視化設計的解決方案，

2.1 圖片設計，讓泛零售營銷場景下的廣告圖觸手可得

我們提供了大量契合泛零售垂直領域的設計模板，只要客戶有賣貨做設計的需求，便總能在羚瓏平臺上找到所需要的，配合功能體驗持續迭代的「圖層編輯器」，用戶只需根據圖片使用場景選擇心儀的設計模板，進行所見即所得的簡單操作，即可快速制作可直接用于投放的廣告圖；同時還提供「尺寸擴展」、「智能配色」等功能，幫助用戶豐富廣告圖最終的設計效果，滿足更多的使用場景，

「圖片設計」的能力目前還提供了嵌入式使用的 PaaS 解決方案，第三方的系統平臺可以借助該方案來集成羚瓏的圖片可視化設計能力，構建自己業務的設計解決方案，目前「嵌入式圖片設計」方案被京東內部多個核心營銷平臺所采用，例如商家裝修店鋪時使用的智鋪，通過接入羚瓏的圖片設計能力，支持商家高效低本地完成店鋪裝修所需設計素材的制作，

2.2 動圖設計，簡單兩步讓靜態圖動起來

5G 高速網路的逐漸普及，流量和速度的大幅度提升，Web 應用、APP 以往對媒體素材尺寸、性能的苛刻要求將逐漸成為歷史，越來越多的場景開始嘗試使用動圖視頻來豐富視聽效果，提升商業轉化率，相比靜態廣告圖的制作，動圖需要設計師具備影片方面的專業知識，設計成本要高出數倍，羚瓏平臺提供的動圖可視化設計，由專業設計師將常用的動效沉淀為可復用的數字資產，再通過與圖片模板的精心設計和組合，從而得到用戶可以直接拿來即用的通用的動圖模板，用戶只需要替換主圖、填寫利益點文案，簡單的兩步操作即可生成效果突出的動態廣告圖，大幅度降低了設計的門檻和成本，

2.3 視頻設計，輕松制作視聽帶感的短視頻素材

視頻相較動圖，它具有更細膩的動態效果，還可以加入帶感的背景音樂，是視聽表現最為豐富的媒體素材，具有極高的設計制作成本，羚瓏提供的視頻可視化設計解決方案，抹平了成本鴻溝，讓用戶依然能夠像制作靜態廣告圖一般簡單高效地制作視頻，視頻可視化設計解決方案，提供了兩個核心的編輯器，一個是面向專業設計師的后臺編輯器，幫助他們實作動態素材（GIF、AE 影片、幀影片等）的數字化管理，同時提供了靈活的圖層控制、豐富的動效和動效素材以及特殊音效，讓設計師最大限度的發揮創意，創作視頻模板，

另一個是面向終端用戶使用的前臺編輯器，基于設計師已經設計好的視頻模板，用戶通過組合圖片和文案，即可高效制作視聽效果俱佳的短視頻，

羚瓏提供的動圖設計、視頻設計能力，與圖片設計一樣，在京東內部系統平臺也得到廣泛的集成應用，

2.4設計工具箱，為你打磨實用的圖片后期處理利器

想對已有圖片做后期加工處理么？來看看羚瓏的設計工具箱吧，

• 一鍵智能摳圖 -在線摳圖，不用PS也能獲得透底圖
• 商品打腰帶-商品圖批量打腰帶，省時不費力
• 圖片批量編輯-批量裁剪、修改尺寸和壓縮轉格式
• ....

2.5 企業專區，讓每一個企業擁有完整的在線設計解決方案

面向企事業單位提供設計數智化賦能的 SAAS 服務，提供了包括素材在線管理、標準化合圖、快速頁面搭建、自定義組件編輯在內的一整套解決方案，讓企業無須投入開發成本，即可在日常運營的固定位置更新以及組織促銷活動等場景中，規范化、流程化、標準化地進行設計輸出，

羚瓏企業客戶 - 樂信（https://www.lexin.com/）

3、程式化設計

「程式化設計」的核心目標是利用大資料挖掘、人工智能等技術手段，結合用戶的設計畫像，為不同的人群輸出不同風格的設計手法，助力千人千面等精準營銷場景，提升轉化率，所用到的技術主要包括資料挖掘、計算機視覺、機器學習，

「程式化設計」最大的特點是「極速」和「無人運營」，適用于需要海量快速生成圖片的業務場景，在京東的一個典型應用場景是京東 APP 首頁焦點圖的千人千面，其針對不同用戶結合用戶畫像生成不同的設計結果，每天處理數以億計的圖片生成請求，這些依賴人工運營是根本無法達成的，

基于「程式化設計」相關技術能力的應用，我們達成了設計大幅度降本提效的基本目標，以往設計師可能半天才能做好 1 張廣告圖，現在 1 臺機器的 1 個行程，每秒就能做好幾張圖，大大節約了設計成本，

除了降本提效，設計結果商業效果的提升也是「程式化設計」十分重要的目標，

我們已經開始在廣告圖片商業價值層面進行探索和論證：根據不同用戶的畫像、設計偏好，生成不同風格的廣告圖片，從而進一步提高廣告圖片的商業點擊率（CTR），這種依據用戶畫像、設計偏好進行程式化設計的新模式，我們稱其為推薦型設計，

智能推薦型設計是一個復雜的系統工程，可以拆解成若干個圖片智能化相關的技術課題，接下來為大家稍作介紹，

3.1 設計畫像

3.1.1緣起

在推薦搜索模型構建中，我們會為用戶構造大量的標簽，比如像年齡、性別、城市、品牌偏好、品類偏好等，這些標簽最后勾勒出一個用戶的形象，我們把它定義為機器識別的資料化形象，行業內的叫法是用戶畫像，

借鑒于用戶畫像，我們開始思考用戶在圖片視覺領域是否存在類似的偏好，更通俗講人的審美是否會因為每個人而不一樣？

3.1.2論證

關于用戶設計審美偏好的答案，有一篇文章（ 《浙大女教授扎心發現：可樂包裝上的字體可能正在算計你的錢包》）的結論讓我們印象深刻：使用圓潤可愛的字體會更能讓用戶對可樂產生喜愛的情感，進而讓用戶產生消費！

這篇文章告訴我們，除了內容，設計本身似乎也能影響商業轉化率，我們決定在京東實際的業務場景使用一系列的AB測驗實驗，依靠資料來進一步佐證它的結論，

實驗一：不同字體曲率對CTR影響研究

場景：APP的核心入口首頁banner圖上

通過監測資料我們得到一些結論：

1. 兒童品類或女性偏好度較高的品類可以考慮通過圓潤屬性的字體來提升用戶對商品的喜愛程度；

2. 品牌認知度較弱的品類可以考慮用過圓潤屬性的字體來提升用戶的喜愛程度；

3. 針對女性用戶/25歲以下的年輕用戶進行營銷時，可以更多考慮通過圓潤屬性的字體來提升用戶對商品的喜愛程度，

4. 不同年齡的男性女性對于字體的偏好也不太一樣

實驗二：不同色系對CTR影響研究

場景：APP/PC的核心入口首頁banner圖上

實驗三：不同布局對CTR影響研究

場景：APP/PC的核心入口首頁banner圖上

基于以上實驗的資料分析后，我們得出一個結論：不同人群在設計上確實存在偏好關系，

3.1.3實踐

標簽（偏好）資料加工的流程：首先客戶端埋點上報用戶的操作行為資料（主要是點擊、瀏覽、搜索等），其次對數倉hive表中的資料做清洗、特征計算，然后標簽落庫，最后提供相應介面，

步驟一、資料清洗

前端上報的資料落在資料倉庫里，點擊、曝光流量模型里面包含了各個業務的埋點資料，而我們需要清洗出針對于廣告焦點圖的用戶行為序列資料！

用戶行為序列資料模型示例

模板標簽模型示例

步驟二、統計分析

重行為難題：

當我們在給用戶構建品牌偏好時，經常會關注到用戶在該品牌下產生了哪些“重”行為？“重”行為可以理解成用戶為了做某件事付出了比較高的操作成本，比如用戶是否特意搜索了某個品牌的商品，

我們在討論設計畫像方案的時候，幾乎找不到方法去定義這種“重”行為，所以常規的套路好像并不適合用來構建設計畫像！

經過討論后，我們決定返璞歸真回到最初的統計學的方式，假定如果用戶點擊某個顏色的廣告圖多，那就證明用戶對于該顏色存在一定的偏好，然后借助于顯著性檢驗來驗證資料是否顯著，得以確定最后的標簽權重！

顯著性檢驗：

顯著性檢驗作為判斷兩個乃至多個資料集之間是否存在差異的方法被廣泛應用于各個科研領域，

步驟三、標簽落庫

當我們跑出來用戶標簽資料后，最后其實只是一個工程問題，把相應的資料落到對應的表里，然而實際情況卻要復雜的多，仍然會存在問題：資料量偏少，不足于覆寫大部分用戶！

接著又衍生出了 look alike 這種人群標簽的方法，也就是我們的用戶可能是完全沒有資料的新用戶，這個時候期望通過匹配相似人群的標簽作為最后的標簽結果，

演算法模型

除了統計學的思路，我們還在探索用另外一種方式去構建設計畫像，使用模型訓練輸出標簽，之前也說過偏好問題可以認為是一個分類問題，

常用的分類模型主要有以下兩種：

目前我們正在嘗試使用決策樹類模型 XGBoost 實作標簽訓練輸出，它支持各種語言呼叫，支持單機和分布式，支持 libsvm 的稀疏矩陣的資料格式，

3.1.4展望和目標

設計畫像是智能設計基礎能力中的一環，結合程式合圖，為不同的人群輸出不同風格的設計手法，助于千人千面、千人千場等精準營銷場景，提升商業轉化率，

3.2 實時合圖

我們面向開發者、第三方系統平臺提供了服務端快速合成圖片的介面，開發者可以根據自身的業務訴求集成羚瓏的程式化設計能力，構建自己的設計引擎，

「實時合圖」在京東最大的應用場景是京東 APP 首焦輪播廣告圖的千人千面，根據不用訪客的用戶畫像和購買行為資料分析，實時合成并推送精準的廣告圖，提升其商業轉化率（CTR），

它的核心就是通過 C 去實作了合圖的底層引擎，然后通過 NGINX 擴展的形式注入到 NG 里面，通過 LUA 腳本來控制各個業務上層的邏輯配置，

此外，羚瓏實時合圖方案的一大亮點在于 CDN 兜住了絕大多數請求，能有效降低真正回源的請求量，

CDN是一種加速內容分發網路，通過多節點的形式，讓用戶訪問到離用戶最近的節點資源，從而達到讓內容快速呈現給用戶的技術，簡而言之，我們可以理解為快取，

3.3 智能配色

在羚瓏網站上作圖，都能體驗到智能配色的功能，從而大大提高圖片豐富性，做到一鍵切換圖片風格，

基于影像智能識別技術，對影像色值進行精準識別，通過像素級別的色值替換，實作圖片色彩風格的智能變換，保證配色結果的風格與質量，

3.4 智能摳圖

智能摳圖基于京東drawbot和 么么照 的能力進行構建，前者擅長商品摳圖，后者適合人像摳圖，目前這兩種摳圖能力都可以在羚瓏平臺上體驗，另外也提供介面方式內外賦能，

3.5 智能排版

基于知識圖譜的推理能力，我們構建了一套適用于泛零售領域的廣告圖片排版技術，通過知識圖譜可以讓圖形在任意尺寸下自動適應畫布，并添加合適的圖元，

3.5.1任意尺寸Banner圖合成

我們建立了一套基于知識推理的方法，從簡單到復雜的遞推遷移實作了banner圖任意版式結構的構圖，利用機器學習演算法學習大量的優秀設計師模板中的布局引數，智能化的構建出符合人眼審美的排版構圖，使用模型的泛化能力實作了任意尺寸的版式合圖能力，

3.5.2任意形狀圖形排列

為了增加素材的豐富性與層次感，我們對一些基本圖形或文字進行疊加組合，生成復合型的素材，使用場卷積堆疊演算法，對圖元生成卷積核在目標區域內卷積掃描，填充并目標輪廓區域，實作了任意形狀輪廓的圖元排列與疊加效果，

3.6智能背景

尺寸拓展是設計需求中經常碰到的一個痛點，一張廣告圖片，經常因為要下發到不同的客戶端，需要做不同尺寸的版本，這個程序我們會碰到一個很大的問題，靜態的背景圖片沒有辦法很好的適應于各種尺寸中，它不像矢量素材一樣，可以任意的放大或縮小，而矢量背景素材卻又具有很大的設計成本，因此，我們希望可以利用程式演算法動態生成任意尺寸的好看好用的背景圖素材，它具有矢量背景素材的特性，又具有極低的生產成本，這是羚瓏智能背景課題研究的初衷，是實作 AI 無人化設計的難題之一，我們現在就在路上，

利用機器生成的背景，在創意層面會有一定的局限性，我們覺得以下幾種型別的抽象背景素材具有機器生成的可行性，

3.6.1粒子 + 漸變

將大量的粒子和深色的漸變相疊加, 可以生成類似科幻大片中的背景效果圖, 非常適合用作電子產品的背景圖，通過對粒子大小, 色彩混合模式, 隨機性等引數的修改, 可以生成更多特殊氛圍效果，

3.6.2形狀組合

純形狀組合的背景具有很強的通用性, 可用于各種品類的商品, 它是由演算法生成一些隨機形狀組成, 并根據用戶喜好風格匹配一套配色方案對圖形進行著色，

3.6.3漸變+裝飾

用裝飾圖形和漸變背景色融合也是常用的背景生成方案, 通過對裝飾圖形型別、層數、融合模式、位置等引數修改, 使得這類背景圖生成方案通用性極強, 可以演化出千變萬化的背景素材，

3.7 風格識別

我們基于深度學習，構建了風格識別的預測模型，可以從圖片資訊識別出風格特征元素，自動判別圖片設計風格，風格識別的技術，能夠在類似京東 APP 首焦廣告圖千人千面等精準化營銷場景中得到應用落地，

3.8智能識色

一款顏色提取工具，通過提取圖片像素點的 RGB 值，再做一個歸類排序，最后通過演算法由 RGB 轉化為普通人可理解的顏色（紅、藍、黃、綠等），

3.9 美學評估模型

美學評估我們處于調研階段，未來應該會結合智能生成來作為自動生成圖片評分的標準之一，

4、結語 - 智能設計的未來

羚瓏目前基于數字化的設計資產，解決了設計效率和設計成本問題，但背后依然依賴設計師的資產輸入，未來我們想實作真正意義上的無人化設計，利用大資料挖掘分析和機器學習等技術手段，打造一個虛擬的「AI設計師」，讓它能夠和現實中的設計師一樣，做出好看且效果好的廣告圖或短視頻，未來的人類設計師，可以花更多的時間去理解業務和思考設計創意，把很大一部分的設計執行作業交給「AI」，

參考文獻：

1. 影像質量評估模型

其他

感謝一直關注凹凸實驗室的讀者，為了提供更優質的內容，希望您能抽出幾分鐘時間，完成一個小調查，明年凹凸公眾號的內容由你決定，點擊直達

加入凹凸實驗室開放、開源、專業、有愛、有夢的大家庭？點擊直達

還沒有關注「凹凸實驗室」的讀者們，關注我們吧，我們一個月只有 4 次推送機會，我們很珍惜每一次推送，不會讓你失望的，微信搜索「凹凸實驗室」關注即可，

歡迎關注凹凸實驗室博客：aotu.io

或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章：

標籤：JavaScript

上一篇：凹凸實驗室的過去與未來

下一篇：理解js閉包9大使用場景