#46 利用 Marvel App 製作 prototype app

Stanley Tseng (阿哲)
Nov 4 · 4 min read

大安運動瘋(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是真的,其他的都是虛構的喔!千萬不要去搜尋,找不到的唷!

彼得潘的 Swift iOS App 開發教室

學習 Swift iOS App 開發的學生作品集

Stanley Tseng (阿哲)

Written by

StanleyTseng

彼得潘的 Swift iOS App 開發教室

學習 Swift iOS App 開發的學生作品集

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade