原型設計是什麼,該怎麼使用它?

2020-12-13 人人都是產品經理

做網際網路產品的小夥伴一定不會對「原型」這個詞感到陌生。它就像「用戶體驗」一樣經常被各類人掛在嘴邊。它有許多近義詞，如線框圖、故事板等。那麼究竟什麼是原型設計，我們為什麼需要原型設計，如何進行原型設計呢？

本文將梳理關於原型的前世今生，弄清楚它到底是個啥，我們如何使用它。

原型設計是什麼

原型是一種讓用戶提前體驗產品、交流設計構想、展示複雜系統的方式。就本質而言，原型是一種溝通工具。

線框圖描繪的是頁面功能結構，它不是設計稿，也不代表最終布局，線框圖所展示的布局，最主要的作用是描述功能與內容的邏輯關係。

原型圖是最終系統的代表模型或者模擬，比線框圖更加真實、細緻。


原型設計在產品設計中所處的位置

原型設計的目的

很難想像一個沒有原型的產品是如何誕生的。

原型設計的核心目的在於測試產品，沒有哪一家網際網路公司可以不經過測試，就直接上產品和服務。

原型在識別問題、減少風險、節省成本等方面有著不可替代的價值。

雖然需求文檔也是可以滿足溝通需求的，通過用例將交互寫到設計描述文檔中，但是原型可以更詳細地解釋交互。

你可以用屏幕錄製軟體或者用一隻手機對著屏幕拍攝下你操作原型的過程，邊錄製可以邊評論，比如：「我現在有點暈了，不知道該怎麼操作，或許點擊這裡看看……哎呀，好像點錯了。」

原型設計的流程

開始做原型之前，請先考慮清楚以下幾個要素：

  • 做這個原型的目的是什麼？
  • 這個原型的受眾是誰？
  • 這個原型有多大效率幫助我傳達設計或測試設計？
  • 有多少時間做原型？需要什麼級別的保真程度？

原型設計流程

步驟一：畫草圖

畫草圖的目標是提煉想法，並且最好給畫草圖加上一個時間限制，那就是15分鐘。如果你繪畫能力很差，那麼恭喜你，可能你能更好地用好草圖，因為你的注意力沒有放在美化你正在畫什麼上面。

畫草圖要避免陷入審美細節，儘可能快速的導出想法才是關鍵。


用紙筆畫的用戶個人帳戶的草圖示例

用HTML代碼製作的相親網站個人收集頁面草圖

步驟二：演示及評論

演示和評論的目標是把一些想法拿出來跟大家分享，然後進一步完善想法。在演示過程中，要做好記錄，演示和評論的時間可以對半分。

步驟三：做原型

在明確了想法之後，就可以開始進行原型設計了。這個階段需要考慮很多細節，找出切實可行的方案，運用合適的原型來表達。

步驟四：測試

原型的目標之一是讓受眾來檢驗產品是否達到了預期，因此可以請5-6位測試者，通過音視頻捕捉等方式，看看產品原型是否被順暢地使用了。

原型設計工具

選擇什麼工具來製作原型？主要考慮以下幾個因素（排名分先後）：

  • 熟悉程度和獲得工具的便利度；
  • 所需的時間和精力；
  • 可復用的代碼/框架；
  • 為測試創建可用的原型；
  • 價格和學習曲線。

常用原型設計工具調查結果（2013年），出處：toddwarfel.com

不得不說，這個結果很讓人吃驚，沒想到有那麼多人用Dreamweaver做原型，在這裡我介紹兩種我經常用到的原型設計工具。

PPT和Keynote

優點：

  • 技術門檻低，學習曲線不陡峭；
  • 可用幻燈片母版，復用性高；
  • 模擬移動端產品，修改畫板適應手機端尺寸即可；
  • 可導出為HTML或PDF文件；

缺點：

現在非常流行把Sketch與Keynote放在一起用，簡單說就是把Sketch裡的圖層、部件拖拽到Keynote中，然後添加Action動作，按照劇本完成一套交互。

Axure RP

Axure的優點不用多說，但使用它一個工具就能滿足設計和文檔需求（通過註解，生成規格文檔）。

Axure自帶的部件庫也給製作過程帶來了便捷，類似Omnigraffle的stencil一樣，避免了重新發明輪子。

要掌握Axure，主要應該弄懂四大核心功能：

  • 母版：主要用於製作網頁的頁頭、頁尾，可復用性高；
  • 動態面板：核心中的核心，「層」的概念很重要；
  • 圖片熱區：在一張完整的圖片上通過熱區，建立交互動作；
  • 函數和變量：局部變量和全局變量的概念以及應用（比如用戶登陸效果）。

Axure 7.0還有中繼器這個功能，但是個人覺得比較雞肋，學習成本也比較高，主要可以用來做搜索框的搜索結果聯想的原型。

原型測試流程

原型測試是原型設計過程中的關鍵步驟，是整體流程中主要的裡程碑之一。

可用性測試是一個龐大的話題，測試方法有一對一或者遠程測試，難點是從測試中得到有質量的成功。

測試結果取決於測試者，務必招募到合適的人。要找到合適的人，需要對測試者制定一系列的篩選標準，比如一個社交產品絕對不可能找一個連電子郵件都沒有的人來測試。

測試時長可以是一個小時左右，足以測試5個到6個左右的關鍵場景，並列出一些觀察結果和關鍵問題，例如：

  • 用戶如何開始任務的？（是搜索還是瀏覽？）
  • 他先做了什麼，再做了什麼？
  • 他如何做出最終決定的？
  • 他們是否領會了設計意圖？有什麼操作困難？

關於記錄測試結果，可以結合定性和定量兩種方式，做一張計分表，用1-5的程度來表示；同時定性地記錄用戶的一些表達，儘可能地原話記錄。

最後分析這些記錄，改善設計。

產品原型設計或者說產品開發是沒有盡頭的，它是一個不斷發展，循環上升，整合知識和經驗，不斷迭代和完善過程。

#專欄作家#

粽小喵，微信公眾號：zong_xiaomiao，人人都是產品經理專欄作家。騰訊產品經理。一個學傳播出身的產品新人，愛好研究原型設計工具。

本文原創發布於人人都是產品經理，未經許可，不得轉載。

相關焦點

  • 什麼才是正確的原型設計?
    互動設計中最重要的挑戰往往是界面：它應該是友好的，直觀的，最好是一目了然的。在開發的過程中會不斷地出現一些必須用原型的方式來解釋的問題：用戶感知到了什么元素？組件是如何交互的，整個系統背後的邏輯是怎樣的？這種邏輯用戶是否能快速的理解？操作是否會令人困惑？原型能夠幫助解答建立在使用價值之上的實際問題，以此做出最好的設計方案。但是什麼樣的原型適合一個交互項目的什麼階段呢？
  • 以個人書架業務為例,解析原型圖的設計流程
    原型圖到底該怎麼畫？這是大多產品經理入門時遇到的問題。有人會把原型圖畫成一幅精美的設計圖；也有人在紙上手繪線框圖；甚至有人不畫圖直接就進入開發了。本文作者從自身工作經驗出發，結合實際業務對如何設計原型圖進行了分析。
  • 互動設計秘密武器|軟體兵器譜之原型設計軟體
    該軟體的界面十分簡潔高效，作為Adobe出品，很多熟悉了Photoshop和Illustrator的朋友們可以很輕鬆的掌握這個工具的使用邏輯，所該軟體一經發布，就吸引了一部分Adobe迷的回歸，嘗試使用和熟悉其關於UI設計方面的新功能。與Sketch不同，Adobe XD支持Mac和Windows10的作業系統，無論是你是哪種系統的用戶，都可以嘗試。
  • 規範流程下的原型設計——你的原型真的有價值嗎?
    後來我發現，這是一種原型的濫用，這個產品經理並不理解真正的原型應該如何發揮在設計過程中的作用。可以說，當下很多設計人員包括PM並未真正理解原型這種工作方法，或者片面畸形的理解了原型設計。那麼原型的真正意義和作用是什麼？一圖勝前言，一個原型勝過一千次會議。
  • 15款優秀移動APP產品原型設計工具
    算是移動App原型設計神器 ，很多公司在用：quora、sina、豆瓣、36氪、ifanr…操 作輕巧簡單：先用手機拍下草圖原型(存到POP app內)；然後開始編輯圖片的哪個區域（按鈕）連結到什麼頁面，添加跳轉連結熱區，就可以在iPhone上給小夥伴們演示了，並且POP內嵌的交互動作 如側滑、展開、消失等，即可滿足一般的動態演示需要。不太明白？
  • 「原創」讓設計模式飛一會兒|④原型模式
    今天我們繼續設計模式的探索之路。前幾篇的內容有小夥伴還沒有閱讀過的，可以閱讀一下。今天我們接下來要聊的是原型模式。何為原型？維基百科上給出的概念：原型是首創的模型，代表同一類型的人物、物件、或觀念。以我的理解能力解釋一下，就是說，它是一種類型的首創對象。在面向對象編程中，所謂的類型就是指類，也就是說，它是這個類的一個源實例。為什麼需要原型模式？我還是堅持前面幾篇一貫的風格，在深入了解該模式之前，先來思考一下，這個模式它出現的原因以及存在的意義是什麼？
  • 產品早期的原型設計與用戶測試
    基於高保真原型的用戶測試，可以讓很多關於需求、功能、界面設計等方面的潛在問題儘早暴露出來；這類問題往往直接關乎著產品的成敗。　　另外，原型階段的工作非但不代表「耗時」與「高成本」，實際上正相反。從整個項目的角度講，在原型的設計與測試過程中發現問題並加以解決，比將問題留到視覺設計和開發流程中再處理，要省時省力的多。
  • 總結了6個常見的原型設計的陷阱
    目標不明確的原型設計我們先設計出來，然後弄明白如何使用它。在這種說法的指引下，設計和開發團隊需要花費大量的時間來處理那些沒有任何價值的事務，在沒有特定目標的情況下製作原型，會浪費大量的時間。每個原型的設計目標應該是非常明確的，原因應該是清晰的。
  • 淺析JavaScript原型設計模式
    在JavaScript中創建對象，對於JavaScript開發者來說，會有很多種方法去創建，本文將剖析JavaScript原型設計模式，在大多數地方，可以使用這種原型屬性來分享對象中的實例方法。
  • 後臺產品設計系列:原型設計五大要點(四)
    原型對於產品經理來說是一門必修課，本篇文章作者總結了後臺原型設計五大要點，主要針對剛入行後臺設計經驗不太豐富的同學。對於很多初次設計後臺的產品經理而言，原型是個很大的問題，因為平時接觸的少，競品又難以獲取，連個抄的地方都沒有，所以即使胸中需求千千萬，也不知道怎麼表現。
  • 美白安瓶是什麼?它到底該怎麼使用?
    美白安瓶是什麼？美白安瓶，就是一種安瓶產品的類型之一。美白安瓶最獨特的，就是它會添加高濃度的美白活性成分，因此會比普通美白產品效果更強。也可以說，美白安瓶可以在最短時間內讓你的膚色瞬間亮起來，所能維持的美白效用也會更高！
  • 原型的奧秘:如何做一個正確的原型?
    但是，不進行原型設計的成本不僅僅是財務成本，它也是時間成本。項目停滯不前，你錯過了最後期限，失去了機會。該公司浪費時間，因為他們正在建設的內容不明確。這一次最終將耗費組織的資金和市場份額，同樣，這具有諷刺意味，因為反對原型設計的另一個論點是缺乏時間。再一次，我認為你沒有時間不去製作原型。
  • 產品經理(PM)常用原型圖設計工具
    與一般針對產品功能的介紹不同，本文以親身的設計需求為出發點，通過對產品整理和提供相關的連結，幫助解決從業人群對做產品頁面原型的直接需求。可以為做產品設計的童鞋提供一些參考和下載幫助。
  • 1小時學習原型設計&互動設計知識
    很多想成為產品經理的小夥伴，想知道精美炫酷的APP界面是如何通過原型設計和互動設計做出來的。本次公開課，我們將帶大家了解原型設計&互動設計基礎知識。什麼是原型設計？原型的目標在於清楚的表達產品的設計樣式和功能執行邏輯，並輔助產品經理與UI和技術的溝通產品思路，能提高溝通效率。（原型設計圖）什麼是互動設計？先想像一下你是如何使用餓了麼點外賣的？
  • 產品原型設計之交互體驗的思考過程(一)
    當我拿到產品或者界面功能結構圖時，我首先會做以下三點考慮：該產品定位是什麼，我希望用戶擁有什麼樣的體驗【至關重要，考慮到每一個細節問題】對界面邏輯功能分析，我需要和那些功能打交道不過，在這裡，我要說明一下我這裡所犯的錯誤–作為互動設計師，自己在空想用戶使用產品的過程，雖然很多時候我們需要模擬用戶使用產品的場景，也許用戶的大多使用習慣，是我們在過去的經驗中、在自己的使用場景中、在書本中，是可預見的，但是有時候自信的一味的空想模擬，就會忽視很多的用戶細節，如果被忽視的細節一旦多了，那差距想必會影響整個產品的用戶體驗。
  • 宏觀角度:原型圖的交互說明該怎麼寫
    原型圖的交互說明是針對原型圖內容元素的解釋文字，可以從宏觀和微觀兩個層面展開分析，本文結合圖例主要說明宏觀角度輸出交互說明應該注意的地方。原型圖的交互說明是針對原型圖內容元素的解釋文字。
  • 網頁設計七個實例!教你擺脫「照搬原型圖」的設計
    像這樣伴隨著兩種能力的提高，就可以靈活應對，諸如從原型圖中應該提取什麼信息，在設計時要如何表現等一系列問題。優秀的設計，往往都不是照搬原型圖的那種。1、自由的決定細節元素的尺寸和位置原型圖是為了確定像導航這種大模塊的位置和順序，大多還未考慮到模塊內的布局。如何排版能更方便用戶使用，設計師在設計的時候應該有自己的考慮。
  • 設計模式|原型模式及典型應用
    前言本文的主要內容如下：介紹原型模式示例Java語言的clone淺克隆與深克隆實現深克隆原型模式的典型應用原型模式原型模式(Prototype Pattern)：使用原型實例指定創建對象的種類，並且通過拷貝這些原型創建新的對象。原型模式是一種對象創建型模式。
  • 如何設計規範的原型圖?
    首先需要了解交互稿和原型圖的聯繫與區別：按照常規的工作流程，互動設計師最終交付的產物包括任務流程圖、信息架構圖、頁面原型圖、頁面交互說明、頁面流程圖，這些都可以歸納到互動設計文檔中。因此原型圖只是交互稿的一部分，本文將鋪開闡述設計規範的原型圖應該注意哪些。
  • 墨刀原型設計教程:碾壓axure和mockplus第一次畫原型圖就上手!
    作為一個產品經理或者互動設計師，甚至是一個產品運營，不會畫原型圖簡直會被鄙視，面對市面上的墨刀原型、axure和mockplus，到底哪一款原型設計軟體和服務更好呢？今天就教大家第一次用墨刀原型畫原型圖就上手！最後還有彩蛋哦！