一、什么是交互原型設計

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

一份好(hao)的(de)(de)交(jiao)互(hu)原(yuan)型，首先必須提供一個好(hao)的(de)(de)解決(jue)方(fang)案。這(zhe)需要交(jiao)互(hu)設(she)(she)計(ji)(ji)師(shi)對(dui)產品需求進行合理的(de)(de)分析，明確(que)需求的(de)(de)設(she)(she)計(ji)(ji)目標，并使(shi)用最合適(shi)的(de)(de)交(jiao)互(hu)方(fang)案，幫助團隊(dui)達到目標。其次，一份優秀的(de)(de)交(jiao)互(hu)原(yuan)型，還必須符合基本的(de)(de)設(she)(she)計(ji)(ji)原(yuan)則(ze)、使(shi)用符合規(gui)范的(de)(de)控件、對(dui)各(ge)種可能出現的(de)(de)情況都給(gei)予(yu)考慮和展現。

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

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

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

1、設計思路

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

2、方案展示

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

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

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

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

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

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

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

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

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

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

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

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

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

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