一、什么是交互原型設計

交互原型是交互設計師的主要產出，是交互設計師在接到產品需求之后，經過一系列分析，利用原型設計工具，將抽象(xiang)的文(wen)字產品需求轉化(hua)成具體(ti)的圖形產品方案的產物(wu)。

一份(fen)(fen)好的(de)(de)(de)交(jiao)互原型(xing)，首先必(bi)須(xu)提供一個(ge)好的(de)(de)(de)解決方案。這需要交(jiao)互設(she)計師對產品(pin)需求進行合(he)理的(de)(de)(de)分析，明(ming)確需求的(de)(de)(de)設(she)計目標(biao)，并(bing)使用(yong)最(zui)合(he)適的(de)(de)(de)交(jiao)互方案，幫助團隊達到目標(biao)。其次，一份(fen)(fen)優秀(xiu)的(de)(de)(de)交(jiao)互原型(xing)，還必(bi)須(xu)符合(he)基本的(de)(de)(de)設(she)計原則、使用(yong)符合(he)規范的(de)(de)(de)控件(jian)、對各種可能出現的(de)(de)(de)情況都給予考(kao)慮(lv)和展現。

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

二、交互原型設計工具如何畫交互原型

對于交(jiao)互設(she)計師來說，使(shi)用原型設(she)計工(gong)具畫(hua)交(jiao)互原型是基(ji)本功，下面(mian)為大家介紹一下如(ru)何畫(hua)交(jiao)互原型：

1、設計思路

在交(jiao)互原(yuan)(yuan)型(xing)的(de)第(di)一(yi)頁，可以加上“項(xiang)目(mu)概述”這個主題，主要展示該需求的(de)基本信息和(he)迭(die)代(dai)說明(ming)，其中項(xiang)目(mu)概況(kuang)、平臺說明(ming)和(he)功能(neng)列(lie)表都比較好理解，迭(die)代(dai)說明(ming)部分指(zhi)的(de)交(jiao)互原(yuan)(yuan)型(xing)的(de)迭(die)代(dai)記錄(lu)。在實際(ji)工作中，原(yuan)(yuan)型(xing)的(de)設計往(wang)往(wang)不可能(neng)一(yi)步(bu)到(dao)位(wei)，一(yi)般需要經(jing)過溝通、評審慢(man)慢(man)確(que)定(ding)最終的(de)原(yuan)(yuan)型(xing)。在這種情(qing)況(kuang)下，設計師需要把(ba)每一(yi)次的(de)變(bian)更(geng)都記錄(lu)下來，方(fang)便(bian)項(xiang)目(mu)成(cheng)員(yuan)看到(dao)每次更(geng)新修改的(de)內容(rong)，提高工作效率，節約溝通成(cheng)本，方(fang)便(bian)后(hou)期追溯。

2、方案展示

這是(shi)交(jiao)互原(yuan)(yuan)型(xing)中最核心的(de)(de)(de)部分(fen)。需要(yao)提(ti)醒的(de)(de)(de)是(shi)，交(jiao)互原(yuan)(yuan)型(xing)的(de)(de)(de)制作是(shi)在(zai)設計(ji)師(shi)(shi)拿到需求后，經過(guo)設計(ji)分(fen)析后開始進(jin)行。制作原(yuan)(yuan)型(xing)的(de)(de)(de)過(guo)程，只(zhi)是(shi)把前面的(de)(de)(de)分(fen)析過(guo)程的(de)(de)(de)結果，用頁面的(de)(de)(de)形式畫出來。所以交(jiao)互設計(ji)師(shi)(shi)一定(ding)不(bu)要(yao)把“畫原(yuan)(yuan)型(xing)”當成自己最主要(yao)的(de)(de)(de)任務。交(jiao)互設計(ji)師(shi)(shi)的(de)(de)(de)核心價(jia)值(zhi)，是(shi)通過(guo)高質量的(de)(de)(de)交(jiao)互方案達到設計(ji)目標，以解(jie)決某(mou)種問題。

交互原型的本(ben)質是一種溝(gou)通工具，主要(yao)用于團隊內部協作，作用是傳達需(xu)求。因此，為了把需(xu)求傳達清(qing)楚，交互原型中必須包(bao)含以下5類(lei)信息(xi)：

（1）原型展現完整的流程。

（2）界面以及界面中的元素展現需求的所有功能點(dian)。

（3）界(jie)面中元素的(de)各種狀態說明。

（4）元(yuan)素操(cao)作后的效果(guo)。

（5）異常、極限狀(zhuang)態(tai)說明。

三、交互原型設計注意事項

在做交互原型設計時(shi)，要把(ba)原型的(de)(de)閱(yue)讀者(zhe)想象成對產品(pin)和設計(ji)一無所(suo)知的(de)(de)人，該怎樣展示產品(pin)的(de)(de)邏輯和功能，才(cai)能夠讓其通(tong)過原型來理解這個產品(pin)，設計(ji)時(shi)要注意的(de)(de)幾個事項主要有：

1、使用灰度線框圖：顏色和(he)視(shi)覺效果(guo)會影(ying)響大家對易(yi)用性的(de)判斷。

2、清晰(xi)地(di)展(zhan)示流(liu)程：順暢的操(cao)作流(liu)程是產品(pin)易用性最基(ji)本的標(biao)準。

3、關鍵功能要(yao)有故事板：角色、場景、情(qing)節，使團隊人(ren)員更(geng)快、更(geng)好(hao)地理解產品(pin)。

4、要有注釋和說(shuo)明：圖文并茂更(geng)能準(zhun)確傳達設(she)計方案與想法。

5、一致性和規范性：優秀交互(hu)原型的元素(su)、組件、頁面甚至文(wen)案用(yong)語的調性都是規范一致的。