總有故事,不負時光 QQ空間12周年設定

tdstone

12年的時光里,QQ空間記錄了你我TA之間最真實、最有溫度的瞬間。還記得當年的火星文和非主流照片、初中高中到大學的空間相冊嗎?它不僅承載着數億用戶的美好過往,還是每一代年輕人心中的烏托邦。“總有故事,不負時光”,此次活動主題正是來源於此。我們重新定義空間的品牌形象,通過更青春、活力、趣味化的設計語言,結合空間產品功能玩法,完成一系列的運營設計內容,刷新用戶對空間的固有印象,給用戶帶來不一樣的趣味體驗。

一. 12周年品牌設定

 

整體品牌創意

我們希望通過一致性的品牌設計語言,將項目所囊括的內容統一設計,從而提升此次項目的品牌識別度。星星複雜的外形帶給我們不少挑戰,也嘗試過添加另外一個元素來裝飾,但效果也差強人意。經過大量嘗試後,我們基於原始圖形再設計,通過黃+黑+白+星星的圖形,讓整體更多樣化、活躍和有趣。通過“12與星星”相結合,運動感的線條代表Qzone的過往足記,也象徵未來的發展與延續。

品牌設計元素應用

基於網格設計的形式,可以很方便地布局與構成內容:比如圖案、標誌、文字、二維碼等。不同圖形的組合拼接,形成多樣化的設計樣式,具有很強的可拓展性。結合不同的營銷計劃,可以很快速地應用在動畫、印刷、插圖頁面等。這裡也會輸出設計規範,從而在整體上保持品牌的一致性。

字體設計系統

字體的設計以“造字工房版黑”為骨骼,原始字體較粗,如果直接用於12周年項目中會略顯笨重。一般來說,字體設計有三種常用方法:"半圓裝飾法、切角裝飾法、筆畫(細節)添加法"。我們在重新設計字體時,通過造字手法中的“細節添加”,在“橫豎撇捺”的筆畫端點處添加修飾,與空間品牌設定有更多的融入感。在前期,我們圍繞如下3個方向來完成字體設計。

最終在方案三的基礎上繼續細化,此步驟需要遵守五大原則,即:橫細豎粗,副細主粗,內細外粗,密細疏粗和交叉減細,其餘的文字也按照此規範逐個完成設計。

二. 整合設計運營

在項目執行過程中,我們圍繞設定的品牌元素及規範,結合具體的項目需求進行設計應用。在各個子項目中保持品牌風格的延續感與一致性。

創意視頻H5

照片也許是回憶青春最直接的方式了,楊洋化身空間大使,帶領用戶來品鑒自己的故事。作為此次活動的重頭戲,創意H5的所牽扯的人員及工作量十分龐大,所以在前期針對各個環節都要考慮周到,包括:拍攝腳本的細化、如何跟開發更好地配合輸出、最後交付的內容及時間節點等等。項目後期的各個環節:CP執行、後期製作、開發邏輯、開發預跑數據等內容都是環環相扣,容不得半點疏忽。

Qzone12周年楊洋創意H5視頻(主人與訪客視頻)


1. 帶着後期的思路來拍攝

在項目的前、中、後期,我們也時刻面臨各種挑戰與困難。在拍攝腳本策劃、現場拍攝及實時合成、CP視頻會議等環節逐層把關,以確保最終內容的完好輸出。

現場拍攝也要考慮視頻後期的執行,考慮光影、透視、鏡頭運動、收音等要素,與後期流程更好地銜接,減少設計與開發合成視頻的壓力。藝人對自己的形象要求特別高也很敬業,在拍攝完成當晚,香港執行公司也在凌晨趕工,輸出第一版Rough Cut,和大家溝通後面的製作計劃。

2. H5體驗流程優化

最初的技術方案希望通過在線實時渲染,讓用戶稍作等待即可觀看自己的視頻,但實際後台合成時間大概要3-5分鐘,這裡最終方案是通過後台預先渲染視頻。
1. 如果有好友分享或生成過視頻,會優先展示他們的入口,用戶可以先觀看好友的故事。
2. 如果沒有好友分享過,這裡展示幕後花絮視頻,並激活此用戶的合成視頻需求,在視頻製作完成後,在Qzone“與我相關”進行提示。

3. 後期製作

最終的視頻是由開發側來合成渲染,並不是由設計單獨輸出一條視頻,每個用戶都有屬於自己獨一無二的內容,在項目中也隨時克服困難與挑戰,保證用戶的內容都以最好的狀態呈現。

01. 視覺風格的設定

為確保項目如期上線,以及最終的視覺展示效果,我們與外部CP隨時保持溝通。內部設計師對視頻的每個場景,逐個確定分鏡草圖並給出修改意見,確定每個場景的模型、材質、貼圖、光影的設計風格,以保證整個影片前後場景的流暢銜接。

視頻涉及到多個場景,為確保最終效果保持一致,內部設計師會制定燈光、材質規範給執行公司。整體空間以簡潔的垂直牆面搭建組合,細節之處用三角元素作點綴,簡單的幾何形也方便製作微動態效果,讓整個場景更加靈動活潑,更好地與12周年的品牌設定相融合。

色彩搭配也繼承了空間品牌色,背景的空間設計以黑、白、黃為主基調,配合柔和的白色燈光與磨砂質感的牆面,讓空間顯得簡潔而大氣,貼圖上靈活運用品牌圖形元素,凸顯出場景的夢幻基調與時尚感。

02. 讓最終合成畫面更有真實感

由於用戶圖片與背景視頻是分離的,這些內容要後台疊加渲染,最終展示的效果難免會有些許不完美,我們也在如下幾個維度儘力做到更好。

分層輸出設計稿
Picture Mask Layer 用來提供遮罩範圍,開發側通過拾取顏色來做圖片遮罩;Final Render Layer交付開發最終渲染合成;Tracking Data 用來定位每一幀用戶圖片的坐標。

用戶內容匹配背景畫面運動
這裡需要計算出圖片展示區域內,每一幀的坐標數據,從而讓用戶圖片與背景視頻保持一致的運動節奏。通過Mocha反求出這些區域內的坐標,最終將坐標文檔交付給開發者。

緩慢的鏡頭運動
由於圖片在後台合成時不支持做Motion Blur,這裡通過緩慢的鏡頭運動,在動畫播放時盡量減少合成區域的運動模糊。

03. 讓用戶圖片呈現效果更自然

數以億級的空間用戶,照片尺寸也參差不齊。一般來說,用戶的圖片比例大致包括:3:2,4:3,5:4,16:9等。為了更好地滿足用戶圖片的展示效果,這裡最終鎖定在方形與圓形的裁切方案,讓內容的呈現更統一。在合成時發現圖片邊緣會出現嚴重的鋸齒,在反覆嘗試之後,通過計算“色彩均值”計算優化的方式,讓Picture Mask Layer的邊緣顏色與背景色反差變小,最終的畫面得到很大改觀。

04. 最大限度減少後台視頻合成的成本

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

在視頻開場與結尾需要用戶交互的地方,使用H5頁面來製作,項目成員可以同步進行各自的工作,設計進度不直接影響後台合成視頻。

每個用戶的故事都是彌足珍貴的,代表着每個人的青春時光。每個畫面背後,也都是團隊成員花費大量心思來打磨完成的,從而保證最終H5的設計輸出質量。

預熱H5活動頁

作為首批上線的活動之一,為楊洋代言空間做前期造勢,吸引更多人氣並關注後續活動。在頁面的設計中,也希望通過“明星+內容”營造更多的融合感,巧妙地通過藝人的短視頻引出活動內容。

12周年品牌所設定的網格設計系統,也同樣應用在頁面Loading、引導視頻以及UI設計中。開場部分通過楊洋的視頻引入,將品牌文字、品牌色、圖形融合再設計,文字內容以Motion Type作為背景,讓“文字+圖形+藝人”銜接更自然流暢,活動頁面的引出更有代入感。

主頁面的UI部分,也基於品牌的Pattern進行再設計,如:主頁面的切角設計樣式,與星星的切角相呼應。

為增加用戶的參與感,在活動中設有送禮、簽到、互動彈幕等模塊,通過適當重組、融合與變形,在品牌識別上保持延續性。

楊洋官方代言視頻

我們將人物、圖形、文字相結合,更多地傳達產品的品牌感,通過Motion Graphic的設計形式來豐富畫面的表現力,讓內容也更易於理解和傳播。

在人物的摳像部分,由於藝人姿勢一直在移動,通過一級摳像無法完美得到人物輪廓,一些地方甚至需要逐幀來摳。動畫設計表現中,避免畫面在停留時過於呆板,星星動畫也使用了局部翻轉的效果。為保證更連貫的動態設計效果,根據藝人說話的姿勢,將文字及圖案動畫,在相鄰場景通過“動勢”來切換,從而讓頁面設計更有整體性。

其他運營內容設計

1. 助力活動傳播視頻

將現場的拍攝花絮,與空間的產品功能相融合,通過曝光現場的一些精彩內容,給用戶製造懸念。視頻也在Qzone官方賬號、APP開機動畫、騰訊視頻等大範圍推廣傳播,讓用戶對12周年未來的活動有更多期待。

2. “楊洋有話對你說” H5活動頁

用戶通過輸入自己的名字,會獲得一段楊洋想對你說的話,最終用戶的名字會以“魔法”的形式出現在楊洋手中的板子上,這裡結合“視頻合成+優圖模擬語音黑科技”,讓活動的玩法更加趣味,滿足用戶及粉絲獵奇的小心思,從而激發用戶參與和傳播。

 

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

MINI Cooper,無論它是叱吒賽場風雲,還是電影中的超級駕駛機器,亦或是大家眼中永遠經典的款式,這次MINI聯合Qzone及QQ開展跨界營銷合作,用科技和藝術為都市創造力階層提供多樣的選擇方案。基於Qzone12周年+QQ的品牌元素,共完成13套塗裝設計,12周年的品牌形象也在此次合作中得到更多延伸與拓展,線下活動在深圳歡樂海岸以及長沙泊富國際廣場盛大開啟。


QQ空間承載了幾億用戶的感動瞬間,用戶的好故事也經得起時間的沉澱,我們圍繞“總有故事,不負時光”的主題展開了一系列運營設計。從12周年的品牌設定、包裝、規範,到前期預熱、各個產品功能的推廣,再到創意H5視頻的漫長打磨,我們將品牌設定、產品功能、趣味玩法相融合,讓整體設計的品質感得到提升。最後我們也深信,用戶的好故事也一直在繼續,我們也期待更多的好故事,不負青春好時光。

Tags: , , , ,

tdstone
萌寵來襲
上一遍
個性萌寵誕生記-形象篇
下一遍
8,257
QQ空間 新浪微博 Facebook Google+

相關推薦

留下你的想法吧