介面設計Prototyping淺入淺出

關於prototyping（原型）設計，前陣子剛好在hpx的活動中有簡單的分享自己prototyping的經驗與想法，而這幾年也越來越多新的prototyping工具，對於介面設計師來說是喜憂摻半，喜是又有新的工具可以玩，憂則是又要花時間學新的工具，而且那麼多工具到底要如何選?而且也很難保證這些工具是不是能夠一直更新下去，如果停止更新那不就白花時間了…

其實每個工具都各有優缺點，但就目前的共識是，一個理想的prototyping工具，必須是容易被整合到介面的開發流程，同時又要能用來達成有效溝通的目的；而「溝通」與「體驗」就是prototyping的本質，如果兩者都能兼具，那就是一個合適的prototyping工具了。

Prototyping工具的興起

介面設計的prototyping工具是從擬真（skeumorphism）轉扁平化（flat）設計風格的過程中逐漸興起，加上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在工作流程的位置

上圖是一般介面設計開發的線性工作流程，在不同開發階段的參與人員不同，產出物也不同，其實在草稿階段，就可以開始製作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在往後的設計流程裡，會越來越重要，有遠見的公司應該要多hier幾個介面設計師才是。