一、什么是交互原型設計

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

一份(fen)好的(de)(de)(de)(de)(de)交(jiao)互(hu)(hu)(hu)原(yuan)型，首先必(bi)須(xu)提供一個好的(de)(de)(de)(de)(de)解決方案。這需(xu)要交(jiao)互(hu)(hu)(hu)設計師對產品需(xu)求(qiu)進(jin)行合理的(de)(de)(de)(de)(de)分析(xi)，明確(que)需(xu)求(qiu)的(de)(de)(de)(de)(de)設計目(mu)標，并(bing)使(shi)用(yong)最合適的(de)(de)(de)(de)(de)交(jiao)互(hu)(hu)(hu)方案，幫助團隊達到目(mu)標。其次，一份(fen)優秀(xiu)的(de)(de)(de)(de)(de)交(jiao)互(hu)(hu)(hu)原(yuan)型，還必(bi)須(xu)符(fu)合基本的(de)(de)(de)(de)(de)設計原(yuan)則(ze)、使(shi)用(yong)符(fu)合規范的(de)(de)(de)(de)(de)控件、對各種可能出(chu)現(xian)(xian)的(de)(de)(de)(de)(de)情況(kuang)都給(gei)予考慮(lv)和展現(xian)(xian)。

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

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

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

1、設計思路

在交互原型的(de)第一頁(ye)，可(ke)以加(jia)上“項(xiang)目(mu)概述”這(zhe)(zhe)個主題，主要展(zhan)示該需求(qiu)的(de)基本(ben)信息和(he)迭(die)代說明，其中(zhong)(zhong)項(xiang)目(mu)概況、平臺說明和(he)功能(neng)列表(biao)都(dou)比較(jiao)好理(li)解，迭(die)代說明部(bu)分(fen)指(zhi)的(de)交互原型的(de)迭(die)代記錄。在實際工(gong)作中(zhong)(zhong)，原型的(de)設計往(wang)往(wang)不可(ke)能(neng)一步到(dao)位，一般需要經過(guo)溝(gou)通、評審慢(man)慢(man)確定最終的(de)原型。在這(zhe)(zhe)種情況下，設計師(shi)需要把每一次(ci)的(de)變(bian)更都(dou)記錄下來，方便(bian)項(xiang)目(mu)成員看到(dao)每次(ci)更新修改的(de)內容(rong)，提高(gao)工(gong)作效率(lv)，節約溝(gou)通成本(ben)，方便(bian)后期追(zhui)溯。

2、方案展示

這(zhe)是(shi)交(jiao)(jiao)互(hu)原型中最核心的(de)部分(fen)。需要提醒的(de)是(shi)，交(jiao)(jiao)互(hu)原型的(de)制作(zuo)是(shi)在設(she)(she)計(ji)(ji)師(shi)拿到(dao)需求(qiu)后，經過設(she)(she)計(ji)(ji)分(fen)析后開(kai)始(shi)進(jin)行(xing)。制作(zuo)原型的(de)過程(cheng)(cheng)，只(zhi)是(shi)把(ba)前面的(de)分(fen)析過程(cheng)(cheng)的(de)結果，用頁面的(de)形式畫出(chu)來。所以交(jiao)(jiao)互(hu)設(she)(she)計(ji)(ji)師(shi)一定不要把(ba)“畫原型”當成自己最主要的(de)任務。交(jiao)(jiao)互(hu)設(she)(she)計(ji)(ji)師(shi)的(de)核心價值，是(shi)通(tong)過高質量的(de)交(jiao)(jiao)互(hu)方案達到(dao)設(she)(she)計(ji)(ji)目標(biao)，以解決(jue)某種(zhong)問(wen)題(ti)。

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

（1）原型展現(xian)完整(zheng)的流程。

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

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

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

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

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

在做交互原型設計時(shi)，要(yao)把原型(xing)的(de)閱讀者(zhe)想象成對產(chan)品和(he)設計一無所知的(de)人(ren)，該(gai)怎樣展示(shi)產(chan)品的(de)邏(luo)輯和(he)功能，才能夠讓其通過(guo)原型(xing)來(lai)理解這個產(chan)品，設計時(shi)要(yao)注意的(de)幾個事項主要(yao)有(you)：

1、使用(yong)灰度線(xian)框(kuang)圖：顏色和視覺(jue)效果會影響大家對易用(yong)性的判斷。

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

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

4、要有(you)注釋和說明：圖(tu)文并茂更能(neng)準確傳達設計(ji)方案與(yu)想(xiang)法。

5、一致(zhi)性和規范(fan)性：優(you)秀交互原(yuan)型的元素、組件、頁(ye)面甚至(zhi)文案用(yong)語(yu)的調性都是規范(fan)一致(zhi)的。