實戰復盤!QQ 20周年H5刷屏幕后的設計故事 - 優設網 - UISDC

實戰復盤!QQ 20周年H5刷屏幕后的設計故事

2019/06/09 7688評論區

項目概述

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

△ QQ 20年來的一路變遷

項目流程

項目歷時兩個月,從項目初期,視覺和產品密集溝通,了解需求,進行頭腦風暴,輸出多個視覺方案縱向對比,最后確定視覺風格,分配視覺工作(插畫,動畫,3D)。項目后期,包括開發還原,數據調配等眾多環節,環環相扣,缺一不可,一路過關斬將,整個 H5 需要不同崗位的高度配合和各專業的高度默契。

△ H5的項目流程圖

項目難點

1. 異地合作

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

△ 五款3D spaceQQ最終效果

2. 3D spaceQQ視覺還原

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

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

3. 視覺工作的同步進行

由于項目時間比較緊迫,而且 H5 加入了 3D 模型,還有需要大量的動效,所以需要在同一時間線上,同步進行,視覺稿輸出,動畫制作和 3D 模型打磨??简炘O計師的溝通和執行能力。與此同時,需要隨時和開發同步動畫 demo 以確保動畫可實現。和產品密集溝通,及時根據文案調整畫面。

設計理念

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

概念設計

1. H5整體視覺風格

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

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

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

△ QQ原始對話框

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

△ 重繪對話框

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

△ 經典頭像的重繪

△ 經典頭像穿插在H5中的小彩蛋

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

動畫設計

1. 視覺動態化方案

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

2. 動畫制作

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

  • 全部元素可循環
  • 盡可能少的幀數
  • 可重復使用的素材

△ 設計了4個不同的色塊流動loop,方便開發安插在每頁合適的位置

3. 導出與同步

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

△ 第6頁動畫導出序列

太空QQ形象設定

創建了四款全新的 spaceQQ,根據用戶的 QQ 年齡而設計。根據用戶的 QQ 年齡,分了四個款式的鵝:奢華,智能,閃亮和神秘四個概念,一個遞進的尊貴程度,刺激用戶分享欲。包括基礎款的 QQ 在內,共創造了 5 個類型的 spaceQQ。每個設計都基于基本 spaceQQ 的形式,但是套裝的顏色和細節根據各自的概念各有特色。

△ spaceQQ總覽圖

配色方案

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

關于運營

1. 專屬感

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

2. 情緒調動

對于當下的運營活動來說,趣味性是引爆轉發量的重要元素,H5 結合 QQ 用戶創作的背景音樂和能夠調動用戶情感的設計語言來釋放用戶的情緒,比如驚喜感(用戶結合 QQ 的標志性音效創作的背景音樂),榮譽感(不同 Q 齡獲取相應的 spaceQQ)等,讓用戶產生持續的驚喜感,在懷舊和新鮮感中得到滿足,提升用戶活躍性。

總結

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

福利

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

掃碼領取專屬「個人軌跡」:

歡迎關注「騰訊ISUX」的公眾號:

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://wap.maladuo.cn/qq-20th-anniversary-h5-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計師 扁平化設計 版式設計 交互設計師 界面設計 排版布局 職場 優設專訪 優設大課堂 配色 視覺設計 web前端開發 素材下載 設計流程 AI教程 設計理論 神器下載 字體下載 設計師專訪 psd下載 平面設計 用戶體驗設計 設計趨勢 設計規范 海報設計 動效設計 圖標設計 logo設計 產品設計 ICON 神器推薦 App設計 職場規劃 字體設計 酷站推薦 交互設計 ui設計 設計師職場 優秀網頁設計 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

新世纪娱乐网址 湾仔区| 景德镇市| 凤城市| 长寿区| 镇江市| 隆回县| 南昌县| 延安市| 健康| 宜兰市| 玉山县| 丰宁| 琼结县| 湖南省| 衡水市| 区。| 旺苍县| 霍邱县| 工布江达县| 富宁县| 安多县| 林周县| 称多县| 新晃| 喜德县| 荥阳市| 皮山县| 湟源县| 合阳县| 噶尔县| 长寿区| 钟山县| 嘉义市| 甘孜县| 伊金霍洛旗| 莱芜市| 萝北县| 鲁甸县| 梅河口市| 科技| 兴山县| 东光县| 衡阳县| 三穗县| 宜良县| 凤城市| 闵行区| 清丰县| 应城市| 页游| 潮安县| 洪雅县| 彭水| 库车县| 荣成市| 秭归县| 聊城市| 成都市| 德兴市| 交城县| 石渠县| 合水县| 施秉县| 乌拉特中旗| 宣恩县| 普定县| 阿合奇县| 韩城市| 阳泉市| 六安市| 汉阴县| 兖州市| 浦东新区| 莱西市| 马鞍山市| 富宁县| 共和县| 逊克县| 广灵县| 买车| 沁源县| 历史| 阿克| 台东县| 法库县| 阳朔县| 东明县| 吴堡县| 西丰县| 兴仁县| 永德县| 张家界市| 建水县| 贵州省| 喀喇沁旗| 巴南区| 庆云县| 鲜城| 纳雍县| 沂水县| 东源县| 西畴县| 邻水| 垦利县| 明光市| 武夷山市| 石楼县| 永兴县| 上蔡县| 阳高县| 定日县| 嘉善县| 古丈县| 滁州市| 潞城市| 巴东县| 博野县| 石楼县| 油尖旺区| 麻城市| 太原市| 通化市| 沙河市| 达拉特旗| 怀化市| 汪清县| 武清区| 桃源县| 西乌珠穆沁旗| 福鼎市| 卢湾区| 米林县| 柳州市| 邢台县| 襄汾县| 宣化县| 古丈县|