想做動態介面設計？不能錯過的 Adobe Xd 的 Auto-Animate 教學

Riven 林育正為你介紹如何透過 Adobe Xd 的 Auto-Animate 功能製作微動態介面設計。

對文章有興趣來不及看？點選右上角「橘色小書籤」收藏 文章，再也不怕錯過就是一輩子！

剛結束在台北的 Adobe Xd 快速上手工作坊，有學員問到該如何在 Xd 上做動態，當時花了點時間跟大家介紹幾個第三方工具，以及與 Adobe 旗下的 After Effects 連動。但其實若是只要做介面上的微動態， Xd 目前的 Auto-Animate 功能就已經非常夠用囉！

什麼是微動態呢？包括 Google Material Design 裏也有規範，基本的概念就是用動態圖像去引導使用者，也就是讓原本的靜態介面加上時間軸，藉此創造出更直接、易懂的介面設計，省略不必要的說明文字或註解。

動態圖像設計（MG，Motion Graphics）在動態設計或影像製作上大放異彩，在台灣也是刮起一股熱潮，讓許多人都開始學習並製作自己的動畫作品。但其實動態設計也可以應用在 UI（User Interface）設計上，試想我們在網上當鄉民那麼久，單調的靜態網頁或普通 App 是不是已經無法滿足你了呢？

此部分提及之 Xd 結合 Ae 做動態設計・微動態・Google Material Design 等教學更完整的篇幅，會以影片方式完整收錄在（置入 Hahow 課程連結）。

那麼，接下來就讓我們來看看如何用 Adobe Xd 實踐動態效果吧！

動態介面設計
圖片來源：YOTTA 友讀

步驟一、準備好要做的素材

這邊以 Illustrator 裏面繪製的向量 Mono 喵當作示範，由於同屬 Adobe 體系，在 Ai 直接複製過去到 Xd 貼上即可。

動態介面設計
圖片來源：YOTTA 友讀

步驟二、拉出好幾個 Artboard

如果你也懂動畫，這步驟其實就是產生「關鍵影格」，最基本的動畫原理就是由好幾張靜態圖片快速顯示產生，在現代仰賴科技工具，已經可以從僅僅幾個關鍵的圖片中，用電腦去運算出之間的動態效果。

這邊示範的是做了三張 Artboard ，希望可以做到 Mono 喵閉眼、睜開，同時星星數量逐漸增加，以及背景光源緩緩擴散的效果。

動態介面設計
圖片來源：YOTTA 友讀

步驟三、切換到 Prototype 拉出 flow

在彼此間的兩個 Artboard 拉出 Flow 線，觸發（Trigger）選擇「Time」，動作 Action「Auto-Animate」即可。由於 Auto-Animate 屬於新功能，如果沒有顯示以上功能的話，記得要在 Adobe Creative Cloud 上更新 Xd 到最新版，再重開後即可。

動態介面設計
圖片來源：YOTTA 友讀

底下的 Easing 與 Duration 就是可以設定淡入淡出與時序時間，可以細條到更精緻的動態效果。如此一來，就完成了Auto-Animate 的設定啦！來播放看看～

動態介面設計
圖片來源：YOTTA 友讀

微動態之所以是微（micro），因為介面還是主角，動態可以輔助使用者進行理解與操作。這時候一些細膩貼心的、或有趣的元素加進去，就會提升體驗上的好感哦！

動態介面設計
圖片來源：YOTTA 友讀

本篇僅以觸發「Time」做個有趣的範例，為了快速說明 Auto-Animate 的新功能，其他可以透過觸發像是「Tap」或是「Drag」等內建功能，來進行更多互動。

後記

「魔術是一門表演和細節的藝術。」 ——知名魔術師 Dariel Fitzkee

設計師們專注在打造良善的介面設計，尤其現代人盯著電腦與手機的距離不到 30 公分，細節總是會被放大檢視，這也是為什麼數位產品愈講究體驗。不同畫面間的轉場、按鈕狀態的各式變化等，在合理的時間點，通過適切的反饋來提醒使用者即將發生的事情；微互動（microinteractions）是互動設計（交互設計）裡重要的一環。

動態介面設計
圖片來源：YOTTA 友讀