在制作交互輸出稿之前，我們要考慮的是這份稿子有可能給誰看【把對接人理解為目標用戶】，需要看哪些內容【訴求】，缺了什么會有什么情況發(fā)生【場景】。在不同的企業(yè)中，根據規(guī)模不同可能會有不同的人員，比如一人負責幾個人的工作，或者是沒有這個職業(yè)。為什么說是合適的交互輸出稿，因為不同的企業(yè)有不同的工作方式，需要在不同企業(yè)中探索，并根據自身企業(yè)情況制作合適的交互輸出稿才是硬道理。

一般來說，交互可能對接到的相關人員有產品經理，產品運營，UI設計，后臺開發(fā)，重構設計，前端開發(fā)等，但經常對接的一般在3-4個職業(yè)。產品經理和產品運營，主要看功能實現，頁面的跳轉是否較多。UI設計，主要看原型布局，按照你的原型設計視覺稿。后臺開發(fā)，主要看邏輯關系(更多的是產品邏輯)與整個信息架構。重構設計，還原H5頁面/網頁等，主要看交互的一些操作和說明，比如點擊后彈窗，點擊后有什么反饋。前端開發(fā)，這里可能不同公司叫法有不同，有做數據交接的，有做APP前端還原的(指安卓和IOS)，主要看APP里的一些操作反饋。如果公司里人員較多，那么可能這個人這次做這個需求，下次就不做這個需求(指需求多，人員穿插借用)，那么在不同人去看的時候，如果想知道這個交互是誰做的，對接哪個UI，就需要在交互稿里加個對接人名單了。

根據產品階段和需求制作不同類型的交互輸出。

常見的交互稿表達形式有2種，一種是圖片展示型，一個是網頁文檔型。根據不同的產品階段，需求，表達方式會有所不同，追求高效工作效率。

圖片展示型：一般用在產品迭代過程，頁數不多且都在同一張圖里，方便在使用tower產品文檔時貼圖，一圖看完改版內容，方便對接人一次性看完。

網頁文檔型：一般用在1.0初稿時，或者產品大改版方便對接人復制文案，頁面跳轉清晰，可擴展成為產品功能文檔，將產品需求和交互放在一份里。

首先是圖片展示型，一般是將各種細則放在一張圖里。(以下將不同細則分開解析，其實是在一張圖里)

信息架構，根據不同的需求信息架構有2種，一種是功能型信息架構，一種是層級型信息架構。在功能型信息架構里，主要體現的是每個頁面的入口，功能，操作等，了解APP的一些頁面和功能。在層級型信息架構里，主要體現的是按12345...級頁面排放，清晰看到APP的層級架構有多少。

操作流程，體現的是用戶點擊某個目標時的反饋有什么，比如點擊后彈窗，點擊后跳轉去哪，點擊后有什么頁面動效反饋等等。這里是給到開發(fā)這邊給你實現的。交互表達上需要說明清楚。

原型布局，采用灰度層次，UI尺寸的一半，明暗強弱關系。如果原型稿是隨便的一個尺寸，那么UI設計出來后可能效果就差別太大，比如說原型里一屏放了5個內容，但是由于原型尺寸不對，實際上UI設計出來后一屏只有3個之類。因此，尺寸應該采用UI設計的一半，有的設計用750*1334，有的用640*1136等，制作原型時采用自己公司UI設計稿的一半尺寸即可。

業(yè)務流程，描述APP里主業(yè)務流程，邏輯判斷等。比如注冊后判斷用戶狀態(tài)，接著下一步操作，對每個頁面銜接時有不同的判定。

優(yōu)化要點，每次更新迭代都在交互稿里注明一下，每個頁面的更新優(yōu)化是什么，讓對接人快速提煉了解優(yōu)化要素。

交互說明，一般是針對交互稿里的規(guī)則說明描述，動作描述，狀態(tài)描述。比如排序方式，狀態(tài)怎么變化，操作后的說明等。

特殊操作，對頁面內一些特殊操作制作操作示意圖，有靜態(tài)表達，也有動態(tài)GIF圖表達，主要是傳達一些不好用文字描述的內容，以圖文或動圖形式說明。

對接人員，描述上下游對接的人有哪些，誰負責做這個需求。方便以后有問題找到對應的人。

網頁文檔型，以導出網頁的形式展示，且具備圖片型的細則只是位置不同，左側全局是導航欄，方便每個頁面去查看，一般用在大改版或者初版。圖中是產品文檔+交互文檔的整合體(1.0文檔)，包含的模塊有：

功能簡介模塊，有產品簡介，產品功能，功能規(guī)劃，版本歷史，修訂記錄(此部分主要是產品)

流程架構模塊，有信息架構，頁面流程，業(yè)務流程(此部分主要是交互)

交互原型模塊，有各個頁面的不同狀態(tài)，說明，操作示意等(此部分主要是交互)

總結：

不管是圖片展示型，還是網頁文檔型，交互稿應該具備但不限于以下8條細則

(根據自身企業(yè)情況，交互輸出稿一般都會有下面的任意4~6條左右細則)

1，原型布局，灰度層次高質量還原內容，尺寸是UI設計稿的一半。

2，交互說明，一些交互效果或規(guī)則說明。

3，操作流程，描述點擊后的反饋是什么，去哪，還是彈窗，還是提示。

4，業(yè)務流程，描述業(yè)務主流程，邏輯判斷。

5，優(yōu)化要點，快速了解本次迭代的優(yōu)化點，提供給多方即時查看。

6，對接人員，了解本次優(yōu)化的上下游對接人，在有什么問題時快速找到對接人。

7，特殊操作，一些復雜的交互操作，需要單獨制作示意圖。

8，信息架構，在迭代頁面涉及多處或初期版本，可以增加一個信息架構圖。