一、什么是交互原型設計

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

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

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

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

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

1、設計思路

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

2、方案展示

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

交(jiao)互原型的本質是(shi)一(yi)種溝通工具，主要用(yong)于團隊內部協作，作用(yong)是(shi)傳達(da)需求。因此(ci)，為了把(ba)需求傳達(da)清楚(chu)，交(jiao)互原型中必須包含(han)以下5類信息：

（1）原型展(zhan)現完整的流程(cheng)。

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

（3）界面(mian)中元素的各種狀態(tai)說(shuo)明。

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

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

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

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

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

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

3、關鍵(jian)功能要有(you)故事(shi)板：角色(se)、場景、情(qing)節，使團(tuan)隊(dui)人員(yuan)更快(kuai)、更好地(di)理(li)解產品。

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

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