什么是動(dòng)效

移動(dòng)APP交互動(dòng)效：包括那些能夠?yàn)楫a(chǎn)品賦予生機(jī)的動(dòng)態(tài)的界面元素及視覺效果，這些交互效果通常與特定的響應(yīng)行為相關(guān)，甚至包括那些與交互行為沒有直接關(guān)聯(lián)的臨時(shí)狀態(tài)。

蘋果官方文檔的解讀是這樣的"精細(xì)而恰當(dāng)?shù)膭?dòng)畫效果可以傳達(dá)狀態(tài)、增強(qiáng)用戶對(duì)于直接操縱的感知、通過視覺化的方式向用戶呈現(xiàn)操作結(jié)果"。

動(dòng)效的分類

動(dòng)效設(shè)計(jì)，既能在產(chǎn)品的功能層面提供支持，又可以在表現(xiàn)層面發(fā)揮影響。

動(dòng)畫依據(jù)功能層和表現(xiàn)層可分為非交互類動(dòng)畫和交互類動(dòng)畫。

1. 非交互類動(dòng)畫（表現(xiàn)層）

非交互類動(dòng)畫，是獨(dú)立于頁面任何結(jié)構(gòu)的動(dòng)畫元素，不需要編碼；可移植到任何地方進(jìn)行播放，常見的如gif動(dòng)畫，svg動(dòng)畫等。

2. 交互類動(dòng)畫（功能層）

交互類動(dòng)畫，是指依賴于頁面結(jié)構(gòu)，動(dòng)畫的過程與結(jié)束會(huì)改變頁面的結(jié)構(gòu)，需要編碼；常見的如輪播動(dòng)畫、首屏動(dòng)畫等。

為什么要為 app 產(chǎn)品進(jìn)行動(dòng)效設(shè)計(jì)？

1. 「1+6+2」原則

Raizlabs 的產(chǎn)品工程師 Ben Johnson 提出了「1 個(gè)歡迎動(dòng)畫+6 個(gè)告知性動(dòng)畫+2 個(gè)動(dòng)人的小細(xì)節(jié)」的動(dòng)效設(shè)計(jì)原則。它為我們?cè)诋a(chǎn)品動(dòng)效的宏觀層面提供了指導(dǎo)性意見。

2. 承載品牌、傳遞情感、酷炫（表現(xiàn)層）

「1 個(gè)歡迎動(dòng)畫」的作用顯而易見，品牌色 logo 字體神馬的都弱爆了，來一段 damn cool 的動(dòng)畫抓住用戶的眼球吧！請(qǐng)?jiān)?boss 允許的范圍內(nèi)盡情的騷氣和酷炫！

3. 轉(zhuǎn)場(chǎng)、承接上下文、狀態(tài)提醒、反饋（功能層）

「6 個(gè)告知性動(dòng)畫」的目的是為了讓用戶更高效的使用產(chǎn)品，一定要高效高效再高效！最低成本的告訴用戶是從哪里來的，哪里產(chǎn)生了改變、符合用戶的心理預(yù)期等。
這些場(chǎng)合請(qǐng)盡量低調(diào)不要酷炫?？梢跃牡褡吝\(yùn)動(dòng)規(guī)律使動(dòng)作富有情感，但切忌一不能喧賓奪主打斷操作，二不能節(jié)奏拖沓降低效率。

基本動(dòng)效：最基本動(dòng)效可以讓用戶看后很舒服。

• 指向性動(dòng)效（滑動(dòng)，彈出等）
• 提示性動(dòng)效（滑動(dòng)刪除，下拉刷新等）
• 空間擴(kuò)展（翻動(dòng)，放大等）

招牌動(dòng)效設(shè)計(jì)：主要目的是加深用戶對(duì)APP的印象

巧妙的設(shè)計(jì)在滿足產(chǎn)品功能需求的基礎(chǔ)上更能讓用戶驚艷。這類動(dòng)效是APP的專屬符號(hào)，APP的品牌和格調(diào)展現(xiàn)通過此類動(dòng)效有較大的發(fā)揮空間。

這就像邁克杰克遜的亮相經(jīng)典pose，他本人or模仿者只要一擺出這個(gè)POSE我們就立馬想到MJ。同樣這類動(dòng)效的設(shè)計(jì)更具嘗試性和前瞻性，它是動(dòng)效趨勢(shì)的實(shí)踐和探索，甚至能引發(fā)跟風(fēng)潮流。

高難度動(dòng)效設(shè)計(jì)

在這個(gè)大家都很拼的移動(dòng)APP設(shè)計(jì)世界里，不來點(diǎn)讓人經(jīng)驗(yàn)的高難度動(dòng)作很難讓別人對(duì)你刮目相看。這類動(dòng)效很酷，很炫，可讓用戶作長時(shí)間的視線停留享受，讓用戶尖叫的同時(shí)，不得不為設(shè)計(jì)動(dòng)效的同學(xué)點(diǎn)贊，大大提升了對(duì)APP所屬品牌及開發(fā)團(tuán)隊(duì)實(shí)力的認(rèn)可。

當(dāng)然不要忘了APP的主要功用，高難度動(dòng)作只是錦上添花抑或畫龍點(diǎn)睛。

4. 小趣味讓用戶放松、愉悅（表現(xiàn)層或者功能層）

「2 個(gè)動(dòng)人的小細(xì)節(jié)」，比如正在與用戶進(jìn)行任務(wù)交流時(shí)，偶爾開一個(gè)暖人的小玩笑，會(huì)讓用戶感到愉悅，也是情感化設(shè)計(jì)的體現(xiàn)。比較有代表性的地方是 loading、彩蛋等。

5. 注意事項(xiàng)

除了歡迎動(dòng)畫以外，其它動(dòng)效必須幫助用戶更加高效的完成當(dāng)前任務(wù)，給予明確的指引和提示，避免大范圍「炫技」造成的拖沓、眩暈、不知所云。切記效率效率還是效率！另外，動(dòng)效尤其需要保證交互邏輯上的一致性。

移動(dòng)APP的交互動(dòng)效設(shè)計(jì)5點(diǎn)規(guī)范

1. 保持過渡切換的流暢性

如果說界面布局可以組織UI元素的靜態(tài)位置，那么動(dòng)效可以組織UI元素在時(shí)間維度上的演進(jìn)。

2. 必須具備高效的反饋機(jī)制

作為與用戶之間發(fā)生聯(lián)系的一個(gè)很重要的交互元素，良好的反饋設(shè)計(jì)可以讓用戶更好地了解到操作的結(jié)果與程序當(dāng)前的狀態(tài)，減輕用戶在等待過程中的焦慮。

3. 增強(qiáng)APP的操縱感和體驗(yàn)感

「直接操縱」是移動(dòng)產(chǎn)品用戶體驗(yàn)中很重要的一個(gè)概念，簡單來說，它要求我們的產(chǎn)品與用戶交互的方式盡量接近真實(shí)世界的互動(dòng)方式。

4. 有效的幫助引導(dǎo)

由于移動(dòng)界面的空間非常有限，我們經(jīng)常要藏起一部分功能，同時(shí)手勢(shì)操作也是移動(dòng)應(yīng)用中很常見的交互元素。

5. 提升體驗(yàn)創(chuàng)新戲碼

如果你的產(chǎn)品已經(jīng)擁有了良好的可用性，卻缺乏亮點(diǎn)，也許你可以考慮為其增加動(dòng)效。將動(dòng)效融入產(chǎn)品之中，往往帶來更愉悅地使用體驗(yàn)，也更細(xì)膩地表達(dá)應(yīng)用的情緒和氣質(zhì)。

移動(dòng)APP的交互動(dòng)效分類

可以按照時(shí)機(jī)和用途，分類如下：

App 動(dòng)效設(shè)計(jì)方案

1. 確定動(dòng)效類型

• 通用動(dòng)效（偏框架）
• 「1+6+2」動(dòng)效（偏業(yè)務(wù)）
• 組件動(dòng)效（基礎(chǔ)）

三種類型只是考慮的大類型不同，動(dòng)效點(diǎn)會(huì)有交叉。

2. 確定動(dòng)效點(diǎn)

分析App的功能結(jié)構(gòu)架構(gòu)

• 記住誰是您的目標(biāo)用戶，并且設(shè)計(jì)您的原型方案去解決他們的問題；
• 請(qǐng)確保您的動(dòng)效的每個(gè)元素都具有其背后的基本原因（為什么是這樣？為什么會(huì)是如此？為什么這個(gè)時(shí)間點(diǎn)？）；
• 為了使您的產(chǎn)品有特色，努力模仿自然界的運(yùn)動(dòng)模式來創(chuàng)造自然的動(dòng)效；
• 在項(xiàng)目的任何階段，都要隨時(shí)與開發(fā)人員保持溝通；

App的功能結(jié)構(gòu)架構(gòu)，以及業(yè)務(wù)的重點(diǎn)等，確定動(dòng)效點(diǎn)。

確定動(dòng)效點(diǎn)

• 通用動(dòng)效
• 「1+6+2」動(dòng)效
• 組件動(dòng)效
• 圖標(biāo)動(dòng)效

示例：

3. 動(dòng)效設(shè)計(jì)與實(shí)現(xiàn)

非交互類動(dòng)畫（表現(xiàn)層）

非交互類動(dòng)畫，使用AE等實(shí)現(xiàn)。使用AE + lottie-web實(shí)現(xiàn)json動(dòng)畫，可以快速建立并多平臺(tái)實(shí)現(xiàn)非交互類動(dòng)畫。

json動(dòng)畫

Lottie 是Airbnb開源的一個(gè)面向Android、 iOS、React Native 、Web的動(dòng)畫庫，能分析 Adobe After Effects 導(dǎo)出的json文件并生成動(dòng)畫，使靜態(tài)素材一樣使用這些動(dòng)畫，完美實(shí)現(xiàn)動(dòng)畫效果。

導(dǎo)出動(dòng)畫的json

參考這篇：

兼容性

非交互類動(dòng)畫設(shè)計(jì)交付

非交互類動(dòng)畫設(shè)計(jì)交付需要交付技術(shù)，直接能使用的產(chǎn)物，比如lottie的json，gif動(dòng)畫等。

非交互類動(dòng)畫設(shè)計(jì)原則

非交互類動(dòng)畫設(shè)計(jì)原則要遵循流行動(dòng)畫的設(shè)計(jì)原則，下面是迪士尼動(dòng)畫的十二個(gè)原則：

• Squash and Stretch壓縮與伸展
• Anticipation 預(yù)備動(dòng)作
• Staging演出布局
• Straight Ahead Action and Pose to Pose連續(xù)運(yùn)動(dòng)與姿態(tài)對(duì)應(yīng)
• Follow Through and Overlapping Action跟隨與重疊動(dòng)作
• Slow In and Slow Out 慢進(jìn)慢出
• Arcs 弧形運(yùn)動(dòng)
• Secondary Action 第二動(dòng)作
• Timing and Weight 時(shí)間節(jié)奏與量感
• Exaggeration 夸張性
• Solid Drawing 扎實(shí)的描繪
• Appeale 吸引力

交互類動(dòng)畫（功能層）

交互類動(dòng)畫一般需要技術(shù)使用當(dāng)前技術(shù)，實(shí)現(xiàn)交互動(dòng)畫。需要有一套動(dòng)畫開發(fā)的基礎(chǔ)框架，和動(dòng)畫設(shè)計(jì)的參數(shù)配置交付。

交互類動(dòng)畫的本質(zhì)

物體對(duì)象屬性的更改，比如Web中Dom的屬性更改。
動(dòng)效常更改的屬性：位移，縮放，旋轉(zhuǎn)，透明度等。

設(shè)計(jì)方案

一般使用Origami Studio設(shè)計(jì)動(dòng)效。也可以依據(jù)某個(gè)組件庫，進(jìn)行動(dòng)效的設(shè)計(jì)。如：IOS的動(dòng)效庫：Core Animation、iOS Facebook-Pop、awesome-ios-animation、awesome-animation等 ，Andriod動(dòng)畫庫：Material-Animations、animate、ENViews等。

交互類動(dòng)畫的設(shè)計(jì)交付

分類描述：適合較為復(fù)雜的動(dòng)畫設(shè)計(jì)

過程的描述：適合較為簡單的動(dòng)畫設(shè)計(jì)

示例

設(shè)計(jì)：

標(biāo)注：

歡迎關(guān)注作者微信公眾號(hào)：「Jingwhale Design」