♯2.使用Marvel App 製作 Prototype

無論在網頁或是APP的草創時期，會需要線框稿 (wireframe)與原型 (prototype)的大力協助。

Photo by Alvaro Reyes on Unsplash

線框稿 (wireframe)

線框稿是一個低擬真度來呈現產品設計的模樣，它目的有以下三點:

1. 呈現主要的資訊
2. 呈現資訊的排版與架構
3. 方便描述使用者如何與產品互動

原型 (prototype)

屬於中到高度擬真來模擬使用者與介面之間的互動，例如說按鈕按下後會出現的操作方式等，模擬一個產品完整的體驗。經過使用者測試使用後，設計師可將設計做精準的調整，而開發團隊不需要浪費其時間與精力。

解釋完上述名詞之後，就可以來試試使用Marvel App 製作 Prototype，Marvel App擁有非常友善的教學，對於初次使用的民眾(也就是我)也有提供文件配合影片來協助。

A guide to creating your first prototype

使用之前需要先註冊會員，就可以進入專屬你的儀表板，創建一個專案，你可以建立屬於此專案的名稱以及裝置，如果你有自己的設計稿可以自行將圖片拉入之後開始進行頁面的串接，也可以自己設計畫面內容後再行串接，之後只需要按下 play 就可以看到整個你設計後的流程囉！

儀表板中點擊創建專案

建立屬於此專案的名稱以及裝置

將自己設計好的畫面直接拖曳進入

拖曳之後畫面

點擊圖片之後出現 Prototype 按鈕，點擊後進入編輯畫面

拉出想要與使用者互動區域後，可在左下三區塊進行動作設定，完成後點擊 Close，可以點擊 Play 測試畫面互動是否符合需求，確認後可以點擊 Done

若想要新的設計也可以！

選擇 Design in Marvel，便會進到空白畫布中

左方區塊可繪製適合的元件，右邊會隨著你選擇的元件出現相關的設定，設計完畢想設計下一個畫面可以點擊下方 Add design 就會出現一個新的畫布，設計完畢可以點擊 Close，之後重複上述設定 Prototype 的模式。

上述流程是我從影片上擷取下來的，大家也可以看看影片內容，自己動手玩玩看唷！

鏘鏘～實作如下：