有在製作產品的各位看官們，不管你是設計師、客戶、PM 還是 RD …
有沒有發現單純只看設計稿圖已經無法滿足你了，沒有實際透過裝置觀看產品，或是親自拿著產品測試，無法真正貼近使用者的體驗。

製作產品時需要思考的問題

使用者使用產品時好不好用 ?

有沒有解決使用者問題 ?

如何快速驗證 ?

能不能創造獲利 ?

使用者使用起來是否覺得愉悅甚至驚奇等等 ?

是很多設計師跟大家的挑戰????

Prototype 存在的意義

這時 Prototype 原型是最經濟而快速的方法驗證、澄清產品，

接下來好好介紹一下兩個線上製作 App / Website 原型平台。

讓我們啟動無數場科學及藝術無限無盡的腦力激盪吧！

???? 選擇這兩大原型製作工具目的：

因設計師背景還有專案需要快狠準速速完成，我的要求不多

1. 不要讓我寫 code 啦，要我學新的 coding 或是不熟的語言我會瘋掉，專案來不及完成會藍瘦香菇，最好點點點拖拖拖拉拉拉設定一下就能實現我的願望。
2. 拜託拜託讓我速速生出像產品的原型 ????。
3. 我愛 ???? 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 調整動畫效果喔。)

• 可以儲存顏色(這功能我研究好久，官方文件似乎沒有特別提到此功能)。