UI動效現(xiàn)如今在APP和網(wǎng)頁中幾乎已經(jīng)成為了基本的組成部分入录，經(jīng)過仔細(xì)打磨的UI動效對于整個界面的提升是顯著的。
動效設(shè)計呈現(xiàn)出狀態(tài)切換的過程佳镜，展現(xiàn)了元素之間的邏輯關(guān)系僚稿，并且吸引用戶的注意力，引導(dǎo)他們執(zhí)行有效的交互蟀伸。
在設(shè)計UI動效的過程中蚀同，Material Motion 的設(shè)計原則，IBM動畫設(shè)計規(guī)則和UX動效宣言都是不錯的設(shè)計參考和指引啊掏。
遵循這些現(xiàn)有的規(guī)范蠢络，能夠很好地提升動效本身的體驗和效果，從優(yōu)秀走向卓越迟蜜。今天的動效設(shè)計都是遵循著這些規(guī)范使用 InVision Studio 來進(jìn)行制作的刹孔。
卡片的展開動效
卡片是最常見的 UI 元素，左側(cè)的界面中娜睛，點(diǎn)擊卡片之后髓霞，展開新的界面；右側(cè)界面中畦戒，點(diǎn)擊卡片之后方库，卡片擴(kuò)展并填充整個屏幕。
點(diǎn)擊卡片之后障斋，詳情頁向上滑出或者從左側(cè)滑出的設(shè)計很不錯纵潦。
通過展開動效從卡片直接過渡到詳情頁是更卓越的設(shè)計。
最好的動效往往能夠通過變化讓人明白兩種狀態(tài)之間的內(nèi)在關(guān)聯(lián)。
在制作不同狀態(tài)之間變化的動效的時候酪穿，注意兩個界面中共享的元素凳干，并且將它作為橋梁，將兩個界面狀態(tài)連接到一起被济。
在使用 InVision Studio 創(chuàng)建原型的時候救赐，這種同時存在前后兩屏中的控件會自動連接起來，構(gòu)成動效只磷。這一功能使得動效的構(gòu)建更加便捷经磅。
在列表中使用瀑布式展開動效
左邊的列表使用了較為迅速的淡入淡出動效，而右邊的列表當(dāng)中钮追，淡入淡出以延時的方式呈現(xiàn)预厌，效果類似瀑布的展開方式。
淡入淡出的動效讓元素遞次出現(xiàn)加上輕微的位移元媚，比較自然轧叽，看起來不錯。
列表元素通過延時次第出現(xiàn)刊棕，位移更加明顯炭晒，形同瀑布，在視覺和體驗上更為卓越甥角。
瀑布式的展開動效只需要通過明顯的延時就能夠?qū)崿F(xiàn)网严，適當(dāng)?shù)乜刂乒?jié)奏，讓整個加載速度適當(dāng)?shù)臏p緩而不會太慢嗤无，讓用戶能夠感知到這個過程即可震束。
谷歌建議每個元素的延時不超過20毫秒。你可以在 Material Motion 中看到設(shè)計的原理和更多的實(shí)例当犯。
展開時的擴(kuò)展動效
左側(cè)的動效是內(nèi)容在頂層覆蓋列表垢村，而右側(cè)的動效是從中間擴(kuò)展將上下內(nèi)容頂開。
通過移動灶壶、覆蓋肝断、展開的方式來呈現(xiàn)詳情頁的動效杈曲，視覺上看起來不錯驰凛。而點(diǎn)擊之后展開頂?shù)糁車脑兀椭車钠渌脑赜兴拥Ｆ耍@樣的動效更加優(yōu)秀恰响。
界面中所有的元素都應(yīng)該是有「重量」的，某個 UI 控件隨著動效變化的時候涌献，和周圍的元素發(fā)生互動胚宦，則能夠強(qiáng)化這種實(shí)體感。
菜單的展開動效
左側(cè)的動效中，菜單從底部淡入界面枢劝，而右側(cè)的動效中井联，菜單是從被點(diǎn)擊的按鈕中擴(kuò)展開的。
菜單從按鈕的位置淡入進(jìn)入界面的方式展現(xiàn)了兩者的關(guān)聯(lián)您旁，這樣的設(shè)計還不錯烙常。
通過擴(kuò)展動效的方式來呈現(xiàn)菜單的展開，讓按鈕和菜單之間的關(guān)系得到了進(jìn)一步的加強(qiáng)鹤盒，這樣的設(shè)計更加優(yōu)秀蚕脏。
使用按鈕展現(xiàn)不同狀態(tài)
左側(cè)的按鈕通過文本說明和色彩變化來指示狀態(tài)改變，而右側(cè)按鈕則通過加載控件來展示不同的事件的發(fā)生侦锯。
好的按鈕會指示狀態(tài)的改變驼鞭，哪怕是通過文本來呈現(xiàn)。
通過按鈕本身尺碰，視覺化地呈現(xiàn)加載的狀態(tài)變化挣棕，比起文本說明更加自然，也更加易于理解亲桥，這樣的設(shè)計更加優(yōu)秀穴张。
嘗試使用加載指示器來指示狀態(tài)的變化和進(jìn)度，類似的方式有很多两曼，重點(diǎn)是在于視覺化的皂甘、自然的呈現(xiàn)狀態(tài)的變化過程，如果搭配上色彩的變化悼凑，那么就更好了偿枕。
吸引用戶注意的動效
左側(cè)僅僅是通過色彩、符號和位置來吸引注意力户辫，而右側(cè)加入了微妙的動效來吸引用戶注意渐夸。
使用色彩、標(biāo)識和位置來吸引用戶注意力是頗為有效的手段渔欢。
借助微妙自然的動效墓塌，不僅能夠吸引用戶注意力，而且不會造成干擾奥额，這樣的設(shè)計更優(yōu)秀苫幢。
對于一些重要的組件、事件或者信息垫挨，使用類似呼吸式的動效來強(qiáng)化效果是自然且干擾性較低的韩肝，這樣的動效設(shè)計讓元素的重要性得到凸顯，還不會讓用戶感到反感九榔。
最后結(jié)語
希望今天所提到的這些技巧能夠讓你在設(shè)計交互動畫的時候哀峻，拿出更加自然涡相、優(yōu)秀的方案。
從優(yōu)秀到卓越剩蟀，有的時候只需要進(jìn)行微小的改變催蝗。值得一提的是，像 InVision Studio 這樣的工具育特，對于動效本身的提升是很明顯的生逸，它能夠提供更多自然而富有直覺性的動效。
總之且预，在設(shè)計動效的時候槽袄，注意狀態(tài)變化的指示，元素之間關(guān)系的強(qiáng)化锋谐，適當(dāng)?shù)卦黾右恍啡け槌撸裱@樣的原則，總能讓動效更上一層樓涮拗。今天就分享到這里乾戏，喜歡可關(guān)注微信公眾號：UI設(shè)計小琪。每晚八點(diǎn)分享UI學(xué)習(xí)知識~
