大部分的設(shè)計(jì)師應(yīng)該都沒有見過所謂的“交互設(shè)計(jì)文檔”吧？在實(shí)際工作中，所謂的交互設(shè)計(jì)文檔是由交互設(shè)計(jì)師所輸出的，但是大部分的互聯(lián)網(wǎng)公司是沒有交互設(shè)計(jì)師的。交互設(shè)計(jì)師的工作內(nèi)容被UI設(shè)計(jì)師與產(chǎn)品經(jīng)理相互分?jǐn)偂Ｄ枪緸槭裁床徽衅敢粋€(gè)交互設(shè)計(jì)師崗位呢？（boss：呵呵～一個(gè)人能完成的任務(wù)為什么要兩個(gè)人?。?br style="margin:0px;padding:0px;outline:none;box-sizing:inherit;" /> 所以本篇文章為了讓我們?cè)O(shè)計(jì)師能夠很好的了解什么是交互說明文檔？它是干嘛的？有什么用？如果制作？有哪些內(nèi)容等多方面全面了解。（哪里有了解的不到位錯(cuò)誤的地方，也希望各位大神多多指點(diǎn)相互學(xué)習(xí)。讓我卷～）

一、交互設(shè)計(jì)文檔

什么是交互文檔？

交互文檔，即交互設(shè)計(jì)說明文檔（英文名“Design Requirement Document”）。又稱“DRD文檔”。用來承載交互說明、交互原型、項(xiàng)目背景等內(nèi)容，存檔并交互項(xiàng)目相關(guān)伙伴的團(tuán)隊(duì)協(xié)作文檔。

為什么需要交互文檔？

也許你想到：什么？交互文檔（DRD）我壓根沒見過，這難道不是口頭說說就行嘛？無需交互設(shè)計(jì)師。（大部分公司的交互文檔是由UI設(shè)計(jì)師/產(chǎn)品經(jīng)理來撰寫）但是有的公司產(chǎn)品也分擔(dān)著UI設(shè)計(jì)師的工作.......只要你如果優(yōu)秀干啥都行，不優(yōu)秀話語權(quán)都沒有。（比如我們這些“小美工”。職位只是對(duì)一個(gè)工作的劃分不代表對(duì)你能力的劃分，只是公司的一種小手段～

回歸正題，作為交互設(shè)計(jì)師，工作職責(zé)起到“對(duì)接上下游，承上啟下”的作用，不論是在方案評(píng)審的講解，還是日常的工作溝通，都應(yīng)具備優(yōu)秀的溝通能力、語言表達(dá)和DRD表達(dá)能力。而DRD不僅能完美的詮釋出產(chǎn)品的內(nèi)容和需求，還能夠?yàn)楫a(chǎn)品出一套完整的設(shè)計(jì)規(guī)范，讓產(chǎn)品保持一致性，方便團(tuán)隊(duì)協(xié)作減少溝通成本，也方便后期的修改。

DRD是利于團(tuán)隊(duì)協(xié)作的媒介，也是產(chǎn)品規(guī)范與項(xiàng)目總結(jié)的重要輸出文檔。

交互文檔給誰看？

交互文檔撰寫并不是只有給自己看，最重要的是給：產(chǎn)品經(jīng)理、UI設(shè)計(jì)師、開發(fā)（最需要）等等。并且作為交互設(shè)計(jì)師的輸出物，交互文檔是聯(lián)系開發(fā)流程上下游的重要文件，它需要具備良好的可讀性、唯一性和時(shí)效性。

產(chǎn)品經(jīng)理

首先不同公司，不同團(tuán)隊(duì)產(chǎn)品經(jīng)理與UI/UX設(shè)計(jì)師之間的配合輸出物是不固定的。

1. 大部分公司，產(chǎn)品經(jīng)理細(xì)心點(diǎn)會(huì)連交互說明和原型一起出了（包含在PRD文檔里），但是大部分會(huì)出現(xiàn)體驗(yàn)層的漏洞。

2. 如果公司產(chǎn)品是負(fù)責(zé)傳一句話，有交互設(shè)計(jì)師的情況下，交互需要從功能規(guī)劃、信息架構(gòu)、原型說明一起搞了。

3. 還有在小公司比較罕見的流程就是產(chǎn)品搞PRD，交互搞交互文檔，彼此之間的邏輯可以互相印證。

UI設(shè)計(jì)師

作為交互設(shè)計(jì)師的下游，我們也需要較早的介入需求溝通之中，提早避免后期可能存在的問題出現(xiàn)。

（但是很多時(shí)候交互設(shè)計(jì)師就是我們自己）

開發(fā)（前端設(shè)計(jì)師）

開發(fā)是最需要看交互文檔的重要成員之一，因?yàn)樗麤Q定著產(chǎn)品的邏輯以及頁面的跳轉(zhuǎn)流程、交互方式、動(dòng)效方式等等。（不過大多數(shù)公司只有簡(jiǎn)單的PRD文檔，開發(fā)也只是簡(jiǎn)單看看～）

二、交互文檔（DRD）如何撰寫？需要有哪些內(nèi)容？

你習(xí)慣用什么工具撰寫交互文檔？PPT、Sketch、AI、Axure … ？
你習(xí)慣用什么格式輸出你的交互文檔呢？PPT、PDF、HTML …？
其實(shí)使用什么工具都無所謂，只要能夠正確的描述出交互文檔所需要表達(dá)的內(nèi)容和邏輯就行。（就是誰都看得懂）

我比較喜歡使用Axure軟件撰寫交互設(shè)計(jì)文檔，大家可以根據(jù)自身愛好或者公司規(guī)定進(jìn)行選擇（例如sketch、figma、PS等等..都是可以的。

說了這么多，究竟交互文檔包含哪些內(nèi)容呢？
一般來說，一份最基本的DRD文檔需要包含：DRD封面、更新日志、文檔圖例、產(chǎn)品背景、頁面交互、業(yè)務(wù)流程圖、交互原型、回收站等模塊。

DRD封面

DRD封面：包括產(chǎn)品/項(xiàng)目名稱、版本編號(hào)、撰寫時(shí)間、撰寫人等基本信息。按需可增加參與該項(xiàng)目的各方負(fù)責(zé)人。（如：產(chǎn)品經(jīng)理，交互設(shè)計(jì)師，視覺設(shè)計(jì)師，開發(fā)，測(cè)試，團(tuán)隊(duì)名稱等）

更新日志

更新日志，包含具體新增或修改的內(nèi)容，修改人，修改日期等信息。在實(shí)際工作中，方案的修改和優(yōu)化是不可避免的。更新日志方便項(xiàng)目成員一目了然關(guān)注到重點(diǎn)更新的內(nèi)容，也方便開發(fā)找到對(duì)應(yīng)的負(fù)責(zé)人進(jìn)行溝通，提升工作效率。

文檔圖例

針對(duì)你在該文檔所用到的圖例進(jìn)行說明，輔助閱讀（如：操作/跳轉(zhuǎn)圖例、標(biāo)簽圖例、流程圖例以及手勢(shì)操作圖例。）。特別適合剛?cè)雸F(tuán)隊(duì)，首次閱讀你DRD文檔的人來講，是非常有利于團(tuán)隊(duì)成員對(duì)你文檔的理解。

產(chǎn)品背景 

可包括一些項(xiàng)目背景、需求分析、用戶調(diào)研、競(jìng)品分析等。用于設(shè)計(jì)思路的整理和記錄，方便閱讀，方便參與評(píng)審會(huì)的人理解整個(gè)項(xiàng)目背景下的設(shè)計(jì)思路，也方便日后總結(jié)與溝通。但無需將所有的分析內(nèi)容都放入，結(jié)構(gòu)化整理重點(diǎn)內(nèi)容放入即可。

業(yè)務(wù)流程圖

業(yè)務(wù)流程圖的目的就是梳理并分析優(yōu)化業(yè)務(wù)流程。我知道很多同學(xué)做UI設(shè)計(jì)師的時(shí)候可以完全不管業(yè)務(wù)，直接做設(shè)計(jì)，但是作為交互設(shè)計(jì)師了解產(chǎn)品業(yè)務(wù)是非常重要的，因?yàn)椴涣私鈽I(yè)務(wù)你就無法完成交互設(shè)計(jì)，優(yōu)化業(yè)務(wù)場(chǎng)景。
舉個(gè)例子：在教育考試系統(tǒng)中一般流程是：教育局出通知→學(xué)生報(bào)名考試→老師審核→報(bào)名通過→老師編排學(xué)生考試名單→學(xué)生開始考試對(duì)號(hào)入座→教育局公布成績(jī)→學(xué)生查詢成績(jī)→考試結(jié)束，看這一些列的流程，因?yàn)殛P(guān)聯(lián)特別多，如果對(duì)業(yè)務(wù)不熟悉的話設(shè)計(jì)起來會(huì)非常的不便，如果前期因?yàn)闃I(yè)務(wù)流程不熟悉而設(shè)計(jì)出錯(cuò)誤的交互稿的話，后面就會(huì)特別麻煩。

如何繪制業(yè)務(wù)流程圖？

一聽： 先聽客戶/產(chǎn)品介紹。以最簡(jiǎn)單的方式了解產(chǎn)品重點(diǎn)，即基本要素中的角色、活動(dòng)、協(xié)作關(guān)系梳理出即可。
二溝通： 完成上一步后，就可以進(jìn)行提問了。主要是沿著流程進(jìn)行發(fā)問，重點(diǎn)放在分支、產(chǎn)物關(guān)系上。看看是否存在分支的情況，各協(xié)作之間是否有交付物。
三確認(rèn)： 最后一步就是自己講一遍流程，和客戶代表或者業(yè)務(wù)產(chǎn)品進(jìn)行確認(rèn)是否有理解偏差的地方。

以醫(yī)院APP取號(hào)業(yè)務(wù)為例

頁面交互

頁面交互是交互文檔的主要內(nèi)容可以詳細(xì)說明界面中元素的來源，控件的交互方式，數(shù)據(jù)的樣式，字段的長(zhǎng)度規(guī)定，頁面元素的狀態(tài)變化等。每個(gè)交互頁面的內(nèi)容應(yīng)該包括：文檔頁面標(biāo)題、界面標(biāo)題、界面、設(shè)計(jì)說明。

文檔頁面標(biāo)題：一般在每一頁文檔的頂部。寫明當(dāng)頁內(nèi)容是屬于哪個(gè)模塊或流程的，讓看的人不容易迷失；
界面標(biāo)題：注意命名，方便交互稿中的互相聯(lián)系，如“跳轉(zhuǎn)【XX頁面】”，“回到【XX界面】狀態(tài)”；
界面：界面尺寸建議按實(shí)際界面的比例縮小，避免你想當(dāng)然的設(shè)計(jì)并不符合規(guī)范，也避免一個(gè)界面太大影響閱讀效果；
設(shè)計(jì)說明：邏輯關(guān)系、操作流程或反饋、元素狀態(tài)、字符限制、異常/特殊狀態(tài) 等等，都可以放在設(shè)計(jì)說明中；