根據(jù)自身企業(yè)的工作方式制作的交互稿才是合適的交互輸出。

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

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

根據(jù)產(chǎn)品階段和需求制作不同類型的交互輸出。

常見的交互稿表達(dá)形式有2種，一種是圖片展示型，一個(gè)是網(wǎng)頁文檔型。根據(jù)不同的產(chǎn)品階段，需求，表達(dá)方式會(huì)有所不同，追求高效工作效率。
圖片展示型：一般用在產(chǎn)品迭代過程，頁數(shù)不多且都在同一張圖里，方便在使用tower產(chǎn)品文檔時(shí)貼圖，一圖看完改版內(nèi)容，方便對接人一次性看完。
網(wǎng)頁文檔型：一般用在1.0初稿時(shí)，或者產(chǎn)品大改版方便對接人復(fù)制文案，頁面跳轉(zhuǎn)清晰，可擴(kuò)展成為產(chǎn)品功能文檔，將產(chǎn)品需求和交互放在一份里。

首先是圖片展示型，一般是將各種細(xì)則放在一張圖里。（以下將不同細(xì)則分開解析，其實(shí)是在一張圖里）
信息架構(gòu)，根據(jù)不同的需求信息架構(gòu)有2種，一種是功能型信息架構(gòu)，一種是層級(jí)型信息架構(gòu)。在功能型信息架構(gòu)里，主要體現(xiàn)的是每個(gè)頁面的入口，功能，操作等，了解APP的一些頁面和功能。在層級(jí)型信息架構(gòu)里，主要體現(xiàn)的是按12345...級(jí)頁面排放，清晰看到APP的層級(jí)架構(gòu)有多少。

操作流程，體現(xiàn)的是用戶點(diǎn)擊某個(gè)目標(biāo)時(shí)的反饋有什么，比如點(diǎn)擊后彈窗，點(diǎn)擊后跳轉(zhuǎn)去哪，點(diǎn)擊后有什么頁面動(dòng)效反饋等等。這里是給到開發(fā)這邊給你實(shí)現(xiàn)的。交互表達(dá)上需要說明清楚。

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

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

優(yōu)化要點(diǎn)，每次更新迭代都在交互稿里注明一下，每個(gè)頁面的更新優(yōu)化是什么，讓對接人快速提煉了解優(yōu)化要素。
交互說明，一般是針對交互稿里的規(guī)則說明描述，動(dòng)作描述，狀態(tài)描述。比如排序方式，狀態(tài)怎么變化，操作后的說明等。

特殊操作，對頁面內(nèi)一些特殊操作制作操作示意圖，有靜態(tài)表達(dá)，也有動(dòng)態(tài)GIF圖表達(dá)，主要是傳達(dá)一些不好用文字描述的內(nèi)容，以圖文或動(dòng)圖形式說明。
對接人員，描述上下游對接的人有哪些，誰負(fù)責(zé)做這個(gè)需求。方便以后有問題找到對應(yīng)的人。

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

功能簡介模塊，有產(chǎn)品簡介，產(chǎn)品功能，功能規(guī)劃，版本歷史，修訂記錄（此部分主要是產(chǎn)品）
流程架構(gòu)模塊，有信息架構(gòu)，頁面流程，業(yè)務(wù)流程（此部分主要是交互）
交互原型模塊，有各個(gè)頁面的不同狀態(tài)，說明，操作示意等（此部分主要是交互）

總結(jié)：

不管是圖片展示型，還是網(wǎng)頁文檔型，交互稿應(yīng)該具備但不限于以下8條細(xì)則
（根據(jù)自身企業(yè)情況，交互輸出稿一般都會(huì)有下面的任意4~6條左右細(xì)則）

1，原型布局，灰度層次高質(zhì)量還原內(nèi)容，尺寸是UI設(shè)計(jì)稿的一半。
2，交互說明，一些交互效果或規(guī)則說明。
3，操作流程，描述點(diǎn)擊后的反饋是什么，去哪，還是彈窗，還是提示。
4，業(yè)務(wù)流程，描述業(yè)務(wù)主流程，邏輯判斷。
5，優(yōu)化要點(diǎn)，快速了解本次迭代的優(yōu)化點(diǎn)，提供給多方即時(shí)查看。
6，對接人員，了解本次優(yōu)化的上下游對接人，在有什么問題時(shí)快速找到對接人。
7，特殊操作，一些復(fù)雜的交互操作，需要單獨(dú)制作示意圖。
8，信息架構(gòu)，在迭代頁面涉及多處或初期版本，可以增加一個(gè)信息架構(gòu)圖。