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

    文章信息

    • 文章標簽

    沒有新消息

    提示文案

    提示文案

    提示失敗
    提示成功
    澳门赌博网站平台 焉耆| 苏尼特右旗| 开阳县| 杭锦旗| 平昌县| 阳东县| 拉萨市| 静乐县| 晋中市| 平顶山市| 东明县| 乌拉特后旗| 鲜城| 汝阳县| 融水| 黄山市| 成都市| 洛南县| 集贤县| 凤城市| 射阳县| 罗田县| 社旗县| 信丰县| 咸阳市| 普兰县| 策勒县| 内黄县| 泉州市| 朝阳县| 襄垣县| 长海县| 安远县| 西青区| 富源县| 泉州市| 中卫市| 武城县| 南平市| 东明县| 安图县| 靖宇县| 沂南县| 鄂温| 十堰市| 华亭县| 三门峡市| 阿瓦提县| 平凉市| 江源县| 泗洪县| 江陵县| 日土县| 延长县| 应用必备| 宣武区| 崇州市| 凤冈县| 辽源市| 浑源县| 错那县| 巨鹿县| 聂拉木县| 商河县| 桂平市| 和政县| 北海市| 宜宾县| 札达县| 武义县| 西吉县| 阿拉尔市| 德州市| 西充县| 福泉市| 五华县| 丹东市| 图木舒克市| 台前县| 郴州市| 临沂市| 桂阳县| 奇台县| 教育| 鄂托克旗| 阿拉善右旗| 宁南县| 乌审旗| 濉溪县| 渝中区| 仪征市| 军事| 昆明市| 神木县| 九龙坡区| 察隅县| 瑞安市| 枝江市| 临夏市| 肃北| 会昌县| 鹤峰县| 长顺县| 赞皇县| 陆良县| 武义县| 闸北区| 平遥县| 开江县| 泰州市| 南城县| 康定县| 项城市| 辰溪县| 囊谦县| 深泽县| 神池县| 河间市| 灌云县| 固阳县| 满城县| 娱乐| 呼玛县| 当阳市| 炉霍县| 神池县| 濉溪县| 高要市| 浠水县| 土默特右旗| 富裕县| 同德县| 永春县| 榆社县| 内丘县| 贵南县| 旬邑县|