在移動(dòng)端中，我們能夠看到各種各樣豐富細(xì)膩的動(dòng)效設(shè)計(jì)，應(yīng)用于各大APP中。動(dòng)效設(shè)計(jì)在產(chǎn)品研發(fā)過(guò)程中越來(lái)越規(guī)范和成熟。本文結(jié)合作者實(shí)戰(zhàn)經(jīng)驗(yàn)，與大家談?wù)勗谥谱鱑I動(dòng)效時(shí)的經(jīng)驗(yàn)和技巧，希望對(duì)你有所幫助。

豐富細(xì)膩的 App 動(dòng)效遍布移動(dòng)端優(yōu)秀應(yīng)用界面中，為用戶提供了良好的動(dòng)態(tài)沉浸式體驗(yàn)，動(dòng)效設(shè)計(jì)在產(chǎn)品研發(fā)過(guò)程中變得越來(lái)越成熟和規(guī)范，設(shè)計(jì)師們除了保證功能性和美觀性的前提，也要精確地掌握元素的動(dòng)態(tài)交互，從而提高用戶體驗(yàn)和產(chǎn)品的競(jìng)爭(zhēng)力。這里結(jié)合我們團(tuán)隊(duì)的實(shí)戰(zhàn)工作經(jīng)驗(yàn)，給大家進(jìn)行一些簡(jiǎn)單的經(jīng)驗(yàn)總結(jié)和技巧分享，希望能幫助大家在工作時(shí)制作UI動(dòng)效變得更加得心應(yīng)手。

一、動(dòng)效的價(jià)值

動(dòng)效在UI設(shè)計(jì)中具有重要的作用和價(jià)值。它可以幫助用戶更好地理解界面的功能和交互方式，提高用戶體驗(yàn)和滿意度。

首先，動(dòng)效可以使用戶更好地理解界面的功能。通過(guò)動(dòng)效，用戶可以直觀地了解某個(gè)元素的作用和效果，比如按鈕的點(diǎn)擊效果、菜單的展開(kāi)效果等。這種直觀的理解可以使用戶更快速地掌握界面的使用方式，提高界面的易用性。

其次，動(dòng)效可以提高用戶的體驗(yàn)和滿意度。通過(guò)動(dòng)效的應(yīng)用，可以讓用戶感受到界面的流暢性、舒適度和生動(dòng)性。比如，在頁(yè)面切換時(shí)添加動(dòng)畫(huà)效果，可以使用戶感覺(jué)到過(guò)渡更自然流暢；在表單輸入時(shí)添加反饋動(dòng)畫(huà)，可以讓用戶更加清晰地了解輸入的結(jié)果。這些細(xì)節(jié)的處理可以提高用戶對(duì)界面的好感度和滿意度。

總之，動(dòng)效在UI設(shè)計(jì)中扮演著重要的角色，它可以幫助用戶更好地理解界面的功能和交互方式，提高用戶體驗(yàn)和滿意度。因此，在設(shè)計(jì)UI界面時(shí)，需要注重動(dòng)效的應(yīng)用，從而提高用戶的使用體驗(yàn)。

二、避免動(dòng)畫(huà)生硬

運(yùn)動(dòng)曲線可以說(shuō)是一個(gè)動(dòng)畫(huà)的靈魂，幫助我們創(chuàng)建平滑運(yùn)動(dòng)效果，通過(guò)控制圖層屬性，如位置，大小和透明度等，從而創(chuàng)建出不同的動(dòng)畫(huà)效果。通過(guò)調(diào)整運(yùn)動(dòng)的時(shí)間、速度和曲線，以獲得最佳的動(dòng)畫(huà)效果。它直接影響了我們的動(dòng)畫(huà)是否流暢合理。

下圖中的案例為美事電子工卡的入場(chǎng)動(dòng)效，通過(guò)調(diào)節(jié)運(yùn)動(dòng)曲線使動(dòng)畫(huà)更自然。

1. 了解曲線

在移動(dòng)端的動(dòng)效設(shè)計(jì)中最常用的曲線有四種，分別是緩入、緩出以及緩入緩出和勻速曲線。

緩入即加速曲線，物體開(kāi)始移動(dòng)時(shí)速度較慢，隨著時(shí)間的推移逐漸加速。加速曲線一般被用在一些離開(kāi)就不會(huì)回來(lái)的對(duì)象上，譬如我們手機(jī)系統(tǒng)清除掉后臺(tái)應(yīng)用時(shí)的動(dòng)畫(huà)效果。

緩出即減速曲線，開(kāi)始時(shí)運(yùn)動(dòng)速度較快，隨時(shí)間推移速度逐漸減慢。物體在移動(dòng)結(jié)束時(shí)速度逐漸減慢，形成減速的效果。減速曲線一般用在對(duì)象進(jìn)入畫(huà)面時(shí)，比如常見(jiàn)的彈窗入場(chǎng)效果。

緩入緩出曲線。二者的結(jié)合，先加速后減速一般用在對(duì)象在畫(huà)面內(nèi)的運(yùn)動(dòng)。譬如抽屜式菜單的出入場(chǎng)動(dòng)畫(huà)。

除了這三種曲線，還有一種沒(méi)有速度變化的運(yùn)動(dòng)方式，以勻速運(yùn)動(dòng)。一般用在比較機(jī)械的動(dòng)畫(huà)上，通常會(huì)用于一些加載或者透明度以及顏色的變化上。

在視覺(jué)動(dòng)效中比如一些 H5 動(dòng)畫(huà)、 KV 動(dòng)畫(huà)或者動(dòng)態(tài)壁紙。如果只是常見(jiàn)的元素，進(jìn)場(chǎng)和出場(chǎng)也依然可以遵循上面的法則。進(jìn)入用減速曲線，離開(kāi)用加速曲線。

2. 推薦腳本

調(diào)半天效果還是很難調(diào)出自己想要的絲滑效果？在理解了曲線工作原理的前提下，我們就可以借助這款自帶多種曲線預(yù)設(shè)的 AE腳Flow進(jìn)行快速的曲線調(diào)節(jié)了。我們可以借助這個(gè)腳本建立自己產(chǎn)品的動(dòng)效曲線預(yù)設(shè)庫(kù)Library，輕松地將自己的曲線預(yù)設(shè)應(yīng)用到項(xiàng)目中。同時(shí)也可以導(dǎo)出動(dòng)畫(huà)曲線庫(kù)并分享給其他設(shè)計(jì)師，或者從其他動(dòng)畫(huà)師導(dǎo)入曲線預(yù)設(shè)。希望可以幫助大家更快速地創(chuàng)建高質(zhì)量的動(dòng)畫(huà)和過(guò)渡效果。

三、保持動(dòng)效一致

很多C端產(chǎn)品都會(huì)通過(guò)等級(jí)和勛章制度，來(lái)增強(qiáng)用戶的粘性。58同城的內(nèi)部溝通協(xié)同產(chǎn)品美事也有著成就勛章系統(tǒng)，設(shè)計(jì)側(cè)我們對(duì)50多個(gè)勛章做了精美設(shè)計(jì)的同時(shí)，還在展示頁(yè)面增加了每個(gè)勛章的出場(chǎng)動(dòng)效，其目的也是借助勛章增加用戶的榮譽(yù)感和儀式感。在這個(gè)背景下如何保證勛章的動(dòng)效一致性我們也沉淀了一套工作方法。

1. 一致性的關(guān)鍵

保持UI設(shè)計(jì)中動(dòng)畫(huà)效果的一致性，可以通過(guò)遵循以下步驟來(lái)實(shí)現(xiàn)：

1. 確定動(dòng)畫(huà)的類(lèi)型：要確定動(dòng)畫(huà)的類(lèi)型，是什么形式，以及它們是如何運(yùn)行的。
2. 定義動(dòng)畫(huà)的參數(shù)：確定動(dòng)畫(huà)的參數(shù)，比如他們的時(shí)長(zhǎng)，速度，彈性和位置。
3. 編寫(xiě)動(dòng)畫(huà)的腳本：編寫(xiě)動(dòng)畫(huà)的腳本，比如編寫(xiě)動(dòng)畫(huà)的函數(shù)表達(dá)式等，確定動(dòng)畫(huà)的過(guò)程，比如動(dòng)畫(huà)的延遲，以及動(dòng)畫(huà)的參數(shù)。
4. 測(cè)試動(dòng)畫(huà)：測(cè)試動(dòng)畫(huà)，確保動(dòng)畫(huà)的一致性，以及可以做出正確的結(jié)果。

2. 推薦腳本

這么多的動(dòng)畫(huà)要做如何保證一致性？推薦大家一款關(guān)鍵幀批量復(fù)制的AE腳本Motioner ，它支持層和關(guān)鍵幀多重選擇，蒙版，父子級(jí)，表達(dá)式復(fù)制。你可以像在PS里錄制動(dòng)作一樣錄制關(guān)鍵幀屬性，然后一鍵粘貼到其他動(dòng)畫(huà)元素中，高效便捷的保證了動(dòng)畫(huà)產(chǎn)出的一致性。

四、交互轉(zhuǎn)場(chǎng)動(dòng)效

移動(dòng)端交互轉(zhuǎn)場(chǎng)動(dòng)效的作用是為了讓用戶感受到有趣的視覺(jué)體驗(yàn)。動(dòng)效的持續(xù)時(shí)間可以根據(jù)使用場(chǎng)景的不同而有所不同，研究表明，動(dòng)效的最佳持續(xù)時(shí)長(zhǎng)為200毫秒到500毫秒之間。這個(gè)數(shù)字基于人類(lèi)的認(rèn)知方式和信息消化速度得出。動(dòng)效持續(xù)時(shí)間低于100毫秒幾乎無(wú)法被識(shí)別，而超過(guò)1秒則會(huì)讓人感到遲緩。下面案例中美事電子工卡的動(dòng)效持續(xù)時(shí)間為500毫秒。

五、落地及交付

一個(gè)動(dòng)效是否能夠落地實(shí)施，這里面牽扯了太多的因素。針對(duì)動(dòng)效輸出的選擇正在變得越來(lái)越多，作為設(shè)計(jì)師我們要了解動(dòng)效落地背后的原理才能更容易的對(duì)接和落地。目前動(dòng)效輸出常用的有兩種方式：位圖方式：PNG序列幀、APNG、GIF；矢量方式：Lottie、SVG動(dòng)畫(huà)。具體導(dǎo)出方式和每種格式的優(yōu)劣在這里就不一一介紹。但是請(qǐng)記住一句話，山不向我走來(lái) 我便向山走去，以美事勛章項(xiàng)目為例，因?yàn)長(zhǎng)ottie效果支持的局限性，我們選用了多種方式導(dǎo)出來(lái)實(shí)現(xiàn)最終的動(dòng)畫(huà)落地。

六、結(jié)語(yǔ)

文章所用方法均為團(tuán)隊(duì)內(nèi)部嘗試方法，并不全面，可作為大家工作產(chǎn)出過(guò)程中的參考方案，本次分享就到這里。