#46 利用 Marvel App 製作 prototype app
大安運動瘋(Taipei Street Workout Group)

一、大安運動瘋 prototype app
二、Marvel App 製作的畫面

三、 參考連結
(1)彼得潘的教學資源
(2)參考Julia同學作品(有非常完整Marvel App操作步驟說明)
四、大安運動瘋prototype App實作與說明
(1)選一個喜歡的prototype開發介面
這次我是使用Marvel製作prototype,相關類似的App連結如下:
Marvel App
https://marvelapp.com
Flinto App
https://www.flinto.com
POP App
https://apps.apple.com/tw/app/pop-prototyping-on-paper/id555647796
聽說也可以在Keynote製作!下次有機會再來試試看!
(2)了解Marvel操作方式與流程後,進行prototype製作
請參考 Julia同學的作品(包含Marvel非常完整教學)
左列的工具箱,找到你要的樣板、元件、Icon、照片。
左下角的項目可以前後移動頁面、新增頁面、調整畫面比例。
右列有細部調整,修改後儲存狀態,點Close後可進入全頁面設定。

進入全頁面設定後,可以新增照片、新增頁面、縮放畫面比例
設定框架、儲存、執行、分享(儲存需付費訂購,可自行視個人需求而定)
最重要的部分是點選各頁面時,可以修改及進行頁面間的連結與畫面切換

可設定元件或按鈕的連結頁面(採框選式),也可以另外增加URL外部連結

可設定頁面間轉換模式

可設定畫面的手勢功能

當全部都設定完成後,回到主畫面,可以點選Play執行測試功能與連結。
點選Share,會產生URL,可以複製連結,也可以Email&SMS分享。

五、心得與感想
第一次使用Marvel製作prototype App,所以花了一些時間去練習和熟悉。這次的練習相信對未來規劃與開發App會很有幫助,因為可以事前規劃想要的功能與架構,所以在編寫程式時將會有參考依據,也比較不會發生邊寫程式,邊想架構與畫面狀況。
老實說一開始看到Marvel,還以為是漫威跨領域開發的!結果…哈~當然不是!但Marvel真的是一個輔助開發好工具唷!可以設計很多App的新點子,感謝彼得潘讓我們又學習了新的開發技能,喔耶!
P.S.還在找如何修改Marvel內的中文字型,原始內建版本的中文字…沒有很好看。
P.S.這個大安運動瘋prototype App,最後contact內的連結資訊,只有我的Line是真的,其他的都是虛構的喔!千萬不要去搜尋,找不到的唷!

