用貼心的微動態效果提升使用者體驗吧！
MG(Motion Graphics)在動態設計或影像製作上大放異彩，在台灣也是刮起一股熱潮，讓許多人都開始學習並製作自己的動畫作品，但其實動態設計也可以應用在 UI (User Interface)設計上，試想我們在網上當鄉民那麼久，單調的靜態網頁或普通App是不是已經無法滿足你了呢？前言
剛結束在台北的 Adobe Xd 快速上手工作坊，有學員問到該如何在 Xd 上做動態，當時花了點時間跟大家介紹幾個第三方工具，以及與 Adobe 旗下的 After Effects連動，但其實若是只要做介面上的微動態， Xd 目前的 Auto-Animate 功能就已經非常夠用囉！
什麼是微動態呢？包括 Google Material Design 裏也有規範，基本的概念就是用動態圖像去引導使用者，也就是讓原本的靜態介面加上時間軸，藉此創造出更直接、易懂的介面設計，省略不必要的說明文字或註解。
此部分提及之 Xd結合Ae做動態設計・微動態・Google Material Design 等教學更完整的篇幅，會以影片方式完整收錄在《Adobe Xd設計實務｜成為UI設計師的8項核心技能》。那麼，接下來就讓我們來看看如何用 Adobe Xd 實踐動態效果吧！
步驟一、準備好要做的素材
這邊以 Illustrator 裏面繪製的向量 Mono喵當作示範，由於同屬 Adobe 體系，在 Ai 直接複製過去到 Xd 貼上即可。
步驟二、拉出好幾個 Artboard
如果你也懂動畫，這步驟其實就是產生「關鍵影格」，最基本的動畫原理就是由好幾張靜態圖片快速顯示產生，在現代仰賴科技工具，已經可以從僅僅幾個關鍵的圖片中，用電腦去運算出之間的動態效果。
這邊示範的是做了三張 Artboard ，希望可以做到 Mono喵閉眼、睜開，同時星星數量逐漸增加，以及背景光源緩緩擴散的效果。
步驟三、切換到 Prototype 拉出 flow
在彼此間的兩個 Artboard 拉出 Flow 線，觸發(Trigger)選擇 「Time」，動作Action「Auto-Animate」即可。
由於屬於Auto-Animate 屬於新功能，如果沒有顯示以上功能的話，記得要在 Adobe Creative Cloud 上更新 Xd 到最新版，再重開後即可。
底下的 Easing 與 Duration 就是可以設定淡入淡出與時序時間，可以細條到更精緻的動態效果。
如此一來就完成了Auto-Animate 的設定啦！來播放看看～
講個小訣竅
微動態之所以是微(micro)，因為介面還是主角，動態可以輔助使用者進行理解與操作，這時候一些細膩貼心的、或有趣的元素加進去，就會提升體驗上的好感哦！
本篇僅以觸發「Time」做個有趣的範例，為了快速說明 Auto-Animate 的新功能，其他可以透過觸發像是「Tap」或是「Drag」等內建功能，來進行更多互動。後記
「魔術是一門表演和細節的藝術。」 — 知名魔術師 Dariel Fitzkee
設計師們專注在打造良善的介面設計，尤其現代人盯著電腦與手機的距離不到30公分，細節總是會被放大檢視，這也是為什麼數位產品愈講究體驗。
不同畫面間的轉場、按鈕狀態的各式變化等，在合理的時間點，通過適切的反饋來提醒使用者即將發生的事情；微互動(microinteractions)是互動設計(交互设计)裏重要的一環。
關於如何將 Xd 產出之動態效果與前端工程師進行協作，將完整收錄在《Adobe Xd設計實務｜成為UI設計師的8項核心技能》。
我是 Riven ，如果這篇內容還算受用的話，歡迎幫我在旁邊拍手處給予 1~50下的鼓勵，更多 UI/UX設計相關文章可以發摟我的 Medium。
有任何問題或交流討論，都可以透過我的 Facebook 臉書。我們下次見囉 😉
