一份好的交互原型，首先必須提供一個(gè)好的解決方案。一份優(yōu)秀的交互原型，還必須符合基本的設(shè)計(jì)原則、使用符合規(guī)范的控件、對(duì)各種可能出現(xiàn)的情況都給予考慮和展現(xiàn)。那么，要怎么做才能畫好交互原型？

交互原型是交互設(shè)計(jì)師的主要產(chǎn)出，是設(shè)計(jì)師在接到產(chǎn)品需求之后，經(jīng)過一系列分析，將抽象的文字產(chǎn)品需求轉(zhuǎn)化成具體的圖形產(chǎn)品方案的產(chǎn)物。

一份好的交互原型，首先必須提供一個(gè)好的解決方案。這需要交互設(shè)計(jì)師對(duì)產(chǎn)品需求進(jìn)行合理的分析，明確需求的設(shè)計(jì)目標(biāo)，并使用最合適的交互方案，幫助團(tuán)隊(duì)達(dá)到目標(biāo)。其次，一份優(yōu)秀的交互原型，還必須符合基本的設(shè)計(jì)原則、使用符合規(guī)范的控件、對(duì)各種可能出現(xiàn)的情況都給予考慮和展現(xiàn)。

今天為大家介紹一下如何畫交互原型。

1、設(shè)計(jì)思路

在交互原型的第一頁，可以加上“項(xiàng)目概述”這個(gè)主題，主要展示該需求的基本信息和迭代說明，如下圖所示。

其中項(xiàng)目概況、平臺(tái)說明和功能列表都比較好理解，迭代說明部分指的交互原型的迭代記錄。在實(shí)際工作中，原型的設(shè)計(jì)往往不可能一步到位，一般需要經(jīng)過溝通、評(píng)審慢慢確定最終的原型。在這種情況下，設(shè)計(jì)師需要把每一次的變更都記錄下來，方便項(xiàng)目成員看到每次更新修改的內(nèi)容，提高工作效率，節(jié)約溝通成本，方便后期追溯。

2、方案展示

這是交互原型中最核心的部分。需要提醒的是，交互原型的制作是在設(shè)計(jì)師拿到需求后，經(jīng)過設(shè)計(jì)分析后開始進(jìn)行。制作原型的過程，只是把前面的分析過程的結(jié)果，用頁面的形式畫出來。所以交互設(shè)計(jì)師一定不要把“畫原型”當(dāng)成自己最主要的任務(wù)。交互設(shè)計(jì)師的核心價(jià)值，是通過高質(zhì)量的交互方案達(dá)到設(shè)計(jì)目標(biāo)，以解決某種問題。

交互原型的本質(zhì)是一種溝通工具，主要用于團(tuán)隊(duì)內(nèi)部協(xié)作，作用是傳達(dá)需求。因此，為了把需求傳達(dá)清楚，交互原型中必須包含以下5類信息：

1. 原型展現(xiàn)完整的流程；
2. 界面以及界面中的元素展現(xiàn)需求的所有功能點(diǎn)；
3. 界面中元素的各種狀態(tài)說明；
4. 元素操作后的效果；
5. 異常、極限狀態(tài)說明。

對(duì)于第①點(diǎn)“原型展現(xiàn)完整的流程”，如果這個(gè)功能比較復(fù)雜、流程比較長(zhǎng)或者流程中邏輯比較多，則在交互原型中可以附上流程圖，方便產(chǎn)品、開發(fā)、測(cè)試同時(shí)理解；對(duì)于相對(duì)簡(jiǎn)單的功能，則不需要都畫出流程圖。

如果你使用的是axure來制作交互原型，建議axure里的一個(gè)頁面只展現(xiàn)一個(gè)界面或分支流程。這樣的好處是可以充分展現(xiàn)一個(gè)界面或分支流程的各種狀態(tài)，查看起來十分清晰。當(dāng)涉及頁面之間的跳轉(zhuǎn)時(shí)，設(shè)計(jì)師需要在跳轉(zhuǎn)的地方標(biāo)明進(jìn)行了何種操作，跳轉(zhuǎn)到哪個(gè)頁面，然后在站點(diǎn)地圖中使用一致的頁面名稱。

如下圖所示：

上面的頁面展示了“我的宜定盈詳情”界面的各種狀態(tài)和操作后的結(jié)果。

如果你使用的是sketch來制作交互原型，那么意味著一個(gè)流程中所有的界面都在同一個(gè)頁面中展現(xiàn)。此時(shí)，建議大家使用藍(lán)色來表現(xiàn)用戶操作后的結(jié)果，使用綠色來表現(xiàn)對(duì)界面中元素的注釋。這樣做的好處，是可以讓查看者更清楚地看到功能的流程走向，如下圖：

使用不同顏色表示操作結(jié)果和注釋信息，更有利于查看者看到功能流程走向。

以上為大家介紹了畫交互原型的原則和注意問題，歡迎討論。

#專欄作家#

沐風(fēng)，微信公眾號(hào)：“沐風(fēng)與體驗(yàn)設(shè)計(jì)”。人人都是產(chǎn)品經(jīng)理專欄作家，2017年度作家評(píng)選最佳人氣獎(jiǎng)。愛奇藝Phone和PC端交互團(tuán)隊(duì)負(fù)責(zé)人。留德海龜，曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計(jì)經(jīng)驗(yàn)，專注設(shè)計(jì)領(lǐng)域，歡迎關(guān)注。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議