追求卓越一諾千金

藍藍設計|||金华烟草电子商务网,2011年成立_|松乔体检中心,主創清華團隊_|突袭宝库,專注軟件和互聯網ui設計開發|_衬衫包装辅料。擅長企業信息化管理|_舒淇facebook、監控__-易发彩票资金安全吗、大數據軟件UIUE谘詢和設計開發服務-|竹蒂。立足UI-|隆裕酒号赖茅酒,好好學習-娱乐天地点检安卓,天天進步__-银河赌博的网址!


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

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


如果您想訂閱本博客內容|_申通快递详单查询,每天自動發到您的郵箱中|-霍启中, 請點這裏

項目概述

QQ 20周年||168彩票手机APP,是互聯網產品長青的一個傳說|__冻品批发市场,就在 20 周年的時間節點|||镶黄旗姓氏,QQ 向用戶提供一份關於他自己的-_118彩票APP安卓版107、真誠熱切的 QQ 數據總結|镇江老兵事件最新进展。通過數字-|重生的博穆博果尔,彙集出每個人自己的 QQ 時光曆程--尊彩可信吗,從而牽引出每個人對於成長_--移动3g网络覆盖查询、青春-_龙洞堡机场、溝通|-|阳谋为上、時代流動的感知與回憶-_|永盛彩票网可以玩不,引發 2019 年一場集體的情感共鳴|_奥尔芭。

△ QQ 20年來的一路變遷

項目流程

項目曆時兩個月__掌上彩票吧,從項目初期-|汤池小镇,視覺和產品密集溝通_2019今晚上开什么特吗,了解需求-__二手军用吉普车,進行頭腦風暴-__众盈彩票的骗局揭秘,輸出多個視覺方案縱向對比|--永城彩票网真假,最後確定視覺風格|_盈彩在线大发快3,分配視覺工作(插畫|-|耐高温护膝,動畫-_-亿彩下载安装,3D)__河南省基础教研室。項目後期||家有辣嫂2,包括開發還原||-106平台时时彩,數據調配等眾多環節_龙炎电商开启财富自由人生,環環相扣_-shinee隐藏摄像机,缺一不可__|水观音擦皮鞋麦词,一路過關斬將__大英百科全书txt,整個 H5 需要不同崗位的高度配合和各專業的高度默契_|_宠妃 肉的章节。

△ H5的項目流程圖

項目難點

1. 異地合作

本次 H5 聯動了動效-打屁屁视频家法,3D|-美丽港发型设计软件,插畫設計師的共同合作_|_11先5助手苹果手机版,由於支持 3D 的設計師在韓辦公__非常了得 陈星光,所以大部分都是在線上全英溝通--助赢官方网站是多少?,包括前期的項目進度同步_诺基亚n79软件下载,還有後期的模型調整等環節都能及時反饋_新股上市公告,快速反應-|-一站到底在线游戏,最後如期打磨出五款 spaceQQ__艾尔之光爱莎加点。算是一次順利的異地合作||长江全长约多少千米。

△ 五款3D spaceQQ最終效果

2. 3D spaceQQ視覺還原

3D 鵝從設計軟件轉化為 H5 展示過程中_||娱乐天地登录手机版,存在模型文件過大|01彩票、材質缺失等問題_北华信集团董事长,直接影響用戶體驗-|-让利是什么意思。在開發的過程中同學通過模型減麵_|_盈彩平台是真的吗、重新選擇材質_亿发彩票首页,還有模型拆分等解決方法|-智彩电子走势图,在視覺觀感和性能中建立了平衡的杠杆|--易彩3,最終實現了 15 個 SPACE QQ 的視覺還原||众博国际。

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

3. 視覺工作的同步進行

由於項目時間比較緊迫_-至尊彩怎么不能登录了,而且 H5 加入了 3D 模型||巴黎世乒赛,還有需要大量的動效|-|至尊争霸app,所以需要在同一時間線上||盈盈彩票888yyccom,同步進行|冻品市场,視覺稿輸出__注册彩金网站,動畫製作和 3D 模型打磨-长沙同志浴室。考驗設計師的溝通和執行能力--psp phone。與此同時---衡水电大成绩查询,需要隨時和開發同步動畫 demo 以確保動畫可實現||花样少女是多大。和產品密集溝通|-顺丰到付价格,及時根據文案調整畫麵_|_环保设备图片。

設計理念

因為 QQ 是陪伴了大多數用戶的一個產品||36选7好彩3复式5,見證了整個互聯網社交的演變過程_|众赢彩票网址是多少,容易引起用戶的情感共鳴-|江苏点招网。設計的初期-|东北鸡,圍繞「個人軌跡」的主題發散了不同方向的視覺概念-|闪吧音源,在引起客戶共鳴感的複古元素和傳遞不斷「探索」未來的概念間尋找平衡點|_|至尊1元彩票。最後沿用了 20 周年的太空概念貼合「探索」的主題_-_山东大学威海分校吧,結合有年代特征的代表性視覺符號來引起「個人軌跡」的這一概念的用戶情感共鳴-||12选5快乐彩开奖号码。另外-_重庆江北ume,H5 運用了 3D 打造了 15 隻太空鵝-||武汉苏泊尔炊具有限公司,打造「個人軌跡」的專屬感_||佳俊车行,既聯動用戶溫暖的回憶之餘|_长虹z1怎么样,也增添了一些小驚喜__-电影频道节目预告。

概念設計

1. H5整體視覺風格

QQ|__陈白沙祠,是陪伴了大多數人成長的一個互聯網產品__易旺彩票信誉,其本身帶有很多高辨識度的視覺元素|-青岛华东葡萄酒庄园,例如對話框||苏州监狱,提醒上線的音效等_|_身边的科学有哪些。因為 H5 本身是一個大數據總結|苯乙烯用途,專屬感非常強的一個產物__|艺术照 明伟,所以希望是喚醒用戶一些封塵已久的記憶_-_公羊羽,就像打開時間膠囊般的期待和感動___天描商场。同時也象征著 QQ 一直陪伴在身邊|_镭波官网,從而引起用戶的共鳴__256彩票首页。

設計方麵_阳城县人力资源和社会保障局,除了通過一些標誌性的視覺元素喚醒用戶的回憶之外|_-光明牛奶网上订购,也加入 QQ 20周年的太空「探索」主題的元素---出不去气死你,響應 20 周年的主題之餘|15876计划网时时彩,也寓意 QQ 不斷地對外探索--_李意珍,從多個維度來看世界-3208c刷机,尋找有趣的內容_-|惠蒙网。

對話框|诺基亚cdma手机大全,是承載數據的視覺符號-乐购彩票,也是貫穿整個 H5 的重要視覺符號之一-_0234大发彩票就没赢过钱。寓意著 QQ 一直致力於「溝通」-|至尊争霸彩票邀请码,而且不同時代的 QQ 對話框都各有特點||色拉拉,也是見證 QQ 時代變遷的重要元素_印特尔,所以提取了三個階段代表性的對話框樣式來承載數據-|钟秀全,並且加入有時代特征的視覺元素(如bb機1313苦瓜网,像素化的小箭頭等)作為輔助__掌信彩平台导师视频,增加 H5 的氛圍感|_|魔尊火线1 3生化怒袭,也算是視覺上的「小彩蛋」-|舒淇facebook。

△ QQ原始對話框

H5 加入一些趣味感的元素---世纪星光电影城,如笑臉-|纳米烟嘴,愛心等元素|_辣椒泡菜,背景輔以流動的彩色不規則圖案|-_锐度网站,來增加對話框的玩味__链家地产司歌。也寓意 QQ 20年來給用戶帶來源源不斷的樂趣|__345彩票平台,留下了不可取代的時代印記-易福彩票网手机版。

△ 重繪對話框

H5 中也加入了很多好玩的元素||aupres手表,不同時代所用的移動設備-_钢坯成本,融合貼近太空「探索」主題的背景-108娱乐app新3d是什么;利用帶手套的手和不同的元素進行互動|__大显手机官方网站;增加重繪經典頭像的互動動畫_|_李公堤水霸王,加入 QQ 空間的植物等懷舊元素_|致吸血鬼的五曲,增加 H5 的可玩性和驚喜感_优发娱乐官网。

△ 經典頭像的重繪

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

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

動畫設計

1. 視覺動態化方案

在動畫製作前期會出一份詳細的動態化分頁策劃|_|亿彩网里的钱能提现吗,以及一份盡可能表達完整的動畫 demo_-_万科集团总部地址,能便於設計與開發能準確的估算出製作周期_新乡窝窝团。在開發完成預研測試後--铜仁市人民政府网,基於動畫 demo 共同製定一個大致的動態化方案──對話框等大麵積使用代碼實現--|阿荣旗吧,其他裝飾性小元素全部使用序列幀_-15选5复式中奖怎么算。在觀眾每滑一頁即可觸發當前頁的動畫|_-歌手半决赛排名,且能保證大體動畫的流暢度_-|江苏阜宁龙卷风。

2. 動畫製作

為了盡可能減少 H5 的運算體積若冬之颤,又保證畫麵動態的流暢程度|360彩票注册送50元,導出的序列必須滿足以下所有條件__陈梓嘉:

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

△ 設計了4個不同的色塊流動loop|至尊时时彩票平台,方便開發安插在每頁合適的位置

3. 導出與同步

在配合開發導出的階段_-诛仙临江仙,為了能明確序列的標記--|花儿乐队好听的歌,所有序列文件命名為 xx-in/xx-loop/xx-out|-恩施天气预报。使用同步工具以實現 AE 動畫序列導出和開發提取素材能同步進行_||雅漾防晒霜保质期,並保持實時更新和迭代_|_悟空传电影百度云。

△ 第6頁動畫導出序列

太空QQ形象設定

創建了四款全新的 spaceQQ|-|ro2银线,根據用戶的 QQ 年齡而設計_斯玛特卡余额查询。根據用戶的 QQ 年齡|--诺基亚6700s论坛,分了四個款式的鵝-_色中色账号:奢華__-重庆公交集团招聘,智能-__九纵新一团,閃亮和神秘四個概念-云发购彩票,一個遞進的尊貴程度_来个身份证号码,刺激用戶分享欲_|_永盛国际靠谱吗。包括基礎款的 QQ 在內___什么电影最好看,共創造了 5 個類型的 spaceQQ--超级中国纪录片 下载。每個設計都基於基本 spaceQQ 的形式__-亿发彩票网,但是套裝的顏色和細節根據各自的概念各有特色|花萝卜论坛。

△ spaceQQ總覽圖

配色方案

用戶可以根據自己的喜好更改這 5 款 spaceQQ 的裝扮顏色-_|13彩是什么软件。

關於運營

1. 專屬感

整個 H5 始終緊扣 QQ 20周年的太空「探索」主題|国世平博客,整個 H5|_-2000彩代理注册,除了用數據喚醒用戶和 QQ 多年的點點滴滴之外__优选彩票登录,5 個 spaceQQ 概念設定|__雷暴坦克,既能增加用戶的新鮮感---12期富婆看图肖特,又能刺激用戶的分享欲___浪翻云博客,C4D 建立的 3D 形象豐富了整個 H5 的視覺層次--_注册送彩金彩票网址,深化了 QQ 品牌的影響力-_-2019年体彩30元好彩头,寓意鵝廠一直與時俱進||钞票都去哪儿了,緊貼潮流--|青年宫影城。

2. 情緒調動

對於當下的運營活動來說___300302,趣味性是引爆轉發量的重要元素__上将名单,H5 結合 QQ 用戶創作的背景音樂和能夠調動用戶情感的設計語言來釋放用戶的情緒__|娱乐天地点检下载网址,比如驚喜感(用戶結合 QQ 的標誌性音效創作的背景音樂)|-卓易彩票什么时候恢复,榮譽感(不同 Q 齡獲取相應的 spaceQQ)等-_滦南贴吧,讓用戶產生持續的驚喜感-诺基亚c5主题,在懷舊和新鮮感中得到滿足--女王的厕奴,提升用戶活躍性|-2019年精准五肖。

總結

QQ 20周年 H5 設計||掌上彩票,嚐試結合了 3D-_-云顶至尊风水,動畫--进口车上牌流程,插畫等設計形態|-下载qq2011,為每一位用戶打造專屬的「個人軌跡」|_|诺安股票320003,通過數字_|与官官同居的日子,拚湊出和 QQ 的過往朝夕|_-168极速开奖结果,引起用戶共鳴|-诺基亚主题制作。鵝廠不斷創新探索的同時-|_御龙在天野蘑菇坐标,也為用戶溫存屬於用戶自己的專屬回憶_创业我们的故事,深化 QQ 的品牌價值|_|易中彩票代玩账号兼职。

福利

考慮到部分同學想更仔細地查看|_铁路公安改革、保存或收藏高清大圖的需求__-这五个人要火了照片,我們設置了關鍵詞_-开封广播电视台,微信公眾號後台以「spaceQQ+序號」的方式回複_|-订火车票网址,例如「spaceQQ1」|_旅游活动主题,即可逐一獲取對應的高清頭像和壁紙-|诺基亚103。

掃碼領取專屬「個人軌跡」--至尊伏魔录:

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司|-5320xm软件下载,為期望卓越的國內外企業提供卓越的UI界麵設計|--花开富贵是哪个地方的菜、BS界麵設計 _|_009彩票网、 cs界麵設計 _-俞威、 ipad界麵設計 _|智行彩票注册、 包裝設計 ||跑马的汉子歌词、 圖標定製 -_|众博彩票骗局、 用戶體驗 |_银河战士融合金手指、交互設計--广东银业雁山酒店、 網站建設 _|吴迪女朋友王文静家世、平麵設計服務-天梯粤语。

« VUE進階篇Part10(使用vue-­cli腳手架一鍵搭建工 程) | 2019年UI和UX設計趨勢來了-_注册彩金不限ip!»


訂閱Rss