Xcube是基于QQ空間營(yíng)收類活動(dòng)所搭建的H5活動(dòng)頁(yè)面智能生成系統(tǒng)，是針對(duì)框架相對(duì)固定，高頻率的運(yùn)營(yíng)H5活動(dòng)所設(shè)計(jì)。在這里分享一下我們?cè)谌粘＿\(yùn)營(yíng)H5活動(dòng)設(shè)計(jì)當(dāng)中遇到的問題以及Xcube開發(fā)的過程。深圳網(wǎng)站制作博納網(wǎng)絡(luò)搜集整理。
Xcube是基于QQ空間營(yíng)收類活動(dòng)所搭建的H5活動(dòng)頁(yè)面智能生成系統(tǒng)，是針對(duì)框架相對(duì)固定，高頻率的運(yùn)營(yíng)H5活動(dòng)所設(shè)計(jì)。系統(tǒng)通過預(yù)設(shè)活動(dòng)組件的組合來完成頁(yè)面生成，系統(tǒng)內(nèi)會(huì)有各種類型活動(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素材圖都能通過預(yù)設(shè)的尺寸自動(dòng)生成。最終所有的流程都簡(jiǎn)化到一個(gè)點(diǎn)完成，省去了所有視覺和開發(fā)成本，在這整個(gè)鏈條中，產(chǎn)品，視覺，交互，重構(gòu)，開發(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)中遇到的問題以及Xcube開發(fā)的過程。作為一名運(yùn)營(yíng)視覺設(shè)計(jì)師，針對(duì)運(yùn)營(yíng)活動(dòng)需求我相信大家都會(huì)有太多的槽點(diǎn)：這個(gè)活動(dòng)特別緊急，明天就要初稿！為什么不提前策劃好，都是臨時(shí)調(diào)整！什么！標(biāo)題都還沒定就直接做視覺？等等…確實(shí)，在日常工作當(dāng)中，我們承受了太多突如其來的“驚喜”，不斷的壓縮時(shí)間趕進(jìn)度，猝不及防的調(diào)整和修改，甚至推翻重來。導(dǎo)致我們經(jīng)常會(huì)消耗大量的時(shí)間和精力去填補(bǔ)這些大坑小坑。在整個(gè)過程中，我們既要考慮到對(duì)業(yè)務(wù)的貢獻(xiàn)，而且還得體現(xiàn)出設(shè)計(jì)的價(jià)值。最終數(shù)據(jù)不好的話還有可能被指設(shè)計(jì)能力不行，數(shù)據(jù)好又沒辦法直接證明是設(shè)計(jì)帶來的。
運(yùn)營(yíng)活動(dòng)的目的
雖然我們經(jīng)常會(huì)吐槽，但客觀來說，我們還是應(yīng)該理性的思考一下，跳出設(shè)計(jì)師的身份，站在全鏈路的角度去了解一下運(yùn)營(yíng)活動(dòng)的目的和作用。產(chǎn)品經(jīng)理通過策劃組織各種活動(dòng)吸引用戶參與關(guān)注，以此達(dá)到宣傳推廣目的的手段，總的來說運(yùn)營(yíng)活動(dòng)有這幾個(gè)核心目標(biāo)。
1. 拉新（拉新用戶 創(chuàng)新內(nèi)容）通過傳播吸引新用戶，讓平臺(tái)在短的時(shí)間內(nèi)，用戶指數(shù)實(shí)現(xiàn)增長(zhǎng)。用戶體量越大，越需要持續(xù)的拉新、拉新、再拉新。新用戶創(chuàng)造新內(nèi)容，新內(nèi)容再持續(xù)的吸引新的用戶，平臺(tái)上創(chuàng)造出越來越多的新內(nèi)容。
2. 促活（用戶活躍 內(nèi)容活水）拉新、留存、促活，是用戶運(yùn)營(yíng)的關(guān)鍵路徑。高的用戶活躍度，使平臺(tái)內(nèi)的內(nèi)容變活水。
3. 商業(yè)（促進(jìn)轉(zhuǎn)化 增加收入）顧名思義，不斷的拉新和新內(nèi)容的不斷創(chuàng)造以及高用戶活躍度能帶來商業(yè)核心價(jià)值的轉(zhuǎn)化。
4. 口碑（品牌形象及傳播）
活動(dòng)的運(yùn)營(yíng)有助于品牌形象的塑造，通過活動(dòng)持續(xù)普及品牌，讓用戶感知品牌符號(hào)，持續(xù)加強(qiáng)品牌與用戶之間的聯(lián)系。綜上所描述，是不是就可以理解為什么會(huì)有頻繁的活動(dòng)節(jié)奏，為了促新促活拉收需要有太多太多內(nèi)容的更新和輸出，也會(huì)有太多策略上的調(diào)整。那在我們的角色上，在活動(dòng)開始之前先盡可能弄清楚這次活動(dòng)的目標(biāo)和側(cè)重點(diǎn)，從而可以規(guī)避很多問題，讓我們執(zhí)行的時(shí)候思路更加清晰。產(chǎn)品經(jīng)理的本質(zhì)工作是產(chǎn)品與商業(yè)的平衡，而我們的角色應(yīng)該是做到設(shè)計(jì)與產(chǎn)品體驗(yàn)與商業(yè)的平衡，不僅僅是視覺層面上的。促新促活拉收更多是產(chǎn)品經(jīng)理要考慮的問題，而回到我們?cè)O(shè)計(jì)的層面，我們?cè)诒ＷC輸出質(zhì)量的前提下，需要在如何通過運(yùn)營(yíng)活動(dòng)傳遞品牌形象上多做些研究和思考。
品牌如何被感知
用戶通過各種類型的營(yíng)銷方式接觸到我們的產(chǎn)品，感知到我們的品牌符號(hào)，從而了解我們的品牌性格及內(nèi)核，運(yùn)營(yíng)活動(dòng)是用戶感知我們的一個(gè)主要場(chǎng)景。用戶從外到內(nèi)感知到我們，我們從內(nèi)而外逐步具像化信息使用戶感知，通過品牌符號(hào)來具像化設(shè)定，讓用戶明確的感受到我們的視覺、聲音、表現(xiàn)、內(nèi)容是什么樣子的。這些標(biāo)志性的符號(hào)代表了品牌內(nèi)核要傳達(dá)的內(nèi)容，也映射了我們的品牌性格和內(nèi)核，使用戶直觀的感受我們的品牌。作為設(shè)計(jì)師我們的本職工作是關(guān)注并定義視覺符號(hào)的內(nèi)容，其中包含了顏色、logo、字體、圖形、影響等視覺層面的內(nèi)容。但品牌對(duì)于用戶而言是一種多維度的感知，并不是某一種單獨(dú)的感受，所以也需要我們盡可能豐富其他維度的品牌符號(hào)，比如文案風(fēng)格，聲音語(yǔ)言系統(tǒng)，實(shí)現(xiàn)形式上的具像化。定義品牌的視覺符號(hào)，首先我們需要清楚品牌的內(nèi)核及性格是什么。
QQ空間品牌符號(hào)的定義
回到我們自己的產(chǎn)品QQ空間，“活力”是品牌的內(nèi)核，QQ空間品牌的視覺風(fēng)格一直在根據(jù)時(shí)代的變化不斷更新，但其“活力”的內(nèi)核并沒有改變，活力表現(xiàn)出來新穎、有趣、鮮明的品牌性格。那品牌符號(hào)的定義就會(huì)圍繞著新穎、有趣、和鮮明來開展。品牌性格關(guān)鍵詞之間互相碰撞我們可以得出一些基本思路，明亮對(duì)比的色彩風(fēng)格、新奇好玩的創(chuàng)意形式、變化發(fā)散的視覺結(jié)構(gòu)。由此我們可以充分具像化視覺符號(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)，一般來說我們會(huì)制作相應(yīng)的設(shè)計(jì)規(guī)范并交給CP去設(shè)計(jì)，但由于CP公司的運(yùn)營(yíng)模式，以及不固定的供應(yīng)商，加上參差不齊的設(shè)計(jì)水平，在交付的時(shí)候往往會(huì)出現(xiàn)各種各樣的問題，比如沒有清楚了解規(guī)范內(nèi)容，輸出風(fēng)格與品牌調(diào)性不匹配，重復(fù)素材來回用，甚至達(dá)不到要求的設(shè)計(jì)水平等等，最終不得不由設(shè)計(jì)師耗費(fèi)大量的時(shí)間去進(jìn)行溝通和指導(dǎo)。在整個(gè)過程中，設(shè)計(jì)規(guī)范并沒有起到預(yù)期的作用，設(shè)計(jì)師反而花費(fèi)了更多的時(shí)間。所以我們需要解決如何讓規(guī)范發(fā)揮到該有的作用，盡可能的減少審核成本，解放設(shè)計(jì)師的時(shí)間。
我們制作設(shè)計(jì)規(guī)范時(shí)通常會(huì)比較直接的列出尺寸、位置、字體、間距等要求，cp設(shè)計(jì)師在拿到我們規(guī)范的時(shí)候只看到了這些框架和限制，并沒有去深入了解到我們品牌想傳達(dá)的感受。所以經(jīng)常會(huì)出現(xiàn)輸出風(fēng)格與品牌調(diào)性不匹配的問題。QQ空間新品牌更新后，我們嘗試了新的規(guī)范邏輯，先讓cp充分了解我們的品牌，從我們的品牌核心價(jià)值到品牌符號(hào)再到具體應(yīng)用，作出直觀的說明和示例，再?gòu)木唧w的場(chǎng)景去規(guī)范尺寸、字體間距等。規(guī)范分為兩個(gè)部分：視覺的大原則和具體場(chǎng)景標(biāo)準(zhǔn)化（規(guī)范對(duì)象也不僅僅只是CP，也包含了產(chǎn)品及運(yùn)營(yíng)）
1. 視覺大原則大原則目的是為了讓大家對(duì)品牌各方面有一個(gè)認(rèn)知，清楚品牌所要傳達(dá)的調(diào)性。
2. 具體應(yīng)用場(chǎng)景下的標(biāo)準(zhǔn)化針對(duì)用戶感知我們的具體場(chǎng)景做出明確的視覺規(guī)范，保證其視覺風(fēng)格的一致性。
3. 運(yùn)營(yíng)活動(dòng)頁(yè)
活動(dòng)頁(yè)面是用戶感知我們的一個(gè)主要場(chǎng)景，所有運(yùn)營(yíng)位置的banner素材基本上都是以活動(dòng)頁(yè)面的頭部進(jì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ī)范不能從根本上解決問題
活動(dòng)內(nèi)容能傳遞品牌形象的關(guān)鍵在與畫面中是否有品牌符號(hào)，針對(duì)品牌相關(guān)的活動(dòng)頁(yè)及素材，規(guī)范確實(shí)能起到一定的作用，但是在品牌符號(hào)比較有限的情況下，會(huì)導(dǎo)致最終輸出比較雷同，沒有辦法根據(jù)活動(dòng)主題靈活變動(dòng)。保證有足夠豐富的品牌符號(hào)是保證活動(dòng)頁(yè)面靈活多變并能保證品牌調(diào)性一致的關(guān)鍵點(diǎn)。在與cp公司對(duì)接的過程中我們發(fā)現(xiàn)cp設(shè)計(jì)師花在頁(yè)面的內(nèi)容排布上的時(shí)間占了大多數(shù)，相比之下活動(dòng)頁(yè)面頭部沒有那么的出彩，并且使用的素材基本都是隨處可見并且經(jīng)常重復(fù)使用的，除了logo之外完全沒有其他的品牌符號(hào)，導(dǎo)致整個(gè)活動(dòng)頁(yè)面沒有品牌識(shí)別度?？紤]到我們的相同活動(dòng)類型的內(nèi)容分布都差不多，并不需要太多創(chuàng)意性的設(shè)計(jì)。所以我們決定將這部分內(nèi)容標(biāo)準(zhǔn)化起來，讓cp在相同時(shí)間內(nèi)把重心放在活動(dòng)頭部的制作上，保證更高的質(zhì)量。一個(gè)活動(dòng)頁(yè)的頭部基本上是由三個(gè)大部分組成：背景、標(biāo)題和輔助元素。我們發(fā)現(xiàn)在背景的紋樣和輔助元素加入品牌符號(hào)是最能被感知的。所以在頭部這一部分，我們針對(duì)背景、和輔助元素，將頭部切分為底色、主題圖形和漂浮物三個(gè)方面來進(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)通過組建自由搭配出活動(dòng)頁(yè)面，然后不斷豐富頭部及其他組件的視覺素材以適配不同的活動(dòng)主題，在組件和素材足夠豐富的前提下，甚至可以直接根據(jù)關(guān)鍵詞自動(dòng)生成想要的活動(dòng)頁(yè)面，所以最終我們就開始了Xcube系統(tǒng)的搭建。
Xcube的搭建
Xcube是基于QQ空間營(yíng)收類活動(dòng)所搭建的H5活動(dòng)頁(yè)面智能生成系統(tǒng)，系統(tǒng)通過預(yù)設(shè)活動(dòng)組件的組合來完成頁(yè)面生成。系統(tǒng)內(nèi)會(huì)有各種類型活動(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素材圖都能通過預(yù)設(shè)的尺寸自動(dòng)生成。
Xcube最主要的用戶是產(chǎn)品經(jīng)理，如何讓產(chǎn)品經(jīng)理去自己制作一個(gè)活動(dòng)頁(yè)面，必須跳出設(shè)計(jì)師的角色去思考并去簡(jiǎn)化整個(gè)頁(yè)面的設(shè)計(jì)過程。每一個(gè)產(chǎn)品經(jīng)理都會(huì)有自己常用的活動(dòng)類型，我們首先按照這些活動(dòng)類型制作常用的活動(dòng)組件，然后搭配好相應(yīng)活動(dòng)類型的模板，產(chǎn)品可以直接在首頁(yè)選擇一個(gè)常用模板進(jìn)行編輯，也可以從空白新建一個(gè)新的活動(dòng)頁(yè)面。組件庫(kù)中也有很多通用的組件類型，可以滿足任何信息結(jié)構(gòu)。在首頁(yè)選擇從空白新建，產(chǎn)品經(jīng)理可以直接選擇我們搭配好的預(yù)設(shè)皮膚進(jìn)行編輯，也可以從頁(yè)面配色的選擇開始，然后再組建庫(kù)中選擇相應(yīng)的組建實(shí)現(xiàn)頁(yè)面的生成。也可以直接輸入關(guān)鍵字讓系統(tǒng)直接隨機(jī)生成搭配出相對(duì)應(yīng)的配色及頁(yè)面元素，優(yōu)先的智能匹配素材使得同一個(gè)頁(yè)面當(dāng)中的素材視覺風(fēng)格保持統(tǒng)一，同樣也可以在此基礎(chǔ)上進(jìn)行編輯和修改。組件編輯區(qū)域里面會(huì)根據(jù)關(guān)鍵字或者當(dāng)前配色自動(dòng)顯示匹配的素材樣式，也可以手動(dòng)上傳新的圖片素材，上傳過程中可編輯圖片素材信息及標(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)搭建完成，品牌的視覺符號(hào)及素材也在不斷的豐富中，Xcube的普及會(huì)大大提升日常運(yùn)營(yíng)活動(dòng)的效率。cp不用在進(jìn)行繁瑣的壘頁(yè)面和改尺寸的任務(wù)，相同的或者更少的時(shí)間可以用來制作素材，而且這些素材也可以保存在系統(tǒng)的素材庫(kù)中進(jìn)行重復(fù)使用；視覺也不用再花額外的時(shí)間去進(jìn)行審核工作，產(chǎn)品也省去了跟多方溝通的時(shí)間，由于產(chǎn)品能直接配置活動(dòng)，也省去了所有的開發(fā)成本，在這整個(gè)鏈條中，產(chǎn)品，視覺，交互，重構(gòu)，開發(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ǎng)站制作也會(huì)不斷的做更多新的探索。
.jpg)
