#5 使用 Marvel App 製作 Prototype app

新手指南，如何使用 Marvel App？別怕，人人都可以變 Marvel !

Marvel App 是一個兼具協同設計的平台：marvelapp.com

首先，我們可以看到新會員使用 e-mail 註冊登入後，即可選擇使用 roadmap whiteboard，若身為產品經理 (PM)、工程師團隊 (Software engineer)，甚至是想快速了解產品進度的 Marketing 或 Sales，都可以此來進行快速的了解與溝通。

Prototype app 製作流程

Step 1：註冊登入 Marvel （每個帳號可建立一個免費專案）
Step 2：設計 App 頁面內容資訊
Step 3：介面串連互動設計
Step 4：設定使用者觸控方式、頁面轉場的效果
Step 5：完成與分享 Prototype app

Home 登入主頁

Roadmap whiteboard 路線圖白板

接下來我們來進行專案建立：

可以看到下圖右上角綠色按鈕（Green Button）

Create Project 創建專案 > Prototype 原型

Project Type for iphone 記得專案類型要選手機的版本 > Creat project 點選專案創建

進來後就可以開始增加設計檔案和嘗試創建原型了

左邊是增加設計檔案（Let’s add some designs）/ 右邊是原型範例使用（Try an example prototype）

首先，可以先點選左邊的增加設計檔案（Let’s add some designs）進入畫面看一些圖片設計素材生成的資訊。

接著可以點選右邊是原型範例使用（Try an example prototype），進入後會有示範畫面可參考：

現在來生成我們自己的初次體驗吧！

點選畫面右腳上角綠色按鈕左邊白底黑字的 upload or create designs，就會跳出下圖畫面，可以直接點選左邊 Design in Marvel 在這進行設計，或是右邊的 Upload from computer(從你的電腦上傳設計素材) 兩種方式 :

初體驗，總是有失敗的時候，人非聖賢孰能無過，就像過山車一樣，股票和人生都有起伏，怎麼可能每個學習嘗試的過程都沒有起伏是不是？但重點是我們如何平心靜氣的去看待這每一個娃娃學步的跌跤，如何視為一個常態為生命的一環，再把步驟重新跑一次，看看哪裡有可以調整優化的部分，這邊是設計好的頁面瞬間全數消失的躺心瀝血證據(其實還有更多頁面呈現損毀，但就以三張代表示意)：

別慌～ 我們再接再厲，穩扎穩打往下走…

設計進行中… 第二次依舊重複性的出現損毀狀況，也許是天意，不過沒關係，我們來走個徒法煉鋼，將畫面於 Marvel 網頁內設計好後，截圖成圖片檔案，重新上傳（這個是否就叫做有事者事竟成？）。

來看看首次小成品