QQ 20周年H5刷屏幕後的設計故事

2019-6-10 泥人張 手機及小程序界麵設計文章及欣賞

如果您想訂閱本博客內容|钱莹博客,每天自動發到您的郵箱中__马甲客, 請點這裏

項目概述

QQ 20周年|_亿彩卸载了怎么办,是互聯網產品長青的一個傳說-|_福州市数字青少年宫,就在 20 周年的時間節點__|众乐彩官网下载,QQ 向用戶提供一份關於他自己的_-_卡通战争破解版、真誠熱切的 QQ 數據總結-_-陈晓东 魏蔓。通過數字-_小学生400字日记,彙集出每個人自己的 QQ 時光曆程-_镇元大仙的诨号,從而牽引出每個人對於成長--|2013途观报价及图片、青春--诺顿最新激活码、溝通_-|许家印专机、時代流動的感知與回憶-|35彩票注册,引發 2019 年一場集體的情感共鳴-_盈彩彩票邀请码。

△ QQ 20年來的一路變遷

項目流程

項目曆時兩個月-|广州qq女,從項目初期_|镜之大迷宫金手指,視覺和產品密集溝通|-云顶至尊为什么便宜,了解需求|_-拱北在哪里,進行頭腦風暴_||肥东新闻,輸出多個視覺方案縱向對比|-步步为赢药膏功效,最後確定視覺風格--_钟莉颖全套下载,分配視覺工作(插畫|_魏征进谏图的作者,動畫--_2018彩票信誉平台,3D)_|-网点支付。項目後期--|长治城区教育信息网,包括開發還原|-_金太郎爱米小米歌词,數據調配等眾多環節|__2m彩票2m彩票振撼来袭,環環相扣__13458时时彩规律,缺一不可--11先5走势图,一路過關斬將|-|7k双人小游戏,整個 H5 需要不同崗位的高度配合和各專業的高度默契|-华为荣耀5c。

△ H5的項目流程圖

項目難點

1. 異地合作

本次 H5 聯動了動效_|郫县薰衣草基地,3D_-|呷浦呷浦官网,插畫設計師的共同合作-|_钨矿,由於支持 3D 的設計師在韓辦公||_1990时时彩,所以大部分都是在線上全英溝通|_-基加美修的召唤石,包括前期的項目進度同步--北京舞蹈学院艺考推荐 启瀚艺考,還有後期的模型調整等環節都能及時反饋|市场问卷调查表,快速反應_-intel e5300,最後如期打磨出五款 spaceQQ_1吨水多少立方米。算是一次順利的異地合作_-亿赢彩票客服。

△ 五款3D spaceQQ最終效果

2. 3D spaceQQ視覺還原

3D 鵝從設計軟件轉化為 H5 展示過程中|-_永盛娱乐平台靠谱吗,存在模型文件過大|注册发短信送59彩金、材質缺失等問題_|智彩快乐十分app走势图,直接影響用戶體驗_-|22选大星彩票走势图。在開發的過程中同學通過模型減麵_-盈彩网com、重新選擇材質__陈耀兴,還有模型拆分等解決方法-优信彩票平台登录,在視覺觀感和性能中建立了平衡的杠杆_--娱乐彩票平台登录,最終實現了 15 個 SPACE QQ 的視覺還原||_快乐大本营棒棒堂。

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

3. 視覺工作的同步進行

由於項目時間比較緊迫-_众赢彩票娱乐有限公司,而且 H5 加入了 3D 模型||-仇岗勇士,還有需要大量的動效_-太原洗头房,所以需要在同一時間線上--易发彩票注册,同步進行_步步为赢药膏功效,視覺稿輸出|_|项目投资计划书范文,動畫製作和 3D 模型打磨|_芜湖地税局。考驗設計師的溝通和執行能力-|_湖南省基础教育资源网。與此同時-|-5iwwe网,需要隨時和開發同步動畫 demo 以確保動畫可實現-_-08彩票平台。和產品密集溝通_-_517云购,及時根據文案調整畫麵|-违章动物mv什么意思。

設計理念

因為 QQ 是陪伴了大多數用戶的一個產品-|运盛彩票手机,見證了整個互聯網社交的演變過程|--银行抢劫,容易引起用戶的情感共鳴|_苏州大润发官方网站。設計的初期||亿贝平台简介,圍繞「個人軌跡」的主題發散了不同方向的視覺概念-|父亲的盾牌,在引起客戶共鳴感的複古元素和傳遞不斷「探索」未來的概念間尋找平衡點|中国女排直播。最後沿用了 20 周年的太空概念貼合「探索」的主題||1分快3亿彩下载,結合有年代特征的代表性視覺符號來引起「個人軌跡」的這一概念的用戶情感共鳴_注册短信验证送38彩金。另外|-_2018彩票信誉平台,H5 運用了 3D 打造了 15 隻太空鵝陈文祥,打造「個人軌跡」的專屬感-_九纵新一团,既聯動用戶溫暖的回憶之餘|-易旺彩票网址是多少,也增添了一些小驚喜-_106官方彩票官网。

概念設計

1. H5整體視覺風格

QQ-__360彩票网址导航,是陪伴了大多數人成長的一個互聯網產品-众赢彩票计划软件,其本身帶有很多高辨識度的視覺元素|银行期票,例如對話框--美丽霸道的授课老师,提醒上線的音效等|-|美视佳。因為 H5 本身是一個大數據總結|_优雅莱,專屬感非常強的一個產物__|中国斗鱼论坛,所以希望是喚醒用戶一些封塵已久的記憶|__十大冷门行业,就像打開時間膠囊般的期待和感動|哈雷摩托价格。同時也象征著 QQ 一直陪伴在身邊||灌口二手房,從而引起用戶的共鳴||谢苗电影。

設計方麵---盈彩邀请码,除了通過一些標誌性的視覺元素喚醒用戶的回憶之外_|镇江警官学校,也加入 QQ 20周年的太空「探索」主題的元素-|众发彩票网址,響應 20 周年的主題之餘__|黎巴嫩邮编,也寓意 QQ 不斷地對外探索||青海明胶股吧,從多個維度來看世界__-功夫2百度影音,尋找有趣的內容|倪志福追悼会。

對話框-|2019十二生肖开奖走势,是承載數據的視覺符號_自助硬币存取款机,也是貫穿整個 H5 的重要視覺符號之一|--防爆机器人布里茨。寓意著 QQ 一直致力於「溝通」|-|二胡几根玄,而且不同時代的 QQ 對話框都各有特點_-|198彩票官网,也是見證 QQ 時代變遷的重要元素-_149期开什么生肖,所以提取了三個階段代表性的對話框樣式來承載數據_-_3374开奖结果,並且加入有時代特征的視覺元素(如bb機_-长东实业有限公司,像素化的小箭頭等)作為輔助_耳鼻喉科解放军466医院,增加 H5 的氛圍感_|_234彩票下载,也算是視覺上的「小彩蛋」___奥特曼之超决战。

△ QQ原始對話框

H5 加入一些趣味感的元素||-众彩娱乐二维码,如笑臉公车系列强x轮,愛心等元素__-帕丁顿熊2百度云,背景輔以流動的彩色不規則圖案_|168彩票正规吗,來增加對話框的玩味||-钢贸商城网站。也寓意 QQ 20年來給用戶帶來源源不斷的樂趣-|-掌上娱乐下载,留下了不可取代的時代印記__殷世航一个月赚多少钱。

△ 重繪對話框

H5 中也加入了很多好玩的元素___360彩票杀号时时彩,不同時代所用的移動設備-_青岛火车站咨询电话,融合貼近太空「探索」主題的背景|草榴永久域名;利用帶手套的手和不同的元素進行互動_-记得彩虹;增加重繪經典頭像的互動動畫--珍爱十字绣花开富贵,加入 QQ 空間的植物等懷舊元素-_-蓝波宽带,增加 H5 的可玩性和驚喜感-|掌上彩票骗局。

△ 經典頭像的重繪

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

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

動畫設計

1. 視覺動態化方案

在動畫製作前期會出一份詳細的動態化分頁策劃_|168娱乐2app,以及一份盡可能表達完整的動畫 demo--注册送38彩金,能便於設計與開發能準確的估算出製作周期_|_地窖囚奴。在開發完成預研測試後-_|赢钱彩网站,基於動畫 demo 共同製定一個大致的動態化方案──對話框等大麵積使用代碼實現|_-大连开发区好望角,其他裝飾性小元素全部使用序列幀|||1213金鼎娱乐。在觀眾每滑一頁即可觸發當前頁的動畫_||1千本金每天赢100就收,且能保證大體動畫的流暢度|_至尊传奇手游。

2. 動畫製作

為了盡可能減少 H5 的運算體積||-青海省公安厅副厅长,又保證畫麵動態的流暢程度-|_欧洲古典四大名著,導出的序列必須滿足以下所有條件--|河间市电视台:

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

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

3. 導出與同步

在配合開發導出的階段--盈盈彩票坑客户,為了能明確序列的標記-_|happy together fx,所有序列文件命名為 xx-in/xx-loop/xx-out--注册红彩彩票要邀请码怎么办。使用同步工具以實現 AE 動畫序列導出和開發提取素材能同步進行-_青岛大哥骂雅阁女,並保持實時更新和迭代_-_亿盈彩票骗局。

△ 第6頁動畫導出序列

太空QQ形象設定

創建了四款全新的 spaceQQ-|众乐彩票首页,根據用戶的 QQ 年齡而設計_|永胜国际能挣钱吗。根據用戶的 QQ 年齡_|钻石小鸟团购,分了四個款式的鵝---出售桂花树:奢華_|-cfq币购物券怎么用,智能--_火车票转让58同城,閃亮和神秘四個概念-_-疯狂猜成语两个女人,一個遞進的尊貴程度|_36选7中注好彩3中奖,刺激用戶分享欲_-丽谯楼。包括基礎款的 QQ 在內-|长治文明小博客,共創造了 5 個類型的 spaceQQ_365彩票为什么买不了。每個設計都基於基本 spaceQQ 的形式___nonono歌词,但是套裝的顏色和細節根據各自的概念各有特色嘉酒视窗。

△ spaceQQ總覽圖

配色方案

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

關於運營

1. 專屬感

整個 H5 始終緊扣 QQ 20周年的太空「探索」主題-__38在线彩票,整個 H5-_|瑟银矿哪里多,除了用數據喚醒用戶和 QQ 多年的點點滴滴之外|_|获奖身份证,5 個 spaceQQ 概念設定__-亿发彩票官网,既能增加用戶的新鮮感||青岛订婚风俗,又能刺激用戶的分享欲_公安部2002年春节晚会,C4D 建立的 3D 形象豐富了整個 H5 的視覺層次|_南皮广电信息网,深化了 QQ 品牌的影響力--_刷q币软件免费版2012,寓意鵝廠一直與時俱進||功夫小帅,緊貼潮流_|-杜兰特3代战靴。

2. 情緒調動

對於當下的運營活動來說-|铁木真炒锅,趣味性是引爆轉發量的重要元素_-_永胜国际app能提现么,H5 結合 QQ 用戶創作的背景音樂和能夠調動用戶情感的設計語言來釋放用戶的情緒_|钅且,比如驚喜感(用戶結合 QQ 的標誌性音效創作的背景音樂)_|-小明的储蓄罐,榮譽感(不同 Q 齡獲取相應的 spaceQQ)等-|-长葛市人民法院,讓用戶產生持續的驚喜感|_-360彩票网,在懷舊和新鮮感中得到滿足--上海体育馆招聘会,提升用戶活躍性_1396me皇家彩世界。

總結

QQ 20周年 H5 設計||兼职日语翻译,嚐試結合了 3D|_铲形币,動畫-|-极品公子混在校园,插畫等設計形態-|古董估价,為每一位用戶打造專屬的「個人軌跡」|||苏联卫国战争歌曲,通過數字_智彩快三怎么下,拚湊出和 QQ 的過往朝夕|吉林移动话费详单,引起用戶共鳴|256登录。鵝廠不斷創新探索的同時||观山湖区招考报名系统,也為用戶溫存屬於用戶自己的專屬回憶-|众赢彩票娱乐平台,深化 QQ 的品牌價值|--银彩网址。

福利

考慮到部分同學想更仔細地查看_|众赢彩票娱乐有限公司、保存或收藏高清大圖的需求|__键盘清洗机,我們設置了關鍵詞_--2015年世界gdp排名,微信公眾號後台以「spaceQQ+序號」的方式回複-进口哈雷摩托车报价,例如「spaceQQ1」-_亿家欢,即可逐一獲取對應的高清頭像和壁紙-|长微博工具。

掃碼領取專屬「個人軌跡」__小狼狗高手论坛:

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司--|陈百强演唱会高清,為期望卓越的國內外企業提供卓越的UI界麵設計-致青春电影经典台词、BS界麵設計 |-沈阳热线宽带测速、 cs界麵設計 -|淘宝扫码、 ipad界麵設計 |_|3分钟开奖的是什么彩票、 包裝設計 ---海安县高级中学、 圖標定製 ||-榆树徐大伟、 用戶體驗 |-_雷霆扫毒蒙面人是谁、交互設計-|铜皮厚度、 網站建設 _|_门头沟电大在线、平麵設計服務|_|2019生肖表图。

Powered by emlog 京ICP備12006971號-1 sitemap