編輯導(dǎo)語：總是會在手機、電腦看到各種小動畫，這些動態(tài)的界面有什么小細節(jié)可以考量呢？本文作者分別從動畫組件、動畫功能、智能設(shè)備動效、動效設(shè)計工具四個方面講述了交互動畫設(shè)計，希望對你有所啟發(fā)。

大屏手機中的交互設(shè)計越來越講究用戶體驗，而對設(shè)計來說提升用戶體驗除了完善友好的產(chǎn)品鏈路和精致的視覺體驗之外，還有一個被越來越多設(shè)計師重視起來的地方，就是交互動畫設(shè)計。

我們熟知的蘋果開關(guān)按鈕就是使用交互動畫的典型案例，它精準的模仿了現(xiàn)實中用戶按下按鈕后的轉(zhuǎn)換過程并且給到用戶實時的點擊反饋。

蘋果經(jīng)典按鈕開關(guān)

添加動畫效果是為界面服務(wù)并給到用戶能夠控制的預(yù)期，用戶在操作頁面的同時也樂于看到生動活潑的情感化響應(yīng)。

制作時需要注意一些規(guī)則，比如參考現(xiàn)實中物體的運動規(guī)律，這樣會使頁面功能的展示方式更加豐富、更富有吸引力，但動畫的加入要根據(jù)場景和功能而定，不宜過多，否則會使用戶感覺混亂分散注意力。

一、動畫組件-有溫度的設(shè)計

安卓和iOS的動畫組件庫都支持針對目標的基礎(chǔ)動畫屬性調(diào)整，如目標的透明度、大小、旋轉(zhuǎn)角度，顏色變化等，經(jīng)過不同的組合后便成為了豐富的動畫樣式。具體表現(xiàn)形式可以參考Jorge Rolando Canedo Estrada基于迪士尼動畫原理提煉的十條動畫設(shè)計原則。

動畫設(shè)計的十個原則

1. 漸進漸出

漸進漸出模仿了現(xiàn)實中目標進入和滑出的方式，會伴有加速和減速的過程，部分樣式還會加入彈跳的效果，這種樣式多用于表現(xiàn)頁面的上下級切換。

漸進漸出動效

2. 縮放

這種動畫效果模擬了現(xiàn)實中近大遠小的物理關(guān)系，多用于圖片內(nèi)容的查看，一般會配合上下滑動來切換。

頁面縮放動效

3. 疊加遮罩

疊加遮罩的效果動畫常用于界面中的彈層展示和一些細節(jié)界面，常伴隨著同一頁面中前后目標之間的形變和轉(zhuǎn)換。

疊加遮罩動效

二、動畫功能-附魔產(chǎn)品

1. 轉(zhuǎn)場動效- 貼近現(xiàn)實的動畫

針對多層且復(fù)雜的頁面層級需要在多個頁面之間轉(zhuǎn)換，這些場景中往往需要簡單的滑動和點擊操作向用戶傳達清楚頁面之間的層級鏈路關(guān)系，而默認的動畫效果如橫滑和平移并不能很好的加深用戶的印象，這時可以結(jié)合app的特性來添加動畫以強化屬性。

比如下圖中這款圖書類的app設(shè)計對頁面的轉(zhuǎn)場加入了翻滾的動效，用戶在操作時和現(xiàn)實中的翻書類似，很好的串聯(lián)了界面前后轉(zhuǎn)換的過程，強化了界面之間的關(guān)系。

閱讀app的翻頁動效

下面這個日歷app也模擬了現(xiàn)實中紙張的層疊效果，滑動切換待辦事件就可以輕松丟掉已完成事項的便箋，讓完成的動作更輕松有趣，同時也賦予了用戶成就感。

日歷app的層疊動效??????????????

當(dāng)頁面中有詳細信息但又不至于跳轉(zhuǎn)頁面的時候也可以使用疊加效果，對頁面的局部信息進行放大，同時弱化模糊其他非必要信息，可以有效的幫助用戶抓到內(nèi)容重點。

圖片app瀏覽動效

2. 加載動效-趣味化的設(shè)計

現(xiàn)實使用過程中常常會因為硬件配置和網(wǎng)絡(luò)等因素導(dǎo)致頁面的加載速度極不穩(wěn)定，為了讓用戶感知到當(dāng)前頁面正在運行，通過豐富有趣的小動畫可以很好地緩解用戶在等待中產(chǎn)生的焦慮情緒。

loading動畫

空白頁面的加載也可以和過場動畫相結(jié)合，如下圖所示，首先是擬物化的卡片抽出效果，之后的數(shù)據(jù)讀取用色塊的滑動效果取代死板的填充。同時卡片成功刪除后的效果并不是直接確認的生硬文案，而是符合現(xiàn)實中消除卡片的粉碎動畫，幫助用戶加深確認效果。

支付app的加載和刪除動效

下圖中足球比賽的app也用到了同樣的設(shè)計方式，當(dāng)用戶點擊球隊比分時會顯示詳細的進球數(shù)據(jù)，因為是實況比賽用戶需要快速閱讀了解當(dāng)下比分，這時的加載畫面用球場的輪廓形狀展現(xiàn)，這樣既切合了app本身的屬性，也弱化了用戶對數(shù)據(jù)加載的焦急等待。

體育app的加載動效

3. 引導(dǎo)動效-情緒的引導(dǎo)

在app版本升級和一些頁面新功能介紹時我們經(jīng)?？吹竭@類動畫效果，主要功能是給用戶介紹更新內(nèi)容，ios15更新后將多國語言的hello文字轉(zhuǎn)換成更加友好的動畫形式，增加了溫度也更貼合用戶的情感需求。

iOS15設(shè)置歡迎引導(dǎo)

支付寶的集五?；顒影盐甯Ｗ龀闪碎_屏動畫，動畫結(jié)束時落在了頁面的頂部五?；顒尤肟冢瑒赢嬌系那昂鬅o縫承接既起到了活動入口宣傳的作用也幫助用戶強化了對于活動的理解。

支付寶集五福開屏動效

三、智能設(shè)備動效

智能設(shè)備逐漸普及的當(dāng)下，很多交互界面是非常規(guī)或是沒有屏幕的，這就更需要利用軟硬件的結(jié)合動效來傳達用戶的操控反饋，這些動畫效果和特殊的硬件設(shè)計結(jié)合在一起起到了1+1>2的效果。

LV智能手表三代

LV采用鴻蒙系統(tǒng)的三代智能手表，與特殊印花表盤結(jié)合的動畫效果在非常的炫酷流暢，凸顯了品牌的調(diào)性。

LV智能手表表盤動畫

蘋果Homepod mini的觸控面板動畫模仿了手機上呼出siri的動畫效果，讓用戶在呼叫音箱的時候代入了手機的操作體驗，延續(xù)了體驗的一致性。

Home pod mini

Home pod mini操作動效

四、動效設(shè)計工具

目前安卓和ios平臺都有自己的工具來支持開發(fā)者制作交互動畫，可以直接加入貝塞爾曲線來設(shè)置動畫目標的各項參數(shù)，這里分享兩款常用動畫制作軟件，都支持精致且舒適的動畫效果，讓吸引人的動畫效果向用戶呈現(xiàn)操作結(jié)果，傳達界面狀態(tài)，增強用戶的感知。

貝塞爾曲線

Adobe After Effects擁有豐富的圖層效果和動畫參數(shù)設(shè)置選項，可以根據(jù)需求輸出多種格式，缺點是上手有一定難度，在導(dǎo)入素材時一些常用的設(shè)計軟件無法很好的兼容。

Adobe AE 2021

相較之下Principle則更為小巧便捷，可以直接導(dǎo)入sketch和figma的源文件，并且默認設(shè)置了多種轉(zhuǎn)場的交互動畫和預(yù)置的貝塞爾動畫參數(shù)供使用者選擇，可以用來快速的制作交互動畫原型。

Principle

五、寫在最后

隨著智能設(shè)備硬件的不斷升級，平時習(xí)以為常的設(shè)計細節(jié)也需要不斷地推陳出新。不論是基礎(chǔ)組件還是鏈路設(shè)計，都可以結(jié)合實際界面做出驚艷的動畫效果，幫助用戶帶來更好的體驗，交互動畫設(shè)計將是未來設(shè)計師必備的一項專業(yè)技能。

作者：Troy；公眾號：淘寶設(shè)計

原文鏈接：https://mp.weixin.qq.com/s/TrK0ggIn3HB1_o9AirxaSQ

本文由@淘寶設(shè)計?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。