兩大原型製作工具 : Marvel App 與 Proto.io
有操作 Marvel 與 Proto.io 教學心血歷程啦
有在製作產品的各位看官們，不管你是設計師、客戶、PM 還是 RD …
有沒有發現單純只看設計稿圖已經無法滿足你了，沒有實際透過裝置觀看產品，或是親自拿著產品測試，無法真正貼近使用者的體驗。
製作產品時需要思考的問題
使用者使用產品時好不好用 ?
有沒有解決使用者問題 ?
如何快速驗證 ?
能不能創造獲利 ?
使用者使用起來是否覺得愉悅甚至驚奇等等 ?
是很多設計師跟大家的挑戰🔥
Prototype 存在的意義
這時 Prototype 原型是最經濟而快速的方法驗證、澄清產品，
接下來好好介紹一下兩個線上製作 App / Website 原型平台。
讓我們啟動無數場科學及藝術無限無盡的腦力激盪吧！
👍 選擇這兩大原型製作工具目的：
因設計師背景還有專案需要快狠準速速完成，我的要求不多
- 不要讓我寫 code 啦，要我學新的 coding 或是不熟的語言我會瘋掉，專案來不及完成會藍瘦香菇，最好點點點拖拖拖拉拉拉設定一下就能實現我的願望。
- 拜託拜託讓我速速生出像產品的原型 🙏。
- 我愛 😘 Sketch (設計人必用的 UI / UX 工具)，最好要能搭配 Sketch 實在是感激不盡。
Marvel 跟 Proto.io 都具備以上三大要求。
👍 Marvel 跟 Proto.io 三大特色形容 ：
Marvel
Marvel 製作原則：
是 POP — Paper on prototype 進階版，線上製作 Prototype 工具，直接在線上 demo 您的原型。
- 任何人都可以輕易快速上手(手機也能編輯)，五分鐘即學會如何操作
- 多種動畫轉場效果任君選擇
- 還可以下載變成手機 APP 使用（付費版）
(最下面有 Marvel 實際操作畫面喔，請不要錯過)
Proto.io
Proto.io 製作原則：
綜合 Axure RP, Sketch 和 Flash 操作介面，也是線上製作 Prototype 工具，直接線上製作元素、畫面，製作出來元素可以重複利用，有 google material、ios material、input 欄位等等直接使用。
- 百分百模擬真實產品製作的工具，什麼還可以模擬 form 表單填資料效果
- 竟然還可以串 GA 後續行銷追蹤
- 搭配 User Testing 工具，像是 Lookback, User Testing, Validately，好做 user research 喔
(最下面也有 Proto.io 實際操作畫面喔，不容許錯過)
👍 Marvel & Proto.io 比較表
👍 實際操作後兩大工具缺點清單啦
Marvel 缺點清單:
- 每一步驟都是一張圖檔處理， 若你的介面是需要處理到很多互動效果，不建議使用 Marvel ，會想要做到吐血，且越做越多張圖出來。
- 重複的元素無法重複利用，嗚嗚不方便啦。(只有同樣位置跟同樣 hotspot 才可以複製)。
- 後續執行 user research 或是行銷追蹤像 GA 等等要自己找素材來使用。
Proto.io 缺點清單:
- 因為是線上編輯，前提是你的網路、硬體要給力才行，切記外部素材不要過多喔，不然容易卡卡。
- 常常找不到我要的 interactions，因為選項太多。
- 他沒有 sketch 的複製樣式功能，若有同樣的樣式跟內容可以使用 container 方式去做。
👍 真實操作 Marvel 過程
- 設定 hotspot (熱點，連結)
- 選定轉場動畫效果
- fixed header & fixed footer 固定頁首跟頁尾
- timer 倒數轉場
👍 再來放送 Proto.io 操作畫面
- 如何建立起 interactions，來製作轉換畫面。
- 有多種現成的 material 可以使用，有 Google material、iOS 等等，快速建立。
- 連 input 欄位、picker、switcher、checkbox 元素等等也有。
- 轉吧轉吧七彩霓虹燈，建立選取時間的欄位互動，我在選時間時預覽頁面的到期日區塊真的有變。
(真的有點像是在設計寫程式一樣，把每一步驟設計出來，要做到什麼動作以及優先順序，但不是真的寫程式喔，不用擔心不會寫程式的怎麼辦，只要懂得邏輯即可。)
步驟一：新增必要元件
步驟二：新增 Interactions => Interactions 設定
步驟三：勾選 Callback 接著設定 Callback => Save 大工完成
- 什麼 interaction 可以複製，只要對某 interaction 點擊右鍵，即可複製。
- 元件可以可以設定 state，改變狀態，像是點擊 FB 讚按鈕，讚按鈕會變色。screen 可以設定 state，container 也可以設定。
(這邊出現 Flash 畫面了，他可以像 Flash 調整動畫效果喔。)
- 可以儲存顏色(這功能我研究好久，官方文件似乎沒有特別提到此功能)。
👍 總結：
各位看官可以搭配專案需求、規格，來選擇你的製作工具喔，目前 Marvel 跟 Proto.io 算是滿能滿足我低。
要我選擇 Marvel 重要關鍵：
若專案 UX / UI 互動效果較少，單純看流程，又能原汁原味呈現 UI
已有其他現成 user research 工具搭配
或是不用做 user research
Marvel 真是你的最佳夥伴
要我選擇 Proto.io 重要關鍵：
若是要做到很接近產品的原型
UX / UI 互動效果多
想要有精細 GA 行銷追蹤
那選擇 Proto.io 可以讓你如魚得水喔
