Task❷ 用 Marvel 快速製作 Prototype App 居然只花10分鐘!

Photo by Ellie Lord on Unsplash

先說，因為我已經準備好 5 張 APP 圖片，大致想好了簡單的動作。我錄了設定過程影片，約 5 分鐘。以下來看看流程~

1. 準備好 5 張 APP 圖
2. 註冊 Marvel 免費製作 1 個專案 ( 更多要收費 )
3. 錄製教學，展示 Prototype
4. 參考

準備好 5 張 APP 圖

由於這篇文章在解釋 Marvel 如何製作 Prototype，預設你已經從設計師手上得到一些設計圖，只需要把動作串起來，做一個展示。展示 Prototype 的目的是為了與團隊溝通，快速的產出一個視覺化的流程，協助團隊確認方向。

我從 Mobbin 這個網站先蒐集一些現存 APP 的圖片，這些圖片通常用做研究參考，也可以用 Figma plugin 複製過去使用。我蒐集了 5 張圖。

我找了 Art 相關的 APP UI

再使用 Figma Plugin 複製剛剛找的圖再輸出

註冊 Marvel 免費製作 1 個專案

準備好5張圖片，就進入 Marvel 網站，註冊時會問你要用甚麼型號裝置，我選 iPhone12。

進入編輯介面，可以看影片教學，看完大致就會囉💛。教學影片連結

編輯步驟如下 :

• 選擇我準備好的 5 張 APP 圖片上傳
• 排列頁面順序
• 由左開始點選第 1 張圖
• 先畫連結區域 ( 出現藍色框選區 )
• 選擇要連結到哪一頁、轉場動畫、手勢
• 以上重複設定好 5 張圖片
• 完成，點選 Play 看成果

錄製教學，展示 Prototype

成果如下，完整步驟影片我放在 Streamable 線上免費的影片平台，上傳滿快的，提供使用者上傳長度 10 分鐘以內或單檔 1 GB 以下影片。

參考

利用 marvel App 製作 prototype app

錄製 & 分享 iOS App 的操作影片

Streamable 官網

Mobbin 官網