在一個(gè)項(xiàng)目中，交互設(shè)計(jì)起著承上啟下的作用。一份好的DRD應(yīng)包含哪些內(nèi)容，注意哪些方面呢？讓我們一起跟隨作者看看吧。

這是一篇在2017年就已完成的關(guān)于交互文檔的規(guī)范性總結(jié)，當(dāng)時(shí)要給咱交互組做交互規(guī)范及分享，其中包括“交互設(shè)計(jì)師的工作流程與規(guī)范”、“產(chǎn)品架構(gòu)”、“交互流程圖”、“交互文檔規(guī)范”、“交互自查清單”等。部分總結(jié)已在組內(nèi)分享或推動(dòng)～今日甚是涼(xia)快(yu)，忙碌了一天，拿出電腦打開了這份總結(jié)，決定更新更新，也許對(duì)咱UED組日后的工作或交流有所幫助，順手放這兒跟小伙伴們交流交流～

一、什么是交互文檔？

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

二、為什么需要交互文檔？

你也許會(huì)說：“產(chǎn)品經(jīng)理就可輸出DRD，無需交互設(shè)計(jì)師?！钡鋵?shí)，許多交互設(shè)計(jì)師也可承擔(dān)產(chǎn)品經(jīng)理的角色…balabala此處省略1萬字～只要你夠優(yōu)秀，CEO都成！說白了，崗位名稱不過是對(duì)工作職責(zé)的劃分而已，是公司或部門提高專業(yè)性和工作效率以達(dá)到公司目標(biāo)的一種方式罷了～（瞎說什么大實(shí)話，人家也是個(gè)有態(tài)度的射擊獅！）

言歸正傳，作為交互設(shè)計(jì)師，工作職責(zé)起到“對(duì)接上下游，承上啟下”的作用，不論是在方案評(píng)審的講解，還是日常的工作溝通，都應(yīng)具備優(yōu)秀的語言表達(dá)和DRD表達(dá)能力。

而DRD不僅能完美闡釋產(chǎn)品內(nèi)容和設(shè)計(jì)思路，還利于設(shè)計(jì)規(guī)范與統(tǒng)一，讓產(chǎn)品保持一致性，在項(xiàng)目各方協(xié)調(diào)工作中起到重要作用，也方便后期進(jìn)行項(xiàng)目總結(jié)。

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

三、都有誰在看交互文檔？

業(yè)務(wù)方/需求方：包括產(chǎn)品經(jīng)理/運(yùn)營(yíng)經(jīng)理，這里大多指產(chǎn)品經(jīng)理。

Ta們會(huì)通過DRD關(guān)注你的設(shè)計(jì)方案是否滿足業(yè)務(wù)和用戶需求。交互設(shè)計(jì)師與Ta們討論產(chǎn)品規(guī)劃及業(yè)務(wù)需求后，結(jié)合用戶需求，分解關(guān)鍵因素，最終歸納出設(shè)計(jì)需求。而DRD正是整個(gè)設(shè)計(jì)思路的闡述媒介。

視覺設(shè)計(jì)師：這里包括視覺和UI設(shè)計(jì)師，或包括動(dòng)畫設(shè)計(jì)師。

Ta們需知道產(chǎn)品定位是怎樣的？有哪些頁面要設(shè)計(jì)？頁面間的跳轉(zhuǎn)是怎樣的？各頁面各元素包括什么狀態(tài)？遇到特殊情況（數(shù)據(jù)加載、網(wǎng)絡(luò)異常、極端情況等）如何設(shè)計(jì)？

開發(fā)人員：包括iOS、Android、H5、Web等前端開發(fā)工程師和后端工程師。

Ta們需從DRD知道，產(chǎn)品要實(shí)現(xiàn)多少功能？多少頁面？如何去實(shí)現(xiàn)？頁面間是怎么跳轉(zhuǎn)的？異常情況怎么處理？… 然后用代碼將其實(shí)現(xiàn)出來。

測(cè)試人員：包括測(cè)試工程師和參與測(cè)試的其他人。

Ta們需參考DRD梳理測(cè)試用例，測(cè)試用例須覆蓋所有功能、使用場(chǎng)景、操作行為、產(chǎn)品細(xì)節(jié)，須保證上線無bug，或是少bug狀態(tài)。

后續(xù)相關(guān)人員：如客戶經(jīng)理和客服專員等。

Ta們需對(duì)業(yè)務(wù)和產(chǎn)品足夠了解，方能更好的展開后續(xù)工作。

四、交互文檔的結(jié)構(gòu)和內(nèi)容

那么，一份好的DRD應(yīng)包含哪些內(nèi)容，注意哪些方面呢？以下是我整理的DRD輸出思路，僅供交流或參考。內(nèi)容源自工作經(jīng)驗(yàn)的總結(jié)，源自同事的溝通及反饋，源自過往閱讀過的相關(guān)文章的總結(jié)。

4.1 撰寫交互文檔用什么工具？輸出什么格式？

你習(xí)慣用什么工具撰寫交互文檔？PPT、Sketch、AI、Axure?… ？

你習(xí)慣用什么格式輸出你的交互文檔呢？PPT、PDF、HTML …？

我也會(huì)問自己同樣的問題，什么工具和格式才是最好的呢？實(shí)踐后，總結(jié)如下：

若是大項(xiàng)目或復(fù)雜的大需求，推薦Axure輸出HTML格式。

Axure含有站點(diǎn)地圖，可清晰展示層級(jí)關(guān)系，可很好的完成場(chǎng)景的跳轉(zhuǎn)。還可通過分享鏈接，實(shí)時(shí)更新，協(xié)作更方便。

若是小需求，推薦Sketch輸出PDF格式。

\Sketch畫原型效率高，輸出PDF，美觀、全局、不易看漏內(nèi)容，無設(shè)備和網(wǎng)絡(luò)限制，方便閱讀。但無站點(diǎn)地圖，故不方便大項(xiàng)目/大需求的閱讀。

若是方案概述，推薦PPT輸出PPT格式。

PPT無使用門檻，方便高效，看上去較正式、美觀，無設(shè)備和網(wǎng)絡(luò)限制。但一頁P(yáng)PT放不了幾個(gè)界面，且無站點(diǎn)地圖。

4.2 交互文檔應(yīng)包括哪些內(nèi)容？

DRD可根據(jù)公司或項(xiàng)目實(shí)際情況來定內(nèi)容、元素和樣式。這只是我工作中整理的較通用的文檔結(jié)構(gòu)模板：分為文檔封面、更新日志、文檔圖例、設(shè)計(jì)背景/思路、整體業(yè)務(wù)流程、頁面交互、特別說明、廢紙簍等部分。

DRD封面

[該圖片不商用，若涉及侵權(quán)請(qǐng)聯(lián)系本人]

DRD封面：包括文檔標(biāo)題（項(xiàng)目/產(chǎn)品名稱）、版本編號(hào)、發(fā)布時(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)行溝通，提升工作效率。

其他細(xì)節(jié)經(jīng)驗(yàn)分享：

1. 文檔更新的日期按最近更新的排最前（最好還能用顏色區(qū)分一下）。這樣不會(huì)因日志過長(zhǎng)需要找太久；
2. 最新修改的頁面可點(diǎn)擊直接跳轉(zhuǎn)至相應(yīng)頁面。方便更快找到對(duì)應(yīng)的文檔頁面。

文檔圖例

針對(duì)你在該文檔所用到的圖例進(jìn)行說明，輔助閱讀。尤其對(duì)初次接觸你DRD的人來說，助于對(duì)方理解你的文檔，尤其是一些非通用的標(biāo)識(shí)。

設(shè)計(jì)背景/思路

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

需求分析應(yīng)包含業(yè)務(wù)需求/功能需求，用戶需求，和對(duì)需求的分析與歸納。下圖是隨手舉例，僅供參考：

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

主要是整體的業(yè)務(wù)流程圖。工作中，大多是產(chǎn)品經(jīng)理撰寫，經(jīng)由交互設(shè)計(jì)師溝通和整理放上來（本次不做具體分享）。該流程圖也可根據(jù)具體項(xiàng)目進(jìn)行位置調(diào)整，例如跟著頁面交互的模塊或流程走。

頁面交互

頁面交互，是DRD的主體。包括信息架構(gòu)、任務(wù)流程圖、界面交互圖、交互說明等。頁面交互的結(jié)構(gòu)，應(yīng)根據(jù)產(chǎn)品信息架構(gòu)搭建。要求功能層級(jí)要清晰，命名合理，格式統(tǒng)一，更新的內(nèi)容統(tǒng)一標(biāo)識(shí)，方便他人瀏覽查找。

1.?信息架構(gòu)：是整個(gè)產(chǎn)品的骨架，它相對(duì)穩(wěn)定，動(dòng)到信息架構(gòu)的需求，一般都是新產(chǎn)品、新功能或產(chǎn)品大改版。信息架構(gòu)圖可幫助我們?cè)谇捌谑崂碚麄€(gè)產(chǎn)品的結(jié)構(gòu)，后期按照大的架構(gòu)來迭代，同時(shí)讓信息更易理解與瀏覽。

構(gòu)建信息架構(gòu)，需根據(jù)產(chǎn)品特征確定結(jié)構(gòu)類型，明確功能優(yōu)先級(jí)，根據(jù)其重要度、商業(yè)價(jià)值、使用頻率等排序，將重要功能抽提出來。還需考慮可擴(kuò)展性，方便后期迭代優(yōu)化。

2. 任務(wù)流程圖：即分任務(wù)用\圖形化表達(dá)產(chǎn)品邏輯關(guān)系的步驟和過程，指用戶使用產(chǎn)品中操作后的各種結(jié)果反饋等。

你需完全了解需求，站在用戶的角度去考慮和引導(dǎo)用戶完成用戶目標(biāo)，關(guān)注用戶的操作不僅可以讓你的思維更清晰，還可避免有操作邏輯的遺漏。也能讓其他人能快速地理解。

其他細(xì)節(jié)經(jīng)驗(yàn)分享：

1. 分任務(wù)寫，別把所有流程都寫在一個(gè)大流程里，不方便瀏覽，也容易遺漏或出錯(cuò)；
2. 流程圖的“開始”和“結(jié)束”避免半天找不著；
3. 流程主次分明，順暢地瀏覽住流程，也能全面看到各流程；
4. 流程圖盡量簡(jiǎn)化，流程線盡量避免繞來繞去，多流程指向同一結(jié)果可合并。

3. 每頁交互文檔的內(nèi)容：

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

特別說明

包括一些需要特殊說明的內(nèi)容，例如全局通用說明、缺省頁匯總、動(dòng)效說明、音效說明等，根據(jù)實(shí)際項(xiàng)目而定。一方面，可保證設(shè)計(jì)規(guī)范性和產(chǎn)品一致性，在文檔頁不用每個(gè)細(xì)節(jié)重復(fù)說明；另一方面便于視覺設(shè)計(jì)和開發(fā)整體查看。這部分內(nèi)容通常也被放在“頁面交互”結(jié)構(gòu)內(nèi)。

廢紙簍

廢紙簍，其實(shí)就是DRD的“后悔藥”。設(shè)計(jì)方案不斷調(diào)整優(yōu)化的過程稿，本以為沒用的內(nèi)容，都統(tǒng)統(tǒng)放這兒，以防后期可能用到。（改改改，你懂得～）

其他細(xì)節(jié)經(jīng)驗(yàn)分享：

“廢紙簍”后面最好備注下“忽略不看/僅UE查看”。否則很有可能會(huì)有不明所以的人兒跑過來問你，這個(gè)頁面和前面哪個(gè)才是最新的……

4.5 其他小經(jīng)驗(yàn)分享

1. 別為了寫文檔而寫文檔，要為了解決問題。

開頭提到DRD是用來承載設(shè)計(jì)方案、交互原型、交互說明等內(nèi)容，存檔并交付給相關(guān)人員參考。因此，別為了寫文檔而寫文檔，要解決實(shí)際問題。

2. DRD要做到邏輯嚴(yán)謹(jǐn)，文本簡(jiǎn)明

DRD的內(nèi)容結(jié)構(gòu)、頁面交互的結(jié)構(gòu)需思路清晰，邏輯嚴(yán)謹(jǐn)，符合產(chǎn)品架構(gòu)的層級(jí)關(guān)系。文檔內(nèi)容書寫要邏輯嚴(yán)謹(jǐn)，簡(jiǎn)明扼要，將交互設(shè)計(jì)的思路和方案更好的可視化和簡(jiǎn)潔化。

3. 美即適用，注意文檔的體驗(yàn)

DRD也要考慮美？答案是肯定的。

DRD也是給人用的，也應(yīng)注重用戶體驗(yàn)。另外，自己在其他方面的能力（如邏輯思維、產(chǎn)品創(chuàng)意等）有出色到能蓋過自己在表現(xiàn)層上的缺點(diǎn)么？若有，那你大可不必過于在乎形式。不過DRD“美”的定義和視覺不太一樣，它應(yīng)該是美觀、清晰、易用、符合用戶體驗(yàn)原則的，它更偏向于一種邏輯美，一種體驗(yàn)美。

4. 在做方案時(shí)，先考慮和做完正常情況，再開始畫所有異常頁面或內(nèi)容。

因?yàn)閺恼w開始做，中途老大或需求方想看方案就能有階段性完整的方案可看了；另外，大流程和頁面都沒確定的話，再細(xì)又有啥用呢？

5. 一頁交互文檔一個(gè)任務(wù)/流程。
每一頁能展示的內(nèi)容有限，若堆積過多，會(huì)成問題；另外，也方便形成通用的任務(wù)/流程

6. 同一界面/頁面的不同狀態(tài)最好在同一頁交互文檔展示。
以免造成修改或閱讀混亂。

7. 交互原型盡量使用黑白灰。
避免原型圖對(duì)視覺設(shè)計(jì)師產(chǎn)生干擾，影響視覺發(fā)揮。另外，若顏色和視覺稿不一致，測(cè)試會(huì)來問到底用哪種～

8. 對(duì)齊讓文檔可讀性更好。
界面與設(shè)計(jì)說明的對(duì)齊、界面和界面間的對(duì)齊，會(huì)使文檔閱讀性更好。

五、總結(jié)

交互文檔很重要，但其核心并不是單純的形式美，交互設(shè)計(jì)師最重要的是在做設(shè)計(jì)時(shí)多方面思考。

（本文雖未對(duì)“需求分析和設(shè)計(jì)思考”著重筆，但真的真的真的很重要！）

多了解了解業(yè)務(wù)需求，多問問為什么，多找找最根本的問題，總結(jié)核心的業(yè)務(wù)需求，挖掘用戶最根本最真實(shí)的需求……

面對(duì)這些需求和問題，有哪些解決方案？哪個(gè)方案更優(yōu)？還有更優(yōu)的解決方案么？當(dāng)設(shè)計(jì)師養(yǎng)成把所有的都考慮清楚，然后權(quán)衡取舍。就可以把產(chǎn)品的用戶體驗(yàn)做的更好，自然也就能做出一份高質(zhì)量無邏輯問題的DRD了。

如此一來，你的方案做的怎么樣，一看DRD便知，而你的DRD好不好，一看便知～

作者：Tricia（微信號(hào)：WX2225788009），YY歡聚時(shí)代交互設(shè)計(jì)師，前UI設(shè)計(jì)師。

本文由 @Tricia 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash ，基于 CC0 協(xié)議