在設(shè)計(jì)動(dòng)效的時(shí)候，注意狀態(tài)變化的指示，元素之間關(guān)系的強(qiáng)化，適當(dāng)?shù)卦黾右恍?lè)趣。遵循這樣的原則，總能讓動(dòng)效更上一層樓。

動(dòng)效現(xiàn)如今在 APP 和網(wǎng)頁(yè)中幾乎已經(jīng)成為了基本的組成部分，經(jīng)過(guò)仔細(xì)打磨的 UI動(dòng)效對(duì)于整個(gè)界面的提升是顯著的。

動(dòng)效呈現(xiàn)出狀態(tài)切換的過(guò)程，展現(xiàn)了元素之間的邏輯關(guān)系，并且吸引用戶的注意力，引導(dǎo)他們執(zhí)行有效的交互。

在設(shè)計(jì)動(dòng)效的過(guò)程中，?Material Motion?的設(shè)計(jì)原則，IBM 動(dòng)畫(huà)設(shè)計(jì)規(guī)則和?UX動(dòng)效宣言都是不錯(cuò)的設(shè)計(jì)參考和指引。遵循這些現(xiàn)有的規(guī)范，能夠很好地提升動(dòng)效本身的體驗(yàn)和效果，從優(yōu)秀走向卓越。今天的動(dòng)效設(shè)計(jì)都是遵循著這些規(guī)范使用 InVision Studio 來(lái)進(jìn)行制作的。

1. 標(biāo)簽頁(yè)切換動(dòng)效

左側(cè)標(biāo)簽切換的時(shí)候使用了淡入淡出，右側(cè)標(biāo)簽頁(yè)切換使用了滑動(dòng)效果。

• 內(nèi)容切換的時(shí)候淡入淡出效果不錯(cuò)。
• 通過(guò)滑動(dòng)效果來(lái)展示內(nèi)容，不僅呈現(xiàn)了變化的過(guò)程，還指明了兩者的位置關(guān)系和邏輯關(guān)系，更為卓越。

當(dāng)你在設(shè)計(jì)諸如標(biāo)簽頁(yè)或者彈出菜單這樣的控件的時(shí)候，盡量借助動(dòng)效讓內(nèi)容的位置變化關(guān)系呈現(xiàn)出來(lái)，這樣不僅確保了內(nèi)容的可見(jiàn)性，而且能夠讓用戶不迷惑。這個(gè)時(shí)候，滑動(dòng)手勢(shì)交互和位移動(dòng)效是不錯(cuò)的搭配，非常符合此處內(nèi)容切換的語(yǔ)境。

2. 卡片的展開(kāi)動(dòng)效

卡片是最常見(jiàn)的 UI 元素，左側(cè)的界面中，點(diǎn)擊卡片之后，展開(kāi)新的界面；右側(cè)界面中，點(diǎn)擊卡片之后，卡片擴(kuò)展并填充整個(gè)屏幕。

• 點(diǎn)擊卡片之后，詳情頁(yè)向上滑出或者從左側(cè)滑出的設(shè)計(jì)很不錯(cuò)。
• 通過(guò)展開(kāi)動(dòng)效從卡片直接過(guò)渡到詳情頁(yè)是更卓越的設(shè)計(jì)。

最好的動(dòng)效往往能夠通過(guò)變化讓人明白兩種狀態(tài)之間的內(nèi)在關(guān)聯(lián)。在制作不同狀態(tài)之間變化的動(dòng)效的時(shí)候，注意兩個(gè)界面中共享的元素，并且將它作為橋梁，將兩個(gè)界面狀態(tài)連接到一起。在使用 InVision Studio 創(chuàng)建原型的時(shí)候，這種同時(shí)存在前后兩屏中的控件會(huì)自動(dòng)連接起來(lái)，構(gòu)成動(dòng)效。這一功能使得動(dòng)效的構(gòu)建更加便捷。

3. 在列表中使用瀑布式展開(kāi)動(dòng)效

左邊的列表使用了較為迅速的淡入淡出動(dòng)效，而右邊的列表當(dāng)中，淡入淡出以延時(shí)的方式呈現(xiàn)，效果類(lèi)似瀑布的展開(kāi)方式。

• 淡入淡出的動(dòng)效讓元素遞次出現(xiàn)加上輕微的位移，比較自然，看起來(lái)不錯(cuò)。
• 列表元素通過(guò)延時(shí)次第出現(xiàn)，位移更加明顯，形同瀑布，在視覺(jué)和體驗(yàn)上更為卓越。

瀑布式的展開(kāi)動(dòng)效只需要通過(guò)明顯的延時(shí)就能夠?qū)崿F(xiàn)，適當(dāng)?shù)乜刂乒?jié)奏，讓整個(gè)加載速度適當(dāng)?shù)臏p緩而不會(huì)太慢，讓用戶能夠感知到這個(gè)過(guò)程即可。谷歌建議每個(gè)元素的延時(shí)不超過(guò)20毫秒。你可以在 Material Motion 中看到設(shè)計(jì)的原理和更多的實(shí)例。

4. 展開(kāi)時(shí)的擴(kuò)展動(dòng)效

左側(cè)的動(dòng)效是內(nèi)容在頂層覆蓋列表，而右側(cè)的動(dòng)效是從中間擴(kuò)展將上下內(nèi)容頂開(kāi)。

• 通過(guò)移動(dòng)、覆蓋、展開(kāi)的方式來(lái)呈現(xiàn)詳情頁(yè)的動(dòng)效，視覺(jué)上看起來(lái)不錯(cuò)。
• 而點(diǎn)擊之后展開(kāi)頂?shù)糁車(chē)脑兀椭車(chē)钠渌脑赜兴?dòng)，這樣的動(dòng)效更加優(yōu)秀。

界面中所有的元素都應(yīng)該是有「重量」的，某個(gè) UI 控件隨著動(dòng)效變化的時(shí)候，和周?chē)脑匕l(fā)生互動(dòng)，則能夠強(qiáng)化這種實(shí)體感。

5. 菜單的展開(kāi)動(dòng)效

左側(cè)的動(dòng)效中，菜單從底部淡入界面，而右側(cè)的動(dòng)效中，菜單是從被點(diǎn)擊的按鈕中擴(kuò)展開(kāi)的。

• 菜單從按鈕的位置淡入進(jìn)入界面的方式展現(xiàn)了兩者的關(guān)聯(lián)，這樣的設(shè)計(jì)還不錯(cuò)。
• 通過(guò)擴(kuò)展動(dòng)效的方式來(lái)呈現(xiàn)菜單的展開(kāi)，讓按鈕和菜單之間的關(guān)系得到了進(jìn)一步的加強(qiáng)，這樣的設(shè)計(jì)更加優(yōu)秀。

6. 使用按鈕展現(xiàn)不同狀態(tài)

左側(cè)的按鈕通過(guò)文本說(shuō)明和色彩變化來(lái)指示狀態(tài)改變，而右側(cè)按鈕則通過(guò)加載控件來(lái)展示不同的事件的發(fā)生。

• 好的按鈕會(huì)指示狀態(tài)的改變，哪怕是通過(guò)文本來(lái)呈現(xiàn)。
• 通過(guò)按鈕本身，視覺(jué)化地呈現(xiàn)加載的狀態(tài)變化，比起文本說(shuō)明更加自然，也更加易于理解，這樣的設(shè)計(jì)更加優(yōu)秀。

嘗試使用加載指示器來(lái)指示狀態(tài)的變化和進(jìn)度，類(lèi)似的方式有很多，重點(diǎn)是在于視覺(jué)化的、自然的呈現(xiàn)狀態(tài)的變化過(guò)程，如果搭配上色彩的變化，那么就更好了。

7. 吸引用戶注意的動(dòng)效

左側(cè)僅僅是通過(guò)色彩、符號(hào)和位置來(lái)吸引注意力，而右側(cè)加入了微妙的動(dòng)效來(lái)吸引用戶注意。

• 使用色彩、標(biāo)識(shí)和位置來(lái)吸引用戶注意力是頗為有效的手段。
• 借助微妙自然的動(dòng)效，不僅能夠吸引用戶注意力，而且不會(huì)造成干擾，這樣的設(shè)計(jì)更優(yōu)秀。

對(duì)于一些重要的組件、事件或者信息，使用類(lèi)似呼吸式的動(dòng)效來(lái)強(qiáng)化效果是自然且干擾性較低的，這樣的動(dòng)效設(shè)計(jì)讓元素的重要性得到凸顯，還不會(huì)讓用戶感到反感。

8. 結(jié)語(yǔ)

我希望今天所提到的這些技巧能夠讓你在設(shè)計(jì)交互動(dòng)畫(huà)的時(shí)候，拿出更加自然、優(yōu)秀的方案。從優(yōu)秀到卓越，有的時(shí)候只需要進(jìn)行微小的改變。值得一提的是，像 InVision Studio 這樣的工具，對(duì)于動(dòng)效本身的提升是很明顯的，它能夠提供更多自然而富有直覺(jué)性的動(dòng)效。

總之，在設(shè)計(jì)動(dòng)效的時(shí)候，注意狀態(tài)變化的指示，元素之間關(guān)系的強(qiáng)化，適當(dāng)?shù)卦黾右恍?lè)趣。遵循這樣的原則，總能讓動(dòng)效更上一層樓。

原文作者 :?Pablo Stanley

譯者/編輯 :?陳子木

譯文地址：https://www.uisdc.com/good-to-great-ui-animation

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Pexels，基于 CC0 協(xié)議