一、網站原型設計工具設計的原型有幾種

原型設計工具有在線的網站版和客戶端版，不管是哪種原型設計工具，其設計(ji)的(de)原(yuan)型(xing)(xing)(xing)都是一樣的(de)，原(yuan)型(xing)(xing)(xing)類型(xing)(xing)(xing)一般(ban)按保真度分(fen)為低保真原(yuan)型(xing)(xing)(xing)、中保真原(yuan)型(xing)(xing)(xing)和(he)高保真原(yuan)型(xing)(xing)(xing)三種(zhong)：

1、低保真原型

低(di)(di)保真原型呈現的(de)(de)是初(chu)步的(de)(de)概念和想法，可以使用(yong)不(bu)同的(de)(de)媒介，擁有不(bu)同尺寸的(de)(de)原型界面。這種(zhong)原型是最簡單和便(bian)宜的(de)(de)，更(geng)換成(cheng)本最低(di)(di)，包括草圖、紙質原型、線(xian)框圖等：

（1）草(cao)圖(tu)：草(cao)圖(tu)是最(zui)初的(de)想法或假設，基于業務流程的(de)梳理，結(jie)合信息架構，將核心的(de)用戶操(cao)作界(jie)面(mian)繪制(zhi)(zhi)出來，可以(yi)是白板(ban)草(cao)圖(tu)，紙質草(cao)圖(tu)等。通過繪制(zhi)(zhi)大(da)量不同的(de)版本來考慮(lv)解決(jue)界(jie)面(mian)交互的(de)不同方法。

（2）線(xian)(xian)框圖：信(xin)息架(jia)構(gou)和草圖可以快速(su)演變(bian)成(cheng)線(xian)(xian)框圖。線(xian)(xian)框圖是靜態的頁(ye)面(mian)布局，讓(rang)我(wo)們思考如何(he)在屏幕上(shang)放(fang)置不同元素，更好的將信(xin)息架(jia)構(gou)可視化。低保真的線(xian)(xian)框圖沒有視覺設計(ji)，交(jiao)互方面(mian)有也只是簡單(dan)的跳轉事件，大多數都使用灰色色階和占位(wei)符來指(zhi)示(shi)內容。

該圖片由注冊用戶"荊湖酒徒"提供，版權聲明反饋

2、中保真原型

中(zhong)保(bao)(bao)真原(yuan)型(xing)在(zai)某些(xie)方面(mian)(mian)看起(qi)來像最(zui)終產(chan)品，它(ta)在(zai)成本和價(jia)值之間取得平衡(heng)，將視覺、交(jiao)互和展示媒介結(jie)合在(zai)一起(qi)。包(bao)括可點擊的原(yuan)型(xing)、編碼原(yuan)型(xing)等，用戶(hu)基于中(zhong)保(bao)(bao)真原(yuan)型(xing)能(neng)夠完成一個(ge)任務的閉環，也就是通過(guo)與原(yuan)型(xing)界面(mian)(mian)的交(jiao)互完成工作任務。

（1）可點擊(ji)的原型(xing)：一般使(shi)用原型(xing)設(she)計軟(ruan)件構建頁(ye)面，并給每(mei)個頁(ye)面增加交(jiao)互(hu)式(shi)元素(su)，做到頁(ye)面之間(jian)可進(jin)行(xing)交(jiao)互(hu)。

（2）編(bian)碼原(yuan)型：會編(bian)碼的產(chan)品，可(ke)以選在瀏覽器中創建(jian)中保真(zhen)原(yuan)型。這(zhe)要求(qiu)產(chan)品懂得HTML，CSS等技術，可(ke)以簡單的構建(jian)中保真(zhen)原(yuan)型，這(zhe)種原(yuan)型展示出的效果，就跟真(zhen)實的界面很(hen)逼真(zhen)。

3、高保真原型

高保真(zhen)原(yuan)型(xing)經過(guo)視覺(jue)設計(ji)，這些原(yuan)型(xing)具有真(zhen)實界面的高度一(yi)致，數據的高度仿真(zhen)，交(jiao)互和動畫也具備(bei)，用戶能夠與之進行交(jiao)互。雖然(ran)看(kan)起來像真(zhen)的一(yi)樣，但(dan)它仍然(ran)是一(yi)個原(yuan)型(xing)。

二、怎么評估原型設計的保真度

原型設計通常是從(cong)低保(bao)真開始，并逐漸提高(gao)到高(gao)保(bao)真的(de)(de)水平，一般保(bao)真度的(de)(de)評估主(zhu)要(yao)是看五個方面：

1、視覺細化：指在(zai)界面(mian)中視覺像素級別設計的投入(ru)。

2、功(gong)能廣度：指原型中涵蓋了多少大的功(gong)能點。

3、功能深度：表(biao)明(ming)原型各個功能的詳細(xi)程度如何。

4、交(jiao)互性：表示應(ying)用程序或產品的交(jiao)互部分如何顯示給用戶(hu)。

5、數據模型：包(bao)含用戶在(zai)界面中交互的內容(rong)以及(ji)產品前(qian)端和后(hou)端使用的數據。

三、如何選擇合適的原型類型

原型設計工具設計的原型(xing)類(lei)型(xing)可分為三類(lei)，選擇時(shi)并(bing)不(bu)一定保(bao)真(zhen)度越高越好，如果原型(xing)保(bao)真(zhen)度過高，用(yong)戶就會以為設計已經(jing)完成，過分關注(zhu)細節，而(er)忽略(lve)整體方(fang)案(an)；但原型(xing)保(bao)真(zhen)度太低也(ye)不(bu)行，用(yong)戶可能會迷失(shi)方(fang)向，不(bu)理解原型(xing)的目的是什(shen)么(me)。

一般來說(shuo)，設計師需要根據目(mu)標和(he)產品所處的(de)階段來選擇適(shi)當的(de)保真(zhen)度(du)原型(xing)(xing)，在(zai)制作(zuo)原型(xing)(xing)所花費的(de)時間和(he)驗(yan)證(zheng)原型(xing)(xing)帶(dai)來價(jia)值之間取(qu)得平(ping)衡(heng)。