從卡通動畫到UI動效設計的原理是怎樣的

廣州UI設計別樣設計小編之前分享過很多UI動效設計作品，有國外的有國內的，大多數高保真都是使用AE實現的，剛入門的設計小白肯定很好奇UI動效設計的原理是怎樣的，今天，就讓小編來告訴你吧~

大家都知道，UI界面一般都是基於靜態頁面來設計 – 無數個頁面組成了一個軟體。通常情況下，視覺設計師直接開始設計靜態頁面，幾乎不考慮它們之間如何切換。當用戶感知不到頁面之間的關係時，就說明頁面之間的因果關係不夠清晰。讓用戶理解頁面之間的關係至關重要，這直接關係到操作效率。用動效來實現具體操作，能夠讓人瞬間明白操作的原理。

舉例來說，在Windows中，如果我們的任務是：打開「我的電腦」中的D盤，那流程是這樣的：

1.雙擊「計算機」圖標；

2.圖標擴展成一個窗口；

3.在窗口中選擇D盤。

在這種情況下，第一步的元素是圖標，第二步元素是擴展的窗口。界面之間的跳轉是非常突然且直接，且沒有前後關聯。如果用戶第一次使用Windows，這樣的界面跳轉需要理解一陣子。

(在Windows中，圖標和窗口之間的跳轉十分直接，如果第一次Windows使用會讓用戶很困惑)

把UI中的元素當作真實的，有重量的物體，這個就是擬物化。接下來說說擬物化的方法，有兩種：運動模糊，出現和消失。

(在Windows中，滑鼠指針可以設置成運動模糊，方便用戶去追蹤滑鼠指針)

(從左到右動效依次是移入，擦除和模糊消失)

在UI界面中使用動效是有益的。但是UI並不是卡通。它們之間最重要的一個區別是：卡通是一種被動介質，而用戶界面是互動式的。卡通動畫與UI動效是相輔相成的，而動效比卡通更容易被用戶接受，因為界面中的動效可以設計成不被用戶感知的狀態，在用戶還未發現的時候，動效已經悄悄完成了操作需求。

由廣州UI設計別樣設計發布，更多精彩內容盡在：uibieyang點com，歡迎各位設計師留言探討。