本文將著重介紹交互設(shè)計師的輸出物–交互文檔的相關(guān)細(xì)節(jié)，enjoy~

在經(jīng)歷了互聯(lián)網(wǎng)行業(yè)飛速發(fā)展的今天，行業(yè)步伐逐步減慢，互聯(lián)網(wǎng)公司的架構(gòu)和開發(fā)流程也隨之日益完善，產(chǎn)品開發(fā)工作也變得具有了中國IT行業(yè)的獨有特色和特有流程。

從以前只有Leader+UI設(shè)計師+開發(fā)人員的扁平式開發(fā)流程，到現(xiàn)在的需求方+產(chǎn)品方+交互設(shè)計師（以下簡稱UX設(shè)計師）+UI設(shè)計師+運營/市場對接+開發(fā)人員的完整開發(fā)流程，這意味著一款產(chǎn)品的開發(fā)變得更加細(xì)膩，更加具體，也更加民主。

本文將著重介紹交互設(shè)計師的輸出物–交互文檔的相關(guān)細(xì)節(jié)，同時礙于UX設(shè)計師在今天看來，仍然算是一個新興職位，所以將額外講解UX設(shè)計師的職位背景和相關(guān)工作內(nèi)容，作為本篇文章的背景。

一、交互設(shè)計師的工作內(nèi)容

UX設(shè)計師的存在，使原本產(chǎn)品經(jīng)理工作中的原型制作工作逐步轉(zhuǎn)讓給UX設(shè)計師，使產(chǎn)品經(jīng)理更關(guān)注需求的戰(zhàn)略層面，更能進(jìn)行戰(zhàn)略層面的設(shè)計。同時，UX設(shè)計師也分擔(dān)了UI設(shè)計師的布局設(shè)計、跳轉(zhuǎn)設(shè)計等非本職工作，使開發(fā)流程中的角色更加專注自己的工作。

交互設(shè)計師，UX設(shè)計師，有的公司也稱之為UE設(shè)計師。具體的工作內(nèi)容可以認(rèn)為有：

1. 需求消化，使其可實現(xiàn)化，并制作對應(yīng)的交互原型；
2. 規(guī)定數(shù)據(jù)格式、樣式，規(guī)定數(shù)據(jù)的展示方式、字段限制；
3. 規(guī)定控件的使用規(guī)范；
4. 從功能流程的高度，梳理功能的頁面層級；
5. 規(guī)定數(shù)據(jù)的前后臺交互；
6. 規(guī)定臨界狀態(tài)；
7. 頁面切換動效的規(guī)定和模擬等等。

不同的公司對交互設(shè)計師的工作內(nèi)容可能有不同的界定，但是一般情況下，上述是大部分交互設(shè)計師的主要工作內(nèi)容。在這樣一份工作中，交互設(shè)計師基本上是填補了從產(chǎn)品經(jīng)理到UI設(shè)計師之間的空白，從開發(fā)角度和設(shè)計角度對一款產(chǎn)品的細(xì)節(jié)進(jìn)行補完。

二、 交互設(shè)計師的輸出物

作為交互設(shè)計師的輸出物，交互文檔是聯(lián)系開發(fā)流程上下游的重要文件，它需要具備良好的可讀性、唯一性和時效性。

• 可讀性指的是不論產(chǎn)品經(jīng)理、設(shè)計師還是開發(fā)人員，都需要讀得懂；
• 唯一性指的是，針對某個開發(fā)需求，必須有且只有一個交互文檔。針對某個項目，其對應(yīng)的交互文檔也必須是獨一份（可以是一個交互文檔的集合）。即使存在多個版本，舊的版本必須標(biāo)注為“歸檔備查”，并且明確備注過時時間；
• 時效性指的是，某個需求或者某個項目，尚在使用中的交互文檔，必須是最新的，符合當(dāng)前需求要求和產(chǎn)品輸出的。

本文著重介紹的即是交互文檔的構(gòu)成和它的寫法（基于中國移動交互文檔規(guī)范）。

三、交互文檔的構(gòu)成

綜合國內(nèi)IT行業(yè)的從業(yè)環(huán)境，基于Axure的原型制作可能更便于打通開發(fā)上下游。

大概礙于Axure做出來的原型不是那么美觀和便捷，部分產(chǎn)品經(jīng)理和UX設(shè)計師可能已經(jīng)轉(zhuǎn)戰(zhàn)Sketch等交互設(shè)計軟件，或者使用Flinto來模擬交互動效。但因為這些軟件大多無法跨平臺，考慮到很多公司并沒有能力全面采用MAC辦公，所以這里推薦使用Axure進(jìn)行原型制作。

交互文檔一般由以下部分構(gòu)成：

1. 交互文檔說明及日志

• 說明交互文檔所針對項目或者功能；
• 日志記錄它的創(chuàng)建時間、修改時間及修改原因和內(nèi)容；
• 記錄文檔的編寫人和最新的更新時間。

交互文檔說明示例

交互文檔更新記錄/日志示例

• 交互文檔的Title有效地保證了交互文檔的唯一性，即該文檔對應(yīng)的是XX項目或XX項目的XX功能；
• 通過編寫人、版本號、創(chuàng)建時間和更新時間，方便在文檔內(nèi)容存疑時，找到對應(yīng)的時間節(jié)點和該文檔的負(fù)責(zé)人，便于對接和修正；
• 在更新記錄中，需要有效地標(biāo)明版本號、更新時間、更新內(nèi)容和修改人，便于文檔內(nèi)容出現(xiàn)存疑時，定位到是哪一部分出現(xiàn)了問題，該部分的對接人是誰，并且明確時間節(jié)點，便于版本的追溯和責(zé)任的厘清。

2. 文檔內(nèi)容結(jié)構(gòu)

大致包括模塊名稱、功能流程圖、頁面說明、頁面跳轉(zhuǎn)關(guān)系圖等。

交互文檔構(gòu)成結(jié)構(gòu)示例

在文檔內(nèi)容的結(jié)構(gòu)中，必須保證交互文檔的說明和日志是位于頭部，便于隨時查閱；

在正式內(nèi)容中需要靈活運用Axure中的圖層，如分組和頁面圖標(biāo)等。一般我們認(rèn)為將頁面說明和頁面跳轉(zhuǎn)關(guān)系統(tǒng)一歸到一個功能流程或者一個分組下，這樣旣合乎邏輯也可以保證文檔內(nèi)容的層次感，便于查閱時的定位和展開；

始終堅持“一個頁面只描述一個功能”的原則，這樣可以保證單個文檔頁面中的內(nèi)容量適當(dāng)，便于查閱。

頁面說明示例

在確定以上內(nèi)容后，就可以保證這份交互文檔結(jié)構(gòu)是足夠清晰的，是便于查閱的。接下來，我們將講解交互文檔的正式內(nèi)容應(yīng)該如何寫。

四、交互文檔該怎么寫

當(dāng)交互文檔構(gòu)成確定后，已經(jīng)保證了描述對象的模塊劃分是清晰明確的，是不和其他模塊有過多的重合的，是唯一的、最新的、具備開發(fā)執(zhí)行力的。

1. 功能流程圖

功能流程圖用以厘清功能邏輯，對開發(fā)人員來說是必需品。功能流程圖的繪制應(yīng)只針對文檔中某個模塊的功能，而并非針對整個交互文檔描述對象。如果流程圖過大，會直接導(dǎo)致可閱讀性下降。因此，切忌好大喜功，將某個功能描述清楚即即可。

譬如描述一個網(wǎng)站整站的交互文檔中，有多個功能模塊需要描述，如登錄/注冊、用戶手機號綁定、下單/支付等等，我們應(yīng)該清晰地描述每個功能各自的功能流程，而非將之串聯(lián)起來。

這里不再詳細(xì)介紹流程圖的畫法，可參考來自白三的《關(guān)于流程圖元素定義、結(jié)構(gòu)分類；以及，我有一些技巧告訴你》

流程圖示例

2. 頁面說明圖

頁面說明圖可以詳細(xì)說明界面中元素的來源，控件的交互方式，數(shù)據(jù)的樣式，字段的長度規(guī)定，頁面元素的狀態(tài)變化等。

該頁面只做參考，實際工作中可不用這么細(xì)致

另，我個人其實不建議在交互稿的頁面制作中采用各種Icon，一方面是裝飾過度，另一方面各類Icon風(fēng)格不一，直接降低了交互稿的美觀度。交互稿件的美觀體現(xiàn)在統(tǒng)一和素凈，重點信息永遠(yuǎn)是對功能的描述和對各類情況的規(guī)定。

在頁面說明部分中，必須保證一個交互頁面中，針對的只有一個功能。比如注冊登錄，由注冊和登錄構(gòu)成，頁面說明頁中必須分開，注冊頁面說明圖只羅列注冊功能相關(guān)頁面，登錄頁面說明圖只羅列登錄功能相關(guān)頁面。

頁面說明頁示例

3. 頁面跳轉(zhuǎn)關(guān)系圖

頁面跳轉(zhuǎn)關(guān)系圖是串連起頁面說明圖的重要核心，說明頁面和頁面之間的跳轉(zhuǎn)關(guān)系。也是功能流程圖的具象表現(xiàn)。這里的規(guī)則也和功能流程圖一致，只針對某個模塊，不針對整個交互文檔的描述對象。一方面是防止單頁交互頁面內(nèi)容過多，不利于觀看，另一方面，如果單頁內(nèi)容過多，也會導(dǎo)致Axure的運行緩慢。

頁面跳轉(zhuǎn)關(guān)系圖示例

在頁面跳轉(zhuǎn)關(guān)系圖中，必須注明頁面名稱。尤其注意的是頁面連接線不可過多重合，避免造成閱讀的不順暢。

錯誤示例

4. 頁面?zhèn)渥?/strong>