原型圖到底該怎么畫？這是大多產(chǎn)品經(jīng)理入門時(shí)遇到的問題。有人會(huì)把原型圖畫成一幅精美的設(shè)計(jì)圖；也有人在紙上手繪線框圖；甚至有人不畫圖直接就進(jìn)入開發(fā)了。本文作者從自身工作經(jīng)驗(yàn)出發(fā)，結(jié)合實(shí)際業(yè)務(wù)對(duì)如何設(shè)計(jì)原型圖進(jìn)行了分析。

一、業(yè)務(wù)說(shuō)明

上一篇文章我結(jié)合業(yè)務(wù)總結(jié)了頁(yè)面流程圖的畫法，今天依舊結(jié)合個(gè)人書架的業(yè)務(wù)來(lái)說(shuō)說(shuō)原型圖的設(shè)計(jì)方法，也算是一個(gè)工作流程的梳理吧。

首先了解下需求：家里孩子的書太多，該怎么歸納和整理?

1. 需求分析

目標(biāo)用戶定位：學(xué)齡前和中小學(xué)生的家長(zhǎng)（包括中小學(xué)有自主能力的學(xué)生）

使用場(chǎng)景分析：

場(chǎng)景1：家里有個(gè)學(xué)齡前的小寶寶，家長(zhǎng)給賣了很多繪本，這些繪本有些是講親情的有些是培養(yǎng)情商的，家長(zhǎng)想建立個(gè)分類進(jìn)行歸納，在親子閱讀的過(guò)程中創(chuàng)建閱讀主題環(huán)境

場(chǎng)景2：上小學(xué)三年級(jí)的學(xué)生家里有很多課外書，讀過(guò)的沒讀過(guò)的放在一起，需要進(jìn)行歸類學(xué)習(xí)，同時(shí)讀過(guò)的書也需要隨時(shí)記錄讀書筆記加強(qiáng)沉淀

2. 痛點(diǎn)分析

1. 家長(zhǎng)不知道孩子具體有什么書，哪些讀過(guò)哪些沒讀；
2. 孩子讀過(guò)的書積累的知識(shí)和想法缺少輸出的環(huán)境

頁(yè)面流程圖說(shuō)明:

這個(gè)頁(yè)面流程圖說(shuō)明了需求的業(yè)務(wù)邏輯，用戶需要通過(guò)App掃描圖書背后條形碼識(shí)別圖書信息，根據(jù)圖書信息判斷是否已經(jīng)加入過(guò)書架然后跳轉(zhuǎn)到相對(duì)應(yīng)的頁(yè)面并展示相關(guān)元素，這個(gè)邏輯在上一篇頁(yè)面流程圖的文章里已經(jīng)說(shuō)過(guò)了這里就不再重復(fù)了。

那業(yè)務(wù)邏輯已經(jīng)清晰了，下一步就該進(jìn)入原型圖的設(shè)計(jì)了，在這之前，先來(lái)了解一下原型圖的概念

二、原型圖設(shè)計(jì)

原型圖就是在產(chǎn)品成型之前的一個(gè)簡(jiǎn)單框架，將頁(yè)面的重要元素和功能模塊簡(jiǎn)單豪邁的進(jìn)行布局和排版，加入點(diǎn)擊交互事件形成的產(chǎn)品最初始的設(shè)計(jì)圖。說(shuō)到這里其實(shí)就可以將原型圖分為靜態(tài)原型和交互原型。

1. 靜態(tài)原型

以頁(yè)面流程圖中–1.書架首頁(yè)—為例，該頁(yè)面的主要模塊是展示已加入的圖書列表和掃一掃按鈕，那么在靜態(tài)頁(yè)面中就要展示這兩個(gè)元素。先看已加入的圖書列表，在頁(yè)面流程圖的設(shè)計(jì)中已經(jīng)思考了頁(yè)面應(yīng)該放什么，這個(gè)模塊就該考慮用戶想在這個(gè)模塊中看到什么，考慮的是視覺效果和頁(yè)面體驗(yàn)的問題。

比如圖書列表首先應(yīng)該包含圖書列表的名稱，是否需要背景圖，是否應(yīng)該顯示該列表中的圖書數(shù)量等等，需要掃碼這些都是靜態(tài)原型中產(chǎn)品經(jīng)理應(yīng)該思考和與設(shè)計(jì)UI溝通的問題。

2. 交互原型

“ 交互設(shè)計(jì)(英文Interaction Design, 縮寫IXD)，是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域，它 定義 了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達(dá)成某種目的。交互設(shè)計(jì)努力去創(chuàng)造和建立的是人與產(chǎn)品及服務(wù)之間有意義的關(guān)系。交互系統(tǒng)設(shè)計(jì)的目標(biāo)可以從”可用性”和”用戶體驗(yàn)”兩個(gè)層面上進(jìn)行分析，關(guān)注以人為本的用戶需求 ?！?/p>

關(guān)于對(duì)交互設(shè)計(jì)的解釋我們看到了“可用性”和“用戶體驗(yàn)”，這兩點(diǎn)就是交互的意義。“可用性”是指需求邏輯和功能邏輯的跳轉(zhuǎn)對(duì)于用戶來(lái)說(shuō)是有效的，也就是說(shuō)符合用戶使用需求的?！坝脩趔w驗(yàn)”是指用戶使用的實(shí)際感受。這兩者是相輔相成的，當(dāng)然可用性是一個(gè)系統(tǒng)的基礎(chǔ)條件，只有滿足可用性的基礎(chǔ)上才能去談?dòng)脩趔w驗(yàn)，所以產(chǎn)品在設(shè)計(jì)原型的時(shí)候一定要分清主次，先把握需求的完整性再去關(guān)注用戶體驗(yàn)。

現(xiàn)在來(lái)看加上交互的原型，當(dāng)點(diǎn)擊左上角“掃一掃”時(shí)跳轉(zhuǎn)到打開相機(jī)的頁(yè)面，而點(diǎn)擊列表時(shí)進(jìn)入列表詳情頁(yè)面，這就是原型的交互。還包括點(diǎn)擊時(shí)的提示、彈出、展開等等。

三、原型的作用

1. 驗(yàn)證用戶需求和反饋，向相關(guān)方展示需求的視覺效果

當(dāng)客戶表述需求時(shí)往往說(shuō)的只是一個(gè)個(gè)分散的點(diǎn)，產(chǎn)品經(jīng)理要做的就是將這一個(gè)個(gè)點(diǎn)具像成可視化的閉環(huán)。那在這個(gè)過(guò)程中就會(huì)存在比如客戶表達(dá)的不全面或者產(chǎn)品經(jīng)理沒有理解客戶的真實(shí)意圖（這里就突出需求挖掘和需求分析的重要，不對(duì)需求層面進(jìn)行說(shuō)明了），所以就需要通過(guò)原型圖向用戶展示需求的視覺效果，讓用戶直觀的看到最終呈現(xiàn)和操作流程，就會(huì)更加有效的驗(yàn)證用戶需求，得到直接和具體的反饋

2. 幫助更好的與團(tuán)隊(duì)成員溝通

原型圖對(duì)用戶是一個(gè)展示作用，對(duì)于執(zhí)行團(tuán)隊(duì)更是產(chǎn)品經(jīng)理闡釋和說(shuō)明需求的有利工具。讓團(tuán)隊(duì)明白要做什么，借助原型圖對(duì)產(chǎn)品功能進(jìn)行一一說(shuō)明。產(chǎn)品經(jīng)理的職責(zé)就是幫助團(tuán)隊(duì)做正確的事，明確目標(biāo)才能根據(jù)各自的崗位職責(zé)進(jìn)行模塊的開發(fā)。

四、原型的要求

1. 說(shuō)明業(yè)務(wù)邏輯和頁(yè)面元素

原型最基本的要求就是要說(shuō)明業(yè)務(wù)邏輯和頁(yè)面元素，使閱讀對(duì)象明白這到底是一個(gè)什么產(chǎn)品，通過(guò)靜態(tài)原型和交互原型完整的展示出用戶需求。原型是業(yè)務(wù)需求的階段的最后一步，也是至關(guān)重要的一步。

2. 原型不是設(shè)計(jì)圖

原型同樣是進(jìn)入開發(fā)階段的第一步，將功能邏輯和頁(yè)面需求完整的展示出來(lái)。但原型圖并不是設(shè)計(jì)圖，不需要太過(guò)完美追求高保真，清楚明白即可。原型好壞的判斷依據(jù)是產(chǎn)品經(jīng)理思維邏輯和需求理解的產(chǎn)出結(jié)果，而不是畫原型的能力，我一直認(rèn)為專業(yè)的事情應(yīng)該讓專業(yè)的人做，如果對(duì)于頁(yè)面設(shè)計(jì)上有想法可以和UI進(jìn)行溝通，不必過(guò)于追求高保真而因此浪費(fèi)時(shí)間和精力。

五、原型的步驟

1. 手繪線框圖

整理好頁(yè)面流程圖后，基本的大框就出來(lái)了，這時(shí)候可以趁著思路用筆在紙上簡(jiǎn)單用線條勾勒原型的樣子，幫助進(jìn)一步理清思路。不知道別的產(chǎn)品經(jīng)理會(huì)不會(huì)這樣，我一般是習(xí)慣現(xiàn)在紙上畫畫，通過(guò)手繪能更容易打開思維，進(jìn)行更深一步的思考。

2. 使用工具整理完整原型圖

使用常見的原型圖工具即可，比如Axure、墨刀等。將畫在紙上的線條通過(guò)原型工具中的按鈕、圖標(biāo)icon等元素展示出來(lái)，這時(shí)候會(huì)更加清楚想要什么效果。關(guān)于原型軟件的使用以快速高效為主，軟件只是畫原型的工具，會(huì)使用多個(gè)軟件也只是多一項(xiàng)硬技能，對(duì)于工具的使用個(gè)人認(rèn)為能說(shuō)明意圖即可，產(chǎn)品經(jīng)理更多的還是應(yīng)該提升自身軟技能比如思維、溝通等等。

原型是考量產(chǎn)品經(jīng)理能力的重要標(biāo)準(zhǔn)之一，但我們要做的并不只是“畫”好原型圖，而是要“做”好原型圖，讓原型圖真正發(fā)揮作用。

本文由 @花卷er 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。