#3 設計App，除了用紙筆畫，還有這個選擇- 用marvel做App prototype

體驗marvel製作App prototype

Marvel - The design platform for digital products. Get started for free.

紙筆構圖，是相當快速的表達腦中想法的方式，但想要直接做出仿真的app prototype、可以快速修改又不用重畫、與多人討論…等，使用marvel是一個不錯的選擇。

先來看看（半）完成品 XD～

p.s 我不是用gif錄製操作影片，所以要自己點icon才會動喔！

用marvel做App prototype。（圖片來源：Jaejae 接接）

Marvel實作紀錄

Step1: 
需在官網註冊，進入Marvel入口頁面後，點選"Go to dashboard"後，"Create project”。
進入Create prototype project頁面，輸入"Project name"；這次要試作的是iPhone app，選擇"Project type"為iPhone 11，點選"Create project"。

（左）Marvel入口頁面；（右）建立prototype project頁面。

Step2: 因為這次是直接從marvel創建模型，直接點選右上角"Add images"，選擇"Design in Marvel"。

Step3: 進入dashboard畫面。
可以看到dashboard跟xcode的storyboard有幾分相似，但工作區及UIKit等設計簡化許多。

dashboard頁面

Step4: 開始設計App囉～

設計頁面

Step5: 完成頁面設計後，連結App各個頁面～

選取要設定的分頁，點選”Prototype”。

可以看到全部分頁的管理頁面

框起要設定連結的icon，選取要連結的分頁及動作。

連結頁面

Step6: 預覽App及分享。

完成！！！！

試用marvel後，發現有以下幾點跟xcode設計概念不一樣，反而比較像一般文書軟體的操作：

• Marvel沒有”view”, “image view”, “text”, “label”等元件，要畫幾何圖形、加入圖片、輸入文字等，就直接從左側tool bar裡選用。
• 沒有中文字型沒有中文字型沒有中文字型沒有中文字型（很崩潰），英文字體選擇性也非常少。
• 幾何圖形的設定選項其實比一般文書軟體還要少 Orz…

Marvel的確是個還滿好玩的app prototype軟體，操作後覺得優缺點有：

pros:

• 就算不會xcode，不懂程式，也可以做出以假亂真的app模型。
• 簡單易懂的介面，就像介於紙筆構圖過渡至xcode的中間載體。
• 沒有xcode龐大精細的結構，但必備的UIkit都有，可以順便研究UI元件，又不用被xcode嚇到不知道該如何著手。
• 可以直接快速修改又不用重畫。
• 適合團隊創作。

cons:

• 免費試用版只能做1個project，有很多ideas的人可能需要考慮付費購買upgrade使用權限。
• 沒有中文字型，英文字體選擇性也非常少，對於想要每個版面完成度都要很高的強迫症患者來說，會覺得很抓狂（要學會降低對prototype的要求）。
• 幾何圖形的設定很少，就是可以讓你很簡單用很陽春的圖畫出原型和元件要擺哪裡，要精美？嗯…還是乖乖用專業繪圖軟體+xcode吧。

後記

我真的太糾結完成度這件事了 XDDDD