全面分析Prototype

在專案開發時,我們會在過程中選擇製作Prototype(原型),以試驗自己的想法是否可行。製作Prototype的方式有很多,而專案的問發途中,亦要經過不同的階段。所以,我們要製作甚麼的Prototype,以配合專案的開發進度?

Prototype的作用

不同的開發者會對產品有不同的想法,而最終的目標蘙是令到用家覺得產品是「好用」的。那怎樣的設計才達到這個目標?我們可以用「使用者測試」來試驗。透過使用Prototype,我們可以獲得用家在使用產品時的數據,例如完成某個項目時會用到的頁面,和使用過程中的某些不順暢地方。

部份文章會將Prototype分成低保真及高保真等分類,而本文則會將Prototype分成:

  1. 紙本 Prototype
  2. Wireframe
  3. Mockup
  4. 動態影像
  5. Web

上述的各類Prototype都各有優缺,而製作的方式、價格和使用階段也都有所分別。

1. 紙本 Prototype

紙本的製作時間短,不需經過專業培訓,一般運用紙筆就可以完成。透過在紙上畫上線框圖 (Wireframe),就可以進行使用者測試。在開始製作正式的線框圖之前,設計師為先畫紙本Prototype,供內部先了解產品初形,很多時因為與實際的操用分別太大,所以很多團隊為了節省時間會放棄這个過程。

優點:

  • 低成本
  • 製作簡單
  • 方便更改
  • 投放資源之前可確認操作過程,在正式開發前仍可修改

缺點:

  • 製作紙本Wireframe
  • 拍照
  • 在照片上設定觸控範圍和Link

這是比較少用的Prototype,雖然製作簡單,但與產品的分別太大,一般只會用來檢查線框圖的版面內容和漏頁。

又可能是專案經理和研發設計工程師有意見不同的時候,開發團隊才會使用,但因為與實際的操用分別太大,所以沒有甚麼用作。

2. Wireframe

Wireframe是保留了紙本Prototype的優勢,而同時彌補了其與電子產品在操作上有太大分別的。開始製作正式的線框圖之前,供內部了解產品初形,或與有經驗的客戶交流。

工具例如: Balsamiq, OmniGraffleiRise,Mac 上的 keynote + wireframe kitAxure 或是 Visio, Word, Powerpoint 等等,都可作為製作Wireframe的工具。

優點:

  • 改善紙本Prototype與電子產品在操作上的太大分別
  • 製作簡單、成本低
  • 尚算方便更改
  • 在開發前期可確認操作過程,在正式開發前仍可修改

缺點:

  • 與上架產品有很大分別
  • 和用家的情境幾乎不同
  • 一般用家較難了解Wireframe

一般情況下,產品都不會整個被製作成Wireframe,而Wireframe大多會用作測試「單一功能」,減少修改上的麻煩。

此外,Wireframe亦不會被當作是一個對產品的正式測試,最多是用來確定用家能否順利完成任務,而最後的產品也會與Wireframe有很大的差別。加上只要有人看不懂Wireframe,就不能用來與其進行討論。

3. Mockup

有很多的用家都要到Mockup的階段才能理解產品,如果要對外部作使用者測試的話,越接近最後發佈的產品,測試結果就越準確。用來試驗用家對視覺設計的感受,基本Wireframe已經確定,同時是最基本的Prototype。

優點:

  • 高像真度,接近最終產品
  • 對用家來說簡單易明
  • 用來試驗用家對視覺設計的感受

缺點:

  • 修改麻煩
  • 只能測試預定的操作模式
  • 仍與產品有分別
  • 無法對預計外的操作作出反應

Mockup是比較常用的Prototype,不論對外對內都簡單易明。業界有不少人會使用InVision製作Mockup Prototype,快速且易上手。以測試視覺設計、內容排版和操作易用性來說,即使能確認應用程式的資料狀況和無法對預計外的操作作出反應,不需要動用工程師來設計的Mockup Prototype已算是較低成本的製作方式。

4. 動態影像

今天,很多設計師在訂好Mockup和Prototype後,會使用硬件製作成動態圖(.mov, .gif 等),主要讓團隊能看到最終成品的效果,同時讓工程司了解互動和動態效果,更易著手處理coding,減低製成品和設計師意念的分歧。工具例如: Aftereffect, Framer等。

day-004---credit-card-paymentgif_restaurant_menu

優點:

  • 高像真度,接近最終產品
  • 對用家和製作團隊更易明白
  • 用來試驗用家對視覺設計的感受

缺點:

  • 修改麻煩
  • 需時相對長
  • 只能測試預定的操作模式
  • 仍與產品有分別

5. Web

在Mockup和程式製作之間,用假資料,未有後台串資料庫,一個靜態的HTML,用作測試用家對動態效果的感受。當Mockup已經得到確定後,需測試用家對動態效果的感受。

優點:

  • 開發者可以參考數值的動態效果
  • 比Mockup準確
  • 用以反外掛系統對用家作封測,收集數據

缺點:

  • 製作需時
  • 高技術要求
  • 修改困難

差不多要工程師介入製作,而使用Hype3能幫助設計師不用程式碼產出 HTML、CSS、JS,功能強大且容易上手,加上支援中文界面,減少製作成本。在短時間內製作動畫效果,配合時間軸、場景、和物件,成為能以假亂真的Prototype。

 

Prototype是為專案找出問題的方法,但不是做了就代表產品就能平安推出,因為它只能指出問題所在,不能解決問題。再好的Prototype,在產品推出後也會有各種情況出現。而在推出前製作Prototype,至少可以在開發團隊層面上發現問題,不然就只能透過產品推出後的客戶評價找出問題了。

發表迴響