1.關(guān)于功能動效這個詞的理解
UI動效杯聚、交互動效、轉(zhuǎn)場動畫抒痒、功能動效等等幌绍，“動效”這個詞有的同學叫做“動畫”，這些詞是做互聯(lián)網(wǎng)設計的同學在網(wǎng)上經(jīng)常看到的幾個詞傀广，叫法不同颁独，但是殊途同歸，想表達的意思基本都是差不多的伪冰，我傾向于叫做功能動效誓酒，為什么有這樣的傾向性？是因為我對動效的理解有兩個：
1.動效是一種過程贮聂，是用戶在使用功能時狀態(tài)A向狀態(tài)B轉(zhuǎn)換時銜接的過程靠柑。
2.動效是為了讓用戶在使用產(chǎn)品的功能時能夠更好的認知、理解吓懈、引導達成目標歼冰、甚至感到愉悅。
這兩個方面是在實際工作過程中對于動效的理解耻警，看到網(wǎng)上設計的同學對于動效的說法也都會或多或少的表達這兩方面的意思隔嫡。谷歌官方描述了動效應該提供什么：
Motion provides:
Guided focus between views；
Hints at what will happen if a user completes a gesture甘穿；
Hierarchical and spatial relationships between elements畔勤；
Distraction from what’s happening behind the scenes (like fetching content or loading the next view)；
Character, polish, and delight扒磁。
詳見https://material.google.com/motion/material-motion.html
再來看看 極客公園上的Material Design中文版里對于動效的一段描述：
“對于普通用戶來說，是關(guān)注一個應用本身式曲、還是更關(guān)注這個應用的元素從 A 點到 B點轉(zhuǎn)變的過程妨托，這種選擇往往有些難。謹慎編排的動畫可以在有多步操作的過程中有效地引導用戶的注意力吝羞；在版面變化或元素重組時避免造成困惑兰伤；提高用戶體驗的整體美感。動畫設計不僅應當優(yōu)美钧排，更應當服務于功能敦腔。”
總的來說因為動效更多的是需要服務于功能恨溜，“動效”也含有“轉(zhuǎn)場”符衔、“過程”的意味，平常說“動效”這個詞相對“動畫”要多些糟袁，所以我傾向于叫做功能動效判族。但是如果把“動效”這個詞換成“動畫”是不是也可以？如果你想這么做项戴，當然可以形帮！功能動效是為了達到一個目的，這個目的是幫助用戶在使用功能時可以更好的完成任務。為了看起來炫酷而設計動效是不推薦的辩撑，看起來炫酷而無其他作用的動效會錯誤的引導用戶的注意力界斜，甚至會導致用戶暫時忘了當前或者下一步要干嘛。
2.功能動效的幾個設計原則
關(guān)聯(lián)性合冀、快速簡潔各薇、愉悅感這三個是我個人總結(jié)的，在不同的地方會看到各種不同的原則水慨，基本也都是大同小異得糜，我自己歸納下來就這三條，下面分別描述下對著三點的理解晰洒。
2.1關(guān)聯(lián)性
這種關(guān)聯(lián)性主要體現(xiàn)在是視覺的連貫性上朝抖，視覺的連貫性性能更好的讓用戶認知。在電影剪輯上有個原則就是要需要保持鏡頭的連貫性谍珊，以《一代宗師》的一段鏡頭為例治宣，葉問和他妻子去照相館拍照片，咔嚓一聲拍好砌滞，接著現(xiàn)實場景化為一張照片擺在桌子上侮邀，再突然炸彈爆炸，日軍侵華贝润。在這段鏡頭里涉及到三個場景：照相館绊茧、屋子里、轟炸打掘。三個場景各不相同华畏，差異非常大，在這三個場景中通過照片元素來做貫穿尊蚁、銜接亡笑，這樣觀眾就很清楚發(fā)生了什么。
電影剪輯上的這種做法在動效上同樣適用横朋，動效應該包含以下三類元素：新入元素仑乌、淡出元素、通用元素琴锭，這三類元素貫穿到狀態(tài)A（開始狀態(tài)）向狀態(tài)B（結(jié)束狀態(tài)）的轉(zhuǎn)換晰甚。
淡出元素：狀態(tài)A向狀態(tài)B的轉(zhuǎn)換時狀態(tài)A有些元素是不需要的，應當以恰當?shù)姆绞奖灰瞥?br>
新入元素：狀態(tài)A向狀態(tài)B的轉(zhuǎn)換時狀態(tài)B的一些元素是新進入的元素祠够，新進入的元素需要用戶重新認知压汪。
通用元素：狀態(tài)A向狀態(tài)B的轉(zhuǎn)換時那些一直存在的元素」湃浚可以是細微至單個圖標止剖，也可以是顯著到占據(jù)屏幕的圖片展示腺阳，通用元素可變化，改變尺寸穿香、改變色彩亭引、位移等等，不建議形態(tài)上有過大的改變皮获，這樣會增加用戶的認知難度焙蚓。
如演示示例1，憤怒的小鳥圖片是通用元素洒宝，狀態(tài)A向狀態(tài)B的轉(zhuǎn)換時做了位移的改變购公；新入元素（狀態(tài)B）是黃色背景的一大塊內(nèi)容；淡出元素（狀態(tài)A）是藍色背景上的一大塊內(nèi)容雁歌。通用元素在過程中貫穿宏浩，讓用戶在認知上清楚的知道從哪里來，到哪里去了靠瞎，去到的地方跟前一步又是有關(guān)系的比庄。
2.2快速簡潔
動效快速簡潔可以讓用戶感覺程序執(zhí)行的流暢、高效有用乏盐，同時不會使用戶過多的將注意力放在動效上佳窑，可以有更多的注意力集中在用戶的任務上。建議動效控制在300ms左右父能，不要超過400ms神凑，實際測試感覺超過400ms時會感覺有些慢，不夠流暢何吝。也不要太快耙厚，太快的動效會讓用戶反應跟不上，就像站在F4的賽道旁邊岔霸，高速的F4賽車從你眼前通過，能感覺到的只是唰唰唰俯渤，關(guān)于車子的細節(jié)是看不清的呆细。
2.3愉悅感
愉悅感股缸，用戶都喜歡能讓人感到喜悅的東西吗伤。讓用戶在使用產(chǎn)品功能的同時能給用戶帶來一些愉悅會增加用戶粘度信柿。需要注意的是帶給愉悅感的前提是先正確的引導用戶件甥。
3.結(jié)論
功能動效根本上是服務于產(chǎn)品功能本身愕把，是為了讓用戶可以更順利的使用產(chǎn)品孩擂、認可產(chǎn)品喂窟、帶給用戶良好的體驗纽帖。建議功能動效做小不做大抡四，在單個頁面里做些狀態(tài)間的銜接柜蜈，頁面與頁面的動效建議少做仗谆。以上的觀點來自于互聯(lián)網(wǎng)及我個人在工作中的理解，歡迎大家板磚討論淑履。
