最近在設(shè)計終端APP瑰谜，為了新方案在宣傳時有亮點我設(shè)計方案要求增加動效，但我只會描述由大到小過渡轉(zhuǎn)場動畫碉碉，開發(fā)就在網(wǎng)上找了一個效果用上后總覺得哪里不對殴穴，又說不出來凉夯。于是找了一堆資料學(xué)習(xí)，底氣十足的告知哪些地方哪里不對為什么不對采幌，哈哈哈劲够，以此文記錄學(xué)習(xí)成果。依舊采用Q&A的方式來解答休傍。
1征绎、什么是動效，為什么做尊残，作用是什么炒瘸，怎么做動效？
2寝衫、結(jié)合淘寶網(wǎng)實際案例從范圍層／結(jié)構(gòu)層／框架層／表現(xiàn)層的角度去講解動效的作用與應(yīng)用顷扩。
阿里：小支點，撬動大價值 http://www.woshipm.com/pd/948924.html
3慰毅、結(jié)合iOS7講解動效作用隘截，并將動效應(yīng)用分類
網(wǎng)易：創(chuàng)造流動的瞬間—探討移動端交互動效設(shè)http://uedc.163.com/10999.html
4、material design 創(chuàng)始動效一整套成體系的設(shè)計規(guī)范，值得仔細(xì)研讀婶芭。包括動效的身體語言時間要求等詳細(xì)的內(nèi)容东臀，看完基本就可以去找開發(fā)改動效了。
material design 中文版：https://www.mdui.org/design/motion/material-motion.html#material-motion-how-does-material-move
5犀农、動效樣例網(wǎng)站且可以實時調(diào)試工具的網(wǎng)站合集惰赋，沒事多看看，找靈感呵哨，比較偏前端開發(fā)
讓你無所不能的75款動效工具（上）http://www.uisdc.com/75-web-animation-tools-1
讓你無所不能的75款動效工具（下）http://www.uisdc.com/75-web-animation-tools-2
6赁濒、動效的作用及交互設(shè)計師動效設(shè)計工具
超走心！APP 動效設(shè)計必備知識http://www.reibang.com/p/99b93e7061a8
哈哈哈孟害，從科普拒炎、案例、規(guī)范挨务、工具前輩們都寫的很清楚了击你，希望如上整理對你有效，但我還是想從自己的角度去消化下動效內(nèi)容谎柄。
什么是動效丁侄？
動畫效果，以動畫方式呈現(xiàn)目標(biāo)效果谷誓。狹義上是指界面動態(tài)交互效果绒障，界面空間折疊吨凑、轉(zhuǎn)場捍歪、退出、入場時采用的動態(tài)過渡方式鸵钝。如提示消息的顯示與消失方式糙臼，iPhone多任務(wù)界面切換時滾動的卡片，iOS打開App時漸進(jìn)放大的首頁恩商。
為什么要引入動效及動效原則变逃？
1.動態(tài)界面是靜態(tài)界面在時間維度的疊加〉】埃可以解決界面空間不足或界面內(nèi)容太多的問題揽乱。節(jié)省界面空間同時達(dá)到界面信息分層效果。
2.動態(tài)的東西靜態(tài)的更容易吸引人的焦點粟矿，如應(yīng)用在提醒消息中凰棉，很好的解決了反饋問題。引導(dǎo)空間關(guān)系陌粹，比如淘寶加購物車動效
3.人都喜歡新鮮的東西撒犀，在大部分界面是靜態(tài)時，動態(tài)界面所表現(xiàn)的新穎、提升增加系統(tǒng)氣質(zhì)
基于如上動效作用或舞，推導(dǎo)出動效是錦上添花的交互效果荆姆，必須保證界面本身的體驗再引入動效，進(jìn)而再次推導(dǎo)動效的基本原則：1映凳、必須快速響應(yīng)胆筒，動效加載時間不能比本身loading的時間長，動效需給人快速靈動的感覺诈豌。2腐泻、形狀運動軌跡需符合自然規(guī)律，且動效需有明確目標(biāo)队询，單個物體與多個物體的運動效果派桩。
如上對概念與基礎(chǔ)原則了解后就可以根據(jù)設(shè)計經(jīng)驗去發(fā)揮了，至少可以去發(fā)現(xiàn)欣賞糾正模仿已有動效蚌斩，對于只是偶爾應(yīng)用動效的交互設(shè)計師差不多夠用了铆惑。但是如何從無到有且設(shè)計動效就需要對動效再進(jìn)行深入學(xué)習(xí)，比如運用軟件工具自己且嘗試設(shè)計送膳，多去觀察大自然對現(xiàn)象员魏，理解事務(wù)運行的規(guī)律。
——20180503 by 蘭哥
