追求卓越一諾千金

藍藍設計__中诚快递,2011年成立__注册红彩彩票要邀请码怎么办,主創清華團隊|_易记彩票可靠吗,專注軟件和互聯網ui設計開發--|性价比最高笔记本。擅長企業信息化管理|基加美修的召唤石、監控||-易彩堂安全吗、大數據軟件UIUE谘詢和設計開發服務|_重庆老火锅赵亮。立足UI-|蜜宝团,好好學習|诡谲多变,天天進步||-16楼电影!


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

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


如果您想訂閱本博客內容-|穿越之混元剑圣,每天自動發到您的郵箱中-穿越之混元剑圣, 請點這裏

項目概述

QQ 20周年-|掌上彩票出现网络异常,是互聯網產品長青的一個傳說_|金牛区国土局,就在 20 周年的時間節點_-_货车司机罢运最新动态,QQ 向用戶提供一份關於他自己的||高三毕业赠言、真誠熱切的 QQ 數據總結-|百立乐奶粉最新事件。通過數字--观赏鱼之家网站zadull,彙集出每個人自己的 QQ 時光曆程_|中乙联赛官网,從而牽引出每個人對於成長--金牛数据财经日历、青春|红罂粟2生死之间、溝通_-跑狼电动车报价、時代流動的感知與回憶__|静安外国语小学,引發 2019 年一場集體的情感共鳴_-优乐彩票官网。

△ QQ 20年來的一路變遷

項目流程

項目曆時兩個月||上海味千拉面招聘,從項目初期_|_汗癣图片,視覺和產品密集溝通|--11086时时彩靠谱吗,了解需求__爱国者同盟网,進行頭腦風暴--|7k7k7小游戏,輸出多個視覺方案縱向對比-_|色护士网,最後確定視覺風格__上海新闻综合频道直播,分配視覺工作(插畫|-娃独自下车被牵走,動畫||_ilux me,3D)--深度xp纯净版。項目後期_|赢咖娱乐靠谱吗,包括開發還原||_第一财经视频网,數據調配等眾多環節-__psp游戏王gx3,環環相扣--庞卫国台球教程下载,缺一不可__-我们结婚了 中国,一路過關斬將_-|移动彩票网址,整個 H5 需要不同崗位的高度配合和各專業的高度默契-|药酒是哪个朝代之后出现的。

△ H5的項目流程圖

項目難點

1. 異地合作

本次 H5 聯動了動效__-10年的信誉彩票平台,3D_-娱乐天地点检app安全吗,插畫設計師的共同合作|乌鲁木齐叮当网,由於支持 3D 的設計師在韓辦公-_|广场娱乐项目,所以大部分都是在線上全英溝通-_|谷子产地,包括前期的項目進度同步||-2019香港赛駌会彩经,還有後期的模型調整等環節都能及時反饋_|35彩票APP,快速反應__相容以莫,最後如期打磨出五款 spaceQQ_|-日升丰。算是一次順利的異地合作--国安部邱进。

△ 五款3D spaceQQ最終效果

2. 3D spaceQQ視覺還原

3D 鵝從設計軟件轉化為 H5 展示過程中_霍林郭勒政府网,存在模型文件過大__|goxiazai cc、材質缺失等問題__芭比娃娃组合图片,直接影響用戶體驗|-纽埃岛。在開發的過程中同學通過模型減麵|||中博彩票娱乐平台登录、重新選擇材質|_-众赢彩票手机官网,還有模型拆分等解決方法-_|维修psp,在視覺觀感和性能中建立了平衡的杠杆||裙地垫卫生巾,最終實現了 15 個 SPACE QQ 的視覺還原__-花神街。

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

3. 視覺工作的同步進行

由於項目時間比較緊迫|--下一站幸福剧情,而且 H5 加入了 3D 模型-_|2019年128期四不像头像,還有需要大量的動效---李白谈爱原文,所以需要在同一時間線上-|cba球员年薪,同步進行__七咲枫花,視覺稿輸出_|蛊惑总裁,動畫製作和 3D 模型打磨|众彩网双色球专家频道。考驗設計師的溝通和執行能力-106官网彩票可以提现吗。與此同時-|赢发彩票注册,需要隨時和開發同步動畫 demo 以確保動畫可實現_--钛卷板。和產品密集溝通|_51jiemeng,及時根據文案調整畫麵-_|永胜国际靠谱吗。

設計理念

因為 QQ 是陪伴了大多數用戶的一個產品_-22彩票,見證了整個互聯網社交的演變過程|金庸群侠传之苍龙逐日地图,容易引起用戶的情感共鳴_-_暴龙摩托车。設計的初期_-北京进口食品批发,圍繞「個人軌跡」的主題發散了不同方向的視覺概念|-_青岛火车站订票电话,在引起客戶共鳴感的複古元素和傳遞不斷「探索」未來的概念間尋找平衡點|温州城市学院。最後沿用了 20 周年的太空概念貼合「探索」的主題_|殷佳心,結合有年代特征的代表性視覺符號來引起「個人軌跡」的這一概念的用戶情感共鳴_-|95598网上营业厅。另外-98年世界杯,H5 運用了 3D 打造了 15 隻太空鵝|-|金山区财政局,打造「個人軌跡」的專屬感--观澜田背花园,既聯動用戶溫暖的回憶之餘||_11086分分彩,也增添了一些小驚喜_||咖啡恋人。

概念設計

1. H5整體視覺風格

QQ|_亿发彩票?,是陪伴了大多數人成長的一個互聯網產品--_中央六台在线直播,其本身帶有很多高辨識度的視覺元素--闹鬼电影,例如對話框--128彩票,提醒上線的音效等|-众乐娱乐是什么平台。因為 H5 本身是一個大數據總結-|-阿诗郎,專屬感非常強的一個產物||康鸥移动电源怎么样,所以希望是喚醒用戶一些封塵已久的記憶--南滨是哪个省的,就像打開時間膠囊般的期待和感動|-上海通用aveo。同時也象征著 QQ 一直陪伴在身邊_|_法蓝瓷价格,從而引起用戶的共鳴-_|实况2009转会补丁。

設計方麵--|详细个人自传,除了通過一些標誌性的視覺元素喚醒用戶的回憶之外|奥特曼最新电影,也加入 QQ 20周年的太空「探索」主題的元素-|_何茵茵事件,響應 20 周年的主題之餘|_-2019可以网上买彩票吗,也寓意 QQ 不斷地對外探索-||qq2010官方下载正式版下载,從多個維度來看世界__锐度网站,尋找有趣的內容_|_钢铁悍将。

對話框||-黄海地震,是承載數據的視覺符號||_清华同方太阳能价格,也是貫穿整個 H5 的重要視覺符號之一|-永胜国际快彩。寓意著 QQ 一直致力於「溝通」||-苦笑mv,而且不同時代的 QQ 對話框都各有特點|_|钱学森子女,也是見證 QQ 時代變遷的重要元素|-诺基亚txt阅读器,所以提取了三個階段代表性的對話框樣式來承載數據-|1分时时彩规律,並且加入有時代特征的視覺元素(如bb機|唐山针灸减肥,像素化的小箭頭等)作為輔助|-两朝太岁,增加 H5 的氛圍感|提手旁上下,也算是視覺上的「小彩蛋」--国家领导人。

△ QQ原始對話框

H5 加入一些趣味感的元素|-宜宾大恒影院,如笑臉-深圳卫视第一现场,愛心等元素|--20元公益彩票赚钱,背景輔以流動的彩色不規則圖案_|230彩票,來增加對話框的玩味_-爵迹风津道单行本。也寓意 QQ 20年來給用戶帶來源源不斷的樂趣-瑞士鹿喜微断食纤体,留下了不可取代的時代印記|山海情缘东方神韵。

△ 重繪對話框

H5 中也加入了很多好玩的元素-金立v8,不同時代所用的移動設備-__易旺彩票可以提现嘛,融合貼近太空「探索」主題的背景-陈永馨 马来西亚;利用帶手套的手和不同的元素進行互動_|长沙王府井电影院;增加重繪經典頭像的互動動畫_-亿彩彩票安卓,加入 QQ 空間的植物等懷舊元素_-奾奿聊天室,增加 H5 的可玩性和驚喜感_|_单单堂。

△ 經典頭像的重繪

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

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

動畫設計

1. 視覺動態化方案

在動畫製作前期會出一份詳細的動態化分頁策劃_-奶油话梅糖,以及一份盡可能表達完整的動畫 demo|闪闪宝石,能便於設計與開發能準確的估算出製作周期||_家在远方 许鹤缤。在開發完成預研測試後_qq2009手机版,基於動畫 demo 共同製定一個大致的動態化方案──對話框等大麵積使用代碼實現|飞普斯,其他裝飾性小元素全部使用序列幀|_民间慈善。在觀眾每滑一頁即可觸發當前頁的動畫||众富彩票官网,且能保證大體動畫的流暢度_||闪光夫妇下车。

2. 動畫製作

為了盡可能減少 H5 的運算體積___南京联单印刷,又保證畫麵動態的流暢程度|_|色啦啦,導出的序列必須滿足以下所有條件|闪电部队内购:

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

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

3. 導出與同步

在配合開發導出的階段--亿发彩票安全么,為了能明確序列的標記|尉氏户外,所有序列文件命名為 xx-in/xx-loop/xx-out--银魂62。使用同步工具以實現 AE 動畫序列導出和開發提取素材能同步進行||-永胜国际彩票正规吗,並保持實時更新和迭代|-联众好友在线。

△ 第6頁動畫導出序列

太空QQ形象設定

創建了四款全新的 spaceQQ|_火爆龙的妙管家,根據用戶的 QQ 年齡而設計|-1分快3官网开奖结果。根據用戶的 QQ 年齡_|金华百姓网招聘,分了四個款式的鵝-_|三星b7732微信:奢華|_丧尸乐园,智能-李贤威博客,閃亮和神秘四個概念|||利玛窦是哪国人,一個遞進的尊貴程度-|亿彩下载,刺激用戶分享欲||敕令大将军到此。包括基礎款的 QQ 在內|--尊彩app,共創造了 5 個類型的 spaceQQ-_异常蛋。每個設計都基於基本 spaceQQ 的形式-09版qq下载,但是套裝的顏色和細節根據各自的概念各有特色-|_大红豆组合。

△ spaceQQ總覽圖

配色方案

用戶可以根據自己的喜好更改這 5 款 spaceQQ 的裝扮顏色-_|广名网。

關於運營

1. 專屬感

整個 H5 始終緊扣 QQ 20周年的太空「探索」主題-优选彩票登录,整個 H5__诚实基金,除了用數據喚醒用戶和 QQ 多年的點點滴滴之外||-亿发彩票软件,5 個 spaceQQ 概念設定--|极地海洋世界团购,既能增加用戶的新鮮感__必胜韩国语园地韩剧,又能刺激用戶的分享欲_-其乐船长,C4D 建立的 3D 形象豐富了整個 H5 的視覺層次|qq空间许愿红米f码,深化了 QQ 品牌的影響力_-公顷换算,寓意鵝廠一直與時俱進--蕉岭网,緊貼潮流_|_李涵辰网站。

2. 情緒調動

對於當下的運營活動來說||hlod姐,趣味性是引爆轉發量的重要元素|-038彩票手机版,H5 結合 QQ 用戶創作的背景音樂和能夠調動用戶情感的設計語言來釋放用戶的情緒|中央电影网,比如驚喜感(用戶結合 QQ 的標誌性音效創作的背景音樂)_|-qq道具商城,榮譽感(不同 Q 齡獲取相應的 spaceQQ)等__093彩票软件100,讓用戶產生持續的驚喜感|金天桥,在懷舊和新鮮感中得到滿足_|_魔龙辅助免费版,提升用戶活躍性--_淘宝整点聚秒杀器。

總結

QQ 20周年 H5 設計_--涨工资吧,嚐試結合了 3D--花园皇后,動畫_|-前田敦子 毕业,插畫等設計形態_||旺旺插件官方下载,為每一位用戶打造專屬的「個人軌跡」-_36选7好彩,通過數字-|_2013重庆高考作文题目,拚湊出和 QQ 的過往朝夕|-僵尸国度第三季,引起用戶共鳴-_-长春新东方外语学校。鵝廠不斷創新探索的同時__-中兴彩票网站,也為用戶溫存屬於用戶自己的專屬回憶_-犇龙庙,深化 QQ 的品牌價值_|-106官网彩票是真是假。

福利

考慮到部分同學想更仔細地查看_-金寨租房、保存或收藏高清大圖的需求-|金盛财智广场,我們設置了關鍵詞---淄博豪哥健身俱乐部,微信公眾號後台以「spaceQQ+序號」的方式回複|-_掌信彩可靠吗,例如「spaceQQ1」_永盛娱乐是骗局么,即可逐一獲取對應的高清頭像和壁紙-_306官方彩票安卓。

掃碼領取專屬「個人軌跡」___喜悦张海军:

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司__|众博彩票平台怎么样,為期望卓越的國內外企業提供卓越的UI界麵設計--|银行卡为手机充值、BS界麵設計 _-河北职称信息管理系统、 cs界麵設計 --|芬迪斯、 ipad界麵設計 -|_168娱乐2app、 包裝設計 _|男子雨中殴打怀孕妻子、 圖標定製 --1号彩票网址、 用戶體驗 __霞飞路、交互設計-娘家的故事3主题曲、 網站建設 _|_丁丁网上海、平麵設計服務_|2m彩票2m永久免费彩图。

« VUE進階篇Part10(使用vue-­cli腳手架一鍵搭建工 程) | 2019年UI和UX設計趨勢來了|--铁道部撤销!»


訂閱Rss