關於 prototyping（原型）設計，前陣子剛好在 hpx 的活動中有簡單的分享自己 prototyping 的經驗與想法，而這幾年也越來越多新的 prototyping 工具，對於介面設計師來說是喜憂摻半，喜是又有新的工具可以玩，憂則是又要花時間學新的工具，而且那麼多工具到底要如何選？而且也很難保證這些工具是不是能夠一直更新下去，如果停止更新那不就白花時間了…
其實每個工具都各有優缺點，但就目前的共識是，一個理想的 prototyping 工具，必須是容易被整合到介面的開發流程，同時又要能用來達成有效溝通的目的；而「溝通」與「體驗」就是 prototyping 的本質，如果兩者都能兼具，那就是一個合適的 prototyping 工具了。
Prototyping 工具的興起
介面設計的 prototyping 工具是從擬真（skeumorphism）轉扁平化（flat design）設計風格的過程中逐漸興起，加上 Google 的 Material Design 的發展，也讓扁平化設計成為介面設計的主流，早期的 prototyping 工具比較沒人討論是因為製作的門檻太高，擬真的設計不好做 prototype，設計師用盡洪荒之力刻完這些擬真的畫面早已無力，根本沒有時間再來做 prototype，頂多就 mock up 讓「客戶」或「老闆」用想像力去感受一下，但這樣的溝通效果當然不會太好。
介面扁平化後，prototyping 工具也越來越多，從簡單的 pop、invision、marvel，到複雜的 origami、framer.js、AE …等等，每種工具都各有提倡者，設計師頓時陷入「我該挑什麼工具來做 prototype？」的抉擇中，但比較能確定的是，prototyping 在開發產品的流程中越來越重要，因為越來越多的 prototyping 工具都已整合到介面設計的流程中，加速 prototype 的實現可能，不但可以提前體驗產品的概念模型，同時又能快速的修正體驗，提高團隊內部的溝通效率，雖然會因此加重介面設計師的工作，但是透過客製化的介面元件包（UI kit），也能讓其他人快速的組合畫面，只要有心，就連公司櫃台的接待小妹，都可以一起 prototyping，就如同當天另一個講者所說的，prototyping 應融入組織文化，鼓勵團隊內外的成員都要勇於試錯，找出最好的介面操作模式。
每一個 Prototype 就是概念模型
概念模型的說明，我在前幾篇文章中有提到，將 prototype 拿給用戶進行測試，其實就是要檢視設計師所呈現出來的概念模型，是否符合使用者的心理模型。唯一要注意的是，設計師往往也是產品的使用者，容易用自己的心理模型去刻化用戶的心理模型，雖然很難避免，但在幾次的用戶測試後，就能體會兩者間操作上會存在明顯的差異。因此我們需要做 prototype 來 refine 操作流程。
Prototype 在 UI 設計流程 的位置
上圖是一般 UI 設計流程 的線性過程，在不同開發階段的參與人員不同，產出物也不同，其實在草稿階段，就可以開始製作 prototype 了，只是這邊的 prototype 通常會是「紙原型（paper prototype）」，是用來內部溝通討論用，也就是我們常說的 low-fi（low-fedelity）低保真原型，這也是一個蠻有趣的階段，因為可以在這個階段看到其他成員不同的心理模型。但切勿拿這個原型讓用戶做易用性測試，因為「不準」，一般用戶的想像力有限，在這個階段做易用性測試意義不大。
而通常我們在草稿階段完後，接續的工作就是請 企劃/pm 來製作框線稿，同時介面設計師也可以開始定義產品視覺，當框線稿完成後，大致的 ui flow 確定，開始就可以請介面設計完稿視覺稿，接下來的 prototyping 就是 refine 流程的階段。
Prototyping 工具的選擇
前面有提到，prototyping 的工具，很多都已融入介面製作的流程，又以 mac 的 sketch 支援性最高，通常在介面繪製完成後，prototype 大致也完成了。我比較常使用的是 invision，因為它提供的套件 craft，目前有提供測試版的 prototyping 工具 ，透過拉線的方式，就可以將介面串成一完整的操流程。
其他的推薦工具可以參考這個網頁：
http://uxtools.co/
其他比較複雜的 prototyping 工具，像是 principle、framer.js、origami、AE …等等，強調的是更多細膩的動畫轉場效果，但學習成本、時間成本相對也較高，當然有些工具的程式碼可以延用（framer.js、origami），但對於講求快速迭代的產品，其實不是那麼適用。但好的 UI motion 的確是可以讓用戶印象深刻，但也是要有足夠的時間讓工程端能夠配合製作。
另外對岸中國的介面設計也蠻活躍的，開發出不少好用的 prototype 工具，有熱心的對岸網友推薦我墨刀，有興趣的朋友也可以試試這套工具：
墨刀
Prototyping 的一些技巧
製作客製化 ui kit
UI kit 對於介面設計師來說應該更熟悉不過，通常有製作介面設計時，某些軟體像是 sketch，都會提供內建的 UI kit，可以加速開發。製作一份共同的 UI kit，讓團隊的其他成員也可以參與 prototyping 的過程，其實也是一個很好的溝通方式。像是 prott 這套軟體，有線上支援客製化的 UI kit，在溝通上會有很大的幫助。
製作灰諧稿的 Prototype
如何從 prototype 去觀察用戶是否「理解」產品，建議用灰階稿取代彩色稿，比較不容易會有顏色的干擾效果（stroop effect／史楚普效應），通常每個介面上都會有所謂的 CTA（call to action；行動召喚），顏色會比較明顯，所以用戶容易發現，但如果排除顏色，用戶是否還會知道自己要去點選什麼區塊？我們來看看幾個測試：
由上圖的測試可以知道，對於視覺正常的人來說，上色後的文字（B）可以加速判斷。再來看下圖：
上圖可以知道，視覺正常的人在區塊有上色的條件下（B），判斷的時間不用一秒，但重點是，第四欄上色的區塊是 adcbe 不是 abcde，是故意上錯色的，這是要反應大多的用戶在操作介面時是沒耐心的，通常會無意識下被介面引導，這是介面設計師需要謹慎思考的事情。
介面設計是引導，而不是選擇
因此，如果要測試用戶是否正確理解產品，排除顏色來增加用戶思考並理解產品的時間，可能會比較準確 。
不同的路徑相同的結局
在 prototyping 時其實可以製作多點擊區讓使用者測試。但在時間的限制下，有時候我們只會測試一種路徑一種結局，也就是一個 prototype 只能測一種流程，其實有點可惜，或許一個 prototype 至少有 3~4 種行為路徑，但可以導向一個行為結果，會比較符合用戶真實的操作體驗。
轉場動畫的意義
大多的 prototyping 工具，都會提供一些預設的轉場動畫，但要注意的是每一個動畫都有意義，像是移動或淡出淡入的方向，其實都有跟操作的流程有關係，這要特別注意一下。
結論
製作 prototype 其實就是要早一步驗證產的概念模型有沒有問題，而在現有的軟體支援下，要製作高保真的 prototype 不是難事。所以早一點將 prototype 的步驟、流程規劃好，對往後的產品迭代時，肯定會有很大的幫助。
另外如果有個好的想法，但卻不想太早進到開發，其實製作高保真（hi-fi；high fidelity）的 prototype 也是很好的方法，與其花時間開發不確定用戶是否會使用的功能，不如花多一點製作多一點高保真的 prototype 來溝通討論，早一步驗證產品的可行性，再進行開發，比較不會浪費時間與人力成本，因此 prototype 在往後的設計流程裡，會越來越重要，有遠見的公司應該要多 hire 幾個介面設計師才是。
本文章已獲得作者授權，轉載自：介面設計Prototyping 淺入淺出 by WESLEY，原文出處 DESIGNING BY LEARNING
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
