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

3 評論 86247 瀏覽 295 收藏 9 分鐘

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

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

原型設計是什么

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

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

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

1209576-3b1ad68f08ebb2a9
原型設計在產品設計中所處的位置

原型設計的目的

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

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

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

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

你可以用屏幕錄制軟件或者用一只手機對著屏幕拍攝下你操作原型的過程,邊錄制可以邊評論,比如:“我現在有點暈了,不知道該怎么操作,或許點擊這里看看……哎呀,好像點錯了?!?/p>

原型設計的流程

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

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

1209576-8c140275f321ef99

原型設計流程

步驟一:畫草圖

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

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

1209576-b421c821f69c8bdc
用紙筆畫的用戶個人賬戶的草圖示例

1209576-e89e8f9d4a128e40

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

步驟二:演示及評論

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

步驟三:做原型

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

步驟四:測試

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

原型設計工具

選擇什么工具來制作原型?主要考慮以下幾個因素(排名分先后):

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

1209576-344fedd7d7daaea5

常用原型設計工具調查結果(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,人人都是產品經理專欄作家。騰訊產品經理。一個學傳播出身的產品新人,愛好研究原型設計工具。

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 我想了解原型需要做到什么程度,各種交互都需覆蓋,還是開發看得明白就行了?

    來自廣東 回復
    1. 根據時間要求來定,時間長則做的細,時間短則做的粗,本身沒有標準。

      來自四川 回復
  2. ??

    來自浙江 回復