Xcube 是基于 QQ空間營收類活動所搭建的 H5 活動頁面智能生成系統，是針對框架相對固定，高頻率的運營 H5 活動所設計。系統通過預設活動組件的組合來完成頁面生成，系統內會有各種類型活動的相關組件，系統內會預設很多常用活動模板，這些模板以及組件和素材會有各種不同維度的標簽（圣誕節，春節，熱鬧等），可以在系統直接輸入關鍵詞，即可有一套符合需求的頁面生成，然后在此基礎上編輯活動頁面文案，素材包括配置，到最終的發布都能一次性解決，甚至包括最終各個場景位置的 banner 素材圖都能通過預設的尺寸自動生成。最終所有的流程都簡化到一個點完成，省去了所有視覺和開發成本，在這整個鏈條中，產品，視覺，交互，重構，開發包括 cp 所有利益相關者的成本都得到了優化。不僅僅是運營活動，Xcube 也可用于更多高頻且固定框架的頁面的制作上。目前 Xcube 正在持續優化，暫時只針對內部使用。
在這里分享一下我們在日常運營 H5 活動設計當中遇到的問題以及 Xcube 開發的過程。
作為一名運營視覺設計師，針對運營活動需求我相信大家都會有太多的槽點：這個活動特別緊急，明天就要初稿！為什么不提前策劃好，都是臨時調整！什么！標題都還沒定就直接做視覺？等等。
確實，在日常工作當中，我們承受了太多突如其來的「驚喜」，不斷的壓縮時間趕進度，猝不及防的調整和修改，甚至推翻重來。導致我們經常會消耗大量的時間和精力去填補這些大坑小坑。在整個過程中，我們既要考慮到對業務的貢獻，而且還得體現出設計的價值。最終數據不好的話還有可能被指設計能力不行，數據好又沒辦法直接證明是設計帶來的。
一、運營活動的目的
雖然我們經常會吐槽，但客觀來說，我們還是應該理性的思考一下，跳出設計師的身份，站在全鏈路的角度去了解一下運營活動的目的和作用。產品經理通過策劃組織各種活動吸引用戶參與關注，以此達到宣傳推廣目的的手段，總的來說運營活動有這幾個核心目標。
1. 拉新（拉新用戶+創新內容）
通過傳播吸引新用戶，讓平臺在短的時間內，用戶指數實現增長。用戶體量越大，越需要持續的拉新、拉新、再拉新。新用戶創造新內容，新內容再持續的吸引新的用戶，平臺上創造出越來越多的新內容。
2. 促活（用戶活躍+內容活水）
拉新、留存、促活，是用戶運營的關鍵路徑。高的用戶活躍度，使平臺內的內容變活水。
3. 商業（促進轉化+增加收入）
顧名思義，不斷的拉新和新內容的不斷創造以及高用戶活躍度能帶來商業核心價值的轉化。
4. 口碑（品牌形象及傳播）
活動的運營有助于品牌形象的塑造，通過活動持續普及品牌，讓用戶感知品牌符號，持續加強品牌與用戶之間的聯系。
綜上所描述，是不是就可以理解為什么會有頻繁的活動節奏，為了促新促活拉收需要有太多太多內容的更新和輸出，也會有太多策略上的調整。那在我們的角色上，在活動開始之前先盡可能弄清楚這次活動的目標和側重點，從而可以規避很多問題，讓我們執行的時候思路更加清晰。產品經理的本質工作是產品與商業的平衡，而我們的角色應該是做到設計與產品體驗與商業的平衡，不僅僅是視覺層面上的。
促新促活拉收更多是產品經理要考慮的問題，而回到我們設計的層面，我們在保證輸出質量的前提下，需要在如何通過運營活動傳遞品牌形象上多做些研究和思考。
二、品牌如何被感知
用戶通過各種類型的營銷方式接觸到我們的產品，感知到我們的品牌符號，從而了解我們的品牌性格及內核，運營活動是用戶感知我們的一個主要場景。
用戶從外到內感知到我們，我們從內而外逐步具像化信息使用戶感知，通過品牌符號來具像化設定，讓用戶明確的感受到我們的視覺、聲音、表現、內容是什么樣子的。
這些標志性的符號代表了品牌內核要傳達的內容，也映射了我們的品牌性格和內核，使用戶直觀的感受我們的品牌。
作為設計師我們的本職工作是關注并定義視覺符號的內容，其中包含了顏色、logo、字體、圖形、影響等視覺層面的內容。但品牌對于用戶而言是一種多維度的感知，并不是某一種單獨的感受，所以也需要我們盡可能豐富其他維度的品牌符號，比如文案風格，聲音語言系統，實現形式上的具像化。定義品牌的視覺符號，首先我們需要清楚品牌的內核及性格是什么。
三、QQ空間品牌符號的定義
回到我們自己的產品 QQ空間，「活力」是品牌的內核，QQ空間品牌的視覺風格一直在根據時代的變化不斷更新，但其「活力」的內核并沒有改變，活力表現出來新穎、有趣、鮮明的品牌性格。那品牌符號的定義就會圍繞著新穎、有趣和鮮明來開展。
品牌性格關鍵詞之間互相碰撞我們可以得出一些基本思路，明亮對比的色彩風格、新奇好玩的創意形式、變化發散的視覺結構。由此我們可以充分具像化視覺符號（顏色、圖形、字體、文案、影像等）并體現在我們的運營活動頁面當中。
四、高頻次日常運營
我們日常工作中也會有很大一部分重復、機械、不需要太多獨創性的高頻次的小型活動，一般來說我們會制作相應的設計規范并交給 CP 去設計，但由于 CP 公司的運營模式，以及不固定的供應商，加上參差不齊的設計水平，在交付的時候往往會出現各種各樣的問題，比如沒有清楚了解規范內容，輸出風格與品牌調性不匹配，重復素材來回用，甚至達不到要求的設計水平等等，最終不得不由設計師耗費大量的時間去進行溝通和指導。在整個過程中，設計規范并沒有起到預期的作用，設計師反而花費了更多的時間。所以我們需要解決如何讓規范發揮到該有的作用，盡可能的減少審核成本，解放設計師的時間。
我們制作設計規范時通常會比較直接的列出尺寸、位置、字體、間距等要求，cp設計師在拿到我們規范的時候只看到了這些框架和限制，并沒有去深入了解到我們品牌想傳達的感受。所以經常會出現輸出風格與品牌調性不匹配的問題。QQ空間新品牌更新后，我們嘗試了新的規范邏輯，先讓 cp 充分了解我們的品牌，從我們的品牌核心價值到品牌符號再到具體應用，作出直觀的說明和示例，再從具體的場景去規范尺寸、字體間距等。
規范分為兩個部分：視覺的大原則和具體場景標準化（規范對象也不僅僅只是CP，也包含了產品及運營）。
1. 視覺大原則
大原則目的是為了讓大家對品牌各方面有一個認知，清楚品牌所要傳達的調性。
2. 具體應用場景下的標準化
針對用戶感知我們的具體場景做出明確的視覺規范，保證其視覺風格的一致性。
3. 運營活動頁
活動頁面是用戶感知我們的一個主要場景，所有運營位置的 banner 素材基本上都是以活動頁面的頭部進行的拓展，可見一個活動頁面頭部的重要性。我們發現在背景的紋樣和輔助元素加入品牌符號是最能被感知的。所以在頭部這一部分，我們針對標題、主題圖形、背景逐一進行了規范。在規范中，從標題到主題圖形到背景到 logo 到活動內容，根據設計的步驟每一步都進行了規范和示例。
五、規范不能從根本上解決問題
活動內容能傳遞品牌形象的關鍵在于畫面中是否有品牌符號，針對品牌相關的活動頁及素材，規范確實能起到一定的作用，但是在品牌符號比較有限的情況下，會導致最終輸出比較雷同，沒有辦法根據活動主題靈活變動。保證有足夠豐富的品牌符號是保證活動頁面靈活多變并能保證品牌調性一致的關鍵點。
在與 cp 公司對接的過程中我們發現 cp 設計師花在頁面的內容排布上的時間占了大多數，相比之下活動頁面頭部沒有那么的出彩，并且使用的素材基本都是隨處可見并且經常重復使用的，除了 logo 之外完全沒有其他的品牌符號，導致整個活動頁面沒有品牌識別度。
考慮到我們的相同活動類型的內容分布都差不多，并不需要太多創意性的設計。所以我們決定將這部分內容標準化起來，讓 cp 在相同時間內把重心放在活動頭部的制作上，保證更高的質量。
一個活動頁的頭部基本上是由三個大部分組成：背景、標題和輔助元素。我們發現在背景的紋樣和輔助元素加入品牌符號是最能被感知的。所以在頭部這一部分，我們針對背景、和輔助元素，將頭部切分為底色、主題圖形和漂浮物三個方面來進行規范會比較直觀。
除了頭部規范，我們針對黃鉆活動整理了所有能標準化的內容，制作成各種常用信息結構的組件，文本、圖片、圖文搭配、鏈接、按鈕、抽獎組件等，也規范了一些組件樣式和配色方案。
cp設計師在頁面排布時只需要在我們固定的框架下和選擇合適的配色方案的基礎上進行填充即可，可以把時間集中在頭部的設計上。在找 cp 公司嘗試了幾次之后發現輸出質量和效率都有大幅度提升。
新的頭部規范及標準化組件的可行，讓我們有了把所有標準化組件整合在一個系統當中的想法，系統可以實現通過組建自由搭配出活動頁面，然后不斷豐富頭部及其他組件的視覺素材以適配不同的活動主題，在組件和素材足夠豐富的前提下，甚至可以直接根據關鍵詞自動生成想要的活動頁面，所以最終我們就開始了 Xcube 系統的搭建。
六、Xcube的搭建
Xcube 是基于 QQ空間營收類活動所搭建的 H5 活動頁面智能生成系統，系統通過預設活動組件的組合來完成頁面生成。系統內會有各種類型活動的相關組件，這些模板以及組件和素材會有各種比如圣誕節，春節，熱鬧等不同維度的標簽，在系統直接輸入關鍵詞，即可有一套符合產品需求的頁面生成，然后在此基礎上編輯活動內容包括配置，到最終的發布都能一次性解決，甚至包括最終各個場景位置的 banner 素材圖都能通過預設的尺寸自動生成。
Xcube 最主要的用戶是產品經理，如何讓產品經理自己去制作一個活動頁面，必須跳出設計師的角色去思考并去簡化整個頁面的設計過程。
每一個產品經理都會有自己常用的活動類型，我們首先按照這些活動類型制作常用的活動組件，然后搭配好相應活動類型的模板，產品可以直接在首頁選擇一個常用模板進行編輯，也可以從空白新建一個新的活動頁面。組件庫中也有很多通用的組件類型，可以滿足任何信息結構。
在首頁選擇從空白新建，產品經理可以直接選擇我們搭配好的預設皮膚進行編輯，也可以從頁面配色的選擇開始，然后再組建庫中選擇相應的組建實現頁面的生成。也可以直接輸入關鍵字讓系統直接隨機生成搭配出相對應的配色及頁面元素，優先的智能匹配素材使得同一個頁面當中的素材視覺風格保持統一，同樣也可以在此基礎上進行編輯和修改。
組件編輯區域里面會根據關鍵字或者當前配色自動顯示匹配的素材樣式，也可以手動上傳新的圖片素材，上傳過程中可編輯圖片素材信息及標簽，方便系統之后智能識別。
頭部也預設了很多樣式，可以直接替換文案，也可針對核心字段進行簡單段樣式調整。
對于頁面組件的編輯，系統可進行實時保存，并有上一步撤回的功能，也可以恢復默認設置，右側組件編輯區域在設置組件樣式的同時也可以進行組建的配置。
編輯中也可以切換到預覽模式，根據不同機型進行預覽，讓產品經理對頁面核心信息的位置有所把握，切回編輯模式可繼續編輯。確認所有的編輯之后可直接配置活動以及測試部署，并提交審核。一直到最終的外網部署發布都能在同一個場景完成。
活動頁面制作完成之后可以在我的活動和全部活動里進行查看和管理。
目前 Xcube 平臺已經搭建完成，品牌的視覺符號及素材也在不斷的豐富中，Xcube 的普及會大大提升日常運營活動的效率。
cp 不用在進行繁瑣的壘頁面和改尺寸的任務，相同的或者更少的時間可以用來制作素材，而且這些素材也可以保存在系統的素材庫中進行重復使用；視覺也不用再花額外的時間去進行審核工作，產品也省去了跟多方溝通的時間，由于產品能直接配置活動，也省去了所有的開發成本，在這整個鏈條中，產品，視覺，交互，重構，開發包括 cp 所有利益相關者的成本都得到了優化。不僅僅是運營活動，Xcube 也可用于更多高頻且固定框架的頁面的制作上，后期我們會繼續優化并增加更多功能，相信 Xcube 日后會節約更多的實際成本。
目前 Xcube 正在持續優化，暫時只針對內部使用。
針對營收活動的品牌傳播及效率問題我們也會不斷的做更多新的探索。
圖片素材作者：Daniel Tan
「H5設計好文」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 9 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓