騰訊最新設(shè)計(jì)神器，可以一鍵智能生成H5！

Xcube 是基于 QQ空間營收類活動所搭建的 H5 活動網(wǎng)頁智能生成體系，是針對框架相對固定，高頻率的運(yùn)營 H5 活動所設(shè)計(jì)。體系通過預(yù)設(shè)活動組件的組合來完成網(wǎng)頁生成，體系內(nèi)會有各種類型活動的相干組件，體系內(nèi)會預(yù)設(shè)許多常用活動模板，這些模板以及組件和素材會有各種不同維度的標(biāo)簽（圣誕節(jié)，春節(jié)，熱鬧等），可以在體系直接輸入關(guān)鍵詞，即可有一套吻合需求的網(wǎng)頁生成，然后在此基礎(chǔ)上編輯活動網(wǎng)頁文案，素材包括配置，到最終的發(fā)布都能一次性解決，甚至包括最終各個場景位置的 banner 素材圖都能通過預(yù)設(shè)的尺寸主動生成。最終所有的流程都簡化到一個點(diǎn)完成，省去了所有視覺和開發(fā)成本，在這整個鏈條中，產(chǎn)品，視覺，交互，重構(gòu)，開發(fā)包括 cp 所有利益相干者的成本都得到了優(yōu)化。不僅僅是運(yùn)營活動，Xcube 也可用于更多高頻且固定框架的網(wǎng)頁的制作上。目前 Xcube 正在持續(xù)優(yōu)化，臨時只針對內(nèi)部使用。

在這里分享一下我們在日常運(yùn)營 H5 活動設(shè)計(jì)當(dāng)中碰到的題目以及 Xcube 開發(fā)的過程。

作為一名運(yùn)營視覺設(shè)計(jì)師，針對運(yùn)營活動需求我信賴大家都會有太多的槽點(diǎn)：這個活動分外緊急，明天就要初稿！為什么不提前策劃好，都是一時調(diào)整！什么！題目都還沒定就直接做視覺？等等。

確實(shí)，在日常工作當(dāng)中，我們承受了太多突如其來的「驚喜」，賡續(xù)的壓縮時間趕進(jìn)度，驚惶失措的調(diào)整和修改，甚至顛覆重來。導(dǎo)致我們經(jīng)常會消費(fèi)大量的時間和精力去彌補(bǔ)這些大坑小坑。在整個過程中，我們既要考慮到對營業(yè)的貢獻(xiàn)，而且還得表現(xiàn)出設(shè)計(jì)的價值。最終數(shù)據(jù)不好的話還有可能被指設(shè)計(jì)能力不行，數(shù)據(jù)好又沒辦法直接證實(shí)是設(shè)計(jì)帶來的。

一、運(yùn)營活動的目的

雖然我們經(jīng)常會吐槽，但客觀來說，我們照舊應(yīng)該理性的思考一下，跳出設(shè)計(jì)師的身份，站在全鏈路的角度去了解一下運(yùn)營活動的目的和作用。產(chǎn)品經(jīng)理通過策劃組織各種活動吸引用戶參與關(guān)注，以此達(dá)到宣傳推廣目的的手段，總的來說運(yùn)營活動有這幾個核心目標(biāo)。

1. 拉新（拉新用戶+創(chuàng)新內(nèi)容）

通過傳播吸引新用戶，讓平臺在短的時間內(nèi)，用戶指數(shù)實(shí)現(xiàn)增加。用戶體量越大，越必要持續(xù)的拉新、拉新、再拉新。新用戶創(chuàng)造新內(nèi)容，新內(nèi)容再持續(xù)的吸引新的用戶，平臺上創(chuàng)造出越來越多的新內(nèi)容。

2. 促活（用戶活躍+內(nèi)容活水）

拉新、留存、促活，是用戶運(yùn)營的關(guān)鍵路徑。高的用戶活躍度，使平臺內(nèi)的內(nèi)容變活水。

3. 商業(yè)（促進(jìn)轉(zhuǎn)化+增長收入）

顧名思義，賡續(xù)的拉新和新內(nèi)容的賡續(xù)創(chuàng)造以及高用戶活躍度能帶來商業(yè)核心價值的轉(zhuǎn)化。

4. 口碑（品牌形象及傳播）

活動的運(yùn)營有助于品牌形象的塑造，通過活動持續(xù)普及品牌，讓用戶感知品牌符號，持續(xù)增強(qiáng)品牌與用戶之間的聯(lián)系。

綜上所描述，是不是就可以理解為什么會有頻繁的活動節(jié)奏，為了促新促活拉收必要有太多太多內(nèi)容的更新和輸出，也會有太多策略上的調(diào)整。那在我們的角色上，在活動開始之前先盡可能弄清楚這次活動的目標(biāo)和側(cè)重點(diǎn)，從而可以規(guī)避許多題目，讓我們實(shí)行的時候思路更加清晰。產(chǎn)品經(jīng)理的本質(zhì)工作是產(chǎn)品與商業(yè)的平衡，而我們的角色應(yīng)該是做到設(shè)計(jì)與產(chǎn)品體驗(yàn)與商業(yè)的平衡，不僅僅是視覺層面上的。

促新促活拉收更多是產(chǎn)品經(jīng)理要考慮的題目，而回到我們設(shè)計(jì)的層面，我們在保證輸出質(zhì)量的前提下，必要在如何通過運(yùn)營活動傳遞品牌形象上多做些研究和思考。

二、品牌如何被感知

用戶通過各種類型的營銷體例接觸到我們的產(chǎn)品，感知到我們的品牌符號，從而了解我們的品牌性格及內(nèi)核，運(yùn)營活動是用戶感知我們的一個重要場景。

用戶從外到內(nèi)感知到我們，我們從內(nèi)而外漸漸具像化信息使用戶感知，通過品牌符號來具像化設(shè)定，讓用戶明確的感受到我們的視覺、聲音、體現(xiàn)、內(nèi)容是什么樣子的。

這些標(biāo)志性的符號代表了品牌內(nèi)核要傳達(dá)的內(nèi)容，也映射了我們的品牌性格和內(nèi)核，使用戶直觀的感受我們的品牌。

作為設(shè)計(jì)師我們的本職工作是關(guān)注并定義視覺符號的內(nèi)容，其中包含了顏色、logo、字體、圖形、影響等視覺層面的內(nèi)容。但品牌對于用戶而言是一種多維度的感知，并不是某一種單獨(dú)的感受，所以也必要我們盡可能雄厚其他維度的品牌符號，比如文案風(fēng)格，聲音語言體系，實(shí)現(xiàn)情勢上的具像化。定義品牌的視覺符號，首先我們必要清楚品牌的內(nèi)核及性格是什么。

三、QQ空間品牌符號的定義

回到我們本身的產(chǎn)品 QQ空間，「活力」是品牌的內(nèi)核，QQ空間品牌的視覺風(fēng)格一向在根據(jù)時代的轉(zhuǎn)變賡續(xù)更新，但其「活力」的內(nèi)核并沒有改變，活力體現(xiàn)出來新鮮、風(fēng)趣、光顯的品牌性格。那品牌符號的定義就會圍繞著新鮮、風(fēng)趣和光顯來開展。

品牌性格關(guān)鍵詞之間互相碰撞我們可以得出一些基本思路，通亮對比的色彩風(fēng)格、新奇好玩的創(chuàng)意情勢、轉(zhuǎn)變發(fā)散的視覺結(jié)構(gòu)。由此我們可以充分具像化視覺符號（顏色、圖形、字體、文案、影像等）并表現(xiàn)在我們的運(yùn)營活動網(wǎng)頁當(dāng)中。

四、高頻次日常運(yùn)營

我們?nèi)粘９ぷ髦幸矔泻艽笠徊糠种貜?fù)、機(jī)械、不必要太多獨(dú)創(chuàng)性的高頻次的小型活動，一樣平常來說我們會制作響應(yīng)的設(shè)計(jì)規(guī)范并交給 CP 去設(shè)計(jì)，但因?yàn)?CP 公司的運(yùn)營模式，以及不固定的供給商，加上參差不齊的設(shè)計(jì)水平，在交付的時候每每會出現(xiàn)各種各樣的題目，比如沒有清楚了解規(guī)范內(nèi)容，輸出風(fēng)格與品牌調(diào)性不匹配，重復(fù)素材往返用，甚至達(dá)不到要求的設(shè)計(jì)水平等等，最終不得不由設(shè)計(jì)師耗費(fèi)大量的時間去進(jìn)行溝通和引導(dǎo)。在整個過程中，設(shè)計(jì)規(guī)范并沒有起到預(yù)期的作用，設(shè)計(jì)師反而花費(fèi)了更多的時間。所以我們必要解決如何讓規(guī)范發(fā)揮到該有的作用，盡可能的削減審核成本，解放設(shè)計(jì)師的時間。

我們制作設(shè)計(jì)規(guī)范時通常會比較直接的列出尺寸、位置、字體、間距等要求，cp設(shè)計(jì)師在拿到我們規(guī)范的時候只看到了這些框架和限定，并沒有去深入了解到我們品牌想傳達(dá)的感受。所以經(jīng)常會出現(xiàn)輸出風(fēng)格與品牌調(diào)性不匹配的題目。QQ空間新品牌更新后，我們嘗試了新的規(guī)范邏輯，先讓 cp 充分了解我們的品牌，從我們的品牌核心價值到品牌符號再到詳細(xì)應(yīng)用，作出直觀的說明和示例，再從詳細(xì)的場景去規(guī)范尺寸、字體間距等。

規(guī)范分為兩個部分：視覺的大原則和詳細(xì)場景標(biāo)準(zhǔn)化（規(guī)范對象也不僅僅只是CP，也包含了產(chǎn)品及運(yùn)營）。

1. 視覺大原則

大原則目的是為了讓大家對品牌各方面有一個認(rèn)知，清楚品牌所要傳達(dá)的調(diào)性。

2. 詳細(xì)應(yīng)用場景下的標(biāo)準(zhǔn)化

針對用戶感知我們的詳細(xì)場景做出明確的視覺規(guī)范，保證其視覺風(fēng)格的同等性。

3. 運(yùn)營活動頁

活動網(wǎng)頁是用戶感知我們的一個重要場景，所有運(yùn)營位置的 banner 素材基本上都是以活動網(wǎng)頁的頭部進(jìn)行的拓展，可見一個活動網(wǎng)頁頭部的緊張性。我們發(fā)如今背景的紋樣和輔助元素加入品牌符號是最能被感知的。所以在頭部這一部分，我們針對題目、主題圖形、背景一一進(jìn)行了規(guī)范。在規(guī)范中，從題目到主題圖形到背景到 logo 到活動內(nèi)容，根據(jù)設(shè)計(jì)的步驟每一步都進(jìn)行了規(guī)范和示例。

五、規(guī)范不能從根本上解決題目

活動內(nèi)容能傳遞品牌形象的關(guān)鍵在于畫面中是否有品牌符號，針對品牌相干的活動頁及素材，規(guī)范確實(shí)能起到肯定的作用，但是在品牌符號比較有限的情況下，會導(dǎo)致最終輸出比較相通，沒有辦法根據(jù)活動主題天真變動。保證有充足雄厚的品牌符號是保證活動網(wǎng)頁天真多變并能保證品牌調(diào)性同等的關(guān)鍵點(diǎn)。

在與 cp 公司對接的過程中我們發(fā)現(xiàn) cp 設(shè)計(jì)師花在網(wǎng)頁的內(nèi)容排布上的時間占了大多數(shù)，相比之下活動網(wǎng)頁頭部沒有那么的出彩，并且使用的素材基本都是隨處可見并且經(jīng)常重復(fù)使用的，除了 logo 之外完全沒有其他的品牌符號，導(dǎo)致整個活動網(wǎng)頁沒有品牌識別度。

考慮到我們的雷同活動類型的內(nèi)容分布都差不多，并不必要太多創(chuàng)意性的設(shè)計(jì)。所以我們決定將這部分內(nèi)容標(biāo)準(zhǔn)化起來，讓 cp 在雷同時間內(nèi)把重心放在活動頭部的制作上，保證更高的質(zhì)量。

一個活動頁的頭部基本上是由三個大部分組成：背景、題目和輔助元素。我們發(fā)如今背景的紋樣和輔助元素加入品牌符號是最能被感知的。所以在頭部這一部分，我們針對背景、和輔助元素，將頭部切分為底色、主題圖形和漂浮物三個方面來進(jìn)行規(guī)范會比較直觀。

除了頭部規(guī)范，我們針對黃鉆活動整頓了所有能標(biāo)準(zhǔn)化的內(nèi)容，制作成各種常用信息結(jié)構(gòu)的組件，文本、圖片、圖文搭配、鏈接、按鈕、抽獎組件等，也規(guī)范了一些組件樣式和配色方案。

cp設(shè)計(jì)師在網(wǎng)頁排布時只必要在我們固定的框架下和選擇合適的配色方案的基礎(chǔ)上進(jìn)行添補(bǔ)即可，可以把時間集中在頭部的設(shè)計(jì)上。在找 cp 公司嘗試了幾次之后發(fā)現(xiàn)輸出質(zhì)量和服從都有大幅度提拔。

新的頭部規(guī)范及標(biāo)準(zhǔn)化組件的可行，讓我們有了把所有標(biāo)準(zhǔn)化組件整合在一個體系當(dāng)中的想法，體系可以實(shí)現(xiàn)通過組建自由搭配出活動網(wǎng)頁，然后賡續(xù)雄厚頭部及其他組件的視覺素材以適配不同的活動主題，在組件和素材充足雄厚的前提下，甚至可以直接根據(jù)關(guān)鍵詞主動生成想要的活動網(wǎng)頁，所以最終我們就開始了 Xcube 體系的搭建。

六、Xcube的搭建

Xcube 是基于 QQ空間營收類活動所搭建的 H5 活動網(wǎng)頁智能生成體系，體系通過預(yù)設(shè)活動組件的組合來完成網(wǎng)頁生成。體系內(nèi)會有各種類型活動的相干組件，這些模板以及組件和素材會有各種比如圣誕節(jié)，春節(jié)，熱鬧等不同維度的標(biāo)簽，在體系直接輸入關(guān)鍵詞，即可有一套吻合產(chǎn)品需求的網(wǎng)頁生成，然后在此基礎(chǔ)上編輯活動內(nèi)容包括配置，到最終的發(fā)布都能一次性解決，甚至包括最終各個場景位置的 banner 素材圖都能通過預(yù)設(shè)的尺寸主動生成。

Xcube 最重要的用戶是產(chǎn)品經(jīng)理，如何讓產(chǎn)品經(jīng)理本身去制作一個活動網(wǎng)頁，必須跳出設(shè)計(jì)師的角色去思考并去簡化整個網(wǎng)頁的設(shè)計(jì)過程。

每一個產(chǎn)品經(jīng)理都會有本身常用的活動類型，我們首先按照這些活動類型制作常用的活動組件，然后搭配好響應(yīng)活動類型的模板，產(chǎn)品可以直接在首頁選擇一個常用模板進(jìn)行編輯，也可以從空白新建一個新的活動網(wǎng)頁。組件庫中也有許多通用的組件類型，可以知足任何信息結(jié)構(gòu)。

在首頁選擇從空白新建，產(chǎn)品經(jīng)理可以直接選擇我們搭配好的預(yù)設(shè)皮膚進(jìn)行編輯，也可以從網(wǎng)頁配色的選擇開始，然后再組建庫中選擇響應(yīng)的組建實(shí)現(xiàn)網(wǎng)頁的生成。也可以直接輸入關(guān)鍵字讓體系直接隨機(jī)生成搭配出相對應(yīng)的配色及網(wǎng)頁元素，優(yōu)先的智能匹配素材使得統(tǒng)一個網(wǎng)頁當(dāng)中的素材視覺風(fēng)格保持同一，同樣也可以在此基礎(chǔ)上進(jìn)行編輯和修改。

組件編輯區(qū)域里面會根據(jù)關(guān)鍵字或者當(dāng)前配色主動表現(xiàn)匹配的素材樣式，也可以手動上傳新的圖片素材，上傳過程中可編輯圖片素材信息及標(biāo)簽，方便體系之后智能識別。

頭部也預(yù)設(shè)了許多樣式，可以直接替代文案，也可針對核心字段進(jìn)行簡單段樣式調(diào)整。

對于網(wǎng)頁組件的編輯，體系可進(jìn)行實(shí)時保存，并有上一步撤回的功能，也可以恢復(fù)默認(rèn)設(shè)置，右側(cè)組件編輯區(qū)域在設(shè)置組件樣式的同時也可以進(jìn)行組建的配置。

編輯中也可以切換到預(yù)覽模式，根據(jù)不同機(jī)型進(jìn)行預(yù)覽，讓產(chǎn)品經(jīng)理對網(wǎng)頁核心信息的位置有所把握，切回編輯模式可繼承編輯。確認(rèn)所有的編輯之后可直接配置活動以及測試部署，并提交審核。一向到最終的外網(wǎng)部署發(fā)布都能在統(tǒng)一個場景完成。

活動網(wǎng)頁制作完成之后可以在我的活動和悉數(shù)活動里進(jìn)行查看和管理。

目前 Xcube 平臺已經(jīng)搭建完成，品牌的視覺符號及素材也在賡續(xù)的雄厚中，Xcube 的普及會大大提拔日常運(yùn)營活動的服從。

cp 不用在進(jìn)行繁瑣的壘網(wǎng)頁和改尺寸的義務(wù)，雷同的或者更少的時間可以用來制作素材，而且這些素材也可以保存在體系的素材庫中進(jìn)行重復(fù)使用；視覺也不用再花額外的時間去進(jìn)行審核工作，產(chǎn)品也省去了跟多方溝通的時間，因?yàn)楫a(chǎn)品能直接配置活動，也省去了所有的開發(fā)成本，在這整個鏈條中，產(chǎn)品，視覺，交互，重構(gòu)，開發(fā)包括 cp 所有利益相干者的成本都得到了優(yōu)化。不僅僅是運(yùn)營活動，Xcube 也可用于更多高頻且固定框架的網(wǎng)頁的制作上，后期我們會繼承優(yōu)化并增長更多功能，信賴 Xcube 日后會節(jié)約更多的現(xiàn)實(shí)成本。

目前 Xcube 正在持續(xù)優(yōu)化，臨時只針對內(nèi)部使用。

針對營收活動的品牌傳播及服從題目我們也會賡續(xù)的做更多新的探索。

圖片素材作者：Daniel Tan