交互設(shè)計(jì)文檔分為兩個(gè)版本：一個(gè)是界面元素標(biāo)注版，另一個(gè)是附帶交互邏輯版。那么，具體的寫(xiě)法和要求如何呢？

為什么要寫(xiě)這篇文章？

寫(xiě)這篇文章之前，遇到過(guò)很多朋友問(wèn)道：『交互設(shè)計(jì)的輸出物是什么？』 、『交互設(shè)計(jì)師怎么與程序員協(xié)作？』、『交互設(shè)計(jì)師還需要出文檔？』等等一些問(wèn)題。

更多的人在尋找一個(gè)交互設(shè)計(jì)文檔的寫(xiě)法教程，每一個(gè)人的回答都不相同，但是很多入門的交互設(shè)計(jì)師遇到這個(gè)問(wèn)題時(shí)覺(jué)得很棘手，因?yàn)椴磺宄约簯?yīng)該如何寫(xiě)一份符合自己產(chǎn)品業(yè)務(wù)邏輯或產(chǎn)品規(guī)范的設(shè)計(jì)說(shuō)明文檔。

這篇文章就是給這些有很多疑問(wèn)的同學(xué)寫(xiě)的，可以解開(kāi)一些疑問(wèn)，但是指望這篇文章就寫(xiě)出高質(zhì)量的文檔顯然不可行，所以看完這篇文章后可以從中提取一些思路，自己整理一個(gè)屬于自己的設(shè)計(jì)文檔規(guī)范寫(xiě)法的模板，長(zhǎng)期積累下來(lái)，就可以形成自己的設(shè)計(jì)風(fēng)格和規(guī)范。

什么是交互設(shè)計(jì)文檔？

我們先來(lái)統(tǒng)一一下概念以及名詞，以免后續(xù)因?yàn)檎f(shuō)法不夠一統(tǒng)造成誤解。

交互設(shè)計(jì)文檔一般是指：交互設(shè)計(jì)說(shuō)明文檔（交互設(shè)計(jì)師產(chǎn)出的規(guī)范文檔），又稱DRD（Design Requirements Document），工作中一般稱之為”交互設(shè)計(jì)文檔”。

為什么要寫(xiě)交互設(shè)計(jì)文檔？

如果問(wèn)不寫(xiě)交互設(shè)計(jì)文檔可以嗎？

答案是：可以不寫(xiě)，那么寫(xiě)與不寫(xiě)的區(qū)別究竟在哪里？?我們從兩個(gè)方面分析一下。

1.可以不寫(xiě)交互設(shè)計(jì)文檔的情況

下列情況是目前很多公司存在的情況，既沒(méi)有專職交互設(shè)計(jì)師，也不出文檔，但他們也在做產(chǎn)品，這些情況有可能不需要寫(xiě)交互設(shè)計(jì)文檔。

• 產(chǎn)品沒(méi)有交互設(shè)計(jì)環(huán)節(jié)
• 團(tuán)隊(duì)沒(méi)有交互設(shè)計(jì)師角色
• 交互設(shè)計(jì)沒(méi)有系統(tǒng)化和規(guī)范化
• 開(kāi)發(fā)邊界不需要控制
• 產(chǎn)品沒(méi)有動(dòng)效或交互細(xì)節(jié)
• 有經(jīng)驗(yàn)豐富的產(chǎn)品經(jīng)理
• 產(chǎn)品沒(méi)有復(fù)雜的人機(jī)交互邏輯
• 產(chǎn)品只有一個(gè)產(chǎn)品經(jīng)理或負(fù)責(zé)任的角色主要負(fù)責(zé)

2.要寫(xiě)交互設(shè)計(jì)文檔的情況

下列條件具備后寫(xiě)交互設(shè)計(jì)文檔更具意義：

• 產(chǎn)品有清晰的交互設(shè)計(jì)流程
• 產(chǎn)品團(tuán)隊(duì)中有專職的交互設(shè)計(jì)師
• 團(tuán)隊(duì)已有系統(tǒng)化和規(guī)范化的作業(yè)流程
• 開(kāi)發(fā)實(shí)現(xiàn)交互設(shè)計(jì)時(shí)需要定義邊界（驗(yàn)收標(biāo)準(zhǔn)）
• 產(chǎn)品有比較復(fù)雜的、豐富的動(dòng)效
• 產(chǎn)品有較為復(fù)雜的人機(jī)交互邏輯
• 產(chǎn)品有多個(gè)產(chǎn)品經(jīng)理或部門協(xié)作

寫(xiě)交互設(shè)計(jì)文檔的作用就很清楚了，如果要寫(xiě)這樣一份文檔最大的好處是，可以非常清楚地幫助程序員認(rèn)知做出的產(chǎn)品是什么樣子的。

看個(gè)小例子：

V1.0 沒(méi)有交互說(shuō)明文檔的版本（可能由產(chǎn)品經(jīng)理PRD代替）

產(chǎn)品需求的描述是這樣的

需求說(shuō)明：在封面圖片上點(diǎn)擊圖片之后翻轉(zhuǎn)一圈。

（文字描述交互與需求）

開(kāi)發(fā)人員根據(jù)這句話腦補(bǔ)怎么翻轉(zhuǎn)？360°？從左邊還是從右邊？轉(zhuǎn)速怎么樣？這些都需要找PM問(wèn)清楚，如果遇見(jiàn)專業(yè)的PM還可以能講清楚，但如果遇到經(jīng)驗(yàn)不足的PM，就會(huì)說(shuō)讓開(kāi)發(fā)人員你看著做一個(gè)就行……。

V2.0 沒(méi)有交互說(shuō)明，但是有UI設(shè)計(jì)的版本

UI設(shè)計(jì)出圖是這樣的

對(duì)于需求和期望達(dá)到的效果，靜態(tài)可視化的說(shuō)明要比純文字更容易理解，需要給開(kāi)發(fā)人員一個(gè)具象化的目標(biāo)，否則程序員做出來(lái)的東西很容易與期望目標(biāo)偏離，即想要的A而開(kāi)發(fā)給的卻是B。

V3.0 交互原型加演示DEMO

動(dòng)態(tài)demo：

輸出HTML文件預(yù)覽

小結(jié)：編寫(xiě)交互文檔是為了將更豐富的人機(jī)交互動(dòng)作、事件準(zhǔn)確地傳達(dá)給開(kāi)發(fā)人員，確保實(shí)現(xiàn)邊界。

若只是語(yǔ)言或靜態(tài)圖片交付給開(kāi)發(fā)、測(cè)試人員，那么他們很難構(gòu)建一個(gè)產(chǎn)品形態(tài)，不好把控開(kāi)發(fā)方向，另一方面，交互文檔也是給參與項(xiàng)目的其他人快速了解項(xiàng)目的背景，不用到處詢問(wèn)設(shè)計(jì)細(xì)節(jié)。

其實(shí)寫(xiě)作交互設(shè)計(jì)文檔最大的好處在企業(yè)管理層面上，產(chǎn)品的交互設(shè)計(jì)文檔作為產(chǎn)品資料入檔，后續(xù)人員變動(dòng)后，新來(lái)的人可以快速掌握整個(gè)產(chǎn)品的核心設(shè)計(jì)。減少人員無(wú)謂的溝通，不過(guò)有一點(diǎn)，這個(gè)文檔要及時(shí)更新，有變動(dòng)要發(fā)出更新日志，不然還是少不了同事之間的語(yǔ)言溝通。

交互設(shè)計(jì)文檔由誰(shuí)來(lái)寫(xiě)？

誰(shuí)來(lái)寫(xiě)這個(gè)文檔本來(lái)不是問(wèn)題，顯然誰(shuí)是交互設(shè)計(jì)師誰(shuí)提供這個(gè)說(shuō)明文檔，但是，因?yàn)橐恍﹦e的原因?qū)е逻@成了一個(gè)問(wèn)題。
比如：有些公司沒(méi)有交互設(shè)計(jì)師這個(gè)職位，所以不論崗位劃分如何，如果你的團(tuán)隊(duì)中有人負(fù)責(zé)交互設(shè)計(jì)這個(gè)角色的工作，那么這個(gè)文檔就是屬于這個(gè)角色對(duì)應(yīng)的人員來(lái)提供。

也有可能交互設(shè)計(jì)的工作被劃分給了UI設(shè)計(jì)師，所以越來(lái)越多的UI設(shè)計(jì)師改了自己的Title為：UI/UE 設(shè)計(jì)師。

交互設(shè)計(jì)文檔要給誰(shuí)看？

根據(jù)項(xiàng)目組角色來(lái)定需要提供給：PM、開(kāi)發(fā)人員、測(cè)試人員、需求人員、業(yè)務(wù)方人員等。

交互設(shè)計(jì)文檔更新機(jī)制

有任何一處變動(dòng)需要更新到說(shuō)明文檔中，就需要通過(guò)團(tuán)隊(duì)的溝通渠道發(fā)送通知，我們公司是SVN服務(wù)器，設(shè)計(jì)師更新了設(shè)計(jì)文件版本或說(shuō)明書(shū)版本后會(huì)同步到SVN服務(wù)器后生成最新地址與日志記錄后發(fā)送郵件抄送相關(guān)項(xiàng)目團(tuán)隊(duì)人員。

更新記錄如下圖：

交互設(shè)計(jì)文檔要寫(xiě)什么內(nèi)容？

我不想說(shuō)一大堆高深的理論，那么下面的內(nèi)容我會(huì)按照實(shí)際流程幫助大家梳理出怎么制作文檔。

很多同學(xué)在新建一份空白文檔后不知道具體寫(xiě)什么內(nèi)容，如前面所說(shuō)，對(duì)于一份交互設(shè)計(jì)說(shuō)明書(shū)，你只需要把原型截圖或原型直接畫(huà)成一個(gè)文檔即可。

其實(shí)交互文檔就是頁(yè)面文檔，所有的軟件頁(yè)面、狀態(tài)都分離出頁(yè)面進(jìn)行展現(xiàn)，然后加入頁(yè)面流程和交互動(dòng)作說(shuō)明文字、箭頭指示線條等。

關(guān)鍵點(diǎn)：邏輯結(jié)構(gòu)、頁(yè)面跳轉(zhuǎn)、交互狀態(tài)的文字說(shuō)明，統(tǒng)一交互體驗(yàn)動(dòng)作，確保頁(yè)面組件的一致性。?

小例子：?交互設(shè)計(jì)說(shuō)明文檔截圖

這是一個(gè)包含交互界面動(dòng)作、邏輯步驟、頁(yè)面流轉(zhuǎn)、文案與注釋的實(shí)例，圖中的交互動(dòng)作說(shuō)明是將所有出現(xiàn)的靜態(tài)化界面的內(nèi)容寫(xiě)在文檔里進(jìn)行展示。如果你想直接展示動(dòng)態(tài)交互，可以使用原型設(shè)計(jì)工具設(shè)計(jì)好交互原型之后再截圖編輯文檔，交付文檔時(shí)配合著原型（導(dǎo)出HTML）演示，這樣會(huì)更有效率。

交互設(shè)計(jì)說(shuō)明書(shū)的文檔結(jié)構(gòu)：

版本信息一般包括版本、日期、參與人、變更內(nèi)容簡(jiǎn)要、備注信息。

目錄

這個(gè)無(wú)須多說(shuō)，平時(shí)我們看的書(shū)基本都有目錄，不過(guò)記住目錄要合理分級(jí)以分清主次。

Log更新記錄頁(yè)

這個(gè)頁(yè)面是用來(lái)描述某次更新的信息簡(jiǎn)介與頁(yè)碼導(dǎo)航等。?下圖為交互設(shè)計(jì)說(shuō)明文檔的更新記錄頁(yè)的示例：交互設(shè)計(jì)說(shuō)明書(shū)的更新日志?。

交互設(shè)計(jì)說(shuō)明書(shū)的更新日志

交互行為邏輯圖+文字說(shuō)明

下圖某一個(gè)應(yīng)用商店的更新應(yīng)用交互邏輯+文字說(shuō)明圖例。

交互設(shè)計(jì)說(shuō)明書(shū)中的交互邏輯頁(yè)面流程

從上圖中可以看出，這個(gè)說(shuō)明文檔是把應(yīng)用更新功能拿出來(lái)當(dāng)一頁(yè)，包括它的架構(gòu)、交互、流程、邏輯、交互事件及文字解釋說(shuō)明。?這個(gè)過(guò)程是針對(duì)產(chǎn)品經(jīng)理和程序人員而言的，因?yàn)樗麄冃枰疵靼捉换チ鞒踢壿嫛?/p>

頁(yè)面展開(kāi)圖+邏輯+文字

下圖是頁(yè)面、元件、文案、邏輯、頁(yè)面狀態(tài)的展示：

交互設(shè)計(jì)說(shuō)明書(shū)的頁(yè)面元素

這個(gè)部分是針對(duì)視覺(jué)而言的，需要將所有的頁(yè)面都展開(kāi)解釋一遍，共用部分可以單獨(dú)標(biāo)記。

其他單獨(dú)的交互動(dòng)作詳細(xì)解釋介紹

此部分是對(duì)不在流程里的單獨(dú)的或獨(dú)立的交互的補(bǔ)充書(shū)寫(xiě)的。

交互設(shè)計(jì)文檔的責(zé)任邊界

一般情況下，如有需求變更或流程更改，就需要同步更新交互設(shè)計(jì)說(shuō)明書(shū)并發(fā)送給相關(guān)同事，同時(shí)要抄送給對(duì)應(yīng)項(xiàng)目的測(cè)試與產(chǎn)品人員，此文檔加上PRD也是最后的驗(yàn)收依據(jù)，所以中途變更需要記錄log。

給交互設(shè)計(jì)師們總結(jié)一下：

1. 給程序看，使用獨(dú)立的章節(jié)寫(xiě)明交互邏輯、頁(yè)面流轉(zhuǎn)
2. 給視覺(jué)看，使用獨(dú)立的章節(jié)寫(xiě)明所有的頁(yè)面展開(kāi)、公用頁(yè)面交互等
3. 給測(cè)試看，加好注釋與說(shuō)明
4. 交互需要按照功能邏輯一個(gè)個(gè)排著序?qū)?，這樣更容易理解
5. 交互事件的狀態(tài)需要用截圖形式展示出來(lái)，不建議使用大量文字描述，因?yàn)楹芏嗳瞬豢葱∽侄侵苯涌磮D

作者：阿西UED，微信號(hào)：Hello_Wangsir。

內(nèi)容節(jié)選自《交互設(shè)計(jì)那些事兒》，有興趣的可以去京東、天貓、當(dāng)當(dāng)搜索 《交互設(shè)計(jì)那些事兒》以了解更多，具體案例在這本書(shū)的第八章。

本文由 @阿西UED?投稿發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。