本文將著重介紹交互設(shè)計(jì)師的輸出物–交互文檔的相關(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è)的獨(dú)有特色和特有流程。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 交互文檔說明及日志

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

交互文檔說明示例

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

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

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

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

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

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

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

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

頁面說明示例

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

四、交互文檔該怎么寫

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

1. 功能流程圖

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

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

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

流程圖示例

2. 頁面說明圖

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

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

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

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

頁面說明頁示例

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

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

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

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

錯(cuò)誤示例

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