為什麼寫這篇文章

到目前為止，我已經從事 UI/UX 的相關的設計工作將近5年的時間，每當我向利害關係人展示我的設計解決方案時，根據我呈現設計方式的不同，我也常常得到不同程度的反饋與建議。

而我發現一個有趣的現象是：如果只是呈現一些基本的使用者流程或靜態的設計稿，雖然大部分人可以大致了解我要如何用這個設計方案解決問題，但是他們通常很難想像這種設計在真實的產品中會如何運作。因此，我必須要非常清楚的解釋設計中的每個互動細節，讓我的聽眾們可以更好的了解整個設計構想。

然而，有時候我在設計較大型的專案或複雜的功能時，只是呈現靜態設計稿其實很難清楚的表達我的想法。因此我一直試圖尋找一種更好的方法來幫助我展示我的作品而不需要過多的解釋。最終我找到了最適合的方法：原型設計。

我開始在不同任務中將我的想法從轉變為動態呈現或可以使用原型，這大大的幫助我降低和團隊的溝通成本，也讓其他能能夠簡單的去吸收我的想法。

在過去的幾年中我嘗試了許多原型設計工具，在打造這些互動體驗中我學到了很多東西，這些也讓我的設計變得更生動、有說服力，原型設計對於身為設計師的我來說也是一項重要技能。

所以這篇文章中，我會分享為什麼我認為原型在的設計流程相當重要，以及分享從我過去的經驗中獲得的一些實戰心得。

好的，那我們開始吧！

原型在 UX 設計中扮演的角色

產品開發前製作原型在這幾年已經在產品開發過程中變得非常普遍。 所謂原型，基本上就是去模仿真實產品的體驗，並用於測試及獲得使用者的反饋。它讓設計師和產品團隊能夠根據我們從使用者那裡得到的洞察快速改善迭代我們的解決方案。

原型可以是功能很少且沒什麼設計細節的低保真原型，也可以擁有完整互動體驗與設計、甚至是呈現產品真實資料的高保真原型。 根據我們的目標、時間和資源，我們可以選擇任何一種方式來製作我們原型，只要我們能夠通過使用它們來驗證自己的想法即可。

我們為什麼需要原型？原型的優缺點為何？

其實製作原型的好處非常多，以下是一些常見的優點：

• 原型可以幫助設計師和團隊同步設計方向，以免在錯誤的方向投入過多時間。
• 原型可以幫助團隊在專案早期尚未投資過多開發資源前就能驗證想法、並從實際用戶中發現潛在問題。
• 原型可幫助設計師在短時間內從其他合作設計師或團隊夥伴中得到快速的反饋建議。
• 原型可以幫助設計師去更好的展示自己的設計，並以更直覺易懂的方式解釋複雜的互動細節。
• 原型可以幫助設計師真正有機會去思考互動上的細節，最終能提出更具有說服力的的解決方案。
• 原型可以幫助人們更好的去想像這種新的體驗會如何在真實產品上運作。

雖然原型好處好多，但我不會說原型沒有缺點，有時候如果你不熟悉原型工具或專案複雜度很高，製作原型可能會是件非常耗時的事。但是，這我還滿同意 IDEO 的創新與設計 CEO Tim Brown 所說過的這句話：

「原型是用放慢我們的腳步來加快我們的速度。通過真正花時間對我們的想法進行原型製作，讓我我們可以避免了代價高昂的錯誤，例如讓設計在早期就變得太複雜，或卡在一個很差的想法上太久。」

通常一個問題可以有多種解決方案，原型設計是一種非常有效且相對成本很低的方式去了解哪種解決方案對大家來說最合理。

為什麼設計師需要去學習製作原型？

誠如上面所述，我相信答案已經很明確了。由於你的設計提案必須非常紮實才能去說服你的利害關係人，所以讓你的設計可以「互動」絕對會是讓你的設計更上一層樓的好方法，同時你的設計也會更接近真實的產品體驗。

另外，如果你要為使用者設計體驗，那你在沒有親自使用過這個體驗之前，你要如何知道這個體驗到底感受起來如何呢？因此當你在製作原型時，你會有機會真正地去深入照顧處理到設計上的每一個細節，或是發現一些潛在的易用性問題，這些都是在設計靜態稿的時候可能無法發現到的。

最後很重要的一點，大部分人都是高度視覺化的動物， 在人們真正看到或感受到某個東西之前，要去視覺化這個東西並不是一件容易的事。 當然如果你很會講故事，也許你可以把聽眾帶入你的設計故事中並理解你的想法，但是當你手上有了原型，我相信你的論述會變得更加地吸引人和有說服力。

所以，原型到底要多接近真實產品？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

有些哪些工具可以用來做原型？

現在市面上有各式各樣的原型製作工具，每個工具都有不同的特色和優勢，其中大部分都有免費試用期，可以可以都玩玩看然後選擇一個喜歡的深入研究，當原型做得越多越熟練就可以實現更多效果，這些分享幾個大部分人最常使用的原型工具：

1. Figma / Sketch / Adob​​e XD

這些主要是UI設計工具，但也有提供基本的原型製作功能，讓設計師可以非常快速地建立頁面連結流程。

2. Invision

這個和上面的設計工具類似，Invision 是一個原型設計和協作工具，讓設計師可以製作頁面流程並能夠與整個團隊分享。它也有設計交付功能，讓工程師可以輕鬆查看元件的設計規格。

3. Axure

擁有各種功能的設計和原型工具，將整個設計過程可以一條龍用同一個工具來完成，它也提供許多先做好的功能元件，設計師可以馬上有現成的元件打灶互動原型，它也提供共享連結讓的每個人都到雲端試用你的原型。

4. Principle / Flinto / ProtoPie / Proto.io / UX Pin

這些工具其實都非常類似，儘管功能上可能有些不同，但是大致上都可以用它們來做一些需要比較多細節的互動和轉場，例如，可以點擊個元件來控制其他元素，或是呈現元件在不同頁面的變形狀態，這些功能可以讓你原型變得更加逼真。

5. FramerX

Framer X 專門做是高保真原型的工具，具有非常強大的功能，可以完美在設計和程式碼之間連結，即使對於設計師來說學習曲線有點高，但是用 FramerX 可以真的去做出功能完整的程式碼元件、串接 API 來呈現真實數據等等。

上面提到的工具各有優缺點和不同的學習曲線，我建議可以先試用之後再決定要投資學哪些工具。

你也可以參考下面的連結去看大部分原型工具的比較：

• Prototyping Tools‍
• Top 22 Prototyping Tools For UI And UX Designers 2020

💡關於原型設計，幾個可以留意的事情

• 大多數時候我們不需要在原型中重現整個產品體驗，我們只需要專注在核心的使用流程或是我們想要驗證的部分功能即可。
• 原型設計不是一次性的事情，它必須要是可以迭代和持續改進的。
• 原型不需要做到完美，如果有些部分真的很難做，只需要放假圖即可，原型主要是要用來獲得反饋和迭代的，不是要完美展示每一個細節。
• 做原型目的是個關鍵，要明智地選擇合適的原型方法去搭配你目前的流程的情況。
• 即使是高保真原型也不應該花費太長時間去製作，因為如果花費太長時間，我們將會少掉很多改善想法的機會。
• 如果要讓真實使用者去測試原型，請確保事先計劃好要使用者完成的任務，並確保你的原型足以讓你從使用者身上學到你想學的東西。
• 盡量把目標專注於進化你的設計和原型，這將會幫你要解決得問題帶來許多不同的解決方案。

總結：原型只是另一種幫助溝通的方式

身為設計師，我們都希望我們的設計能夠被實現並提供最好的使用體驗。 要讓我們的設計更有說服力和強壯往往不像我們想的那麼簡單，需要和很多人一起合作才能完成。

無論在我們的設計過程中裡做什麼，其實都與同個目標綁在一起，那就是：「打造最好的產品和體驗。」而這需要花費大量的設計迭代和數不清的溝通，而原型製作只是其中一種方法幫助設計師更好地闡述設計，以及通過思考細節讓自己的想法更精煉。