簡短回答
要把 App 畫面做成動畫，上傳截圖或直接描述介面長什麼樣子，請 Otto 把畫面放進簡潔的手機或筆電外框，說明每一步的動作，例如卡片滑入、按鈕被點、數字依序浮現。介面要簡潔現代，不要完全仿照別家官方 UI，一次只強調一個操作，最後停在結果畫面。
以上皆為 Videotto 範本庫的真實成品。
UI 動畫由什麼組成
好的介面動畫，看起來像有人在操作，但比真的操作更清楚。
| 元素 | 做法 |
|---|---|
| 版面 | 手機或筆電外框放中央，背景用淺色或深色純色，留出放標題的空間 |
| 字體 | 介面裡的字用乾淨的無襯線字，畫面外的標題字級放大 |
| 顏色 | 沿用你的品牌色，重點按鈕或數字用一個強調色 |
| 動態 | 卡片滑入、按鈕輕微按下回彈、數字依序浮現、畫面輕推近到重點 |
| 節奏 | 每個操作一到兩秒，操作之間留一點停頓讓觀眾跟上 |
| 聲音 | 輕柔的點擊音效和簡單配樂，結果出現時加一個提示音 |
五個步驟做出來
- 準備截圖或描述介面. 上傳 App 或網站的截圖。還沒做好的產品，也可以直接用文字描述畫面上有什麼。
- 選外框和背景. 手機、筆電或只有介面卡片漂浮在背景上，三種都可以，說清楚你要哪一種。
- 寫出操作順序. 第一步點哪裡、第二步出現什麼、最後顯示什麼結果。順序寫得越清楚，動畫越準。
- 標出重點. 在關鍵的按鈕或數字旁加細線標示和短標籤，或畫面推近放大。
- 加音效和標題後匯出. 加上點擊音效、一行說明標題和結尾的行動呼籲，選 9:16 或 16:9 匯出。
可以直接貼給 Otto 的指令
改寫自 Videotto 使用者真的貼給 Otto 的中文指令。
貼到 Otto
製作一個短影音數據分析介面風格的動態圖像，9:16 直式。 畫面顯示多支影片的觀看數停留在 2.3K、3.1K、4.6K、3.8K，數字依序浮現。 每張數據卡從下方滑入，數字從零跳到目標值。 最後出現「觀看停滯」的小提示，旁邊一個往下的小箭頭。 介面簡潔、現代，不要完全仿照任何平台的官方 UI。 背景淺灰，重點色用 [顏色]，加上輕柔的點擊音效。
更短的寫法
- 「一開始手機中顯示中文文章，接著把手機往旁邊一放，轉到筆電顯示英文原文，大約 6 秒。」
- 「這三個畫面太無聊了，要生動活潑，加一些圖表和互動的介面。」
- 「把我的 App 截圖放進手機外框，三個功能依序展示。」
- 「做一張轉帳成功的卡片從手機飛出來，最後停在餘額畫面。」
“介面簡潔、現代，不要完全仿照官方 UI。”
一則真實的 Otto 指令, 略作修改
三種常見的 UI 動畫
| 類型 | 適合用途 | 畫面重點 |
|---|---|---|
| 功能展示 | 產品介紹、上架影片 | 一個功能一個畫面，操作到結果 |
| 數據介面 | 知識型短影音、財經、行銷教學 | 數字依序浮現，最後出現結論 |
| 裝置切換 | 跨平台產品、翻譯或同步功能 | 手機和筆電之間轉場，內容延續 |
不管哪一種，一支影片只講一個故事。想展示五個功能，就做五支短的，比一支塞滿的更有人看完。
讓觀眾看懂操作
介面動畫最常見的問題，是觀眾不知道該看哪裡。用一個小圓點或手指圖示代表點擊，點下去的地方輕微放大，視線就會跟著走。
每完成一個操作，可以在畫面外側加一行大標題說明剛剛發生了什麼，例如「一鍵匯出」。手機上看不清介面細節時，這行字就是最好的說明。
常見錯誤
- 直接照抄別人的介面. 仿得太像會看起來像截圖或冒用品牌。抓住感覺，細節用自己的。
- 畫面上字太小. 手機上看影片，介面裡的小字根本看不到。重點用推近或畫面外的大標題說。
- 操作太快. 每個點擊之後停一下，讓觀眾看清楚發生了什麼。
- 露出真實資料. 截圖裡的姓名、帳號、金額先換成示意資料，再交給 Otto。
常見問題
產品還沒做好，可以先做介面動畫嗎？
可以。用文字描述畫面上有哪些元素，Otto 會做出示意介面，適合募資、預告或簡報用。
可以把我的截圖直接動起來嗎？
可以。上傳截圖，說明哪個區塊要放大、哪張卡片要滑入、哪個數字要跳動。
要做成直式還是橫式？
社群短影音用 9:16 直式，手機外框剛好填滿畫面；官網和簡報用 16:9，筆電畫面比較好看。
需要配音嗎？
不一定。很多介面動畫只靠畫面標題和音效就看得懂。需要的話，Otto 可以加上 AI 旁白。
用 Otto 做你的下一支影片
用一句話告訴 Otto 你想要什麼。它會幫你剪輯、上字幕、加上動態效果。
