9. Mockup
在平面設計裡的Mockup指的是把設計好的圖像合成到馬克杯、海報、招牌等等上，讓客戶可以想像設計展出或是應用在商品上的時候會是什麼樣子。在UI設計裡的Mockup指的是把wireframe繪製成使用者實際使用的畫面，但無法和使用者直接互動。在國外，有時候Mockup會和Prototype混用，但在業界基本上還是會把無互動的稱作Mockup，可互動的稱作Prototype。
10. Hi-fi Prototype（高擬真原型）
在產品正式上線之前，通常還會再做一輪易用性測試(Usability Testing)。有些公司會有專門的Prototyper負責這個部份，目的是快速做出可以被測試的prototype，所以code可能不會這麼美，效能不會這麼好。像我認識的工程師就滿喜歡用Swift做Rapid Prototype。
對於UX Designer來說，為了達到測試的目的，也可以用InVision, Marvel, Principle等等工具做出簡單、可互動的Prototype。用軟體做雖然快，大概半小時就可以完成，但是效果卻很有限。比方說沒有搜尋功能、不能input資料、沒有slider，有些動畫也做不出來。和直接code出來各有優缺點。
下面是我這學期做的租用倉儲空間的網站prototype範例：
11. 2nd Usability Testing（易用性測試）
有了上面看起來跟真的產品有87分像的Prototype，就可以拿去給使用者做測試。基本上方法跟上一篇文章裡說的差不多。
給受測者一個使用情境，然後給他們一些任務去完成，讓他們在操作的時候同時說出自己看到這個介面之後在想什麼，想怎麼操作它，介面是否給出他想要的回應。
因為這個階段的prototype已經和實際產品差不多了，因此可以在上線前做最後的調整。當然也有可能測了才發現問題很大，但都還來得及調整。回去檢視是哪一個步驟有問題，再請視覺設計師回頭去改Mockup。
當測試都沒什麼大問題之後，就可以把Mockup上面的按鈕、圖片切下來交給工程師做成真的網頁或是手機APP，這個步驟叫做切圖。
而在網頁設計上，有些視覺設計師同時也負責切版，就是切好圖，把圖用HTML/CSS拼到網頁上，最後再由前端工程師寫Javascript和後端串接撈資料，朝著真正的產品一步步邁進！
寫在最後
這個只是一般的流程。我們不難發現，這每個流程都息息相關，並且需要不斷進行修正。我並不同意工程師在最後的步驟才加入到這個流程裡來，工程師常常會注意到設計師沒注意到的細節，又或者是設計師可能會有些實務上的盲點，而做出不可能實踐的功能。最理想的流程，應該是所有人都要在這個流程裡共同合作吧。
從冰天雪地的密西根HCI畢業之後，現在在矽谷為一間B2B公司做UX Design，天天為系統管理員做設計。希望能用中文和更多台灣人分享UX。http://www.stephkuo.com/
原文出處Medium；政府網站營運交流平台授權轉載
|