Sogou-UED / Aaron Cui : 本文主要講述了，為什么做動(dòng)效，好的動(dòng)效設(shè)計(jì)的標(biāo)準(zhǔn)是什么，如何做動(dòng)效設(shè)計(jì)，以及如何使自己設(shè)計(jì)的動(dòng)效完美落地。
Ps：此篇文章整理自，一年以前自己的一次內(nèi)部分享
寫在前面：
今天給大家講一下我對于動(dòng)效設(shè)計(jì)的一點(diǎn)經(jīng)驗(yàn)，自己做的動(dòng)效不是特別多，技術(shù)在我自己看來也就算是入門，還有很多東西需要學(xué)。今日雜亂文字權(quán)當(dāng)與諸位看官神交，不足混沌之初望各位見諒。動(dòng)效設(shè)計(jì)最開始在某狗開始關(guān)注被吸引，現(xiàn)在想想，已經(jīng)是很多年前了，在某滴有了幾次算是比較系統(tǒng)的嘗試。所以，今天講的主要內(nèi)容是我在某滴的遺產(chǎn)，一共四部分：為什么要做動(dòng)效，什么才是好的動(dòng)效設(shè)計(jì)，怎么做動(dòng)效設(shè)計(jì)以及如何保證自己的設(shè)計(jì)順利高保真實(shí)現(xiàn)。
為什么需要設(shè)計(jì)動(dòng)效？
我最開始接觸動(dòng)效設(shè)計(jì)，只是覺得又炫，又酷，翻滾的，旋轉(zhuǎn)的，爆炸的。只是覺得新鮮，好玩，可以炫技。可以讓設(shè)計(jì)更加酷炫。可能大部分同學(xué)，在做剛開始接觸的時(shí)候多多少少都會(huì)有和我差不多的想法。這就是我們做動(dòng)效設(shè)計(jì)的目的嗎？應(yīng)該不是。
解決為什么要做動(dòng)效設(shè)計(jì)這個(gè)問題，就要搞清楚什么是動(dòng)效設(shè)計(jì)？動(dòng)效設(shè)計(jì)有什么作用？
什么是動(dòng)效設(shè)計(jì)呢？
動(dòng)效大范圍興起，大概始于扁平化設(shè)計(jì)之后，扁平化設(shè)計(jì)的好處在于用戶的注意力可以集中在界面的核心信息上，將對用戶無效的設(shè)計(jì)元素去掉，不被設(shè)計(jì)所打擾分散注意力，使使用體驗(yàn)更加純粹自然。這個(gè)思路是對的，回歸了產(chǎn)品設(shè)計(jì)的本質(zhì)，就是提供更好的使用體驗(yàn)，而不是提供更漂亮的界面設(shè)計(jì)。但是，過于扁平化的設(shè)計(jì)，也帶來了新的問題，一些復(fù)雜層級(jí)關(guān)系如何的展現(xiàn)？用戶如何被引導(dǎo)和吸引？這與用戶在現(xiàn)實(shí)3D世界中的自然感受很不一致。所以Google推出了Material Design設(shè)計(jì)語言。
Material design 設(shè)計(jì)規(guī)范中，將動(dòng)效設(shè)計(jì)這一章命名為“Animation”，動(dòng)畫，活潑的意思
動(dòng)詞 Animate 是“賦予生命”的意思，動(dòng)效可以定義為使用類似動(dòng)畫的手法，賦予界面生命和活力。
前面我們說過Material design設(shè)計(jì)語言，一部分作用是為了解決過于扁平化設(shè)計(jì)所帶來的弊端，復(fù)雜層級(jí)關(guān)系如何展現(xiàn)，用戶如何被引導(dǎo)和代入。為了解決這個(gè)問題，Material design 設(shè)計(jì)風(fēng)格，充分利用Z軸，通過分層設(shè)計(jì)以及動(dòng)效相配合的方式，在扁平化基礎(chǔ)上提供給用戶更好理解的層級(jí)關(guān)系，賦予設(shè)計(jì)以情感增加用戶使用過程中的參與度。
所以動(dòng)效設(shè)計(jì)對于產(chǎn)品設(shè)計(jì)有什么作用？
如上圖所示，動(dòng)效對于產(chǎn)品設(shè)計(jì)的作用包含：
①傳遞層級(jí)信息 ；
② 傳遞狀態(tài)信息；
③ 提示隱藏信息功能；
④ 傳遞情感化信息。
知道了這些。，那么，我們?yōu)槭裁葱枰獎(jiǎng)有гO(shè)計(jì)？
通過上面說的，結(jié)合我們自身產(chǎn)品設(shè)計(jì)的特性，我們可以總結(jié)出動(dòng)效設(shè)計(jì)的動(dòng)機(jī)主要有如下幾點(diǎn)：
① 使等待不枯燥；
② 使變化不生硬；
③ 使反饋不單調(diào)；
④ 使體驗(yàn)有情感；
⑤ 使用戶更愉悅。
好的動(dòng)效是什么?
知道為什么做動(dòng)效設(shè)計(jì)，那我們應(yīng)該做什么樣的動(dòng)效設(shè)計(jì)？或者說好的動(dòng)效設(shè)計(jì)是什么呢？是炫酷的，翻滾的，旋轉(zhuǎn)的，爆炸的嗎? 復(fù)雜程度是評(píng)判好與壞的標(biāo)準(zhǔn)嗎？
國外一位著名的一線設(shè)計(jì)師，曾經(jīng)在分享會(huì)上對于好的動(dòng)效下過這樣一個(gè)定義：
好的動(dòng)效應(yīng)該是隱形的，好的動(dòng)效應(yīng)該是以提高可用性為前提，并且以令人覺得自然含蓄的方式提供有效用戶反饋的一種機(jī)制。
這句話其實(shí)就是，好的動(dòng)效設(shè)計(jì)是合適的，是對于用戶使用體驗(yàn)的提升，最終服務(wù)的是體驗(yàn)而不是展示你的動(dòng)畫設(shè)計(jì)。
既然如此 ，那么讓我們總結(jié)一下好的動(dòng)效設(shè)計(jì)的標(biāo)準(zhǔn)：
首先要具備一下幾點(diǎn)特性：
① 快速且流暢； ② 恰到好處的反饋； ③ 提升操作感受； ④ 提供良好的視覺效果；
其次：
好的動(dòng)效設(shè)計(jì)應(yīng)該是首先服務(wù)于體驗(yàn)，其次適當(dāng)設(shè)計(jì)（考慮全面，如性能，實(shí)現(xiàn)成本，是否干擾用戶等），再次就是要讓用戶感受到你輸出的情感互動(dòng)，最后也是最基本的就是要具有視覺上的美感。
怎樣設(shè)計(jì)動(dòng)效？
知道了什么是好的動(dòng)效設(shè)計(jì)，那么就引申出下一個(gè)問題，我們怎么進(jìn)行動(dòng)效設(shè)計(jì)？ 或者說，動(dòng)效設(shè)計(jì)該如何入手，尤其是初學(xué)者？
很簡單，就兩步：
①先要有一個(gè)構(gòu)思，想法；
②根據(jù)想法進(jìn)行豐滿實(shí)現(xiàn)。
沒有想法？想法怎么來？怎么構(gòu)思？從我自身總結(jié)，可以從這6個(gè)方面進(jìn)行構(gòu)思：
①結(jié)合產(chǎn)品去設(shè)計(jì)：
要結(jié)合產(chǎn)品進(jìn)行思考，思路設(shè)計(jì)要符合提升的產(chǎn)品體驗(yàn)，要經(jīng)過細(xì)致思考不要盲目。
②了解基本常識(shí)：
這些常識(shí)包含，動(dòng)效設(shè)計(jì)的基本常識(shí)（如，基本的運(yùn)動(dòng)規(guī)律，節(jié)奏，動(dòng)畫如何），開發(fā)的基本常識(shí)，什么樣子的動(dòng)效果大概如何實(shí)現(xiàn)，實(shí)現(xiàn)成本大概是多少。確保能夠順利落地。
③觀察生活：
人們對于美的認(rèn)知，大部分來自于日常的生活經(jīng)歷。比如什么樣的運(yùn)動(dòng)是溫柔地，激烈的，具有震撼性的。當(dāng)我們對于我們需要構(gòu)思的動(dòng)效有性質(zhì)定位的時(shí)候，可以從生活中這些相同的，定性的自然事物中尋找靈感，截取精華。
④看并思考：
就是除了觀察生活，我們還需要多看一些優(yōu)秀的動(dòng)效設(shè)計(jì)，時(shí)刻作為積累。同時(shí)，也需要對于“看”的事物進(jìn)行細(xì)致思考。要思考他為什么這么設(shè)計(jì)，怎么完成這套動(dòng)畫設(shè)計(jì)的（是通過那些技巧構(gòu)成這個(gè)動(dòng)效設(shè)計(jì)的，整體節(jié)奏是怎樣的一種感覺）。時(shí)刻與自己對類似事物的想法進(jìn)行對比，找差距，補(bǔ)不足。這就是經(jīng)驗(yàn)技巧積累的過程。
⑤學(xué)會(huì)拆解：
web，app中大部分的動(dòng)效設(shè)計(jì)，都是通過基本的變化組合而成的。我們要通過多看多觀察，慢慢學(xué)會(huì)怎么去拆解別人復(fù)雜的動(dòng)效設(shè)計(jì)，從中總結(jié)經(jīng)驗(yàn)。而后，通過合理的編排設(shè)計(jì)出自己的動(dòng)效設(shè)計(jì)，你就是這場動(dòng)效設(shè)計(jì)的導(dǎo)演。
⑥關(guān)注流行：
這個(gè)很簡單，就是大家要保持對于設(shè)計(jì)行業(yè)，或者說是web，app動(dòng)效設(shè)計(jì)領(lǐng)域的關(guān)注。了解當(dāng)下新的設(shè)計(jì)手法，設(shè)計(jì)趨勢以及設(shè)計(jì)方式。不要做一個(gè)落伍者，也不要把自己永遠(yuǎn)定義為一個(gè)跟隨者。
前面我們說大部分我們在web&app中看到的動(dòng)效設(shè)計(jì)，都是由一些基本的變化組合而成的，那這些基礎(chǔ)變化是什么呢？（見下圖）
基礎(chǔ)變化主要包含：移動(dòng)，旋轉(zhuǎn)，縮放以及屬性變化。前面幾點(diǎn)都很好理解，在此就不在詳細(xì)解釋。解釋一下最后一個(gè)屬性變化，它其實(shí)就是指透明度，形狀，顏色等這些屬性的變化。所有的這些變化形式，經(jīng)過合理的編排在配合上合適的運(yùn)動(dòng)節(jié)奏，就是一個(gè)完整的動(dòng)效設(shè)計(jì)。
簡單來說就是：你要確定你要發(fā)生什么樣的運(yùn)動(dòng)，這個(gè)運(yùn)動(dòng)要以何種節(jié)奏運(yùn)動(dòng)。貝塞爾曲線，就是將速度與時(shí)間的關(guān)系，用圖形的形式展現(xiàn)出來，使其表意更直觀。
上圖就是一些常見的貝塞爾曲線，右邊就是我們在AE設(shè)計(jì)過程中，運(yùn)動(dòng)曲線調(diào)節(jié)界面。
為什么運(yùn)動(dòng)需要配合合適的節(jié)奏呢？
因?yàn)樽匀唤缰羞\(yùn)動(dòng)都不是線性的勻速運(yùn)動(dòng)，而是按照物理規(guī)律，呈現(xiàn)出的曲線的變速運(yùn)動(dòng)。這就是之前說的基本常識(shí)，基本規(guī)律。人們對于一個(gè)運(yùn)動(dòng)形式產(chǎn)生的情感反饋，大部分也來自于生活中看到的類似的運(yùn)動(dòng)形式。所以我們要符合物理規(guī)律，這樣才能準(zhǔn)確的專遞我們動(dòng)效設(shè)計(jì)的情感。當(dāng)然可以適當(dāng)根據(jù)需要夸張，精簡。規(guī)矩是死的人是活的。活學(xué)活用。
這個(gè)網(wǎng)站上歸結(jié)了基本全部運(yùn)動(dòng)形式的貝塞爾曲線，并且有預(yù)覽。還能直接使用js代碼，很方便，很直觀。
說了如何構(gòu)思，接下來就要想想怎么實(shí)現(xiàn)你的想法：
如上圖所示：
實(shí)現(xiàn)想法基本就是技術(shù)與技巧的問題，這需要學(xué)習(xí)與積累，怎么學(xué)習(xí)積累呢？
①動(dòng)手嘗試，熟能生巧
不斷嘗試才能不斷鍛煉自己的技術(shù)技巧。只有嘗試了才能真的驗(yàn)證你的設(shè)計(jì)。
②臨摹作品
學(xué)習(xí)任何東西，尤其是設(shè)計(jì)這個(gè)行當(dāng)。臨摹都是很有效的入門辦法，之前的寫實(shí)圖標(biāo)，現(xiàn)在的動(dòng)效設(shè)計(jì)都是如此。臨摹的過程其實(shí)就是你與優(yōu)秀設(shè)計(jì)者交流的過程，從中你能仔細(xì)了解和學(xué)習(xí)他的設(shè)計(jì)思路手法，也能在臨摹過程中對于原有設(shè)計(jì)手法結(jié)合自身經(jīng)驗(yàn)進(jìn)行優(yōu)化升級(jí)，是很好的提升技巧的方法。
③注重細(xì)節(jié)
這個(gè)很簡單，就和做單純的視覺設(shè)計(jì)一樣，一定要注意細(xì)節(jié)，細(xì)節(jié)決定成敗，尤其是動(dòng)效設(shè)計(jì)。要認(rèn)真，多想，想全面。
④有節(jié)奏感
這個(gè)前面說過。要讓你的作品有活力不死板，才能賦予產(chǎn)品以新的活力。
⑤先加后減
在實(shí)現(xiàn)過程中你一定是要不斷的豐富你的原有設(shè)計(jì)想法的，當(dāng)你不太明確如何豐富自己的設(shè)計(jì)，或者，不太清楚使用何種技巧達(dá)到自己設(shè)想的感覺時(shí)。可以先嘗試看哪些地方可以動(dòng)態(tài)化。可以這樣運(yùn)動(dòng)是否可以那樣運(yùn)動(dòng)，制造出可能性，制造出突破。而后，在這些可能性和突破后進(jìn)行減法，去除多余保留精華。
⑤搜索引擎
有問題我建議大家盡量使用搜索引擎，善用搜索引擎基本可以解決你遇到的95%的問題。重要的是，自己去尋找解決問題的辦法，你可以記憶的更加深刻系統(tǒng)。你還可以掌握解決問題的辦法。
動(dòng)效有那些類別？
我們可以把現(xiàn)在的動(dòng)效設(shè)計(jì)粗略的分為兩個(gè)大類：
①功能性動(dòng)效（如下圖）
此種動(dòng)效設(shè)計(jì)多適用于產(chǎn)品設(shè)計(jì)，也是本文中主要陳述的內(nèi)容
②展示型動(dòng)效果（如下圖）
這些動(dòng)效設(shè)計(jì)，相對來說復(fù)雜，實(shí)際應(yīng)用中比較少。基本用于一些展示性的動(dòng)效設(shè)計(jì)，也不能用我們哪些基本運(yùn)動(dòng)規(guī)律去很好的嵌套（不是不能嵌套，是太復(fù)雜），他們實(shí)現(xiàn)一般是通過AE插件進(jìn)行實(shí)現(xiàn)的，插件也不是很難，有專門的插件網(wǎng)站，大家有興趣可以去研究，一般插件都是英文的。
用什么軟件做動(dòng)效設(shè)計(jì)？
簡單給大家介紹幾個(gè)常用個(gè)制作軟件，制作動(dòng)效，比較頭疼的就是時(shí)間成本問題。這幾個(gè)軟件各有特點(diǎn)：
①AE：全能選手，幾乎可以制作任何你想要的效果，但是操作相對復(fù)雜時(shí)間成本較高。
②Principle：操作簡單，效率高。適合制作快速展示用的demo或一些簡單的動(dòng)效設(shè)計(jì)。
③Hype3：介于AE 與 Principle之間。是近年來新興起的動(dòng)畫設(shè)計(jì)軟件，可以直接生成代碼，配合sketch使用效率極高。
大家可以在工作中根據(jù)實(shí)際情況酌情使用。
動(dòng)效設(shè)計(jì)如何落地？
前面講了為什么做，什么是好的，怎么做。接下來就要說說我們?nèi)绾螌⑽覀冑M(fèi)盡心機(jī)的設(shè)計(jì)最終完美落地。
基本上就是你和開發(fā)怎么在動(dòng)效設(shè)計(jì)這塊，高效配合。普遍做法就是口述+例子。基本相當(dāng)于我們用中文與一個(gè)日本人用日語在一起手舞足蹈的交流，只能傳達(dá)大意，絕大多數(shù)是有偏差，而且成本比較大，很多時(shí)候彼此都不懂。
我們需要告別通信基本靠吼，如何才能讓開發(fā)愛上動(dòng)效設(shè)計(jì)呢？
自己簡單總結(jié)了一下幾個(gè)要點(diǎn)：
①專業(yè)的設(shè)計(jì)產(chǎn)出:
若要讓開發(fā)信服你，首先我們自己在我們本職的事情上要做到專業(yè)。希望有一個(gè)靠譜的開發(fā)，首先自己要成為一名靠譜的設(shè)計(jì)師。比如我們希望開發(fā)精確到像素級(jí)別，那我們提供的產(chǎn)出起碼要先精確到像素級(jí)別，同理心，專業(yè)性。
②良好的前期溝通：
在設(shè)計(jì)之初一定要多和開發(fā)溝通，知道自己做的時(shí)間成本是否允許。目前技術(shù)條件是否有坑。就是確定你的方案基本可行，再開始開發(fā)設(shè)計(jì)。一句話，讓開發(fā)先知道你要做什么，在他眼里怎么看待這件事的實(shí)現(xiàn)成本，畢竟他們是最終代碼產(chǎn)出者，避免工作白費(fèi)。
③了解基本實(shí)現(xiàn)原理：
自己要學(xué)習(xí)了解一些基本的實(shí)現(xiàn)原理，邏輯。這樣你做的時(shí)候能夠更有根據(jù)，知道什么好做，什么難做，什么目前此平臺(tái)暫時(shí)達(dá)不到你的目的。這樣可以更好地控制動(dòng)效設(shè)計(jì)的節(jié)奏，和最終落地。有時(shí)候也能幫助開發(fā)思考這個(gè)動(dòng)畫設(shè)計(jì)該以怎樣的邏輯實(shí)現(xiàn)，因?yàn)槟闶莿?dòng)效的設(shè)計(jì)者，你更清楚這個(gè)動(dòng)效里面有哪些變化，哪些步驟。
④具象的闡述動(dòng)效設(shè)計(jì)：
就是讓開發(fā)形象的知道你要做的什么，這個(gè)時(shí)候就需要適當(dāng)?shù)膶⒛愕膭?dòng)效設(shè)計(jì) - - -數(shù)據(jù)化。
（必要時(shí)輸出動(dòng)效說明文檔）
那么問題來了，是所有動(dòng)設(shè)計(jì)都是可以數(shù)據(jù)化的描述的嗎？
準(zhǔn)確的講我們平常web&APP設(shè)計(jì)中大部分是可以描述的。
還有一些不可描述的動(dòng)效設(shè)計(jì)，他們的基本是用在品牌展示（比如logo的變化等），或者一些小的驚喜點(diǎn)，比如JD的app中l(wèi)oadinggif，是正在送貨的小人。這類的動(dòng)效設(shè)計(jì)我歸結(jié)為展示型動(dòng)效設(shè)計(jì)。
展示型動(dòng)效設(shè)計(jì)：
因?yàn)樗麄兓静淮嬖趶?fù)雜的交互，尤其在動(dòng)效原件本身上，基本是滿足一定條件觸發(fā)播放，滿足一定條件觸發(fā)停止的邏輯。
他們基本實(shí)現(xiàn)方式就是輸出PNG序列，或者視頻或者GIF文件形式，所以也就不存在輸出說明文檔的問題了。
輸出視頻就要涉及到壓縮體積，下面給大家說一說怎么壓縮這類文件的體積：
AE文件壓縮
如果你用AE做，在渲染輸出時(shí)，如圖設(shè)置。基本可以將一半的動(dòng)效設(shè)計(jì)控制在幾百KB以內(nèi)，將復(fù)雜動(dòng)效控制在幾M之內(nèi)。
如果還是過大，怎么辦?? 就需要壓縮軟件：
HandBrake是一款強(qiáng)大的視頻壓縮軟件，可以將幾十（MB）的視頻文件在畫面幾乎無損的情況下壓縮至幾十（KB）大小。是不是很感人？? 更感人的事它還免費(fèi)。有需要的同學(xué)可以下載下來研究一下。
功能型動(dòng)效設(shè)計(jì)：
類似上面這種動(dòng)效設(shè)計(jì)我叫他們功能型動(dòng)效設(shè)計(jì)，這是我們平常工作中可能使用最多的一種動(dòng)效設(shè)計(jì)。這些動(dòng)效設(shè)計(jì)就需要涉及到我們前面講的動(dòng)效設(shè)計(jì)數(shù)據(jù)化，輸出動(dòng)效果設(shè)計(jì)文檔。因?yàn)樗麄冞\(yùn)動(dòng)本身會(huì)涉及到頁面中各種交互元件，以及交互操作。不能單單輸出一個(gè)視頻。需要開發(fā)使用程序控制個(gè)原件的運(yùn)動(dòng)實(shí)現(xiàn)動(dòng)效設(shè)計(jì)，但是如果只對開發(fā)說我要這樣一個(gè)動(dòng)效設(shè)計(jì)，開發(fā)是很難理解你到底要干什么，要做到什么程度？往往還原度很低，會(huì)被開發(fā)鄙視。為了使我們的動(dòng)效也能精確到像素，這個(gè)時(shí)候我們就需要進(jìn)行動(dòng)效數(shù)據(jù)化就是根據(jù)實(shí)際情況適當(dāng)?shù)臅鴮憽秳?dòng)效設(shè)計(jì)文檔》。
這里說的? “根據(jù)實(shí)際情況適當(dāng)?shù)臅鴮憽秳?dòng)效設(shè)計(jì)文檔》為什么要加根據(jù)實(shí)際情況和適時(shí)呢？這就是時(shí)間成本問題。我們書寫這個(gè)的目的就是想要通過精確的用數(shù)字和文字專遞一種具象的動(dòng)效設(shè)計(jì)。所以動(dòng)效說明文檔，只是一種可以向開發(fā)傳遞具象動(dòng)效設(shè)計(jì)的方法。這個(gè)方案最終落地的形式，不需要一定是一份文檔，可以根據(jù)實(shí)際情況活學(xué)活用。
如何書寫動(dòng)效設(shè)計(jì)文檔？
怎么書寫動(dòng)效說明文檔呢？ 或者說我們怎么向開發(fā)具象的陳述我們的動(dòng)效設(shè)計(jì)呢？我做了一張表，簡單描述了一下動(dòng)效說明文檔的輸出的基本流程（見下圖）
舉個(gè)例子：
以下示例為之前在某滴專車事業(yè)部所做實(shí)際項(xiàng)目
動(dòng)效基本參數(shù):
動(dòng) 畫 尺 寸: 750*1334(px)
幀 ? 速 ? 率: 25f/s(幀/秒)
動(dòng) 畫 時(shí) 長: 1.0s(秒)
動(dòng)效詳細(xì)說明：
01.
0f - 6f 接機(jī)頂部欄從屏幕上邊緣移入其對應(yīng)位置
Y軸位移: 128px, 動(dòng)畫速率: 先快后慢
02.
3f - 8f 背景色#edeff0，做漸顯動(dòng)畫
透 明? 度: 0%-100%
動(dòng)畫速率: 勻速運(yùn)動(dòng)
03.
0f - 6f 表單下方“叫車按鈕”背景圖漸顯出現(xiàn)
透 明 度：0%-100%
動(dòng)畫速率: 勻速運(yùn)動(dòng)
04.
2f - 8f 表單下方“叫車按鈕”整體做從下至上位移和漸顯動(dòng)畫
Y軸位移：20px
透 明 度：0%-100%
動(dòng)畫速率: 先做短暫加速運(yùn)動(dòng)，后做減速運(yùn)動(dòng)
05.
15f - 23f 接機(jī)表單卡片從距離屏幕上邊緣268px的位置向上
移動(dòng)，至距離屏幕上邊緣148px的位置（設(shè)計(jì)圖中最終位置）
透 明 度：0%-100%
動(dòng)畫速率: 先做短暫加速運(yùn)動(dòng)，后做減速運(yùn)動(dòng)
06.
17f - 25f 車型選擇卡片從距離屏幕上邊緣852px的位置向上
移動(dòng)，至距離屏幕上邊緣732px的位置（設(shè)計(jì)圖中最終位置）
透 明 度：0%-100%
動(dòng)畫速率: 先做短暫加速運(yùn)動(dòng)，后做減速運(yùn)動(dòng)
我們輸出動(dòng)效說明文檔的原因是：傳遞更清晰具象，效果更可控，降低溝通成本，提高配合默契度，保證設(shè)計(jì)還原度。
寫在最后：
說了這么多其實(shí)就是想盡量的告訴大家，我認(rèn)為的，要怎么把設(shè)計(jì)做好。我并不覺得，現(xiàn)在我們需要做動(dòng)效設(shè)計(jì)了，就該將原來的界面設(shè)計(jì)師，在分出一個(gè)動(dòng)效設(shè)計(jì)師職位。真正的獨(dú)立的動(dòng)效設(shè)計(jì)師需要做的，絕對不僅僅是我們產(chǎn)品設(shè)計(jì)中需要的這點(diǎn)東西。因?yàn)槲矣X得這都是界面設(shè)計(jì)師應(yīng)該輸出體驗(yàn)的一部分，只不過就現(xiàn)在而言我們又多了一種表現(xiàn)形式可以使用。設(shè)計(jì)師應(yīng)該為最終輸出的體驗(yàn)負(fù)責(zé)，就是正在被用戶使用的產(chǎn)品的體驗(yàn)，而不是為幾張漂亮的設(shè)計(jì)稿。講了這么多動(dòng)效設(shè)計(jì)，動(dòng)效設(shè)計(jì)難嗎？ 之前有個(gè)人和我說過一句話，我覺得挺有道理。
要對設(shè)計(jì)或者你做的產(chǎn)品，充滿愛。要帶著愛去做設(shè)計(jì)。這樣你輸出的設(shè)計(jì)才會(huì)讓用戶感受到情感
Thanks~? ?
有興趣的同學(xué)可以關(guān)注本人微博：叁拾差叁年 或 公眾號(hào)：老美工聊設(shè)計(jì) 一起交流~
