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

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

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

常見(jiàn)的交互稿表達(dá)形式有2種，一種是圖片展示型，一個(gè)是網(wǎng)頁(yè)文檔型。根據(jù)不同的產(chǎn)品階段，需求，表達(dá)方式會(huì)有所不同，追求高效工作效率。

圖片展示型：一般用在產(chǎn)品迭代過(guò)程，頁(yè)數(shù)不多且都在同一張圖里，方便在使用tower產(chǎn)品文檔時(shí)貼圖，一圖看完改版內(nèi)容，方便對(duì)接人一次性看完。

網(wǎng)頁(yè)文檔型：一般用在1.0初稿時(shí)，或者產(chǎn)品大改版方便對(duì)接人復(fù)制文案，頁(yè)面跳轉(zhuǎn)清晰，可擴(kuò)展成為產(chǎn)品功能文檔，將產(chǎn)品需求和交互放在一份里。

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

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

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

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

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

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

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

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

對(duì)接人員，描述上下游對(duì)接的人有哪些，誰(shuí)負(fù)責(zé)做這個(gè)需求。方便以后有問(wèn)題找到對(duì)應(yīng)的人。

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

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

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

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

總結(jié)：

不管是圖片展示型，還是網(wǎng)頁(yè)文檔型，交互稿應(yīng)該具備但不限于以下8條細(xì)則

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

1，原型布局，灰度層次高質(zhì)量還原內(nèi)容，尺寸是UI設(shè)計(jì)稿的一半。

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

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

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

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

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

7，特殊操作，一些復(fù)雜的交互操作，需要單獨(dú)制作示意圖。

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

最新評(píng)論