跳到主要內容區塊

為什麼你應該把原型設計(Prototyping)放進你的 UI/UX 設計流程中?(中)

所以,原型到底要多接近真實產品?

許多人認為原型應該都要看起非常複雜,而且要幾乎感覺像是真正的產品。但事實是很多時候原型可以非常簡單和粗糙。

這是一般開發流程常用的兩種原型:

1. 低保真原型(Low-fidelity prototype)

低保真原型代表這個原型功能有限且看起來未經修飾,但已經足夠用來展示核心的使用者流程、頁面之間的轉換或設計邏輯。由於低保真的特性,大家可以將更多的注意放在資訊架構、流程和邏輯,而不是視覺設計上。

低保真原型可以只用筆、紙或便條紙來組裝成紙製原型(Paper Prototype)。如果你更喜歡電腦繪圖工具,你也可以用像是 Sketch、Figma、Axure 設計工具來製作電腦版原型。這些設計工具通常都有內建的基本原型製作功能,可以輕鬆製作可點擊介面UI流程並與分享給團隊。

通常我們低保真原型發生在專案的早期階段,目前在從內部團隊快速得到獻藝,因為成本低的關係,身為設計師我們應該可以盡可能嘗試用低保真原型探索更多的想法,直到我們找到真正理想的解決方案為止。

 

2. 高保真原型(High-fidelity prototype)

與低保真原型相反,高保真原型在功能和互動設計方面提供了更多細節,它看起來和真實產品會非常接近,因此大部分人可以清楚地理解設計師想要傳達的想法。

我也經常使用高保真原型進行使用者測試以驗證功能想法或發現易用性問題,並從使用者那裡聽到更多深度的反饋。

有時我也會用高保真原型來呈現特定的微互動或動畫轉場,這是低保真原型或靜態設計稿很難做到的。現在市面上已經有很多不錯的的高保真原型製作工具,例如 Principle、Framer、ProtoPie 和其他替代工具,可以幫助你快速有效的打造高保真原型。

而我自己所在的團隊中還有一個專門開發原型夥伴,可以做出用程式碼編寫並帶有真實數據的原型,這讓我們的原型感覺更加逼真、更容易從使用者手上聽到有意義的反饋,但反面就是這會花費很多成本和時間。所以,根據你的目的和想要實現的目標,可以採用任何適合你情況的方法。

我應該在設計流程的哪個階段製作原型?

其實從早期的概念探索到更具體的設計,我們幾乎可以在設計流程的任何階段進行原型設計,你可能會希望在不同的場合中利用原型來加速決策過程:

1.前期探索階段:從UX團隊夥伴中快速得到反饋

作為設計師,我們通常在設計的前期會不斷嘗試許多想法,不管是在紙上或電腦上,這個時候都非常適合使用低保真原型來獲得反饋,因為低保真原型製作過程快速、便宜容易拋棄,通常你也會得到很有用的建議來完善自己的設計。

2.溝通與決策:向內部利益關係人提案你的設計

我相信團隊中會有許多非設計師的夥伴,例如產品經理、工程師、業務或行銷人員等等。每個人對新功能的設計都有不同的期望、對同一個想法的思考角度也不同。其實設計師在提案設計時很難讓所有人都有一致認同的想法。但是如果這時候能夠展示可以互動的原型,將會大大的加快溝通速度並更容易讓團隊做出決策。

3.執行層面:將互動細節提供給工程師開發

一直以來設計與工程之間常常存在許多代溝,工程師不知道設計師對互動的期望是如何,設計師也不知道工程師會如何實現他們的設計。靜態設計稿有太多細節是無法表現出來的,因此每每一到了開發實作階段階段,工程師和設計師之間都無可避免的需要反覆的討論。

為了彌平這些溝通上的距離,原型可能會是一個理想的選擇。以我個人的經驗來說,如果設計師可以提供一些原型(即使是影片呈現也很好)來呈現互動細節、頁面轉場以及用戶的操作行為,工程師通常會覺得很開心,這樣他們就不需要自己去猜測或推斷這些微小的細節要怎麼運作。

4.驗證想法:將設計放在真實用戶面前測試

在上線產品之前,原型在發現易用性問題中有著扮演者關鍵性的角色,大多數團隊都在努力避免一種情況,那就是花費大量的開發資源後卻做出會很差的使用體驗或不是使用者想要的功能。把我們設計的原型放在在真實用戶面前可以幫助團隊驗證想法並評估這個設計的可行性。 (待續)

 

資料來源:轉載自Lin Simon 於Medium 網站發表『為什麼你應該把原型設計(Prototyping)放進你的 UI/UX 設計流程中,發掘原型設計的價值,讓你的設計更有說服力』

Simon 目前在東京的跨國企業擔任 UX 設計師,同時也是設計內容媒體 AAPD 的創辦人。熱愛學習、分享工作與生活的大小事。透過自學進入 UI/UX 領域,並於 2016 年開設了自己的 UI 設計線上課程,這幾年也在不同的公開設計活動上分享自己的設計方法、海外工作經歷等內容。擅長透過不同的角度與觀點傳遞設計的價值,熱衷於分享知識並持續建立社群之間的連結,目標是成為有正面影響力的設計師。

個人網站:http://simonlin.design/

個人 Medium: https://medium.com/as-a-product-designer