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

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

在這里分享一下我們?cè)谌粘＿\(yùn)營(yíng) H5 活動(dòng)設(shè)計(jì)當(dāng)中碰到的題目以及 Xcube 開(kāi)發(fā)的過(guò)程。

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

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

一、運(yùn)營(yíng)活動(dòng)的目的

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

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

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

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

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

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

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

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

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

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

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

二、品牌如何被感知

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

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

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

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

三、QQ空間品牌符號(hào)的定義

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

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

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

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

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

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

1. 視覺(jué)大原則

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

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

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

3. 運(yùn)營(yíng)活動(dòng)頁(yè)

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

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

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

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

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

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

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

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

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

六、Xcube的搭建

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

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

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

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

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

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

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

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

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

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

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

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

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

圖片素材作者：Daniel Tan