12年的時(shí)光里，QQ空間記錄了你我TA之間最真實(shí)、最有溫度的瞬間。還記得當(dāng)年的火星文和非主流照片、初中高中到大學(xué)的空間相冊(cè)嗎？它不僅承載著數(shù)億用戶的美好過往，還是每一代年輕人心中的烏托邦�！翱傆泄适�，不負(fù)時(shí)光”，此次活動(dòng)主題正是來(lái)源于此。我們重新定義空間的品牌形象，通過更青春、活力、趣味化的設(shè)計(jì)語(yǔ)言，結(jié)合空間產(chǎn)品功能玩法，完成一系列的運(yùn)營(yíng)設(shè)計(jì)內(nèi)容，刷新用戶對(duì)空間的固有印象，給用戶帶來(lái)不一樣的趣味體驗(yàn)。

一. 12周年品牌設(shè)定

整體品牌創(chuàng)意

我們希望通過一致性的品牌設(shè)計(jì)語(yǔ)言，將項(xiàng)目所囊括的內(nèi)容統(tǒng)一設(shè)計(jì)，從而提升此次項(xiàng)目的品牌識(shí)別度。星星復(fù)雜的外形帶給我們不少挑戰(zhàn)，也嘗試過添加另外一個(gè)元素來(lái)裝飾，但效果也差強(qiáng)人意。經(jīng)過大量嘗試后，我們基于原始圖形再設(shè)計(jì)，通過黃+黑+白+星星的圖形，讓整體更多樣化、活躍和有趣。通過“12與星星”相結(jié)合，運(yùn)動(dòng)感的線條代表Qzone的過往足記，也象征未來(lái)的發(fā)展與延續(xù)。

品牌設(shè)計(jì)元素應(yīng)用

基于網(wǎng)格設(shè)計(jì)的形式，可以很方便地布局與構(gòu)成內(nèi)容：比如圖案、標(biāo)志、文字、二維碼等。不同圖形的組合拼接，形成多樣化的設(shè)計(jì)樣式，具有很強(qiáng)的可拓展性。結(jié)合不同的營(yíng)銷計(jì)劃，可以很快速地應(yīng)用在動(dòng)畫、印刷、插圖頁(yè)面等。這里也會(huì)輸出設(shè)計(jì)規(guī)范，從而在整體上保持品牌的一致性。

字體設(shè)計(jì)系統(tǒng)

字體的設(shè)計(jì)以“造字工房版黑”為骨骼，原始字體較粗，如果直接用于12周年項(xiàng)目中會(huì)略顯笨重。一般來(lái)說(shuō)，字體設(shè)計(jì)有三種常用方法：”半圓裝飾法、切角裝飾法、筆畫（細(xì)節(jié)）添加法”。我們?cè)谥匦?a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設(shè)計(jì)字體時(shí)，通過造字手法中的“細(xì)節(jié)添加”，在“橫豎撇捺”的筆畫端點(diǎn)處添加修飾，與空間品牌設(shè)定有更多的融入感。在前期，我們圍繞如下3個(gè)方向來(lái)完成字體設(shè)計(jì)。

最終在方案三的基礎(chǔ)上繼續(xù)細(xì)化，此步驟需要遵守五大原則，即：橫細(xì)豎粗，副細(xì)主粗，內(nèi)細(xì)外粗，密細(xì)疏粗和交叉減細(xì)，其余的文字也按照此規(guī)范逐個(gè)完成設(shè)計(jì)。

二. 整合設(shè)計(jì)運(yùn)營(yíng)

在項(xiàng)目執(zhí)行過程中，我們圍繞設(shè)定的品牌元素及規(guī)范，結(jié)合具體的項(xiàng)目需求進(jìn)行設(shè)計(jì)應(yīng)用。在各個(gè)子項(xiàng)目中保持品牌風(fēng)格的延續(xù)感與一致性。

創(chuàng)意視頻H5

照片也許是回憶青春最直接的方式了，楊洋化身空間大使，帶領(lǐng)用戶來(lái)品鑒自己的故事。作為此次活動(dòng)的重頭戲，創(chuàng)意H5的所牽扯的人員及工作量十分龐大，所以在前期針對(duì)各個(gè)環(huán)節(jié)都要考慮周到，包括：拍攝腳本的細(xì)化、如何跟開發(fā)更好地配合輸出、最后交付的內(nèi)容及時(shí)間節(jié)點(diǎn)等等。項(xiàng)目后期的各個(gè)環(huán)節(jié)：CP執(zhí)行、后期制作、開發(fā)邏輯、開發(fā)預(yù)跑數(shù)據(jù)等內(nèi)容都是環(huán)環(huán)相扣，容不得半點(diǎn)疏忽。

Qzone12周年楊洋創(chuàng)意H5視頻（主人與訪客視頻）

1. 帶著后期的思路來(lái)拍攝

在項(xiàng)目的前、中、后期，我們也時(shí)刻面臨各種挑戰(zhàn)與困難。在拍攝腳本策劃、現(xiàn)場(chǎng)拍攝及實(shí)時(shí)合成、CP視頻會(huì)議等環(huán)節(jié)逐層把關(guān)，以確保最終內(nèi)容的完好輸出。

現(xiàn)場(chǎng)拍攝也要考慮視頻后期的執(zhí)行，考慮光影、透視、鏡頭運(yùn)動(dòng)、收音等要素，與后期流程更好地銜接，減少設(shè)計(jì)與開發(fā)合成視頻的壓力。藝人對(duì)自己的形象要求特別高也很敬業(yè)，在拍攝完成當(dāng)晚，香港執(zhí)行公司也在凌晨趕工，輸出第一版Rough Cut，和大家溝通后面的制作計(jì)劃。

2. H5體驗(yàn)流程優(yōu)化

最初的技術(shù)方案希望通過在線實(shí)時(shí)渲染，讓用戶稍作等待即可觀看自己的視頻，但實(shí)際后臺(tái)合成時(shí)間大概要3-5分鐘，這里最終方案是通過后臺(tái)預(yù)先渲染視頻。

1. 如果有好友分享或生成過視頻，會(huì)優(yōu)先展示他們的入口，用戶可以先觀看好友的故事。

2. 如果沒有好友分享過，這里展示幕后花絮視頻，并激活此用戶的合成視頻需求，在視頻制作完成后，在Qzone“與我相關(guān)”進(jìn)行提示。

3.后期制作

最終的視頻是由開發(fā)側(cè)來(lái)合成渲染，并不是由設(shè)計(jì)單獨(dú)輸出一條視頻，每個(gè)用戶都有屬于自己獨(dú)一無(wú)二的內(nèi)容，在項(xiàng)目中也隨時(shí)克服困難與挑戰(zhàn)，保證用戶的內(nèi)容都以最好的狀態(tài)呈現(xiàn)。

01. 視覺風(fēng)格的設(shè)定

為確保項(xiàng)目如期上線，以及最終的視覺展示效果，我們與外部CP隨時(shí)保持溝通。內(nèi)部設(shè)計(jì)師對(duì)視頻的每個(gè)場(chǎng)景，逐個(gè)確定分鏡草圖并給出修改意見，確定每個(gè)場(chǎng)景的模型、材質(zhì)、貼圖、光影的設(shè)計(jì)風(fēng)格，以保證整個(gè)影片前后場(chǎng)景的流暢銜接。

視頻涉及到多個(gè)場(chǎng)景，為確保最終效果保持一致，內(nèi)部設(shè)計(jì)師會(huì)制定燈光、材質(zhì)規(guī)范給執(zhí)行公司。整體空間以簡(jiǎn)潔的垂直墻面搭建組合，細(xì)節(jié)之處用三角元素作點(diǎn)綴，簡(jiǎn)單的幾何形也方便制作微動(dòng)態(tài)效果，讓整個(gè)場(chǎng)景更加靈動(dòng)活潑，更好地與12周年的品牌設(shè)定相融合。

色彩搭配也繼承了空間品牌色，背景的空間設(shè)計(jì)以黑、白、黃為主基調(diào)，配合柔和的白色燈光與磨砂質(zhì)感的墻面，讓空間顯得簡(jiǎn)潔而大氣，貼圖上靈活運(yùn)用品牌圖形元素，凸顯出場(chǎng)景的夢(mèng)幻基調(diào)與時(shí)尚感。

02. 讓最終合成畫面更有真實(shí)感

由于用戶圖片與背景視頻是分離的，這些內(nèi)容要后臺(tái)疊加渲染，最終展示的效果難免會(huì)有些許不完美，我們也在如下幾個(gè)維度盡力做到更好。

分層輸出設(shè)計(jì)稿

Picture Mask Layer 用來(lái)提供遮罩范圍，開發(fā)側(cè)通過拾取顏色來(lái)做圖片遮罩；Final Render Layer交付開發(fā)最終渲染合成；Tracking Data 用來(lái)定位每一幀用戶圖片的坐標(biāo)。

用戶內(nèi)容匹配背景畫面運(yùn)動(dòng)

這里需要計(jì)算出圖片展示區(qū)域內(nèi)，每一幀的坐標(biāo)數(shù)據(jù)，從而讓用戶圖片與背景視頻保持一致的運(yùn)動(dòng)節(jié)奏。通過Mocha反求出這些區(qū)域內(nèi)的坐標(biāo)，最終將坐標(biāo)文檔交付給開發(fā)者。

緩慢的鏡頭運(yùn)動(dòng)

由于圖片在后臺(tái)合成時(shí)不支持做Motion Blur，這里通過緩慢的鏡頭運(yùn)動(dòng)，在動(dòng)畫播放時(shí)盡量減少合成區(qū)域的運(yùn)動(dòng)模糊。

03. 讓用戶圖片呈現(xiàn)效果更自然

數(shù)以億級(jí)的空間用戶，照片尺寸也參差不齊。一般來(lái)說(shuō)，用戶的圖片比例大致包括：3:2，4:3，5:4，16:9等。為了更好地滿足用戶圖片的展示效果，這里最終鎖定在方形與圓形的裁切方案，讓內(nèi)容的呈現(xiàn)更統(tǒng)一。在合成時(shí)發(fā)現(xiàn)圖片邊緣會(huì)出現(xiàn)嚴(yán)重的鋸齒，在反復(fù)嘗試之后，通過計(jì)算“色彩均值”計(jì)算優(yōu)化的方式，讓Picture Mask Layer的邊緣顏色與背景色反差變小，最終的畫面得到很大改觀。

04. 最大限度減少后臺(tái)視頻合成的成本

盡量讓文案描述有“包容感”，如：“總有人和你（ta）演繹其中一段，或長(zhǎng)或短”，以及替換語(yǔ)音文件中的指代詞等小技巧，完美地幫開發(fā)省下了幾倍的合成工作量。

在視頻開場(chǎng)與結(jié)尾需要用戶交互的地方，使用H5頁(yè)面來(lái)制作，項(xiàng)目成員可以同步進(jìn)行各自的工作，設(shè)計(jì)進(jìn)度不直接影響后臺(tái)合成視頻。

每個(gè)用戶的故事都是彌足珍貴的，代表著每個(gè)人的青春時(shí)光。每個(gè)畫面背后，也都是團(tuán)隊(duì)成員花費(fèi)大量心思來(lái)打磨完成的，從而保證最終H5的設(shè)計(jì)輸出質(zhì)量。

預(yù)熱H5活動(dòng)頁(yè)

作為首批上線的活動(dòng)之一，為楊洋代言空間做前期造勢(shì)，吸引更多人氣并關(guān)注后續(xù)活動(dòng)。在頁(yè)面的設(shè)計(jì)中，也希望通過“明星+內(nèi)容”營(yíng)造更多的融合感，巧妙地通過藝人的短視頻引出活動(dòng)內(nèi)容。

12周年品牌所設(shè)定的網(wǎng)格設(shè)計(jì)系統(tǒng)，也同樣應(yīng)用在頁(yè)面Loading、引導(dǎo)視頻以及UI設(shè)計(jì)中。開場(chǎng)部分通過楊洋的視頻引入，將品牌文字、品牌色、圖形融合再設(shè)計(jì)，文字內(nèi)容以Motion Type作為背景，讓“文字+圖形+藝人”銜接更自然流暢，活動(dòng)頁(yè)面的引出更有代入感。

主頁(yè)面的UI部分，也基于品牌的Pattern進(jìn)行再設(shè)計(jì)，如：主頁(yè)面的切角設(shè)計(jì)樣式，與星星的切角相呼應(yīng)。

為增加用戶的參與感，在活動(dòng)中設(shè)有送禮、簽到、互動(dòng)彈幕等模塊，通過適當(dāng)重組、融合與變形，在品牌識(shí)別上保持延續(xù)性。

楊洋官方代言視頻

我們將人物、圖形、文字相結(jié)合，更多地傳達(dá)產(chǎn)品的品牌感，通過Motion Graphic的設(shè)計(jì)形式來(lái)豐富畫面的表現(xiàn)力，讓內(nèi)容也更易于理解和傳播。

在人物的摳像部分，由于藝人姿勢(shì)一直在移動(dòng)，通過一級(jí)摳像無(wú)法完美得到人物輪廓，一些地方甚至需要逐幀來(lái)?yè)�。�?dòng)畫設(shè)計(jì)表現(xiàn)中，避免畫面在停留時(shí)過于呆板，星星動(dòng)畫也使用了局部翻轉(zhuǎn)的效果。為保證更連貫的動(dòng)態(tài)設(shè)計(jì)效果，根據(jù)藝人說(shuō)話的姿勢(shì)，將文字及圖案動(dòng)畫，在相鄰場(chǎng)景通過“動(dòng)勢(shì)”來(lái)切換，從而讓頁(yè)面設(shè)計(jì)更有整體性。

其他運(yùn)營(yíng)內(nèi)容設(shè)計(jì)

1. 助力活動(dòng)傳播視頻

將現(xiàn)場(chǎng)的拍攝花絮，與空間的產(chǎn)品功能相融合，通過曝光現(xiàn)場(chǎng)的一些精彩內(nèi)容，給用戶制造懸念。視頻也在Qzone官方賬號(hào)、APP開機(jī)動(dòng)畫、騰訊視頻等大范圍推廣傳播，讓用戶對(duì)12周年未來(lái)的活動(dòng)有更多期待。

2. “楊洋有話對(duì)你說(shuō)” H5活動(dòng)頁(yè)

用戶通過輸入自己的名字，會(huì)獲得一段楊洋想對(duì)你說(shuō)的話，最終用戶的名字會(huì)以“魔法”的形式出現(xiàn)在楊洋手中的板子上，這里結(jié)合“視頻合成+優(yōu)圖模擬語(yǔ)音黑科技”，讓活動(dòng)的玩法更加趣味，滿足用戶及粉絲獵奇的小心思，從而激發(fā)用戶參與和傳播。

三. Qzone x QQ x MINI跨界品牌合作

MINI Cooper，無(wú)論它是叱咤賽場(chǎng)風(fēng)云，還是電影中的超級(jí)駕駛機(jī)器，亦或是大家眼中永遠(yuǎn)經(jīng)典的款式，這次MINI聯(lián)合Qzone及QQ開展跨界營(yíng)銷合作，用科技和藝術(shù)為都市創(chuàng)造力階層提供多樣的選擇方案�；�于Qzone12周年+QQ的品牌元素，共完成13套涂裝設(shè)計(jì)，12周年的品牌形象也在此次合作中得到更多延伸與拓展，線下活動(dòng)在深圳歡樂海岸以及長(zhǎng)沙泊富國(guó)際廣場(chǎng)盛大開啟。

QQ空間承載了幾億用戶的感動(dòng)瞬間，用戶的好故事也經(jīng)得起時(shí)間的沉淀，我們圍繞“總有故事，不負(fù)時(shí)光”的主題展開了一系列運(yùn)營(yíng)設(shè)計(jì)。從12周年的品牌設(shè)定、包裝、規(guī)范，到前期預(yù)熱、各個(gè)產(chǎn)品功能的推廣，再到創(chuàng)意H5視頻的漫長(zhǎng)打磨，我們將品牌設(shè)定、產(chǎn)品功能、趣味玩法相融合，讓整體設(shè)計(jì)的品質(zhì)感得到提升。最后我們也深信，用戶的好故事也一直在繼續(xù)，我們也期待更多的好故事，不負(fù)青春好時(shí)光。