用Marvel app製作prototype app｜不專業完整介紹
最近有什麼好看的電影嗎？
在做這份prototype app作業前，一直沒有頭緒要做什麼主題，於是翻了翻手機裡常用的APP，最後選定以模仿威秀影城的APP畫面開始做起。選定模仿對象到完成23個畫面的prototype已經是將近晚上十二點了，我的大半天又都栽在MARVEL裡面了😩
快往下滑，去玩玩我的第一個以Marvel製作的VIEWSHOW prototype app吧！
在進入主題前，還是想先 ”哭“ 一下，今年因疫情關係，所有原本今年上映的電影大片都紛紛延期至明後年才上映吶……
這次製作Prototype使用的 MARVEL App
VIEWSHOW 威秀影城app …快來玩我(?!)
維0的不專業完整介紹，如何創建prototype及功能簡介
讓第一次使用MARVEL的你能夠快速上手，起手製作屬於你的第一個prototype。
✅ 如何創建PROTOTYPE：(Step1–2)
1. 創建MARVEL帳號，完成後會出現下圖畫面，填寫project name及選擇project type (iPhone)。填寫完後按下綠色框內create prototype.
（下圖提供兩種創建prototype方式）
2. 點擊右上方閃爍中的Add Images (圖一)，會跳出選擇Design in Marvel直接空白頁開始或是Upload from computer或是先上傳圖片 (圖二)
完成創建prototype後，即得一個空白頁面。(如下圖)
看到個畫面表示你已開啟prototype大門！（先流三滴眼淚）
＊＊貼心小提醒＊＊
每次設計畫面都是單頁設計哦～一個畫面只會出現一個頁面做設計。
✅ 介面功能簡介: (Section 1–3)
1.左方功能列表之7項功能對應。（由上至下）
・（圖一）1–4：方框，圓框，文字，線。
・（圖二）5：插入Marvel內建圖片及 Icon (Stock Photos and Icon)。下方藍字為上傳自己的圖片或Icon，更快速的方式為：直接拖曳圖片進prototype頁面即可。
・（圖三）6：功能圖標(Wireframing Elements)，純圖標，效果需要在別處進行編輯
・（圖四）7：Team Library ，將選起的頁面排版儲存起來，能夠多次套用到新加入的頁面。將設計好的頁面排版選起，並點選右下角藍框Add to Library即為儲存。
2. 右方功能列表之功能對應。（圖五由上至下）
Close：離開設計頁面｜Download：付費會員才能使用此功能。
Arrange 右方垃圾桶圖示：刪除當時點選之功能或圖片。等同鍵盤Delete功能。
Forward, Backward：如物件重疊可點選物件，命令誰在前誰在後。
Group, Ungroup：把物件合併或分散。拖曳群移動組物件時較方便。
Position：位置(x,y)
Size：大小
Rotation：圓角
Opacity：透明度
完成APP頁面設計後，按下CLOSE（圖五）離開設計頁面即會回到（圖六）頁面，顯示所有設計的頁面。
3. PROTOTYPE功能列表之功能對應：
（圖六）
・如要回設計頁面，請點選欲設計之分頁並點選下方藍色的Edit design.
・如要設定動態Prototype，請點選欲設計之夜並點選分頁中央的PROTOTYPE.（圖七）進入設定Prototype之畫面
・拉方框選取欲啟動動態功能之範圍，拉完範圍之後將跳出3指令
Hotspot Destination：跳轉至指定頁面
Screen Transition：轉場特效
Action：對該動作產生反應（點擊、滑動、拖曳…）
・完成動態設定後，點選右上角
Play：開起模擬器，檢視完整APP｜ Done：離開動態設計頁面，回到（圖六）。
以上MARVEL PROTOTYPE功能介紹打完，收工！
熟悉功能介面，操作起來就能夠更加順手快速～希望能夠幫助到正在苦惱著不知該從哪開始下手做prototype的你／妳。
