寫給新人的App動效設(shè)計方案基礎(chǔ)科普

什么是動效

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

蘋果官方文檔的解讀是這樣的"精細而恰當?shù)膭赢嬓Ч梢詡鬟_狀態(tài)、增強用戶對于直接操縱的感知、通過視覺化的方式向用戶呈現(xiàn)操作結(jié)果"。

動效的分類

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

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

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

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

2. 交互類動畫（功能層）

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

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

1. 「1+6+2」原則

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

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

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

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

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

基本動效：最基本動效可以讓用戶看后很舒服。

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

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

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

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

高難度動效設(shè)計

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

當然不要忘了APP的主要功用，高難度動作只是錦上添花抑或畫龍點睛。

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

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

5. 注意事項

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

移動APP的交互動效設(shè)計5點規(guī)范

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

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

2. 必須具備高效的反饋機制

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

3. 增強APP的操縱感和體驗感

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

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

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

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

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

移動APP的交互動效分類

可以按照時機和用途，分類如下：

App 動效設(shè)計方案

1. 確定動效類型

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

三種類型只是考慮的大類型不同，動效點會有交叉。

2. 確定動效點

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

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

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

確定動效點

• 通用動效
• 「1+6+2」動效
• 組件動效
• 圖標動效

示例：

3. 動效設(shè)計與實現(xiàn)

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

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

json動畫

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

導(dǎo)出動畫的json

參考這篇：

兼容性

非交互類動畫設(shè)計交付

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

非交互類動畫設(shè)計原則

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

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

交互類動畫（功能層）

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

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

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

設(shè)計方案

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

交互類動畫的設(shè)計交付

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

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

示例

設(shè)計：

標注：

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