大屏手機(jī)中的交互設(shè)計(jì)越來(lái)越講究用戶(hù)體驗(yàn)，而對(duì)設(shè)計(jì)來(lái)說(shuō)提升用戶(hù)體驗(yàn)除了完善友好的產(chǎn)品鏈路和精致的視覺(jué)體驗(yàn)之外，還有一個(gè)被越來(lái)越多設(shè)計(jì)師重視起來(lái)的地方，就是交互動(dòng)畫(huà)設(shè)計(jì)。我們熟知的蘋(píng)果開(kāi)關(guān)按鈕就是使用交互動(dòng)畫(huà)的典型案例，它精準(zhǔn)的模仿了現(xiàn)實(shí)中用戶(hù)按下按鈕后的轉(zhuǎn)換過(guò)程并且給到用戶(hù)實(shí)時(shí)的點(diǎn)擊反饋。

▲ 蘋(píng)果經(jīng)典按鈕開(kāi)關(guān)

添加動(dòng)畫(huà)效果是為界面服務(wù)并給到用戶(hù)能夠控制的預(yù)期，用戶(hù)在操作頁(yè)面的同時(shí)也樂(lè)于看到生動(dòng)活潑的情感化響應(yīng)。制作時(shí)需要注意一些規(guī)則，比如參考現(xiàn)實(shí)中物體的運(yùn)動(dòng)規(guī)律，這樣會(huì)使頁(yè)面功能的展示方式更加豐富、更富有吸引力，但動(dòng)畫(huà)的加入要根據(jù)場(chǎng)景和功能而定，不宜過(guò)多，否則會(huì)使用戶(hù)感覺(jué)混亂分散注意力。

01

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

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

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

1.1 漸進(jìn)漸出

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

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

1.2 縮放

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

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

1.3 疊加遮罩

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

▲ 疊加遮罩動(dòng)效

02

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

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

針對(duì)多層且復(fù)雜的頁(yè)面層級(jí)需要在多個(gè)頁(yè)面之間轉(zhuǎn)換，這些場(chǎng)景中往往需要簡(jiǎn)單的滑動(dòng)和點(diǎn)擊操作向用戶(hù)傳達(dá)清楚頁(yè)面之間的層級(jí)鏈路關(guān)系，而默認(rèn)的動(dòng)畫(huà)效果如橫滑和平移并不能很好的加深用戶(hù)的印象，這時(shí)可以結(jié)合app的特性來(lái)添加動(dòng)畫(huà)以強(qiáng)化屬性。比如下圖中這款圖書(shū)類(lèi)的app設(shè)計(jì)對(duì)頁(yè)面的轉(zhuǎn)場(chǎng)加入了翻滾的動(dòng)效，用戶(hù)在操作時(shí)和現(xiàn)實(shí)中的翻書(shū)類(lèi)似，很好的串聯(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í)也賦予了用戶(hù)成就感。

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

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

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

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

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

▲ loading動(dòng)畫(huà)

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

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

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

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

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

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

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

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

▲ 支付寶集五福開(kāi)屏動(dòng)效

03

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

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

▲ LV智能手表三代

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

▲ LV智能手表表盤(pán)動(dòng)畫(huà)

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

▲ Home pod mini

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

04

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

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

▲ 貝塞爾曲線(xiàn)

Adobe After Effects擁有豐富的圖層效果和動(dòng)畫(huà)參數(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)畫(huà)和預(yù)置的貝塞爾動(dòng)畫(huà)參數(shù)供使用者選擇，可以用來(lái)快速的制作交互動(dòng)畫(huà)原型。

▲ Principle

寫(xiě)在最后

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