UI動(dòng)畫現(xiàn)在幾乎是應(yīng)用程序和網(wǎng)頁(yè)中的基本組件。精心打磨的UI動(dòng)畫顯著改善了整個(gè)界面。

　　動(dòng)畫設(shè)計(jì)呈現(xiàn)了狀態(tài)轉(zhuǎn)換的過(guò)程，展示了元素之間的邏輯關(guān)系，吸引了用戶的注意力并引導(dǎo)他們進(jìn)行有效的交互。

　　在UI動(dòng)畫的設(shè)計(jì)過(guò)程中，材質(zhì)運(yùn)動(dòng)的設(shè)計(jì)原則、IBM動(dòng)畫設(shè)計(jì)規(guī)則和UX動(dòng)畫聲明都是很好的設(shè)計(jì)參考和指導(dǎo)。

　　遵循這些現(xiàn)有的規(guī)范，可以很好地提高動(dòng)漫本身的體驗(yàn)和效果，從優(yōu)秀走向卓越。今天的運(yùn)動(dòng)設(shè)計(jì)是根據(jù)這些規(guī)范使用InVisionStudio制作的。

　　卡片擴(kuò)展動(dòng)畫

　　卡片是最常見(jiàn)的UI元素。在左側(cè)界面，點(diǎn)擊卡片后，展開一個(gè)新的界面；在右邊的界面中，單擊卡片后，卡片將展開并填充整個(gè)屏幕。

　　點(diǎn)擊卡片后，詳細(xì)信息頁(yè)面向上或從左側(cè)滑出，設(shè)計(jì)非常好。

　　通過(guò)擴(kuò)展動(dòng)畫，直接從卡片過(guò)渡到細(xì)節(jié)頁(yè)面，是一種更優(yōu)秀的設(shè)計(jì)。

　　最好的動(dòng)畫往往能讓人們通過(guò)變化了解兩種狀態(tài)之間的內(nèi)在聯(lián)系。

　　在制作在不同狀態(tài)之間更改的動(dòng)畫時(shí)，請(qǐng)注意兩個(gè)接口中共享的元素，并將其用作連接兩個(gè)接口狀態(tài)的橋梁。

　　使用InVisionStudio創(chuàng)建原型時(shí)，前后屏幕中的控件將自動(dòng)連接起來(lái)，形成動(dòng)態(tài)效果。這個(gè)特性使得動(dòng)畫的構(gòu)建更加方便。

　　在列表中使用瀑布展開動(dòng)畫

　　左邊的列表使用了相對(duì)快速的淡入淡出效果，而右邊的列表中，淡入淡出是以延遲的方式呈現(xiàn)的，效果類似于瀑布的展開方式。

　　淡入淡出的動(dòng)態(tài)效果，使元素連續(xù)出現(xiàn)，稍有位移，更自然，好看。

　　列表元素通過(guò)延時(shí)順序出現(xiàn)，位移更明顯，像瀑布一樣，更有視覺(jué)和體驗(yàn)。

　　瀑布式的擴(kuò)展動(dòng)畫只能通過(guò)顯著的延遲來(lái)實(shí)現(xiàn)。適當(dāng)控制節(jié)奏，使整個(gè)加載速度適當(dāng)放慢而不至于太慢，讓用戶能夠感知過(guò)程。

　　谷歌建議每個(gè)元素的延遲不應(yīng)超過(guò)20毫秒。你可以看到設(shè)計(jì)的原則和更多的物質(zhì)運(yùn)動(dòng)的例子。

　　展開時(shí)展開動(dòng)畫

　　左側(cè)的動(dòng)畫是覆蓋頂部列表的內(nèi)容，右側(cè)的動(dòng)畫從中間擴(kuò)展到頂部和底部?jī)?nèi)容。

　　通過(guò)移動(dòng)、覆蓋和擴(kuò)展呈現(xiàn)細(xì)節(jié)頁(yè)的動(dòng)態(tài)效果，視覺(jué)效果良好。單擊后，展開周圍元素并與其他周圍元素交互。這種動(dòng)態(tài)效果更好。

　　接口中的所有元素都應(yīng)該有“權(quán)重”。當(dāng)某個(gè)UI控件隨著動(dòng)態(tài)效果發(fā)生變化時(shí)，與周圍元素的交互可以增強(qiáng)這種實(shí)質(zhì)性的感覺(jué)。

　　菜單展開動(dòng)畫

　　在左側(cè)的動(dòng)畫中，菜單從底部淡入界面，而在右側(cè)的動(dòng)畫中，菜單從單擊的按鈕展開。

　　菜單從按鈕位置淡入界面的方式顯示了兩者之間的關(guān)系，這種設(shè)計(jì)還不錯(cuò)。

　　菜單的擴(kuò)展是通過(guò)動(dòng)態(tài)效果的擴(kuò)展呈現(xiàn)出來(lái)的，這樣按鈕和菜單之間的關(guān)系得到了進(jìn)一步的加強(qiáng)，這種設(shè)計(jì)更加出色。

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

　　左邊的按鈕通過(guò)文本描述和顏色變化來(lái)表示狀態(tài)變化，右邊的按鈕通過(guò)加載控件來(lái)顯示不同事件的發(fā)生。

　　好的按鈕將指示狀態(tài)的變化，即使它是通過(guò)文本顯示的。

　　通過(guò)按鈕本身，直觀地呈現(xiàn)加載狀態(tài)的變化，比文字描述更自然、更容易理解。這個(gè)設(shè)計(jì)更出色。

　　嘗試使用加載指示器指示狀態(tài)更改和進(jìn)度。有許多類似的方法。重點(diǎn)是直觀自然地呈現(xiàn)狀態(tài)變化過(guò)程。如果你配上顏色的變化，那就更好了。

　　吸引用戶注意力的動(dòng)態(tài)效果

　　左側(cè)僅使用顏色、符號(hào)和位置來(lái)吸引注意力，右側(cè)則添加微妙的運(yùn)動(dòng)效果來(lái)吸引用戶的注意力。

　　使用顏色、徽標(biāo)和位置來(lái)吸引用戶的注意力是非常有效的。

　　借助細(xì)膩?zhàn)匀坏倪\(yùn)動(dòng)效果，既能吸引用戶的注意力，又不會(huì)造成干擾，所以這種設(shè)計(jì)比較好。

　　對(duì)于一些重要的組件、事件或信息，使用類似呼吸的動(dòng)態(tài)效果來(lái)增強(qiáng)效果是很自然的，而且不太具侵入性。這樣的動(dòng)態(tài)設(shè)計(jì)突出了元素的重要性而不讓用戶反感。

　　最后結(jié)論

　　我希望今天提到的技術(shù)能讓你在設(shè)計(jì)交互式動(dòng)畫時(shí)想出更自然、更優(yōu)秀的解決方案。

　　從優(yōu)秀到優(yōu)秀，有時(shí)只需要細(xì)微的改變。值得一提的是，像InVisionStudio這樣的工具對(duì)運(yùn)動(dòng)效果本身有明顯的改進(jìn)。它可以提供更自然和直觀的運(yùn)動(dòng)效果。

　　總之，在設(shè)計(jì)動(dòng)作效果時(shí)，注意指令狀態(tài)的變化，加強(qiáng)元素之間的關(guān)系，適當(dāng)增加一些趣味性。遵循這個(gè)原則，運(yùn)動(dòng)效果總是可以提升到下一個(gè)層次。