原型設(shè)計(jì)在整個(gè)產(chǎn)品階段中的存在，絕非偶然。它能最快最準(zhǔn)確的從用戶那里獲取產(chǎn)品信息的相關(guān)反饋。現(xiàn)如今，幾乎沒有任何一家產(chǎn)品公司能夠完全不采用原型設(shè)計(jì)。特別是伴隨原型設(shè)計(jì)變得越來越容易實(shí)現(xiàn)，其意義也越來越明顯，逐漸處于不可取代的地位。原型設(shè)計(jì)的必要性已無可非議，如何充分利用原型設(shè)計(jì)的優(yōu)勢(shì)才是應(yīng)該深思熟慮的問題。

1，原型設(shè)計(jì)的簡(jiǎn)單回顧

以防萬一，還是有必要說明一下原型設(shè)計(jì)的相關(guān)信息。

首先，看一下基本的產(chǎn)品階段：

1）想法生成

2）需求采集

3）功能與結(jié)構(gòu)

4）原型設(shè)計(jì)階段

5）PRD（絕大多數(shù)公司使用原型設(shè)計(jì)取代PRD文檔）

6）路線圖

產(chǎn)品階段的流程在很大程度上已經(jīng)說明了原型設(shè)計(jì)在整個(gè)生產(chǎn)過程中的作用和地位。設(shè)計(jì)者在整理了足夠豐富的思路，數(shù)據(jù)，信息，需求，評(píng)估等相關(guān)信息后，往往會(huì)將這些抽象的思維以原型的方式具體呈現(xiàn)出來。原型設(shè)計(jì)為非專業(yè)的股東們和用戶們提拱了一種最直觀的方式來理解設(shè)計(jì)者的思路和創(chuàng)造。

其次，最常見的原型類別：

手繪原型：打印或手繪方式表示軟件產(chǎn)品的用戶界面

用戶體驗(yàn)原型：要求說明產(chǎn)品的外觀和功能

視覺原型：注重尺寸和外觀，削弱功能

本文中，我將談?wù)撌褂迷驮O(shè)計(jì)工具制作的原型，它涉及到用戶體驗(yàn)和視覺要素等方面，也是如今最流行和最實(shí)用的原型設(shè)計(jì)方式。由于我已使用Mockplus多年，我將通過分析使用Mockplus制作的原型來具體說明如何充分利用好原型設(shè)計(jì)的優(yōu)勢(shì)。

2.原型設(shè)計(jì)的優(yōu)勢(shì)

想要他人對(duì)你的原型設(shè)計(jì)為之驚嘆嗎？先了解原型設(shè)計(jì)的優(yōu)勢(shì)是很有必要的，知其用其，才能游刃有余。

1）僅僅依靠靜態(tài)的高保真模型圖和線框圖是無法傳達(dá)充足的功能和交互效果。但原型設(shè)計(jì)可以實(shí)現(xiàn)動(dòng)態(tài)交互，能更直觀的傳達(dá)產(chǎn)品功能和動(dòng)畫。

2）與老板和用戶進(jìn)行有效溝通。他們了解您的設(shè)計(jì)越深入，你說服他們的幾率就越大。

3）更早地檢測(cè)錯(cuò)誤，降低時(shí)間和金錢成本。相信我，你寧愿在原型設(shè)計(jì)階段發(fā)現(xiàn)100個(gè)錯(cuò)誤，也不愿在開發(fā)階段發(fā)現(xiàn)1個(gè)錯(cuò)誤讓你止步不前。

4）加強(qiáng)團(tuán)隊(duì)成員內(nèi)部的協(xié)作。

5）收集用戶反饋和進(jìn)行多重測(cè)試。

3.原型設(shè)計(jì)的不足

洞悉原型設(shè)計(jì)的缺點(diǎn)可以最大限度避免陷入做原型設(shè)計(jì)不當(dāng)時(shí)的陷阱。

1）原型設(shè)計(jì)初期就一味追求做高保真原型。

高保原型的組成：線框圖、交互設(shè)計(jì)、邏輯判斷以及UI。不難看出，高保真原型必將消耗設(shè)計(jì)師更多的時(shí)間和精力。然而，除去時(shí)間等成本，高保真原型還將大大限制后期UI的發(fā)揮。

2）原型設(shè)計(jì)演示錯(cuò)??誤易導(dǎo)致設(shè)計(jì)想法的表述大打折扣。設(shè)計(jì)師100%的想法也許會(huì)因?yàn)椴磺‘?dāng)?shù)难菔舅p到50%。

3）用戶對(duì)原型和成品系統(tǒng)的誤解。用戶等非專業(yè)人員往往會(huì)有這樣誤解，尤其是針對(duì)高保真原型。會(huì)讓用戶產(chǎn)生這就是某個(gè)APP 的運(yùn)作方式，被設(shè)計(jì)者的思維模式所牽引，難以提出有效反饋。

4）忽略可行性。這很簡(jiǎn)單，很多邏輯和交互可能會(huì)在后期的開發(fā)階段不可實(shí)施。

4.如何充分利用原型設(shè)計(jì)的優(yōu)勢(shì)？

充分發(fā)揮優(yōu)勢(shì)，可以簡(jiǎn)單理解為，取長(zhǎng)避短。

這里我使用一個(gè)實(shí)例來說明：

首先，如下圖所示，看看這個(gè)原型是如何工作的：

應(yīng)用名稱：Gogobot

原型工具：Mockplus

Gogobot是一款旅游APP，共有28個(gè)互動(dòng)頁面和28張圖片。我曾經(jīng)邀請(qǐng)過一些朋友來體驗(yàn)這個(gè)原型，大多數(shù)人都誤以為他們正在使用一個(gè)真正的APP。此原型中，使用了Mockplus的顏色選擇器，加入了原始動(dòng)畫，并且使用Scroll Box組件實(shí)現(xiàn)水平和垂直滾動(dòng)等動(dòng)態(tài)效果，更多設(shè)計(jì)因素的使用，讓Gogobot成功贏得了用戶的青睞。

現(xiàn)在，具體講解一下我如何在此原型設(shè)計(jì)中最大限度的發(fā)揮了原型設(shè)計(jì)的優(yōu)勢(shì)：

1）實(shí)用功能性和合理的交互

從頭開始吧，看一下Start Page，頁面下有3個(gè)按鈕，為用戶提供了三種方式進(jìn)入到Welcome Page。用戶可以自由選擇使用Facebook帳戶登錄，注冊(cè)一個(gè)新帳戶，或者只是作為訪客跳過注冊(cè)直接瀏覽。每個(gè)選項(xiàng)都鏈接到相應(yīng)的目標(biāo)頁面。如果用戶對(duì)Gogobot感興趣并愿意注冊(cè)，只需點(diǎn)擊Sign Up按鈕，就可以到達(dá)注冊(cè)頁面。注冊(cè)頁面仍然為用戶提供了實(shí)際的選項(xiàng)。用戶可以填寫必要的信息來創(chuàng)建一個(gè)新的帳號(hào)，但也許該用戶意識(shí)到他已經(jīng)有了一個(gè)帳號(hào)，那么他就可以點(diǎn)擊已有賬戶按鈕在注冊(cè)頁面就能完成登錄，而不用先返回到登錄頁面再進(jìn)行登錄。這樣的設(shè)置是完全符合實(shí)用性的，并且用戶在體驗(yàn)交互時(shí)不會(huì)有困擾。

2）與您的老板、用戶和團(tuán)隊(duì)成員即時(shí)有效溝通。這里不得不提Mockplus的團(tuán)隊(duì)協(xié)作功能。讓多個(gè)團(tuán)隊(duì)成員可以協(xié)同操作編輯同一個(gè)項(xiàng)目。此外，批注和審閱功能更是錦上添花，它讓所有相關(guān)人員都可以自由地查看項(xiàng)目和發(fā)表評(píng)論。

3）避免高保真原型，采用統(tǒng)一風(fēng)格?？纯碒otel頁面。它使用Scroll Box組件進(jìn)行水平滾動(dòng)，并使用圖片組件作為占位符。這里是沒有必要選擇華麗的圖片告訴用戶這里表示的是一個(gè)酒店，但需要注意的是，保持整體的風(fēng)格一致。也就是說，在其他頁面上也無需使用高像素的圖片，使用圖片組占位即可。保持你的所有界面是一個(gè)整體。

4）做快速原型跟進(jìn)產(chǎn)品進(jìn)度?？纯碢rofile頁面，它包含了超過15個(gè)圖標(biāo)和1個(gè)觸發(fā)交互。時(shí)間成本在原型設(shè)計(jì)上至關(guān)重要，如果沒有這15個(gè)圖標(biāo)可供選擇，你將花費(fèi)更多的時(shí)間。Mockplus擁有3000多個(gè)SVG圖標(biāo)和將近200個(gè)高度封裝的組件。此外，通過簡(jiǎn)單拖拽鼠標(biāo)做鏈接，就可輕松實(shí)現(xiàn)交互。這一點(diǎn)也是原型設(shè)計(jì)相較于手繪原型的優(yōu)勢(shì)，元素都是現(xiàn)成的，拖拽點(diǎn)擊比手繪更快更逼真。

5）獲取用戶反饋并進(jìn)行多重測(cè)試。這是一個(gè)充滿吸引力和挑戰(zhàn)性的需求。我迫切想要知道我的設(shè)計(jì)是否符合需求。Mockplus提供了8種預(yù)覽方法可以幫助進(jìn)行快速測(cè)試。我最喜歡的是掃描生成的QR，能夠立即在本地設(shè)備上預(yù)覽原型，快捷方便，不需要USB連接?？焖贉y(cè)試是我檢驗(yàn)可行性問題的一大幫手。通過可用性測(cè)試，我可以知曉設(shè)計(jì)中的哪一部分存在錯(cuò)誤，哪一部分產(chǎn)生不良用戶體驗(yàn)，以及哪一部分需要改進(jìn)和反思。為產(chǎn)品策略的調(diào)整及時(shí)導(dǎo)航。

在線查看該原型:http://run.mockplus.cn/demo/index.html

那么這個(gè)原型是如何做出來的呢？請(qǐng)看教程：http://doc.mockplus.cn/?p=1668

好的原型設(shè)計(jì)可以說是產(chǎn)品成功的一半。充分發(fā)揮原型設(shè)計(jì)的優(yōu)勢(shì)，物盡其用，必將有助于創(chuàng)造出優(yōu)秀的產(chǎn)品。感謝您的閱讀，如有任何意見，歡迎發(fā)表評(píng)論。另外，我在這里展示的Gogobot是由原型工具M(jìn)ockplus制作的。我并非是要對(duì)你的原型工具選擇進(jìn)行一些指手畫腳的暗示，僅僅是因?yàn)槲沂褂玫氖?a target="_blank" rel="nofollow">Mockplus，并且它的功能恰如其分的滿足我充分利用原型設(shè)計(jì)的優(yōu)勢(shì)。