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

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

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

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

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

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

一、動(dòng)畫組件-有溫度的設(shè)計(jì)

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

動(dòng)畫設(shè)計(jì)的十個(gè)原則

1. 漸進(jìn)漸出

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

漸進(jìn)漸出動(dòng)效

2. 縮放

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

頁(yè)面縮放動(dòng)效

3. 疊加遮罩

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

疊加遮罩動(dòng)效

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

1. 轉(zhuǎn)場(chǎng)動(dòng)效- 貼近現(xiàn)實(shí)的動(dòng)畫

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

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

閱讀app的翻頁(yè)動(dòng)效

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

日歷app的層疊動(dòng)效??????????????

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

圖片app瀏覽動(dòng)效

2. 加載動(dòng)效-趣味化的設(shè)計(jì)

現(xiàn)實(shí)使用過(guò)程中常常會(huì)因?yàn)橛布渲煤途W(wǎng)絡(luò)等因素導(dǎo)致頁(yè)面的加載速度極不穩(wěn)定，為了讓用戶感知到當(dāng)前頁(yè)面正在運(yùn)行，通過(guò)豐富有趣的小動(dòng)畫可以很好地緩解用戶在等待中產(chǎn)生的焦慮情緒。

loading動(dòng)畫

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

支付app的加載和刪除動(dòng)效

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

體育app的加載動(dòng)效

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

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

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

支付寶的集五?；顒?dòng)把五福做成了開屏動(dòng)畫，動(dòng)畫結(jié)束時(shí)落在了頁(yè)面的頂部五福活動(dòng)入口，動(dòng)畫上的前后無(wú)縫承接既起到了活動(dòng)入口宣傳的作用也幫助用戶強(qiáng)化了對(duì)于活動(dòng)的理解。

支付寶集五福開屏動(dòng)效

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

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

LV智能手表三代

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

LV智能手表表盤動(dòng)畫

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

Home pod mini

Home pod mini操作動(dòng)效

四、動(dòng)效設(shè)計(jì)工具

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

貝塞爾曲線

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

Adobe AE 2021

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

Principle

五、寫在最后

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

作者：Troy；公眾號(hào)：淘寶設(shè)計(jì)

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

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

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