大家好，我是 AFA！

歡迎來到我的部落格。我平常熱愛發掘各種好用的手機 App 和實用的網頁工具推薦給大家。今天要分享的主題非常酷，是關於 「如何用手機製作一款 App 的原型 (Prototype)」！

為什麼你需要這個工具？（痛點與需求）

很多人腦中都有很棒的 App 點子，但往往因為「不會寫程式」而卻步。

  • 你可能是一個創業家，想把點子具現化給投資人看。
  • 你可能是一個 PM (產品經理)，想快速跟工程師溝通你的畫面邏輯。
  • 或者你只是單純想體驗一下做 App 的感覺。

如果為了展示一個概念就要花大錢請人開發，或是花幾個月學程式，成本實在太高了！今天要介紹的這款 App —— Marvel，能讓你完全不需要寫任何一行程式碼，直接用「畫」的，就能做出一個能在手機上實際點擊、跳轉的 App 原型！

核心功能與教學：Marvel App 操作指南

這款 App 支援 iOS 和 Android 雙平台（不過影片示範是以 iPhone 為主），重點是它不用註冊也能直接試用，非常佛心！

Step 1：準備你的 App 畫面

在開始之前，你可以先拿紙筆畫出你想要的 App 介面草圖（例如：登入頁、首頁、文章頁）。

  • 當然，如果你已經有設計好的電子圖檔，也可以直接存在手機相簿裡備用。

Step 2：建立新專案

  1. 打開 Marvel App。
  2. 點擊「創建新項目」。
  3. 輸入你的專案名稱（例如：文章 App）。
  4. 選擇你的裝置型號（例如：iPhone），這樣版面才會剛好。

Step 3：匯入素材

  1. 進入專案後，點擊右上角的 「+」號。
  2. 你可以選擇：
    • 相機拍照：直接把你畫在紙上的草圖拍下來。
    • 從相簿匯入：使用手機裡現成的圖片。
    • 在 App 內繪製：直接用手指在螢幕上畫。 (阿發建議先畫好圖匯入，效果最好！)

Step 4：製作互動連結 (Link) —— 最神奇的一步！

這一步我們要讓靜態的圖片「動」起來。

  1. 點選你的第一張圖（例如：登入頁）。
  2. 點擊右上角的 「新增連結」。
  3. 框選熱區：在畫面中畫出一個藍色框框，包住你希望使用者點擊的按鈕（例如：「登入」按鈕）。
  4. 設定目標：系統會問你點了這個框框要跳去哪？請選擇下一張圖片（例如：首頁）。
  5. 設定轉場動畫：你可以選擇切換頁面時的效果，例如「向左滑動」、「彈出」、「淡入淡出」等，讓體驗更逼真。

Step 5：測試與預覽

設定好所有的連結邏輯後（例如：點「新增」跳到文章頁，點「X」回到首頁），就可以來驗收成果了！

  • 點擊右下角的 「Play」按鈕。
  • 這時候你的手機就會變成一個模擬器，你可以實際點擊剛剛設定的按鈕，測試頁面跳轉是否順暢。

總結

透過 Marvel App，我們不需要求助工程師，幾分鐘內就能把腦中的創意變成可互動的產品原型。這對於前期溝通、驗證想法非常有幫助，而且完全免費！

如果你也想動手做做看自己的 App，趕快去下載來玩玩看吧！

如果這篇文章對你有幫助，別忘了幫我的 YouTube 影片按讚，並訂閱我的頻道，打開小鈴鐺！我會持續分享更多實用的科技工具與小撇步給大家！