一份好的交互原型，首先必須提供一個好的解決方案。一份優秀的交互原型，還必須符合基本的設計原則、使用符合規範的控件、對各種可能出現的情況都給予考慮和展現。那麼，要怎麼做才能畫好交互原型？
交互原型是交互設計師的主要產出，是設計師在接到產品需求之後，經過一系列分析，將抽象的文字產品需求轉化成具體的圖形產品方案的產物。
一份好的交互原型，首先必須提供一個好的解決方案。這需要交互設計師對產品需求進行合理的分析，明確需求的設計目標，並使用最合適的交互方案，幫助團隊達到目標。其次，一份優秀的交互原型，還必須符合基本的設計原則、使用符合規範的控件、對各種可能出現的情況都給予考慮和展現。
今天為大家介紹一下如何畫交互原型。
1、設計思路
在交互原型的第一頁，可以加上“項目概述”這個主題，主要展示該需求的基本信息和迭代說明，如下圖所示。
其中項目概況、平臺說明和功能列表都比較好理解，迭代說明部分指的交互原型的迭代記錄。在實際工作中，原型的設計往往不可能一步到位，一般需要經過溝通、評審慢慢確定最終的原型。在這種情況下，設計師需要把每一次的變更都記錄下來，方便項目成員看到每次更新修改的內容，提高工作效率，節約溝通成本，方便後期追溯。
2、方案展示
這是交互原型中最核心的部分。需要提醒的是，交互原型的製作是在設計師拿到需求後，經過設計分析後開始進行。製作原型的過程，只是把前面的分析過程的結果，用頁面的形式畫出來。所以交互設計師一定不要把“畫原型”當成自己最主要的任務。交互設計師的核心價值，是通過高質量的交互方案達到設計目標，以解決某種問題。
交互原型的本質是一種溝通工具，主要用於團隊內部協作，作用是傳達需求。因此，為了把需求傳達清楚，交互原型中必須包含以下5類信息：
- 原型展現完整的流程；
- 界面以及界面中的元素展現需求的所有功能點；
- 界面中元素的各種狀態說明；
- 元素操作後的效果；
- 異常、極限狀態說明。
對於第①點“原型展現完整的流程”，如果這個功能比較複雜、流程比較長或者流程中邏輯比較多，則在交互原型中可以附上流程圖，方便產品、開發、測試同時理解；對於相對簡單的功能，則不需要都畫出流程圖。
如果你使用的是axure來製作交互原型，建議axure裡的一個頁面只展現一個界面或分支流程。這樣的好處是可以充分展現一個界面或分支流程的各種狀態，查看起來十分清晰。當涉及頁面之間的跳轉時，設計師需要在跳轉的地方標明進行了何種操作，跳轉到哪個頁面，然後在站點地圖中使用一致的頁面名稱。
如下圖所示：
上面的頁面展示了“我的宜定盈詳情”界面的各種狀態和操作後的結果。
如果你使用的是sketch來製作交互原型，那麼意味著一個流程中所有的界面都在同一個頁面中展現。此時，建議大家使用藍色來表現用戶操作後的結果，使用綠色來表現對界面中元素的註釋。這樣做的好處，是可以讓查看者更清楚地看到功能的流程走向，如下圖：
使用不同顏色表示操作結果和註釋信息，更有利於查看者看到功能流程走向。
以上為大家介紹了畫交互原型的原則和注意問題，歡迎討論。
#專欄作家#
沐風，微信公眾號：“沐風與體驗設計”。人人都是產品經理專欄作家，2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團隊負責人。留德海龜，曾任職騰訊微生活、網易、宜信。6年交互設計經驗，專注設計領域，歡迎關注。
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
