隨著(zhù)移動(dòng)應用設計的不斷發(fā)展，動(dòng)畫(huà)在如今應用中的地位變得越來(lái)越重要，那么如何把好的動(dòng)畫(huà)做到更加精致，你可以從這篇文章中找到一些非常實(shí)用并且可迅速執行的小技巧！
提高UI微交互的實(shí)用建議
讓我們一起看看UI動(dòng)畫(huà)從優(yōu)秀到卓越的一些例子。通過(guò)一點(diǎn)小小的調整，你就可以大大提升你的UI動(dòng)效品質(zhì)。
本文所列出的案例顯示出了狀態(tài)之間的連續性，以及公共元素之間的關(guān)系，并且將用戶(hù)的注意力引向他們應該注意和采取行動(dòng)的事情上。
為了創(chuàng )建這些動(dòng)畫(huà)， 我遵循了 Material Motion, IBM’s Animation Principles, 和The UX in Motion Manifesto.的一些原則。
所有這些動(dòng)畫(huà)的設計都是用了 InVision Studio早期的版本， 你可以在這里下載源文件。
1、內容標簽的滑動(dòng)動(dòng)效
左邊的內容是淡入淡出的，右邊的是內容會(huì )隨著(zhù)標簽一起滑動(dòng)。
一個(gè)好的動(dòng)畫(huà)會(huì )把內容從一種狀態(tài)淡出到另一種狀態(tài)。
一個(gè)優(yōu)秀的動(dòng)畫(huà)則是使內容在不同狀態(tài)之間轉換保持連續性。
當你設計一個(gè)類(lèi)似標簽或彈出菜單的交互時(shí)，嘗試將內容的位置與打開(kāi)它的動(dòng)作相關(guān)聯(lián)。這樣做不僅可以提升內容的可見(jiàn)性，同時(shí)也可以使該內容的位置動(dòng)畫(huà)化。當你在設計這個(gè)動(dòng)畫(huà)的時(shí)候，記得要加上內容切換的滑動(dòng)手勢操作。
2、連接卡片的共用元素。
左邊的內容是向上打開(kāi)一個(gè)新的界面，右邊則是將卡片展開(kāi)并填充整個(gè)屏幕。
一個(gè)好的動(dòng)畫(huà)是使用像向左或者向上滑動(dòng)來(lái)展示內容細節。
一個(gè)優(yōu)秀的動(dòng)畫(huà)是通過(guò)公共元素的動(dòng)畫(huà)來(lái)建立兩個(gè)狀態(tài)之間的聯(lián)系。
在不同狀態(tài)之間動(dòng)畫(huà)時(shí)，查看它們之間是否有任何公共元素并將它們聯(lián)系起來(lái)。在InVision Studio中，當你創(chuàng )建一個(gè)轉場(chǎng)動(dòng)畫(huà)時(shí)，會(huì )自動(dòng)連接兩個(gè)屏幕之間的重復組件。這使得原型動(dòng)畫(huà)的設計變得輕而易舉。
查看 Motion Manifesto ，看看你能夠應用的動(dòng)畫(huà)類(lèi)型。上面的例子使用了遮罩，轉換，子父級關(guān)系，緩動(dòng)等原則。
3、在內容中使用級聯(lián)效果
左邊的卡片在動(dòng)畫(huà)中有滑動(dòng)和淡入，右邊是相同的動(dòng)畫(huà)，但是每張卡片都有一個(gè)很短的延時(shí)。
一個(gè)好的動(dòng)畫(huà)會(huì )改變元素在進(jìn)入界面時(shí)的位置和透明度。
一個(gè)優(yōu)秀的動(dòng)畫(huà)是能夠快速的將界面元素錯落有序的出現。
要實(shí)現瀑布流效果，嘗試將延遲應用到每一塊或者每一組內容上。保持相同的緩動(dòng)和持續時(shí)間，這樣會(huì )給人感覺(jué)是一致的。 不要將每個(gè)小元素都去做瀑布流效果，而是將這些元素組合起來(lái)，保持動(dòng)畫(huà)的流暢和快速。谷歌推薦每個(gè)元素開(kāi)始運動(dòng)不超過(guò)20ms的間隔。 查看 Material Motion 中的編排原則并看看更多的例子。
4、讓內容把界面中的元素撐開(kāi)至界面以外
左邊的動(dòng)畫(huà)是蓋在其他內容之上，右邊的動(dòng)畫(huà)則是隨著(zhù)內容的展開(kāi)將內容推出來(lái)。
一個(gè)好的動(dòng)畫(huà)是在上下文中移動(dòng)并顯示元素。
一個(gè)優(yōu)秀的動(dòng)畫(huà)則是當元素發(fā)生改變時(shí)會(huì )影響周?chē)h(huán)境。
讓內容中的元素了解周?chē)沫h(huán)境。這意味著(zhù)內容在發(fā)生改變時(shí)會(huì )吸引或者排斥周?chē)脑?。有關(guān)更多示例，請查看 Material Design.中的意識運動(dòng)原理。
5、讓菜單顯示在上下文中。
左邊的菜單從下面飛進(jìn)來(lái)，右邊的菜單則從創(chuàng )建它的動(dòng)作展開(kāi)。
好的動(dòng)畫(huà)菜單是從打開(kāi)它們的按鈕方向顯示出現的內容。
優(yōu)秀的動(dòng)畫(huà)是從創(chuàng )建它們的動(dòng)作中浮現出來(lái)，是從觸摸點(diǎn)展開(kāi)而來(lái)。
6、使用按鈕顯示不同的狀態(tài)。
左邊的按鈕顯示指示狀態(tài)的文本，右邊的按鈕則使用變化的容器顯示不同的事件。
好的交互方案是在按鈕附近顯示事件。
優(yōu)秀的交互方案是使用按鈕本身來(lái)顯示不同的狀態(tài)。
嘗試使用按鈕的容器來(lái)提供狀態(tài)的視覺(jué)反饋。例如，你可以使用一個(gè)變形或者加載動(dòng)畫(huà)來(lái)替換純文本；也可以在顯示進(jìn)度的背景中添加一個(gè)動(dòng)畫(huà)。解決方案取決于你，想法是利用用戶(hù)已經(jīng)與之交互的空間。如果使用按鈕顏色和樣式來(lái)確認成功狀態(tài)，則額外加分。
7、使注意力集中在重要的事情上
左邊的例子是用顏色和位置來(lái)突出元素，右邊則是使用一個(gè)微動(dòng)畫(huà)來(lái)引起用戶(hù)的注意。
好的設計會(huì )使用顏色，大小和位置來(lái)突出用戶(hù)需要注意或采取的重要操作。
優(yōu)秀的設計會(huì )使用動(dòng)畫(huà)來(lái)引起用戶(hù)對重要操作的關(guān)注，并且不會(huì )對用戶(hù)造成干擾。
當用戶(hù)需要做一些重要的事情時(shí)，嘗試用動(dòng)畫(huà)來(lái)吸引他們的注意力。從一個(gè)微動(dòng)畫(huà)開(kāi)始，根據操作的重要程度增加強度（改變大小，顏色和速度）。這種動(dòng)畫(huà)只能用于關(guān)鍵操作——使用的次數越多，效果反而越差，并且用戶(hù)會(huì )受到的騷擾也會(huì )越多。
總結
我希望這些例子可以幫助你在做交互動(dòng)畫(huà)時(shí)做出更好的決策。有了像 InVision’s Studio一樣新的動(dòng)畫(huà)原型工具，我預計我們很快就會(huì )看到互動(dòng)創(chuàng )意的爆發(fā)。我們只需要負責在這個(gè)新的王國里任意發(fā)揮。
讓我們應用動(dòng)畫(huà)來(lái)解釋狀態(tài)的變化，注意必要的操作，確定元素之間的關(guān)系并為我們的產(chǎn)品添加一點(diǎn)樂(lè )趣和個(gè)性。遵循這些元素，我們就可以將我們的動(dòng)畫(huà)從好的變成優(yōu)秀的。
來(lái)源：原文：https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5
作者： Pablo Stanley
譯者：彩云Sky
文章推薦：
