這次QQ 20周年引起的大規(guī)模的刷屏，也正是因?yàn)镼Q對于很多人來說，是一個成長、青春、溝通、時代流動的感知與回憶。

一、項(xiàng)目概述 | Overview

QQ20周年，是互聯(lián)網(wǎng)產(chǎn)品長青的一個傳說。就在20周年的時間節(jié)點(diǎn)，QQ向用戶提供一份關(guān)于他自己的、真誠熱切的QQ數(shù)據(jù)總結(jié)。通過數(shù)字，匯集出每個人自己的QQ時光歷程，從而牽引出每個人對于成長、青春、溝通、時代流動的感知與回憶，引發(fā)2019年一場集體的情感共鳴。

QQ20年來的一路變遷：

二、項(xiàng)目流程 | Project Process

項(xiàng)目歷時兩個月，從項(xiàng)目初期，視覺和產(chǎn)品密集溝通，了解需求，進(jìn)行頭腦風(fēng)暴，輸出多個視覺方案縱向?qū)Ρ?，最后確定視覺風(fēng)格，分配視覺工作（插畫，動畫，3D）。

項(xiàng)目后期，包括開發(fā)還原，數(shù)據(jù)調(diào)配等眾多環(huán)節(jié)，環(huán)環(huán)相扣，缺一不可以，一路過關(guān)斬將，整個H5需要不同崗位的高度配合和各專業(yè)的高度默契。

H5的項(xiàng)目流程圖：

三、項(xiàng)目難點(diǎn) | Problem

1. 異地合作

本次H5聯(lián)動了動效，3D，插畫設(shè)計師的共同合作，由于支持3D的設(shè)計師在韓辦公，所以大部分都是在線上全英溝通，包括前期的項(xiàng)目進(jìn)度同步，還有后期的模型調(diào)整等環(huán)節(jié)都能及時反饋，快速反應(yīng)，最后如期打磨出五款spaceQQ。算是一次順利的異地合作。

五款3D spaceQQ最終效果：

2. 3D spaceQQ視覺還原

3D鵝從設(shè)計軟件轉(zhuǎn)化為H5展示過程中，存在模型文件過大、材質(zhì)缺失等問題，直接影響用戶體驗(yàn)。在開發(fā)的過程中同學(xué)通過模型減面、重新選擇材質(zhì)，還有模型拆分等解決方法，在視覺觀感和性能中建立了平衡的杠桿，最終實(shí)現(xiàn)了15個SPCAE QQ的視覺還原。

五款3D spaceQQ最終視覺還原效果：

3. 視覺工作的同步進(jìn)行

由于項(xiàng)目時間比較緊迫，而且H5加入了3D模型，還有需要大量的動效，所以需要在同一時間線上，同步進(jìn)行，視覺稿輸出，動畫制作和3D模型打磨。考驗(yàn)設(shè)計師的溝通和執(zhí)行能力。與此同時，需要隨時和開發(fā)同步動畫demo以確保動畫可實(shí)現(xiàn)；和產(chǎn)品密集溝通，及時根據(jù)文案調(diào)整畫面。

四、設(shè)計理念 | The Theme

因?yàn)镼Q是陪伴了大多數(shù)用戶的一個產(chǎn)品，見證了整個互聯(lián)網(wǎng)社交的演變過程，容易引起用戶的情感共鳴。設(shè)計的初期，圍繞“個人軌跡”的主題發(fā)散了不同方向的視覺概念，在引起客戶共鳴感的復(fù)古元素和傳遞不斷“探索”未來的概念間尋找平衡點(diǎn)。最后沿用了20周年的太空概念貼合“探索”的主題，結(jié)合有年代特征的代表性視覺符號來引起“個人軌跡”的這一概念的用戶情感共鳴。

另外，H5運(yùn)用了3D打造了15只太空鵝，打造“個人軌跡”的專屬感，既聯(lián)動用戶溫暖的回憶之余，也增添了一些小驚喜。

五、概念設(shè)計 | Concept & Design

H5整體視覺風(fēng)格

QQ，是陪伴了大多數(shù)人成長的一個互聯(lián)網(wǎng)產(chǎn)品，其本身帶有很多高辨識度的視覺元素，例如對話框，提醒上線的音效等。因?yàn)镠5本身是一個大數(shù)據(jù)總結(jié)，專屬感非常強(qiáng)的一個產(chǎn)物，所以希望是喚醒用戶一些風(fēng)塵已久的記憶，就像打開時間膠囊般的期待和感動。同時也象征著QQ一直陪伴在身邊，從而引起用戶的共鳴。

設(shè)計方面，除了通過一些標(biāo)志性的視覺元素喚醒用戶的回憶之外，也加入QQ20周年的太空“探索”主題的元素，響應(yīng)20周年的主題之余，也寓意QQ不斷的對外探索，從多個維度來看世界，尋找有趣的內(nèi)容。

對話框，是承載數(shù)據(jù)的視覺符號，也是貫穿整個H5的重要視覺符號之一。寓意著QQ一直致力于“溝通”，而且不同時代的QQ對話框都各有特點(diǎn)，也是見證QQ時代變遷的重要元素，所以提取了三個階段代表性的對話框樣式來承載數(shù)據(jù)，并且加入有時代特征的視覺元素（如bb機(jī)，像素化的小箭頭等）作為輔助，增加H5的氛圍感，也算是視覺上的“小彩蛋”。

QQ原始對話框：

H5加入一些趣味感的元素，如笑臉，愛心等元素，背景輔以流動的彩色不規(guī)則圖案，來增加對話框的玩味。也寓意QQ20年來給用戶帶來源源不斷的樂趣，留下了不可取代的時代印記。

重繪對話框：

H5中也加入了很多好玩的元素，不同時代所用的移動設(shè)備，融合貼近太空“探索”主題的背景；利用帶手套的手和不同的元素進(jìn)行互動；增加重繪經(jīng)典頭像的互動動畫，加入QQ空間的植物等懷舊元素，增加H5的可玩性和驚喜感。

經(jīng)典頭像的重繪：

經(jīng)典頭像穿插在H5中的小彩蛋：

帶手套的手和有時代標(biāo)簽的元素互動：

六、動畫設(shè)計 | Animation Design

1. 視覺動態(tài)化方案

在動畫制作前期會出一份詳細(xì)的動態(tài)化分頁策劃，以及一份盡可能表達(dá)完整的動畫demo，能便于設(shè)計與開發(fā)能準(zhǔn)確的估算出制作周期。在開發(fā)完成預(yù)研測試后，基于動畫demo共同制定一個大致的動態(tài)化方案——對話框等大面積使用代碼實(shí)現(xiàn)，其他裝飾性小元素全部使用序列幀。在觀眾每滑一頁即可觸發(fā)當(dāng)前頁的動畫，且能保證大體動畫的流暢度。

2. 動畫制作

為了盡可能減少H5的運(yùn)算體積，又保證畫面動態(tài)的流暢程度，導(dǎo)出的序列必須滿足一下所有條件：

1. 全部元素可循環(huán)；
2. 盡可能少的幀數(shù)；
3. 可重復(fù)使用的素材。

設(shè)計了4個不同的色塊流動loop，方便開發(fā)安插在每頁合適的位置。

3. 導(dǎo)出與同步

在配合開發(fā)導(dǎo)出的階段，為了能明確序列的標(biāo)記，所有序列文件命名為xx-in/xx-loop/xx-out；使用同步工具以實(shí)現(xiàn)AE動畫序列導(dǎo)出和開發(fā)提取素材能同步進(jìn)行，并保持實(shí)時更新和迭代。

第6頁動畫導(dǎo)出序列：

七、太空QQ形象設(shè)定 | 5 Types Of SpaceQQ Design

創(chuàng)建了四款全新的spaceQQ，根據(jù)用戶的QQ年齡而設(shè)計。根據(jù)用戶的QQ年齡，分了四個款式的鵝：奢華，智能，閃亮和神秘四個概念，一個遞進(jìn)的尊貴程度，刺激用戶分享欲。包括基礎(chǔ)款的QQ在內(nèi)，共創(chuàng)造了5個類型的spaceQQ。每個設(shè)計都基于基本spaceQQ的形式，但是套裝的顏色和細(xì)節(jié)根據(jù)各自的概念各有特色。

spaceQQ總覽圖：

八、配色方案?Color Variation

用戶可以根據(jù)自己的喜好更改這5款spaceQQ的裝扮顏色。

九、關(guān)于運(yùn)營 | Operating

1. 專屬感

整個H5始終緊扣QQ20周的太空“探索”主題，整個H5，除了用數(shù)據(jù)喚醒用戶和QQ多年的點(diǎn)點(diǎn)滴滴之外，5個spaceQQ概念設(shè)定，既能增加用戶的新鮮感，又能刺激用戶的分享欲，C4D建立的3D形象豐富了整個H5的視覺層次，深化了QQ品牌的影響力，寓意鵝廠一直與時俱進(jìn)，緊貼潮流。

2. 情緒調(diào)動

對于當(dāng)下的運(yùn)營活動來說，趣味性是引爆轉(zhuǎn)發(fā)量的重要元素，H5結(jié)合QQ用戶創(chuàng)作的背景音樂和能夠調(diào)動用戶情感的設(shè)計語言來釋放用戶的情緒，比如驚喜感（用戶結(jié)合QQ的標(biāo)志性音效創(chuàng)作的背景音樂），榮譽(yù)感（不同Q齡獲取相應(yīng)的spaceQQ）等，讓用戶產(chǎn)生持續(xù)的驚喜感，在懷舊和新鮮感中得到滿足，提升用戶活躍性。

結(jié)語

QQ20周年H5設(shè)計，嘗試結(jié)合了3D，動畫，插畫等設(shè)計形態(tài)，為每一位用戶打造專屬的“個人軌跡”，通過數(shù)字，拼湊出和QQ的過往朝夕，引起用戶共鳴。鵝廠不斷創(chuàng)新探索的同時，也為用戶溫存屬于用戶自己的專屬回憶，深化QQ的品牌價值。

作者：噗噗 阿樂 Aiden，公眾號：騰訊ISUX（ID：tencent_isux）

來源：https://mp.weixin.qq.com/s/BaZRl6joIftVvZHS6UiyHg

題圖來自騰訊ISUX