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

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

1、低保真原型

低保真原(yuan)型呈(cheng)現的(de)是初步(bu)的(de)概(gai)念和(he)想(xiang)法，可以(yi)使用不同(tong)的(de)媒介，擁有(you)不同(tong)尺(chi)寸(cun)的(de)原(yuan)型界面。這種原(yuan)型是最簡單和(he)便宜(yi)的(de)，更換成本最低，包括草圖、紙質原(yuan)型、線框圖等(deng)：

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

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

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

2、中保真原型

中保(bao)(bao)真原型(xing)在某(mou)些方面看起來像最終產品，它在成本(ben)和價(jia)值之間取得平衡，將(jiang)視覺、交互(hu)和展(zhan)示媒介結合在一起。包括可點(dian)擊的原型(xing)、編碼原型(xing)等，用(yong)戶基于中保(bao)(bao)真原型(xing)能夠完成一個任(ren)(ren)務(wu)的閉環，也就是(shi)通(tong)過與原型(xing)界面的交互(hu)完成工作(zuo)任(ren)(ren)務(wu)。

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

（2）編碼(ma)原型：會編碼(ma)的(de)產品(pin)，可以選在瀏覽器(qi)中(zhong)創建中(zhong)保(bao)真原型。這(zhe)要求產品(pin)懂得(de)HTML，CSS等技術，可以簡單的(de)構(gou)建中(zhong)保(bao)真原型，這(zhe)種原型展示出的(de)效(xiao)果，就跟真實(shi)的(de)界面很逼真。

3、高保真原型

高(gao)(gao)保(bao)真原(yuan)型(xing)經過視覺設(she)計(ji)，這(zhe)些原(yuan)型(xing)具有真實界面的高(gao)(gao)度(du)一致(zhi)，數(shu)據的高(gao)(gao)度(du)仿(fang)真，交互和動畫也具備，用戶能夠與之進(jin)行交互。雖然看起(qi)來像真的一樣，但它仍然是一個原(yuan)型(xing)。

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

原型設計(ji)通常是從低保真開(kai)始(shi)，并逐(zhu)漸(jian)提(ti)高(gao)到(dao)高(gao)保真的水平，一般(ban)保真度的評估主要是看五個方面：

1、視覺(jue)細(xi)化(hua)：指在(zai)界面中視覺(jue)像素級(ji)別設計的(de)投入。

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

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

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

5、數(shu)據(ju)模型(xing)：包含用戶(hu)在界面中(zhong)交互的(de)(de)內容(rong)以及產品前端和后端使用的(de)(de)數(shu)據(ju)。

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

原型設計工具設計的(de)原型(xing)(xing)類型(xing)(xing)可分(fen)為(wei)(wei)三類，選擇時并不(bu)一定保(bao)真(zhen)度(du)越(yue)高越(yue)好(hao)，如果原型(xing)(xing)保(bao)真(zhen)度(du)過(guo)高，用(yong)戶(hu)(hu)就會以(yi)為(wei)(wei)設計已經完成，過(guo)分(fen)關注細節，而忽略整(zheng)體(ti)方案(an)；但原型(xing)(xing)保(bao)真(zhen)度(du)太(tai)低也(ye)不(bu)行(xing)，用(yong)戶(hu)(hu)可能會迷失方向(xiang)，不(bu)理(li)解原型(xing)(xing)的(de)目的(de)是什么。

一般來說，設計師需要根據(ju)目標和產品所處(chu)的階段來選擇適當的保真度原(yuan)型，在制作(zuo)原(yuan)型所花(hua)費的時(shi)間(jian)和驗(yan)證原(yuan)型帶來價值(zhi)之間(jian)取得平衡。