UI設計中，動效的作用與應用

我們一般所說的UI設計多指UI視覺設計，主要負責APP、Web、H5等頁面的色彩、布局、icon、字體方面的設計工作。

但隨著互聯網的不斷發展，純視覺的工作已經開始日益減少，行業要求UI設計師學會多元設計領域的東西，像是交互，視覺，用戶體驗等等等。

其中有一個內容就是關於UI設計動效的，到底什麼是動效呢？

顧名思義就是動畫效果，通常用在UI設計中畫面載入、切換、按鈕、提示、操作過程之類的地方會應用到，我們稱之為功能型動效。

另一個動畫效果就是在提案，做DEMO時，給客戶提供一個可以充分展示應用設計的動畫效果。

便於客戶理解設計理念，達到快速確認的效果，我們稱之為展示型動效。比如：logo動畫，視頻帶入性詮釋等。

不管是哪種動效，都要遵循UI動效設計的規則：

1、流暢性；

2、簡潔性；

3、獨特性；

4、創新性；

◆功能型動效改善用戶體驗：

在逐步的探索和發展過程中，動效在網頁和APP中的運用方法與技巧已經逐步成熟，形成了一套相對系統的模式。

今天的文章我們通過一系列實例，來展示一下動效是如何改善整個用戶體驗的。

●載入動效

動效最常用的一個地方就是進度條。但載入動效並不一定非要用進度條，設計師在這個頁面中將品牌形象的獅子跑起來，不斷重複來呈現載入過程，靜態的文字和動態的效果交錯，能讓人在新鮮有趣的動畫中度過略顯漫長的載入過程。

●界面框架

界面框架會將界面載入之後的大概樣式給展示出來，界面框架會讓用戶產生內容一瞬間就載入好了的錯覺。

這種動效可以應用在絕大多數的網頁和APP當中，它會明顯強化用戶的參與感。

●按鈕動效

桌面端交互主要還是藉助觸控板和滑鼠，游標懸停特效很大程度是為這種情況而存在的，同時，它也是最常見的動效之一。

當用戶不知道某個控制項怎用的時候，會很直覺地將游標移動到上面去，這個時候，懸停特效能夠很好的吸引他們的目光。使用戶的參與感增強，加大用戶點擊慾望。

●導航動效

從設計趨勢上來說，越來越多的APP開始選擇使用隱藏式的導航菜單，將更多的選項隱藏在漢堡菜單之後。

而菜單的打開和關閉中肯定需要動效加持來降低突兀的過渡，如果設計的足夠精巧，用戶會立刻被吸引住。

動效拓展了界面的視覺維度，它連接交互，讓界面的功能和效果都更加圓融。

◆展示型動畫效果加強代入感

MG動畫是平面設計和動畫片綜合作用的產物，靜態設計與動態敘事相結合的手法在自媒體中是一種新興的視覺藝術表現形式！

主要作用是帶領和引導讀者快速進入狀態，迎合設計思路。

我們設計的東西希望得到認可，但我們的客戶或者參與者，不能第一時間體會到設計師的初衷，畢竟他們沒念過那麼昂貴的大學和培訓班嘿嘿，勢必會造成大量修改整頓。

此時如果加入視頻效果，帶入一下效果會更配哦！

●LOGO演繹動效

LOGO動效演繹最重要還是傳情達意，不是為了動效而動效，要去感染和打動。

●視頻動效詮釋

這裡的視頻就是錄的或者拍攝的視頻，又或者通過軟體做的視頻動畫，對產品或者理念進行詮釋。市場上多為情感帶入的。

提示：

就許多產品的界面UI設計來說，性能與速度就是一切，只有高性能，足夠快的反應速度，才能穩定的獲得良好的用戶體驗。

因此若是我們所設計的動效過於酷炫，導致產品性能減低，反應速度變慢，那麼就是一個失敗的動效設計，我們不能為了加入動效而製作動效設計，這是得不償失的。