CTK pro

關於 CTK PRO:於2011年夏天展開了偉大的航程,初期以開發手機APP為主,2013年開始跨入Web開發,2015年開始用UCD(User-Centered Design)方法協助客戶釐清需求, 2016年大量採用AWS架構, 並導入策略UX產品為客戶在軟體開發各環節破關!

back to top

兩大原型製作工具 : Marvel 與 Proto.io

Medium: https://medium.com/ucdtw/prototype-tools-marvel-protoio-8e0bc3fccd36


 

有在製作產品的各位看官們,不管你是設計師、客戶、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 您的原型。

設定 hotspot (熱點,連結)
  • 任何人都可以輕易快速上手(手機也能編輯),五分鐘即學會如何操作
  • 多種動畫轉場效果任君選擇
  • 還可以下載變成手機 APP 使用(付費版)

(最下面有 Marvel 實際操作畫面喔,請不要錯過)

via marvel.com

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 實際操作畫面喔,不容許錯過)

via proto.io

???? Marvel & Proto.io 比較表

Marvel & Proto.io 比較表

???? 實際操作後兩大工具缺點清單啦

Marvel 缺點清單:

  • 每一步驟都是一張圖檔處理, 若你的介面是需要處理到很多互動效果,不建議使用 Marvel ,會想要做到吐血,且越做越多張圖出來。
  • 重複的元素無法重複利用,嗚嗚不方便啦。(只有同樣位置跟同樣 hotspot 才可以複製)。

為了做出點擊標籤的互動效果,就做出四張圖來,但是其實下面的元素都是長得一模模一樣樣
  • 後續執行 user research 或是行銷追蹤像 GA 等等要自己找素材來使用。

Proto.io 缺點清單:

  • 因為是線上編輯,前提是你的網路、硬體要給力才行,切記外部素材不要過多喔,不然容易卡卡。
  • 常常找不到我要的 interactions,因為選項太多。

  • 他沒有 sketch 的複製樣式功能,若有同樣的樣式跟內容可以使用 container 方式去做。

???? 真實操作 Marvel 過程

  • 設定 hotspot (熱點,連結)

設定 hotspot (熱點,連結)
  • 選定轉場動畫效果

點擊 hotspot => 下方切換到 Screen Transition 選定轉場動畫效果
  • fixed header & fixed footer 固定頁首跟頁尾

fixed header 步驟:點擊左上點的 Fixed header 拖拉
  • timer 倒數轉場

1. 點擊左上角的 Timer 按鈕 => 2.填入秒數 => 3.點擊下面的 ”Pick Destination” 選定畫面

???? 再來放送 Proto.io 操作畫面

  • 如何建立起 interactions,來製作轉換畫面。

  • 有多種現成的 material 可以使用,有 Google material、iOS 等等,快速建立。

多種現成的 material 可以使用
  • 連 input 欄位、picker、switcher、checkbox 元素等等也有。

  • 轉吧轉吧七彩霓虹燈,建立選取時間的欄位互動,我在選時間時預覽頁面的到期日區塊真的有變。(真的有點像是在設計寫程式一樣,把每一步驟設計出來,要做到什麼動作以及優先順序,但不是真的寫程式喔,不用擔心不會寫程式的怎麼辦,只要懂得邏輯即可。)

選取時間的欄位互動,我在選時間時預覽頁面的到期日區塊真的有變

步驟一:新增必要元件

步驟二:新增 Interactions => Interactions 設定

新增 Interactions => Interactions 設定

步驟三:勾選 Callback 接著設定 Callback => Save 大工完成

勾選 Callback 接著設定 Callback => save
  • 什麼 interaction 可以複製,只要對某 interaction 點擊右鍵,即可複製。

  • 元件可以可以設定 state,改變狀態,像是點擊 FB 讚按鈕,讚按鈕會變色。screen 可以設定 state,container 也可以設定。(這邊出現 Flash 畫面了,他可以像 Flash 調整動畫效果喔。)

container state 設定

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

儲存顏色,拉色塊到下方的 Saved colors 區塊儲存

???? 總結:

各位看官可以搭配專案需求、規格,來選擇你的製作工具喔,目前 Marvel 跟 Proto.io 算是滿能滿足我低。

要我選擇 Marvel 重要關鍵:

若專案 UX / UI 互動效果較少,單純看流程,又能原汁原味呈現 UI

已有其他現成 user research 工具搭配

或是不用做 user research

Marvel 真是你的最佳夥伴

要我選擇 Proto.io 重要關鍵:

若是要做到很接近產品的原型

UX / UI 互動效果多

想要有精細 GA 行銷追蹤

那選擇 Proto.io 可以讓你如魚得水喔

Wendy

前 HTC UI/UX 設計師,現專注於 WordPress 客製模版設計,古靈精怪點子王,開放的心態打開了前後端的開發能力,透過 UI/UX、前端工程師雙棲的背景,在每一次摸索 WordPress 模板或是客製模版開發中,磨練出快速判斷如何透過各式工具、模版、套件方式找到最適合調整方式,來達成一件又一件兼具視覺與邏輯的完美作品!!

Follow: