幹貨來襲---金山游侠2002体验版!淘寶設計師談動效的高效設計與交付

2019-4-17 用心設計

如果您想訂閱本博客內容|_图标猜成语,每天自動發到您的郵箱中|-李韦, 請點這裏

 

在手機淘寶中-__命运歌词,大至鏈路的銜接|_|36选7开奖中奖规则,小至一個按鈕的點擊響應_|朴载庆,動效是體驗無處不在的潤滑劑--_晋城5个人,為用戶每一步的操作提供了合理的預期與過渡|-追加军火。而通過動效銜接不同界麵或不同響應狀態|盈彩在线678,無論對流暢直觀地表達流程意圖|_金庸群侠传之苍龙逐日地图,還是精雕細琢讓體驗更絲滑的微動效_|优乐彩票官网,動效設計都是淘寶設計師日常工作中非常重要的一環--丧尸出笼血脉。

動效是體驗鏈路散點間的“領路人”

針對項目不同階段--|1号彩票主页、不同使用需要_|_陈红天,針對性地選用的工具|_-众发娱乐提现靠谱吗,輔以便於理解的交付方式-_根据图标猜成语,是設計和落地環節溝通提效的關鍵__南疆暴乱。

相比提及動效首先都會想到的巨無霸AE而言-|柏木美玲,Flinto--1分快三彩票网址、Principle-|_满月部屋13、Kite--csol防沉迷、Adobe XD等許多專門為體驗設計量身打造的輕量級工具_|_钢之魔法师txt下载,更聚焦在互聯網產品設計的高頻功能上|_|qq2009官方下载正式版,多數工具都能快速輸出視頻或GIF|-|义乌库存鞋批发,以及在移動端上進行實際的交互體驗||航班查询携程。

為體驗設計量身打造的輕量級工具

這些工具在原型和動效快速表達方麵獨特的敏捷|--钟欣潼艳照门、高效的優勢|-滤菌器,讓它們逐漸成為迭代頻繁的國內互聯網行業許多設計團隊的新寵-|星光大道娃娃邓丽君。

上述工具的核心功能都比較接近-教师教学反思,各有千秋||csol防沉迷,差異多在於時間與屬性之間關聯的展現形式上--|陕西省交通厅曹森,這裏不做過多展開__22彩票官方版,也不做任何孰優孰劣的判斷__|松乔体检中心。畢竟工具隻是兵器|_光明农场攻略,提起趁手的兵器快刀斬亂麻|_江腾蛟回忆录,才是設計功力的體現_耳科466医院。

本文將結合手機淘寶的動效設計實際案例_金庸群侠传2加强版攻略,介紹淘寶設計師們在項目過程中進行動效設計||-新乡爱情网、並與開發高效溝通的經驗-_|步步佳换面鞋。

針對不同階段_|-上海 大火,選把趁手的兵器

淘寶這樣的大型應用中__-行乐居,任意提及一個細分鏈路都頗具複雜度||9岁女孩疑遭家暴,每個場景或大或小的版本迭代背後__注册送18彩金的时时彩,都是設計師從交互流程設計-365彩票计划网、具體界麵的視覺設計_|恒大队歌,再到最終交付落地|_|最近电影院上映的电影,經曆層層評審和修改完善的過程-__安溪天气2345。

產品設計的2大不同階段

那麼在不同階段|夏士莲防脱洗发水,選用怎樣的工具更符合我們對“高效”的追求|_长青学校?下麵將按階段拆分問題_|尉氏户外,分別進行分析|__盈盈彩官网注册:

1--众购彩票主页、廣義的動效-|掌上棋牌怎么没了:流程Demo設計階段

產品流程经典色文、交互行為的設計與串聯|欣荣图片,無論是作為可以實際體驗的可交互原型__-玄魔神变,還是純用作展示_-_飞天侠女电影,實際上也是一種最基礎的廣義動效|华为5c。

曾幾何時__盈彩是什么平台,交互流程的設計輸出物是用流程箭頭清晰標注每個控件交互行為的交互稿_-_智投彩票合法吗。

但在淘寶內各子產品“小步快跑”的版本迭代極度頻繁|-108彩票娱乐平台,每天提案__|云顶彩票娱乐网站、評審這類快速碰撞不斷的情況下|__进口摩托车,即使經過了合理的流程拆解__节操卫视、耦合度不是非常高的交互稿|234彩票登录,對設計師而言改動返工量依然巨大|--此木为柴山山出的下联。

更何況無論業務方還是設計內部評審時-_云顶娱乐扫码,其實沒有人有時間仔細閱讀你精心撰寫的交互說明|-234天天彩票官网。

隻適合在交付開發階段采用的靜態交互文檔

(鞋類測碼功能為例)

因此-_-12306晚点信息,這類交互稿如今最大的用途隻在交付開發的環節-皇家马德里电影。在快速碰撞方案的階段|--上海调料市场,通過輕量級的動效工具迅速產出可交互原型是目前團隊內更同行的做法|_铁木真炒锅。在評審中直接演示-_仙剑5激活码破解,可以幫助團隊成員更好地對方案實際效果有一個更直觀的體驗__10500com彩票开。

在流程設計階段_-注册送彩的彩票app大全,Flinto是一個非常好用的工具|2m永久全年开奖记录今。同為體驗設計專屬的輕量級設計軟件---十堰物流云帆t,Flinto和Principle有很多共通之處|_2019网上彩票送彩金,也經常被一起比較-22彩票打不开,但底層思路都是通過定義元素的各項屬性變化來實現過渡_门第女主角于明加。不過|_|易富彩票注册,兩者在定義方式上卻有比較大的不同__易彩堂为什么提现不了,簡單概括來說--_感人亲情电影,Flinto是通過元素的附加事件_|茶黄蓟马,而Principle則是通過不同畫板間的屬性差_|闪光夫妇为什么下车。

Flinto更擅長流程級表達

這點上的不同_许喵喵mickey种子,決定了Flinto優勢在於流程級表達_-花花公子成人网站,而Principle更擅長界麵級(或很短的流程級)交互細節表達-_-殷世航一个月赚多少钱。

以分享寶貝_|唐人街导航、邀請好友出主意的“幫我選”功能中的新建清單流程為例---芦苞祖庙:

「幫我選」新建清單流程Demo

流程對應的Flinto實現方式如下___宋祖德近况:

「幫我選」新建清單流程對應的Flinto工程文件

產出流程Demo時-__234彩票提现多久到账,隻需要表達基本的頁麵結構與跳轉關係即可__阿依莲2012冬装。轉場無需表達得很準確-_采药傍梁宋,以不引起誤解為原則即可_|许海中学,時間有限的情況下|-|雷波溪洛渡,最簡單的處理方式就是統一用漸隱漸現怎么在淘宝网开店。

各種與頁麵滾動位置有關的動效也暫時不用表達||移动3g网络覆盖查询,例如下滑時頂欄的狀態過渡_中国互动游戏中心。同樣--棒棒堂快乐大本营,也完全沒有必要讓每個元素都可點擊|||主流游戏台式机配置,這些交互細節以及分支用例__|下载手机qq2009,都更建議在交付開發階段通過交互說明表達_-_1号站平台,寥寥數語可能就足夠準確傳達了|--360彩票购彩全国开奖。

與頁麵滾動位置聯動的動效||俏模牌轻靓减肥胶囊,可以在界麵級設計中細化

2-_苏州园区三中、微交互動效||-芭芭卡伦:界麵級設計階段

當產品流程確定後_-|狂网名,進入界麵級設計階段_|_至尊时时彩票平台4567,就輪到對局部微動效逐一進行細化-|杀人游戏 电影。

對不涉及位置聯動的交互動效而言-出口货物报关单样本,在Flinto和Principle中的製作成本相差無幾-106平台彩票苹果。例如純粹由點擊觸發的事件|_-诺基亚e88:

不涉及位置聯動的動效

但對於涉及位置聯動的動效-_腾讯中国好声音,Principle就比Flinto的表現優秀很多了__-丝图腾。

Principle更擅長界麵級動效表達

Principle中||花语梦之恋人,時間軸和位置聯動的設置比Flinto自由度更高__|金瑞希,可以快速進行精細的設計和調整__01彩票真的能赚钱吗。例如在頁麵上滑過程中|_|众博线上娱乐,導航欄跟隨手指上滑動作而上移隱藏的動效-||夜美梦娃娃网:

導航欄隨手指上滑動作而上移隱藏

下麵是一些來自淘寶近年已上線項目有趣的動效示例||_ume重庆:

案例一|_-长三角规划:手機淘寶導購產品“有好貨”的商品列表中-_-易盈彩票安全吗?,會穿插視頻及知識內容-_|上海哪里有蹦极,在這些特殊內容滑動到用戶視線中時會動態擴展_-_白岩松被开除党籍,將內容自身特點完全呈現||-阿坝人事编制信息网。注意___布鲁金斯基征,這些動效隻能應用在特殊內容數量少--优信彩票快3、質量高的場景-|_西班牙赛道阀芯,否則會過於幹擾|--小狼狗高手论坛。

視頻形態擴展動效

知識形態擴展動效

案例二-|阜新苏阳事件:用戶在手淘中關注某個頻道後-|助赢永久免费计划版app,手淘首頁會提供進入該頻道的快捷入口__1号平台下载安装,這個邏輯通過文案很難清晰的表達凹凸绕梁三日,因而采用了直觀的動效呈現_月亮的知识。

關注頻道後的提示

實際項目中的動效產出方法

上文分別介紹了流程級和界麵級動效的設計建議|369彩怎么不见了,那麼在實際項目設計中-注册送彩金彩票网址,我們需要有什麼樣的產出呢|autocad2004下载?

依據設計稿所起的作用-掌上购彩邀请码怎么弄,大致分為3種__苏菲的日记:

3個階段的不同產出物

1-_冯绍峰qq号、用於實操的demo|_-北京达人盒子:根據自己所希望表達的側重點(流程還是細節|__英德市人民政府网?)選用一種工具完成全部設計|||2015年世界gdp排名;

2-_|著名现代诗、用於演示的視頻__-中国水产网:可以同時使用兩種工具完成不同部分的設計_||金之彩包装,分別錄製視頻再合並-_qq游戏马;

3__|苏州房交会、用於開發的方案__狼人 狼嚎再起:對需要動態呈現的部分單獨提供動效設計稿及說明等產出物|-自由们7 42下载,然後再將所有設計以Keynote等載體整合起來_-|西拉歌手。

手淘在動效設計過程中-_阿凡提物流查询,也摸索出了一套便於與開發同學溝通_梦幻诛仙续魂珠、最優最快實現設計效果的設計產出方法诺基亚5600。產出物包括2部分_--360幸运飞走势图彩:

1|_金色前程幼儿园、效果演示demo和視頻|_|360彩票苹果版:使開發同學快速了解設計效果_-travalue;以寶貝詳情主圖的擴容與評價聯動氣泡為例|_重庆419:

效果演示和視頻

2_-陆童撒尿事件、動效參數文檔__hp3808:將自己在設計動效時所設置的全部參數||古惑仔之笑看风云,翻譯為開發可以輕鬆讀懂的圖形表達方式|-|093彩票是真的?。對於比較複雜的動效-|金桥一景,雖在撰寫文檔時會多花一些功夫|_花儿演唱会,但能夠讓開發一次性還原出理想的設計效果|_|易盈彩票靠谱吗?,免去後期反複溝通修改的麻煩|_-铁梨花结局。

下麵以手機淘寶首頁的2018年雙11主會場入口為例|-0898是哪里的区号,說明動效設計的輸出方式|-_丁丁和杨坤后场接吻。

我們選用Principle製作了所有動效-染衣培训,整體效果如下-|198彩成立几年了:

手機淘寶首頁的2018年雙11主會場入口

可以看出__青年宫影城,動效包含以下幾個部分_2019六香港145期:

1|_文章有儿子吗、主會場入口背景圖旋轉

2-_|证大家园业主论坛、主會場商品圖及按鈕出現

3|_22选大星彩票走势图、“立即搶購”按鈕文案切換

我們要分別輸出以上3部分的視頻示意以及具體的動效參數|_众博彩票是不是黑平台。以其中相對複雜的第2部分“主會場商品圖的出現和切換”為例___142期香港挂牌,提供給開發的視頻如下|||专科学校排名2013。注意在這個案例中__易富彩票app,因為開發是針對圖形元素的容器來編寫動效|||诺卡n9,所以我們需要將圖形抽象為容器--nba2k online花式运球。

經抽象為圖形元素容器的交付版本

同時需要提供給開發的是動效參數__铲形币。下圖是我們使用的參數圖形化表達方式|-亿彩彩票是真的吗,縱向為各個元素||投票软件好喜福,橫向為動效時間軸|小片网。

動效參數產出物

實際上|__18元注册彩金app,各位同學也可以根據自己的實際情況來繪製-_-烈女蒋究,原則是清晰明確即可|-盈彩在线注册。

結語

從合理的工具選型__尿毒症武警二院专家,到嚴謹清晰的文檔交付|_自行车比汽车污染更严重,技法層麵的幹貨就寫到這裏-_|邵长老在哪。文章的最後-108娱乐买彩票骗局,筆者想談的是互聯網產品中動效初心-_宋家王朝 喜多郎。

動效並非炫技的手段-|_苏岑的博客,而是實實在在用於銜接用戶在各個體驗散點之間的潤滑劑||数学排列组合公式,符合用戶心理預期|_|陕西职业技能鉴定中心、不打擾用戶||_qq炫舞答题练习答案,甚至讓用戶幾乎無所察覺的動效||_劫机哥,才是真正優秀的動效_-优彩娱乐骗局。

許多創意網站上初見確實驚豔的動效_|良乡二中校园网,如果在用戶實際使用中過度使用-|_疥舒宁多少钱,輕則有拖遝之感_|-08彩票平台,重則引起焦躁-|山阳县地图。這一原則對於旨在讓用戶“買買買”更高效的淘寶而言_|重庆光明消防设备厂,尤為重要_--天天快递价格。

動效技法隻是基本功|前田敦子为什么毕业,在“不打擾”中體現同理心和精巧的構思|描写大自然的诗歌,是動效設計更重要的導向_288彩票平台。重劍無鋒--|亿博彩票注册,大巧不工-东莞酒店一条龙服务,與所有Motion designers共勉-|克隆qq空间。

 

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司__全国有多少人叫,為期望卓越的國內外企業提供卓越的UI界麵設計||-欧乐瑞士、BS界麵設計 |128彩票、 cs界麵設計 -_|新品上市流程、 ipad界麵設計 |--亿发彩票平台、 包裝設計

標簽: 設計 動效 交付

Powered by emlog 京ICP備12006971號-1 sitemap