Xcube 是基于 QQ空間營(yíng)收類(lèi)活動(dòng)所搭建的 H5 活動(dòng)頁(yè)面智能生成系統(tǒng)，是針對(duì)框架相對(duì)固定，高頻率的運(yùn)營(yíng) H5 活動(dòng)所設(shè)計(jì)。系統(tǒng)通過(guò)預(yù)設(shè)活動(dòng)組件的組合來(lái)完成頁(yè)面生成，系統(tǒng)內(nèi)會(huì)有各種類(lèi)型活動(dòng)的相關(guān)組件，系統(tǒng)內(nèi)會(huì)預(yù)設(shè)很多常用活動(dòng)模板，這些模板以及組件和素材會(huì)有各種不同維度的標(biāo)簽（圣誕節(jié)，春節(jié)，熱鬧等），可以在系統(tǒng)直接輸入關(guān)鍵詞，即可有一套符合需求的頁(yè)面生成，然后在此基礎(chǔ)上編輯活動(dò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 所有利益相關(guān)者的成本都得到了優(yōu)化。不僅僅是運(yùn)營(yíng)活動(dòng)，Xcube 也可用于更多高頻且固定框架的頁(yè)面的制作上。目前 Xcube 正在持續(xù)優(yōu)化，暫時(shí)只針對(duì)內(nèi)部使用。

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

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

確實(shí)，在日常工作當(dāng)中，我們承受了太多突如其來(lái)的「驚喜」，不斷的壓縮時(shí)間趕進(jìn)度，猝不及防的調(diào)整和修改，甚至推翻重來(lái)。導(dǎo)致我們經(jīng)常會(huì)消耗大量的時(shí)間和精力去填補(bǔ)這些大坑小坑。在整個(gè)過(guò)程中，我們既要考慮到對(duì)業(yè)務(wù)的貢獻(xiàn)，而且還得體現(xiàn)出設(shè)計(jì)的價(jià)值。最終數(shù)據(jù)不好的話(huà)還有可能被指設(shè)計(jì)能力不行，數(shù)據(jù)好又沒(méi)辦法直接證明是設(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)增長(zhǎng)。用戶(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)化+增加收入）

顧名思義，不斷的拉新和新內(nèi)容的不斷創(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ī)避很多問(wèn)題，讓我們執(zhí)行的時(shí)候思路更加清晰。產(chǎn)品經(jīng)理的本質(zhì)工作是產(chǎn)品與商業(yè)的平衡，而我們的角色應(yīng)該是做到設(shè)計(jì)與產(chǎn)品體驗(yàn)與商業(yè)的平衡，不僅僅是視覺(jué)層面上的。

促新促活拉收更多是產(chǎn)品經(jīng)理要考慮的問(wèn)題，而回到我們?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ǔ)言系統(tǒng)，實(shí)現(xiàn)形式上的具像化。定義品牌的視覺(jué)符號(hào)，首先我們需要清楚品牌的內(nèi)核及性格是什么。

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

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

品牌性格關(guān)鍵詞之間互相碰撞我們可以得出一些基本思路，明亮對(duì)比的色彩風(fēng)格、新奇好玩的創(chuàng)意形式、變化發(fā)散的視覺(jué)結(jié)構(gòu)。由此我們可以充分具像化視覺(jué)符號(hào)（顏色、圖形、字體、文案、影像等）并體現(xiàn)在我們的運(yùn)營(yíng)活動(dò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ì)，但由于 CP 公司的運(yùn)營(yíng)模式，以及不固定的供應(yīng)商，加上參差不齊的設(shè)計(jì)水平，在交付的時(shí)候往往會(huì)出現(xiàn)各種各樣的問(wèn)題，比如沒(méi)有清楚了解規(guī)范內(nèi)容，輸出風(fēng)格與品牌調(diào)性不匹配，重復(fù)素材來(lái)回用，甚至達(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)性不匹配的問(wèn)題。QQ空間新品牌更新后，我們嘗試了新的規(guī)范邏輯，先讓 cp 充分了解我們的品牌，從我們的品牌核心價(jià)值到品牌符號(hào)再到具體應(yīng)用，作出直觀的說(shuō)明和示例，再?gòu)木唧w的場(chǎng)景去規(guī)范尺寸、字體間距等。

規(guī)范分為兩個(gè)部分：視覺(jué)的大原則和具體場(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. 具體應(yīng)用場(chǎng)景下的標(biāo)準(zhǔn)化

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

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

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

五、規(guī)范不能從根本上解決問(wèn)題

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

在與 cp 公司對(duì)接的過(guò)程中我們發(fā)現(xiàn) cp 設(shè)計(jì)師花在頁(yè)面的內(nèi)容排布上的時(shí)間占了大多數(shù)，相比之下活動(dòng)頁(yè)面頭部沒(méi)有那么的出彩，并且使用的素材基本都是隨處可見(jiàn)并且經(jīng)常重復(fù)使用的，除了 logo 之外完全沒(méi)有其他的品牌符號(hào)，導(dǎo)致整個(gè)活動(dò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è)大部分組成：背景、標(biāo)題和輔助元素。我們發(fā)現(xiàn)在背景的紋樣和輔助元素加入品牌符號(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ì)師在頁(yè)面排布時(shí)只需要在我們固定的框架下和選擇合適的配色方案的基礎(chǔ)上進(jìn)行填充即可，可以把時(shí)間集中在頭部的設(shè)計(jì)上。在找 cp 公司嘗試了幾次之后發(fā)現(xiàn)輸出質(zhì)量和效率都有大幅度提升。

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

六、Xcube的搭建

Xcube 是基于 QQ空間營(yíng)收類(lèi)活動(dòng)所搭建的 H5 活動(dòng)頁(yè)面智能生成系統(tǒng)，系統(tǒng)通過(guò)預(yù)設(shè)活動(dòng)組件的組合來(lái)完成頁(yè)面生成。系統(tǒng)內(nèi)會(huì)有各種類(lèi)型活動(dòng)的相關(guān)組件，這些模板以及組件和素材會(huì)有各種比如圣誕節(jié)，春節(jié)，熱鬧等不同維度的標(biāo)簽，在系統(tǒng)直接輸入關(guān)鍵詞，即可有一套符合產(chǎn)品需求的頁(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)頁(yè)面，必須跳出設(shè)計(jì)師的角色去思考并去簡(jiǎn)化整個(gè)頁(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)頁(yè)面。組件庫(kù)中也有很多通用的組件類(lèi)型，可以滿(mǎn)足任何信息結(jié)構(gòu)。

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

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

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

對(duì)于頁(yè)面組件的編輯，系統(tǒng)可進(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ì)頁(yè)面核心信息的位置有所把握，切回編輯模式可繼續(xù)編輯。確認(rèn)所有的編輯之后可直接配置活動(dòng)以及測(cè)試部署，并提交審核。一直到最終的外網(wǎng)部署發(fā)布都能在同一個(gè)場(chǎng)景完成。

活動(dòng)頁(yè)面制作完成之后可以在我的活動(dòng)和全部活動(dòng)里進(jìn)行查看和管理。

目前 Xcube 平臺(tái)已經(jīng)搭建完成，品牌的視覺(jué)符號(hào)及素材也在不斷的豐富中，Xcube 的普及會(huì)大大提升日常運(yùn)營(yíng)活動(dòng)的效率。

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

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

針對(duì)營(yíng)收活動(dòng)的品牌傳播及效率問(wèn)題我們也會(huì)不斷的做更多新的探索。

圖片素材作者：Daniel Tan

「H5設(shè)計(jì)好文」

• 《工作復(fù)盤(pán)：從四大角色帶你了解H5制作流程》
• 《新人想要入場(chǎng)視頻類(lèi)H5 設(shè)計(jì)？你需要了解這些》
• 《讓H5不止于自嗨！打造一款百萬(wàn)級(jí)傳播HTML 5的技巧（附案例）》