原型根據(jù)頁面的保真程度可以劃分為草圖、低保真和高保真。在進(jìn)行原型設(shè)計(jì)之前，我們需要根據(jù)使用場景的不同、使用人群的不同，甚至是項(xiàng)目的不同階段，我們需要產(chǎn)出設(shè)計(jì)不同保真度的產(chǎn)品原型。本文將從設(shè)計(jì)需求、使用場景來說明這三類原型圖的不同之處。

一、草圖

草圖通常用于產(chǎn)品早期的概念階段。項(xiàng)目立項(xiàng)的早期階段，大家對(duì)于產(chǎn)品的功能及業(yè)務(wù)場景上都處于一個(gè)規(guī)劃階段，沒有明確成熟的產(chǎn)品方案。團(tuán)隊(duì)成員在進(jìn)行項(xiàng)目規(guī)劃時(shí)進(jìn)行一些頭腦風(fēng)暴的會(huì)議，這個(gè)時(shí)候我們需要一個(gè)能夠快速呈現(xiàn)產(chǎn)品雛形的原型，且便于及時(shí)修改。

這個(gè)階段的原型大部分都是手繪稿，大家在一邊討論產(chǎn)品功能，一邊直接繪制產(chǎn)品原型。

這個(gè)階段的原型大部分都是在白板或者在白紙上手繪完成，在討論的過程中發(fā)現(xiàn)問題，及時(shí)修改。如果涉及的界面較多，當(dāng)然也可以利用原型設(shè)計(jì)工具如Axure進(jìn)行設(shè)計(jì)。

草圖原型能夠表達(dá)出基本的界面功能及內(nèi)容布局即可，利用基本的幾何圖形如方框、圓和一些線段表達(dá)產(chǎn)品雛形，只需要參與討論會(huì)議的人員明白大概意圖即可。

草圖的優(yōu)勢在于設(shè)計(jì)成本低，能夠隨時(shí)進(jìn)行修改，在項(xiàng)目早期有很多不確定因素的前提下，盡量使用草圖進(jìn)行討論評(píng)審。

草圖原型使用人群：項(xiàng)目發(fā)起人、項(xiàng)目立項(xiàng)成員。

二、低保真

當(dāng)我們明確了產(chǎn)品的業(yè)務(wù)需及使用場景以后，產(chǎn)品經(jīng)理和交互設(shè)計(jì)師們可以使用低保真原型來較快的設(shè)計(jì)產(chǎn)品的概貌。

產(chǎn)品經(jīng)理和交互設(shè)計(jì)師們通過項(xiàng)目早期階段已經(jīng)明確了產(chǎn)品的功能需求及業(yè)務(wù)范圍，基本上已經(jīng)知道了產(chǎn)品需要做什么。

根據(jù)業(yè)務(wù)會(huì)議上確定的產(chǎn)品方案，首先需要梳理清楚產(chǎn)品的功能結(jié)構(gòu)和信息結(jié)構(gòu)，根據(jù)業(yè)務(wù)需求推導(dǎo)出詳細(xì)的功能點(diǎn)。

好了，通過這些工作產(chǎn)品的戰(zhàn)略目標(biāo)、需求范圍、功能結(jié)構(gòu)都已經(jīng)清楚了。

下面就可以開始正式繪制線框圖了，線框圖又稱為低保真原型。

線框圖可以幫助我們準(zhǔn)確拆分頁面、以及每個(gè)頁面的功能模塊及展示信息，確定每個(gè)頁面元素的界面布局。

線框圖與草圖相比較而言，視覺顯示及意圖表達(dá)上更準(zhǔn)確了。

線框圖的繪制必須借助于原型設(shè)計(jì)工具了，一般情況下我們可以使用Axure繪制線框圖，利用Axure提供了系統(tǒng)元件可以快速完成線框圖的繪制。

線框圖中的元素布局以及功能模塊需要無限接近產(chǎn)品上線后的樣子。

當(dāng)然了低保真原型階段我們不要考慮界面元素的配色以及各功能的交互跳轉(zhuǎn)及動(dòng)畫效果。

界面的配色是專業(yè)的UI設(shè)計(jì)師的工作，豐富的交互動(dòng)作也不宜在這個(gè)階段去詳細(xì)分析。

通常查看低保真原型完成后，需要與需求提出人員、UI設(shè)計(jì)師、前端工程師、后端工程師以及測試人員進(jìn)行召開原型設(shè)計(jì)評(píng)審會(huì)，根據(jù)評(píng)審結(jié)果，需要對(duì)低保真原型進(jìn)行多輪調(diào)整，直至大家達(dá)成一致結(jié)果，確保能往下推進(jìn)。低保真原型確定后，UI設(shè)計(jì)師及開發(fā)工程師們可以據(jù)此進(jìn)行項(xiàng)目實(shí)施了。

低保真原型使用人群：需求提出人、UI設(shè)計(jì)師、開發(fā)公工程師和測試工程師。

三、高保真

高保真原型常用于向高層領(lǐng)導(dǎo)進(jìn)行產(chǎn)品演示或者向投資人演示產(chǎn)品概念，以尋求項(xiàng)目融資。

高保真原型又可以成為產(chǎn)品的Demo，除了沒有真實(shí)的后臺(tái)數(shù)據(jù)進(jìn)行支撐外，幾乎可以模擬前端界面的所有功能，完全是一個(gè)高仿產(chǎn)品。

對(duì)于一些非IT科班出身的高層領(lǐng)導(dǎo)、老板及投資人，如果我們希望他們能夠盡可能詳細(xì)的了解產(chǎn)品的功能及業(yè)務(wù)需求，這個(gè)時(shí)候低保真原型并不一定使用，因?yàn)樗麄兛偸悄軌驈牡捅Ｕ嬖椭姓业揭恍┧麄儾焕斫獾摹皢栴}”。因此在這個(gè)時(shí)候，他們希望看到的是一個(gè)無線接近線上產(chǎn)品的高仿Demo，從視覺顯示以及交互動(dòng)作上都和真實(shí)產(chǎn)品大致相同。

高保真原型需要在低保真的基礎(chǔ)上進(jìn)行配色，插入真實(shí)的圖片及icon圖標(biāo)。充分利用Axure中每一類元件的樣式及專有的交互屬性為原型增加保真度，為相關(guān)的元件及頁面添加交互事件、配置交互動(dòng)作。這樣從視覺顯示及交互設(shè)計(jì)來看，就是一個(gè)完全高仿的Demo原型。

高保真原型使用人群：高層領(lǐng)導(dǎo)、老板、投資人以及其他的重要決策人。

四、結(jié)語

通過上文的講述，我們現(xiàn)在已經(jīng)知道了在明確當(dāng)前的項(xiàng)目階段及使用人群后，再?zèng)Q定什么樣保真度的原型才是最合適的。我們既不能為了簡單省事而總是使用草圖，也不能一味的追求炫技直接設(shè)計(jì)高保真原型，而是綜合評(píng)估上述因素。

在通常的工作當(dāng)中，我們使用最多的是低保真原型，畢竟項(xiàng)目團(tuán)隊(duì)的實(shí)施人員才是最關(guān)心產(chǎn)品原型的人員。

低保真原型也能較為準(zhǔn)確的闡述項(xiàng)目需求，一些簡單的交互跳轉(zhuǎn)及交互效果，行業(yè)內(nèi)的小伙子們一看便知。

當(dāng)然了有些業(yè)務(wù)規(guī)則及交互細(xì)節(jié)上的效果，還需要配以說明文檔，這樣才能方便開發(fā)及測試人員深刻理解產(chǎn)品需求。