作者：瀟瀟瀟瀟
鏈接：http://www.reibang.com/p/517f19521456

本文介紹了多種制作UI動效的小技巧亲怠，以及提高UI微交互的使用小建議惹骂。

讓我們來看一些UI動畫從優(yōu)秀到卓越的例子蔓纠，通過一點點的調(diào)整叛薯，你可以用動畫來提升你的UI水平夷磕。

交互表現(xiàn)了狀態(tài)的連續(xù)性恳啥，明確公共元素之間的關(guān)系喷面，并且將用戶的注意力引導到他們應該注意的和操作的地方上星瘾。

這些動畫，遵循了Material Motion的指導原則惧辈、IBM的動畫原則和UX運動理念琳状。（?Material Motion,?IBM’s Animation Principles, and?The UX in Motion Manifesto.）

1、使標簽里的內(nèi)容滑動起來

左側(cè)的標簽下面的內(nèi)容淡入淡出盒齿，右側(cè)的可以隨標簽共同滑動

一個優(yōu)秀的標簽切換動效念逞，淡化一個標簽下的內(nèi)容，過渡到另一個標簽下的內(nèi)容边翁。

一個卓越的標簽切換動效翎承，通過多個標簽下的內(nèi)容進行移動，從而強調(diào)標簽轉(zhuǎn)換的連續(xù)性符匾。

當你設(shè)計可交互的選項卡式標簽叨咖，或者彈出式的菜單時，請嘗試將下級內(nèi)容與上級主操作相關(guān)聯(lián)啊胶。通過這種方式甸各，你不僅可以保證動效中內(nèi)容的可見性，還可以將元素運動的起止位置用動效表示出來焰坪。制作時痴晦，記得添加一個滑動手勢，讓內(nèi)容從一個頁面順滑的過渡到另一個頁面琳彩。

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

左側(cè)的卡片展開時想上彈出一個新的頁面部凑。右側(cè)的卡片內(nèi)容擴展并填充屏幕露乏。

一個優(yōu)秀的卡片切換動效，使用向左或向上滑動的過渡來打開卡片涂邀，展示詳細信息瘟仿。

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

當在設(shè)計不同狀態(tài)之間進行動畫時劳较，請注意它們之間是否有共享元素并將它們連接起來驹止。使用invision studio時，在創(chuàng)建運動轉(zhuǎn)換時观蜗，在兩個鏈接屏幕之間重復的組件會自動連接臊恋。這使原型動畫變得輕而易舉。

3墓捻、利用層級效果來展開目錄

左側(cè)的卡片通過滑動和淡入來切換目錄抖仅。右側(cè)的卡片具有相同的動畫，并且卡片層疊的出現(xiàn)延遲砖第。

一個優(yōu)秀的動效進入下級頁面時撤卢，通過屏幕的位置和不透明度變化來過渡。

一個卓越的動效可以使每一個組或元素有序的出現(xiàn)梧兼，并錯開層級逐個延遲展示出來放吩。

要實現(xiàn)這種瀑布效果，請嘗試對每一個元素或每一個組進行逐個延遲羽杰，保持相同的過度和持續(xù)時間渡紫，是他們的運動一致。盡管如此忽洛，不要每一個小元素都有不同的運動腻惠，將元素分組操作，才能展現(xiàn)好的效果欲虚。制作動效不要拖沓集灌，Google建議每組元素運動間隔不超過20毫秒。

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

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

一個優(yōu)秀的頁面切換只有元素的移動和顯示梯找。

一個卓越的頁面切換新元素出現(xiàn)時會影響原有的元素唆阿，產(chǎn)生移動。

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

5、讓菜單按正確的運動軌跡出現(xiàn)在頁面中

左側(cè)的菜單從下面飛入久免。右側(cè)的菜單從觸發(fā)點的方向延展開來浅辙。

一個優(yōu)秀的菜單動效，菜單是從觸發(fā)它的按鈕的方向出現(xiàn)阎姥。

一個卓越的菜單動效记舆，菜單是從觸發(fā)它的這一個點開始，慢慢的浮動和延展開來呼巴。

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

左側(cè)的按鈕用文本來顯示加載狀態(tài)御蒲。右側(cè)將按鈕自身延展成進度條來顯示加載狀態(tài)诊赊。

一個優(yōu)秀的動效用文本來展示事件厚满。

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

嘗試使用按鈕本身的變化來提供重要的視覺反饋豪筝。例如敲街，你可以用加載動畫或誘導性動畫來替代CTA按鈕严望《嗤В或者你可以在背景增加動效來展示過程。解決辦法取決于你像吻，但都是是利用了用戶正在進行操作但空間來進行交互峻黍。如果你能用按鈕的顏色來定義成功狀態(tài)，那就更好了拨匆。

7姆涩、在重要的事情上拉回注意力

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

一個優(yōu)秀的設(shè)計利用顏色骨饿、尺寸、位置來使用戶需要注意和操作的重要的信息突出台腥。

一個卓越的設(shè)計利用動效來吸引用戶進行重要操作宏赘，而不是破壞設(shè)計。

當用戶需要有重要操作時黎侈，嘗試用動效來獲取他們的注意力察署。從一個微動效開始著手，然后根據(jù)這個操作的重要性來增加動效的強烈程度（變化尺寸峻汉、顏色和速度）贴汪。慎重的使用動效，因為使用的動效越多休吠，它的重要性會越低扳埂，甚至會干擾用戶的注意力，適得其反蛛碌。

總結(jié)

我希望當你在想交互中增加動效的時候，這些案例能幫助你作出更好的決策辖源。挑選一款你喜歡使用的工具蔚携，我相信你會創(chuàng)造出更加出色的動效希太。

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

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