最近停更了一段時間了损话，一直在琢磨著交互文檔這個事侦啸。其實早幾個月前就整理了一部分，把自己給整自閉了就整平臺規(guī)范去了席镀。好了匹中，說了一堆廢話言歸正傳。

在做交互文檔之前豪诲，我們先要明白什么是交互文檔顶捷、為什么要做以及做了給誰看。

一屎篱、什么是交互文檔

交互文檔服赎，即交互設(shè)計說明文檔。英文 Design Requirement Document 交播，簡稱DRD重虑。主要是用來承載設(shè)計思路、設(shè)計方案秦士、信息架構(gòu)缺厉、原型線框、交互說明等內(nèi)容隧土。

二提针、為什么需要交互文檔

有些人可能對文檔這種東西比較反感，尤其是從事工作不久的朋友曹傀。其實工作得越久辐脖，越會發(fā)現(xiàn)文檔的重要性，它可以幫助你理清思路皆愉，并記錄下來嗜价，便于回顧。

工作上而言幕庐，有一份規(guī)范的文檔可以讓你的設(shè)計更有說服力久锥，也易于工作對接，提高彼此之間的溝通效率翔脱。

三奴拦、交互文檔給誰看的

交互文檔其實要說給誰看，其實具體情況具體分析届吁。有的公司老板也要盯交互文檔错妖，以及甲方爸爸绿鸣、運營部門同事，都有查看的可能暂氯。

不過有4類人潮模，無論如何他們都必須是交互文檔的忠實“讀者“：

【產(chǎn)品經(jīng)理】產(chǎn)品經(jīng)理與交互設(shè)計師可能是溝通最多的人，產(chǎn)品經(jīng)理主要在文檔中確認(rèn)設(shè)計思路和業(yè)務(wù)流程痴施，然后過一下頁面交互模塊擎厢。

【視覺設(shè)計】UI設(shè)計師通常最關(guān)注的是頁面交互模塊，有著產(chǎn)品思維和體驗思維的設(shè)計師也會仔細(xì)看一下設(shè)計思路和產(chǎn)品背景辣吃，以便于自己更了解產(chǎn)品業(yè)務(wù)邏輯和用戶心理动遭。

【開發(fā)人員】前端的開發(fā)同事和UI設(shè)計師一樣，最關(guān)注頁面交互模塊神得，其他的作為提升會輔助了解厘惦。而后端開發(fā)人員關(guān)注更多的是業(yè)務(wù)邏輯、信息架構(gòu)哩簿、操作流程等宵蕉，這些都清晰了，他們才能輸出一份準(zhǔn)確合格的開發(fā)文檔节榜。

【測試人員】因為測試人員是把關(guān)產(chǎn)品上線的一群人羡玛，所以各個模塊、步驟都應(yīng)該去了解透徹宗苍，才能提出有效的bug稼稿。

四、如何撰寫交互文檔

本文主要闡述以Axure軟件為撰寫工具讳窟，大家可以根據(jù)實際需求決定用什么軟件（Sketch渺杉、PPT、Word挪钓、PS、AI 等）耳舅。

比如小需求可以用Sketch碌上，快而高效。如果是要給甲方爸爸/大老板看的浦徊，使用PPT會讓他們更好理解馏予。

沒有軟件基礎(chǔ)的設(shè)計師朋友，后臺回復(fù)“教程“即可獲得入門Axure視頻教程盔性。

通常霞丧，一個比較基礎(chǔ)、規(guī)范的交互文檔（DRD）由：文檔封面冕香、更新日志蛹尝、文檔圖例后豫、設(shè)計背景/思路、業(yè)務(wù)流程突那、頁面交互挫酿、全局通用說明、廢紙簍八部分組成愕难。當(dāng)然早龟，這不是絕對，你可以根據(jù)你的實際工作需要進(jìn)行增減猫缭。

比如葱弟，如果是C端產(chǎn)品的話，用戶調(diào)研的結(jié)論猜丹、用戶畫像芝加、用戶體驗地圖等等，都可以放進(jìn)去給看的人一個參考居触。尤其是在如今這么關(guān)注用戶體驗妖混、產(chǎn)品思維的一個大環(huán)境下，這些數(shù)據(jù)支撐很有力量轮洋。同時還可以幫助開發(fā)人員制市、界面設(shè)計人員培養(yǎng)產(chǎn)品思維、體驗思維弊予，大家一起將產(chǎn)品變得更好祥楣。

其次，交互文檔的整潔與美觀也很有必要汉柒。相信在過去幾年不少人有遇到過這樣的產(chǎn)品經(jīng)理（兼交互）误褪，他們會輸出一些有時連他們自己都看不太懂或者直接從其它競品截圖來的線框圖。當(dāng)開發(fā)和界面設(shè)計的人提出質(zhì)疑的時候還美其名曰線框不重要碾褂，重要的是里面的業(yè)務(wù)邏輯兽间。。正塌。其實用產(chǎn)品思維想嘀略，交互文檔就是交互設(shè)計師的產(chǎn)品，而看的人就是用戶乓诽，保持良好的可讀性帜羊，可謂至關(guān)重要。

1鸠天、文檔封面

交互文檔的封面如上圖讼育，通常包括產(chǎn)品的名稱、Logo、版本號以及版本發(fā)布時間奶段、所屬部門饥瓷、對接負(fù)責(zé)人/對接人。

2忧饭、更新日志

我們都知道扛伍，在產(chǎn)品的迭代的過程中，需求/功能是會不斷調(diào)整的词裤。而更新日志刺洒，就是為了迭代而生。它一般由修改日期吼砂、修改內(nèi)容逆航、修改人、版本號和備注組成渔肩。

如果是新增的功能或模塊因俐，建議是要加上鏈接可直接跳轉(zhuǎn)至新增內(nèi)容的，如上圖周偎。版本號也是同理抹剩，都應(yīng)加上對應(yīng)的版本鏈接，便于查看者回溯之前的內(nèi)容蓉坎，與當(dāng)前的新版本形成對比澳眷。這一點對開發(fā)人員來說很重要，其次對于新同事深入理解產(chǎn)品也能起到很大的幫助蛉艾。

修改日期钳踊，通常是按時間倒序排列，查看起來會比較方便勿侯。

3拓瞪、文檔圖例

文檔圖例，顧名思義就是關(guān)于此文檔的一些輔助說明助琐，目的是為了讓讀者更好地理解文檔祭埂。如上圖的：操作/跳轉(zhuǎn)圖例、標(biāo)簽圖例兵钮、流程圖例以及手勢操作圖例沟堡。

4、設(shè)計背景/思路

設(shè)計背景矢空，根據(jù)實際工作需要，放置一些關(guān)于思路整理禀横、靈感來源的文檔屁药。

比如用研報告、用戶畫像柏锄、競品分析報告酿箭、商業(yè)畫布等等复亏。增強文檔的說服力，盡量讓每一個人都能理解到產(chǎn)品的戰(zhàn)略目標(biāo)和業(yè)務(wù)邏輯缭嫡。

因為我今年對接最久的是一個B端產(chǎn)品的項目缔御，所以整理了一個產(chǎn)品畫像，僅供參考妇蛀。

5耕突、業(yè)務(wù)流程

業(yè)務(wù)流程圖，不是操作流程圖也不是頁面流程圖评架。它是產(chǎn)品的整體業(yè)務(wù)流程眷茁，直接和業(yè)務(wù)掛鉤，可以說是產(chǎn)品的核心流程纵诞。例如淘寶APP上祈，買家購物由始至終的流程就是它的業(yè)務(wù)流程。通常用泳道圖的形式展示浙芙，多數(shù)情況下是由產(chǎn)品經(jīng)理繪制登刺。

以上是我所負(fù)責(zé)產(chǎn)品的核心業(yè)務(wù)的流程圖。因為是B端產(chǎn)品嗡呼，涉及角色較多纸俭，針對3個代表性角色分別進(jìn)行了繪制，僅供參考晤锥。(涉及到保密協(xié)議掉蔬，所有關(guān)鍵詞都去掉了)

6、頁面交互

（1）信息架構(gòu)

信息架構(gòu)屬于用戶體驗的結(jié)構(gòu)層矾瘾，是產(chǎn)品的骨架女轿。一般是由產(chǎn)品經(jīng)理或者更高層的管理人員給出大框架。除非是大的產(chǎn)品迭代壕翩，否則不會大改蛉迹。

（2）權(quán)限說明

如果是C端產(chǎn)品，權(quán)限這一塊相對簡單放妈，比較好整理的北救。B端產(chǎn)品涉及角色眾多，可能要單獨拎出來分析整理芜抒。

以上僅供參考珍策，大家具體情況具體分析。若是功能很單一的產(chǎn)品宅倒，交互文檔中也可省去這個模塊攘宙。

（3）操作流程圖

產(chǎn)品操作流程圖就是通過圖形化的表達(dá)形式，闡述產(chǎn)品在功能層面的邏輯和信息。它能夠更清晰蹭劈、直觀地展示用戶在使用某個功能時疗绣，會產(chǎn)生的一系列操作和反饋的圖標(biāo)。

注：不要將所有流程匯總在一個表里铺韧，或者展示在同一個頁面中多矮，而應(yīng)跟隨具體的操作或者功能模塊放置。時刻想著看文檔的人的感受哈打，怎么易懂怎么來塔逃。

上圖是登錄、注冊和找回密碼的操作流程圖前酿。僅供參考患雏。模板源文件下載，后臺回復(fù)“交互”即可罢维。

（4）頁面線框圖

頁面線框圖淹仑，是通過圖形化的表達(dá)形式，闡述產(chǎn)品在頁面層面的信息肺孵。包括：

【頁面標(biāo)題】即每一個頁面的對應(yīng)標(biāo)題匀借，一般就是導(dǎo)航欄標(biāo)題

【頁面內(nèi)容】以黑白為主，保證信息規(guī)整易讀

【交互說明】用標(biāo)簽將其對應(yīng)起來平窘，包括交互邏輯吓肋、操作流程及反饋、元素狀態(tài)瑰艘、字符限制是鬼、異常/特殊狀態(tài)、相關(guān)規(guī)則 等等

【主流程線】只需要畫出主流程線即可紫新，千萬不可太多太雜均蜜，時刻考慮讀者的感受

以上是注冊的的頁面線框圖，僅供參考芒率。

以上是登錄的線框圖和詳細(xì)的交互說明囤耳。將重點內(nèi)容用紅色標(biāo)記，可以讓查看者一目了然更好理解文檔偶芍。

7充择、全局通用說明

全局通用說明，指整個產(chǎn)品可通用或者復(fù)用的元素匪蟀。一般是邊做文檔邊整理出來的椎麦，方便自己或者接手該項目的設(shè)計師直接調(diào)用。

其次材彪，對開發(fā)及時封裝可復(fù)用控件也是有參考價值的观挎。

（1）常用控件

常用控件類似UIKit撒桨，通常將極具復(fù)用價值的控制整理在一起，方便及時調(diào)用键兜。

以上，僅供參考穗泵。

（2）復(fù)用界面

顧名思義就是全局可復(fù)用的一些內(nèi)頁普气，比如選擇聯(lián)系人、獨立搜索頁等佃延。

（3）時間規(guī)范

在做產(chǎn)品的第一步现诀，就應(yīng)該約定一個時間規(guī)范。不然各個端開發(fā)出來履肃，你會發(fā)現(xiàn)iOS是斜杠的仔沿，Android是橫杠的，WEB是圓點的...真到了發(fā)現(xiàn)的時候再改尺棋，那真是彼此都是無比崩潰的封锉。

（4）缺省頁匯總

缺省頁一般包括加載失敗、加載中膘螟、網(wǎng)絡(luò)中斷和無數(shù)據(jù)的空頁面成福。為空頁可以按照模塊整理在一起，方便UI設(shè)計師最后一起設(shè)計缺省頁荆残，保持風(fēng)格統(tǒng)一奴艾。

8、廢紙簍

廢紙簍内斯，被稱為是交互文檔的“后悔藥”蕴潦。在需求不斷變動的情況下，改改改的過程中俘闯，請把你改過的稿子潭苞，放這里！１感臁萄传！因為很可能最后還是用的第一個方案...（此刻內(nèi)心有點絕望）

五、總結(jié)

文檔蜜猾、軟件只是工具秀菱，最重要的還是要落地、實行起來才能對產(chǎn)品有所幫助蹭睡。所以在撰寫文檔的每時每刻衍菱，都應(yīng)該站在“讀者”的角度思考，他們看的時候感受會是怎樣的肩豁，會覺得很難理解嗎脊串？

除此之外辫呻，還需要有耐心，耐心給他們講解理解不透徹的地方琼锋。用一個朋友的話總結(jié)下：好的設(shè)計都是被虐出來的放闺。（其實干哪一行不是呢...???♀?重要的是：心態(tài)心態(tài)～）

本文旨在提供參考，并非絕對的規(guī)范缕坎，還望拋磚引玉怖侦，多多交流。

公眾號后臺回復(fù)“交互”谜叹，即可下載交互文檔模板源文件匾寝。

參考文章：

1、http://www.woshipm.com/ucd/3809.html

2荷腊、http://www.woshipm.com/ucd/964279.html

3艳悔、http://www.woshipm.com/ucd/1325363.html