header_v1.7.40

設計故事 | QQ 20周年H5刷屏幕后

7天前發布

原創文章 / 多領域 / 觀點
騰訊ISUX 原創,如需商業用途或轉載請與騰訊ISUX聯系,謝謝配合。

It is ultra experience



01 項目概述 | Overview


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


QQ20年來的一路變遷




02 項目流程 | Project Process


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


H5的項目流程圖



03 項目難點 | Problem


1.異地合作


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


五款3D spaceQQ最終效果



2. 3D spaceQQ視覺還原


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


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




3.視覺工作的同步進行


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



04 設計理念 | The Theme


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




05 概念設計 | Concept & Design


H5整體視覺風格


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


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



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


QQ原始對話框



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


重繪對話框



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


經典頭像的重繪



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



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




06 動畫設計 | Animation Design


1.視覺動態化方案


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


2.動畫制作


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


a.全部元素可循環;b.盡可能少的幀數;c.可重復使用的素材


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



3.導出與同步


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


?第6頁動畫導出序列




07 太空QQ形象設定 | 5 Types Of SpaceQQ Design



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


Four new types of spaceQQ were created to enable different spaceQQ design can be set according to user's QQ subscription period. Four concepts such as luxury, smart, shining and mysterious were made for the new designs based on the characteristics of the users. Including basic spaceman QQ, five spaceQQs were created in total . Each design is based on the form of the basic spaceQQ, but the colors and details of the spacesuits are different according to each concept.


spaceQQ總覽圖




 08 配色方案?Color Variation


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




09 關于運營 | Operating


1.專屬感


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


2.情緒調動


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


結語


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


福利


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


掃碼領取專屬“個人軌跡”





感謝閱讀,以上內容均由騰訊ISUX團隊原創設計,以及騰訊ISUX版權所有,轉載請注明出處,違者必究,謝謝您的合作。


608

    文章信息

    • 文章標簽

    沒有新消息

    提示文案

    提示文案

    提示失敗
    提示成功
    波音平台菠菜网排名 洛隆县| 泸溪县| 建湖县| 青冈县| 弥勒县| 揭西县| 道孚县| 吉隆县| 石台县| 岫岩| 乌什县| 浦江县| 恩施市| 抚顺市| 陆河县| 肥东县| 广水市| 洛宁县| 阿克| 湛江市| 班戈县| 南充市| 太仓市| 增城市| 达州市| 二连浩特市| 崇左市| 梓潼县| 上林县| 宜昌市| 德化县| 呼玛县| 黔南| 运城市| 韶山市| 铅山县| 贺州市| 友谊县| 普兰店市| 平凉市| 徐水县| 江华| 且末县| 玉屏| 华池县| 荥经县| 观塘区| 天镇县| 莱芜市| 霍林郭勒市| 体育| 浪卡子县| 鄂温| 兰州市| 弋阳县| 泗洪县| 三都| 陇南市| 荆门市| 弥渡县| 全椒县| 梧州市| 精河县| 阿拉尔市| 安吉县| 广水市| 库车县| 南投市| 富蕴县| 循化| 日土县| 措美县| 霞浦县| 镇原县| 凉城县| 崇州市| 林甸县| 廊坊市| 镇雄县| 手机| 涞源县| 兴城市| 巴马| 景宁| 麻栗坡县| 清新县| 阳江市| 桂林市| 大同市| 彩票| 观塘区| 永川市| 根河市| 新宁县| 鹤庆县| 遂平县| 横山县| 蓬莱市| 景泰县| 洛隆县| 盖州市| 鹰潭市| 淮安市| 象山县| 庆阳市| 容城县| 潜江市| 和政县| 夏邑县| 新晃| 新乡县| 新巴尔虎左旗| 华阴市| 新和县| 宁安市| 汉川市| 裕民县| 唐海县| 徐闻县| 峨山| 张北县| 林州市| 浦东新区| 章丘市| 德阳市| 海城市| 蒙山县| 泽州县| 逊克县| 叶城县| 金堂县| 保靖县| 屏山县| 芒康县| 昌邑市| 崇仁县| 塘沽区|