本文介紹了多種制作UI動(dòng)效的小技巧灌具，以及提高UI微交互的使用小建議割捅。

讓我們來看一些UI動(dòng)畫從優(yōu)秀到卓越的例子恩掷，隨著一點(diǎn)點(diǎn)的調(diào)整碧囊，你可以用動(dòng)畫來提升你的UI水平树灶。

交互列表展示了狀態(tài)的連續(xù)性，表明了共享元素之間的關(guān)系糯而，并且將用戶的注意力引導(dǎo)到他們應(yīng)該注意的和操作的地方上天通。

這些動(dòng)畫，遵循了Material Motion的指導(dǎo)原則熄驼、IBM的動(dòng)畫原則和UX運(yùn)動(dòng)理念像寒。（?Material Motion,?IBM’s Animation Principles, and?The UX in Motion Manifesto.）

1、使標(biāo)簽的內(nèi)容滑動(dòng)起來

左側(cè)的標(biāo)簽下面的內(nèi)容淡入淡出瓜贾，右側(cè)的可以隨便錢共同滑動(dòng)

一個(gè)優(yōu)秀的標(biāo)簽切換動(dòng)效诺祸，淡化一個(gè)標(biāo)簽下的內(nèi)容，過渡到另一個(gè)標(biāo)簽下的內(nèi)容祭芦。

一個(gè)卓越的標(biāo)簽切換動(dòng)效序臂，通過多個(gè)標(biāo)簽下的內(nèi)容進(jìn)行移動(dòng)，來強(qiáng)調(diào)標(biāo)簽轉(zhuǎn)換的連續(xù)性实束。

當(dāng)你設(shè)計(jì)可交互的選項(xiàng)卡式標(biāo)簽，或者彈出式的菜單時(shí)逊彭，請嘗試將下級內(nèi)容與上級主操作相關(guān)聯(lián)咸灿。通過這種方式，你不僅可以保證動(dòng)效中內(nèi)容的可見性侮叮，還可以將元素運(yùn)動(dòng)的起止位置用動(dòng)效表示出來避矢。制作時(shí)，記得添加一個(gè)滑動(dòng)手勢，讓內(nèi)容從一個(gè)頁面順滑的過渡到另一個(gè)頁面审胸。

2亥宿、鏈接卡片內(nèi)的共享元素

左側(cè)的卡片展開時(shí)想上彈出一個(gè)新的頁面。右側(cè)的卡片內(nèi)容擴(kuò)展并填充屏幕砂沛。

一個(gè)優(yōu)秀的卡片切換動(dòng)效烫扼，使用向左或向上滑動(dòng)的過渡來打開卡片，展示詳細(xì)信息碍庵。

一個(gè)卓越的卡片切換動(dòng)效映企，通過展開卡片的共享內(nèi)容來建立兩個(gè)頁面的緊密的聯(lián)系。

在不同頁面狀態(tài)之間進(jìn)行動(dòng)效制作時(shí)静浴，請查看它們之間是否有共享元素并將它們連接起來堰氓。

3、利用層疊效果來展開目錄

左側(cè)的卡片通過滑動(dòng)和淡入來切換目錄苹享。右側(cè)的卡片具有相同的動(dòng)畫双絮，并且卡片層疊的出現(xiàn)延遲。

一個(gè)優(yōu)秀的動(dòng)效進(jìn)入下級頁面時(shí)得问，通過屏幕的位置和不透明度變化來過渡囤攀。

一個(gè)卓越的動(dòng)效可以使每一個(gè)組或元素有序的出現(xiàn)，并錯(cuò)開層級逐個(gè)延遲展示出來椭赋。

要實(shí)現(xiàn)這種瀑布效果抚岗，請嘗試對每一個(gè)元素或每一個(gè)組進(jìn)行逐個(gè)延遲，保持相同的過度和持續(xù)時(shí)間哪怔，是他們的運(yùn)動(dòng)一致宣蔚。盡管如此，不要每一個(gè)小元素都有不同的運(yùn)動(dòng)认境，將元素分組操作胚委，才能展現(xiàn)好的效果。制作動(dòng)效不要拖沓叉信，Google建議每組元素運(yùn)動(dòng)間隔不超過20毫秒亩冬。

4、讓新頁面的內(nèi)容將上級頁面的元素推出屏幕之外

左側(cè)新頁面展開時(shí)原有元素淡出硼身。右側(cè)原有元素隨著新頁面的出現(xiàn)被推出屏幕之外硅急。

一個(gè)優(yōu)秀的頁面切換只有元素的移動(dòng)和顯示。

一個(gè)卓越的頁面切換新元素出現(xiàn)時(shí)會影響原有的元素佳遂，產(chǎn)生移動(dòng)营袜。

在設(shè)計(jì)過程中時(shí)刻注意元素和周圍環(huán)境之間的關(guān)系。這意味著新頁面的內(nèi)容可以將周圍的元素吸引或推出屏幕丑罪。

5荚板、讓菜單按正確的運(yùn)動(dòng)軌跡出現(xiàn)在頁面中

左側(cè)的菜單從下面飛入凤壁。右側(cè)的菜單從觸發(fā)點(diǎn)的方向延展開來。

一個(gè)優(yōu)秀的菜單動(dòng)效跪另，菜單是從觸發(fā)它的按鈕的方向出現(xiàn)拧抖。

一個(gè)卓越的菜單動(dòng)效，菜單是從觸發(fā)它的這一個(gè)點(diǎn)開始免绿，慢慢的浮動(dòng)和延展開來唧席。

6、使用按鈕來顯示不同的狀態(tài)

左側(cè)的按鈕用文本來顯示加載狀態(tài)针姿。右側(cè)將按鈕自身延展成進(jìn)度條來顯示加載狀態(tài)袱吆。

一個(gè)優(yōu)秀的動(dòng)效用文本來展示事件。

一個(gè)卓越的動(dòng)效使用按鈕本身不同的狀態(tài)來展示事件距淫。

嘗試使用按鈕本身的變化來提供重要的視覺反饋绞绒。例如，你可以用加載動(dòng)畫或誘導(dǎo)性動(dòng)畫來替代CTA按鈕榕暇∨詈猓或者你可以在背景增加動(dòng)效來展示過程。解決辦法取決于你彤枢，但都是是利用了用戶正在進(jìn)行操作但空間來進(jìn)行交互狰晚。如果你能用按鈕的顏色來定義成功狀態(tài)，那就更好了缴啡。

7壁晒、在重要的事情上拉回注意力

左側(cè)利用顏色和位置使元素突出。右側(cè)利用微妙的動(dòng)效吸引用戶的注意力业栅。

一個(gè)優(yōu)秀的設(shè)計(jì)利用顏色秒咐、尺寸、位置來使用戶需要注意和操作的重要的信息突出碘裕。

一個(gè)卓越的設(shè)計(jì)利用動(dòng)效來吸引用戶進(jìn)行重要操作携取，而不是破壞設(shè)計(jì)。

當(dāng)用戶需要有重要操作時(shí)帮孔，嘗試用動(dòng)效來獲取他們的注意力雷滋。從一個(gè)微動(dòng)效開始著手，然后根據(jù)這個(gè)操作的重要性來增加動(dòng)效的強(qiáng)烈程度（變化尺寸文兢、顏色和速度）晤斩。慎重的使用動(dòng)效，因?yàn)槭褂玫膭?dòng)效越多姆坚，它的重要性會越低尸昧，甚至?xí)蓴_用戶的注意力，適得其反旷偿。

總結(jié)

我希望當(dāng)你在想交互中增加動(dòng)效的時(shí)候烹俗，這些案例能幫助你作出更好的決定。挑選一款你喜歡使用的工具萍程，我相信你會創(chuàng)造出更加出色的動(dòng)效幢妄。

我們需要利用動(dòng)效來展示不同狀態(tài)的變化，將注意力集中在必要的操作上茫负，確定元素之間的關(guān)系蕉鸳，為我們的產(chǎn)品增加一些趣味性和識別性。遵循以上這些規(guī)則忍法，我們將把動(dòng)效做到從優(yōu)秀到卓越潮尝。

作者：Pablo Stanley

原文鏈接：https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5