Tutorial Motion Design
2021-2024 | Adobe illustrator, After Effects
Tutorial Design
Motion
用動態引導，讓智慧家庭操作更容易理解
智慧家庭 App 涵蓋裝置配對、自動化設定與不同智慧裝置的操作流程，部分功能僅透過文字或靜態圖示較難快速說明。因此，我為 Ultron Utility App 製作一系列 Tutorial GIF 與操作引導動態素材，透過介面操作、圖示與視覺元素的動態呈現，協助使用者快速理解功能概念與操作方式。
我的角色：UI 設計 、動態設計
這些 Tutorial GIF 讓我開始將 Motion 視為介面設計的一部分，而不只是視覺裝飾。透過時間、狀態與操作順序的呈現，動態設計能補充靜態介面難以傳達的資訊，幫助複雜功能形成更直覺的理解路徑。
Motion Principles
01 · Focus 一次傳達一個操作重點
控制畫面中的動態資訊量，讓使用者能快速辨識當下需要注意的操作或功能。
02 · Continuity 讓動態延續真實操作邏輯
依循 App 中實際的點擊、切換與狀態變化設計動畫，使 Tutorial 與真正的產品操作保持一致。
03 · Consistency 延續產品既有的視覺語言
沿用 Ultron Utility App 的色彩、Iconography 與 UI 元件，使 Tutorial Motion 成為產品體驗的一部分，而不是額外插入的說明素材。
Selected Tutorial Motion
Quick Start Guide 快速導覽
初次進入 App 時，以四段簡短的動態導覽介紹核心功能，從裝置識別、配對與連線，到情境設定，讓使用者在開始操作前快速建立對產品功能與使用流程的基本理解。
- 輕鬆識別：掃描 QR Code 快速識別裝置，減少手動搜尋與選擇的步驟。
- 安全配對：透過裝置啟用與配對流程，建立專屬於使用者的智慧裝置。
- 穩定連線：以清楚的引導完成網路連線，降低設定過程的複雜感。
- 智慧生活：透過情境與自動化設定，將不同智慧裝置整合進日常生活情境。
個別裝置配對
不同智慧裝置具有各自的配對方式與硬體操作步驟。在個別裝置連線流程中，以 Tutorial Motion 搭配介面指引，呈現裝置進入配對模式前的檢查項目、實體操作方式與 App 連線流程，讓使用者能依照步驟完成設定。
There's More to Explore...
每個專案背後，都有一段等待被理解的故事。
透過研究、整理與設計，我將複雜情境轉化為清楚、可落地的數位體驗。
透過研究、整理與設計，我將複雜情境轉化為清楚、可落地的數位體驗。