原作者：Pablo Stanley? ? 原文鏈接

優(yōu)秀的動(dòng)畫，對(duì)于提升UI的逼格非常重要，在大多數(shù)情況下，針對(duì)動(dòng)畫進(jìn)行合理的調(diào)整，就可以讓你的UI變得更加出色，好的交互設(shè)計(jì)，能夠展示狀態(tài)之間的連續(xù)性，以及不同UI元素的的關(guān)系，同時(shí)，能夠使得用戶的注意力聚焦在重要的地方。

所有的交互都是用體驗(yàn)版本的InVision Studio做出來(lái)的，你可以下載源文件。

將選項(xiàng)卡種的內(nèi)容做成可滑動(dòng)的

左圖的內(nèi)容淡入淡出；右圖的內(nèi)容隨著標(biāo)簽一起滑動(dòng)。

好的動(dòng)效將內(nèi)容從一個(gè)標(biāo)簽頁(yè)淡出，再淡入到另一個(gè)標(biāo)簽頁(yè)；

優(yōu)秀的動(dòng)效讓頁(yè)面內(nèi)容在不同標(biāo)簽之間移動(dòng)，能夠展現(xiàn)過(guò)度時(shí)的連續(xù)性。

當(dāng)你設(shè)計(jì)選項(xiàng)卡或者彈出菜單這種交互時(shí)，試著將內(nèi)容的位置與打開(kāi)它的動(dòng)作相關(guān)聯(lián)。通過(guò)這種方式，你可以將你的內(nèi)容和內(nèi)容的位置都做成可視動(dòng)畫。做這種頁(yè)面時(shí)，也加上一個(gè)可以在不同內(nèi)容之間切換的滑動(dòng)手勢(shì)。

關(guān)聯(lián)卡片上的相關(guān)元素

左邊的卡片打開(kāi)一個(gè)新頁(yè)面是滑上來(lái)的；右邊則是擴(kuò)展了卡片并使其占滿屏幕。

好的動(dòng)畫展示信息詳情頁(yè)時(shí)使用左滑或者上劃的方式；

優(yōu)秀的動(dòng)畫會(huì)在有共同信息的兩種狀態(tài)之間建立聯(lián)系。

當(dāng)給兩種不同的狀態(tài)的過(guò)渡做動(dòng)畫時(shí)，看看這兩種狀態(tài)之間有沒(méi)有共有的元素，如果有則可以在動(dòng)畫中體現(xiàn)兩者的聯(lián)系。在InVision Studio中，兩個(gè)相關(guān)聯(lián)的頁(yè)面有重復(fù)的元素時(shí)，當(dāng)你創(chuàng)建一個(gè)Motion的時(shí)候，系統(tǒng)會(huì)自動(dòng)在兩個(gè)元素之間創(chuàng)建關(guān)聯(lián)動(dòng)畫。這讓創(chuàng)建動(dòng)畫原型變得輕而易舉。

在內(nèi)容中使用瀑布流效果

左邊的卡片通過(guò)滑動(dòng)和淡入的效果顯示；右邊的卡片在同樣動(dòng)畫的基礎(chǔ)上，讓每個(gè)卡片都有短時(shí)間的延遲。

當(dāng)卡片進(jìn)入屏幕時(shí)，好的動(dòng)畫改變它的位置和透明度；

優(yōu)秀的動(dòng)畫則會(huì)快速蔓延每組元素。

要達(dá)到瀑布流的效果，可以將每個(gè)動(dòng)畫元素都保持相同的動(dòng)畫速度以及持續(xù)時(shí)長(zhǎng)，并對(duì)其按序設(shè)置一定的延時(shí)，這樣設(shè)置動(dòng)畫組中

瀑布流的效果可以通過(guò)展示延遲元素來(lái)實(shí)現(xiàn)，保持同樣的釋放速度和持續(xù)時(shí)長(zhǎng)，它們看起來(lái)就是連續(xù)的。要將瀑布流的形式應(yīng)用在組里，不能應(yīng)用在單獨(dú)的元素上。保持動(dòng)畫的快速簡(jiǎn)介。谷歌的提醒功能里，每個(gè)元素出現(xiàn)的間隔不超過(guò)20毫秒。點(diǎn)擊動(dòng)畫里的瀑布流形式查看更多案例。

讓內(nèi)容推開(kāi)其他元素

左邊的動(dòng)畫中，動(dòng)畫效果直接出線在其他內(nèi)容上面。右邊的動(dòng)畫中，隨著動(dòng)畫的擴(kuò)大，其他內(nèi)容被推開(kāi)了。

好的動(dòng)畫直接在畫面中移動(dòng)和展示元素；

優(yōu)秀的動(dòng)畫則會(huì)展示出動(dòng)畫對(duì)其周圍元素的影響。

讓內(nèi)容與周圍的環(huán)境相互動(dòng)。這意味著讓內(nèi)容吸引或者趕走它周圍的元素。點(diǎn)擊Material Design中，查看更多動(dòng)畫規(guī)則。

讓菜單從按鈕中出現(xiàn)

左邊的菜單從下面滑入；右邊的菜單則從打開(kāi)它的按鈕中擴(kuò)展出來(lái)。

好的動(dòng)畫菜單出現(xiàn)的方向與打開(kāi)它的按鈕的方向保持一致；

優(yōu)秀的動(dòng)畫菜單從打開(kāi)它的按鈕中展開(kāi)。

用按鈕展示不同的狀態(tài)

左邊的動(dòng)畫使用文字表明狀態(tài)；右邊的動(dòng)畫則直接使用按鈕展示不同狀態(tài)。

好的交互將活動(dòng)狀態(tài)用文字方式展示在按鈕旁邊；

優(yōu)秀的交互則直接用按鈕展示不同狀態(tài)。

試著用按鈕本身展示不同狀態(tài)。例如：用旋轉(zhuǎn)菊花或者加載動(dòng)畫代替CTA；或者在按鈕背景中加一個(gè)動(dòng)畫表明進(jìn)程。具體方式取決于你，核心就是利用好已有的用戶已經(jīng)與之交互的空間。如果你使用按鈕顏色去確認(rèn)成功狀態(tài)，對(duì)于用戶來(lái)說(shuō)就是一個(gè)大彩蛋。

將用戶的注意力引導(dǎo)到重要的東西上

左邊的案例使用顏色和位置讓元素突出顯示；右邊的則使用了一個(gè)簡(jiǎn)單的小動(dòng)畫吸引用戶的注意力。

好的設(shè)計(jì)使用顏色、尺寸和位置，來(lái)突出需要格外引起用戶注意并觸發(fā)用戶行為的重點(diǎn)內(nèi)容；

優(yōu)秀的設(shè)計(jì)使用動(dòng)畫引導(dǎo)用戶將注意力放在重要的地方，并且不會(huì)打擾到用戶。

當(dāng)用戶需要做出一些重要的操作時(shí)，試著將這些操作的按鈕以動(dòng)畫的方式展現(xiàn)，以吸引用戶的注意力?？梢宰鲆恍┖?jiǎn)單細(xì)微的動(dòng)畫并逐漸增加強(qiáng)度，并根據(jù)行動(dòng)的重要性改變按鈕的大小、顏色和動(dòng)畫的速度。記住只在最重要的操作上使用動(dòng)畫，因?yàn)槟阌玫膭?dòng)畫越多，它就變得越不重要并且會(huì)打擾到用戶。