如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

項目概述

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

△ QQ 20年來的一路變遷

項目流程

項目歷時兩個月，從項目初期，視覺和產(chǎn)品密集溝通，了解需求，進行頭腦風暴，輸出多個視覺方案縱向?qū)Ρ龋詈蟠_定視覺風格，分配視覺工作（插畫，動畫，3D）。項目后期，包括開發(fā)還原，數(shù)據(jù)調(diào)配等眾多環(huán)節(jié)，環(huán)環(huán)相扣，缺一不可，一路過關(guān)斬將，整個 H5 需要不同崗位的高度配合和各專業(yè)的高度默契。

△ H5的項目流程圖

項目難點

1. 異地合作

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

△ 五款3D spaceQQ最終效果

2. 3D spaceQQ視覺還原

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

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

3. 視覺工作的同步進行

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

設(shè)計理念

因為 QQ 是陪伴了大多數(shù)用戶的一個產(chǎn)品，見證了整個互聯(lián)網(wǎng)社交的演變過程，容易引起用戶的情感共鳴。設(shè)計的初期，圍繞「個人軌跡」的主題發(fā)散了不同方向的視覺概念，在引起客戶共鳴感的復古元素和傳遞不斷「探索」未來的概念間尋找平衡點。最后沿用了 20 周年的太空概念貼合「探索」的主題，結(jié)合有年代特征的代表性視覺符號來引起「個人軌跡」的這一概念的用戶情感共鳴。另外，H5 運用了 3D 打造了 15 只太空鵝，打造「個人軌跡」的專屬感，既聯(lián)動用戶溫暖的回憶之余，也增添了一些小驚喜。

概念設(shè)計

1. H5整體視覺風格

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

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

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

△ QQ原始對話框

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

△ 重繪對話框

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

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

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

△ 帶手套的手和有時代標簽的元素互動

動畫設(shè)計

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

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

2. 動畫制作

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

• 全部元素可循環(huán)
• 盡可能少的幀數(shù)
• 可重復使用的素材

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

3. 導出與同步

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

△ 第6頁動畫導出序列

太空QQ形象設(shè)定

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

△ spaceQQ總覽圖

配色方案

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

關(guān)于運營

1. 專屬感

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

2. 情緒調(diào)動

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

總結(jié)

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

福利

考慮到部分同學想更仔細地查看、保存或收藏高清大圖的需求，我們設(shè)置了關(guān)鍵詞，微信公眾號后臺以「spaceQQ+序號」的方式回復，例如「spaceQQ1」，即可逐一獲取對應(yīng)的高清頭像和壁紙。

掃碼領(lǐng)取專屬「個人軌跡」：

藍藍設(shè)計( www.li-bodun.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。