UI_Flow_Prototyping_00

現今 UI 設計流程 中少不了的 Prototyping !

關於 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 設計流程

設計流程

 

上圖是一般 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;行動召喚),顏色會比較明顯,所以用戶容易發現,但如果排除顏色,用戶是否還會知道自己要去點選什麼區塊?我們來看看幾個測試:

UI_Flow_Prototyping_02

連連看:找出相同顏色的文字

 

由上圖的測試可以知道,對於視覺正常的人來說,上色後的文字(B)可以加速判斷。再來看下圖:

UI_Flow_Prototyping_03

任務:找出含有abcde文字的區塊,並將他連線起來。

 

上圖可以知道,視覺正常的人在區塊有上色的條件下(B),判斷的時間不用一秒,但重點是,第四欄上色的區塊是 adcbe 不是 abcde,是故意上錯色的,這是要反應大多的用戶在操作介面時是沒耐心的,通常會無意識下被介面引導,這是介面設計師需要謹慎思考的事情。

介面設計是引導,而不是選擇

因此,如果要測試用戶是否正確理解產品,排除顏色來增加用戶思考並理解產品的時間,可能會比較準確 。

不同的路徑相同的結局

在 prototyping 時其實可以製作多點擊區讓使用者測試。但在時間的限制下,有時候我們只會測試一種路徑一種結局,也就是一個 prototype 只能測一種流程,其實有點可惜,或許一個 prototype 至少有 3~4 種行為路徑,但可以導向一個行為結果,會比較符合用戶真實的操作體驗。

轉場動畫的意義

大多的 prototyping 工具,都會提供一些預設的轉場動畫,但要注意的是每一個動畫都有意義,像是移動或淡出淡入的方向,其實都有跟操作的流程有關係,這要特別注意一下。

UI_Flow_Prototyping_04

返回(back)跟關閉(x)的轉場動畫應該要不同。

 

結論

製作 prototype 其實就是要早一步驗證產的概念模型有沒有問題,而在現有的軟體支援下,要製作高保真的 prototype 不是難事。所以早一點將 prototype 的步驟、流程規劃好,對往後的產品迭代時,肯定會有很大的幫助。

另外如果有個好的想法,但卻不想太早進到開發,其實製作高保真(hi-fi;high fidelity)的 prototype 也是很好的方法,與其花時間開發不確定用戶是否會使用的功能,不如花多一點製作多一點高保真的 prototype 來溝通討論,早一步驗證產品的可行性,再進行開發,比較不會浪費時間與人力成本,因此 prototype 在往後的設計流程裡,會越來越重要,有遠見的公司應該要多 hire 幾個介面設計師才是。

 

本文章已獲得作者授權,轉載自:介面設計Prototyping 淺入淺出  by WESLEY,原文出處 DESIGNING BY LEARNING

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

如果你也喜歡我們的文章,請 Follow 我們的 Facebook 專頁,每天都會分享許多精選文章!

分享此文: