交互設(shè)計文檔也稱DRD(Design Requirement Document)病往，是交互設(shè)計師把抽象的產(chǎn)品需求轉(zhuǎn)化為具象的線框圖呈現(xiàn)的過程这刷，在交互設(shè)計日常工作輸出的最終產(chǎn)物羡滑，用來告訴別人「頁面設(shè)計細(xì)節(jié)」的一個說明文檔弹澎。

一般會是交互設(shè)計或UX（體驗設(shè)計師）寫交互文檔绞铃，也可能會是產(chǎn)品經(jīng)理寫交互文檔哎垦，不同類型或體量的產(chǎn)品團(tuán)隊寫文檔的角色可能會不一樣囱嫩。

一、為什么要寫交互文檔撼泛？

個人而言挠说，它可以幫助你理清思路，并記錄下來愿题，便于項目總結(jié)沉淀损俭。

工作而言，文檔的作用降低項目里的溝通成本和風(fēng)險潘酗、反饋和迭代杆兵。文檔很好地解決了記不住、理解錯誤仔夺、歷史記錄的問題琐脏，所以呀還是要把所有細(xì)節(jié)記錄在文檔中比較好，這些都是要基于文檔的缸兔。

團(tuán)隊而言日裙，沉淀的歷史交互文檔可以內(nèi)部共享，互相交流學(xué)習(xí)惰蜜。團(tuán)隊中統(tǒng)一的交互文檔規(guī)范能提供團(tuán)隊各角色一致的文檔體驗昂拂，降低學(xué)習(xí)成本。

二抛猖、交互文檔輸出內(nèi)容是什么格侯？

上面扯了有點多了，來點實際的吧财著，這是我整理交互文檔（DRD）的一個目錄联四，包含7點內(nèi)容：文檔封面、更新日志撑教、設(shè)計過程（需求分析朝墩、信息架構(gòu)、業(yè)務(wù)流程需求列表）驮履、全局說明鱼辙、非功能需求說明廉嚼、交互規(guī)范說明玫镐；廢紙簍倒戏。

當(dāng)然，這個交互設(shè)計文檔模版不是一成不變的恐似，設(shè)計師要根據(jù)自己產(chǎn)品的需求以及內(nèi)部設(shè)計團(tuán)隊實際情況靈活運(yùn)用杜跷，不要被模版限制了想象力。

1. 文檔封面

就類似書籍的封面矫夷，介紹是什么書葛闷？出版社和作者是誰？主要是描述書籍的基礎(chǔ)信息双藕。交互文檔的封面也同理淑趾，通常包括、Logo忧陪、版本號扣泊、時間、團(tuán)隊名稱或產(chǎn)品名稱嘶摊、對接交互人員延蟹。

2. 更新日志

在實際項目中要對產(chǎn)品進(jìn)行迭代，我們會把某次迭代的版本叶堆、時間阱飘、責(zé)任人、內(nèi)容都寫清楚虱颗，方便落實責(zé)任沥匈，也方便以后追溯。

3. 需求分析

在呈現(xiàn)交互方案前忘渔，交代清楚方案背景高帖、具體的設(shè)計內(nèi)容；產(chǎn)品的目標(biāo)是什么辨萍，讓團(tuán)隊成員通過需求分析模塊了解這次交互設(shè)計的一些基本情況棋恼。

需求分析時，可以根據(jù)實際項目的需要锈玉，放置一些關(guān)于設(shè)計推導(dǎo)過程爪飘、靈感來源的文檔。比如用研報告拉背、用戶畫像师崎、競品分析報告、用戶體驗地圖等一些分析過程椅棺，可以讓交互文檔也更有說服力犁罩，團(tuán)隊各角色理解后才能更好地推進(jìn)方案齐蔽。

4.?產(chǎn)品結(jié)構(gòu)/信息結(jié)構(gòu)

這兩個是產(chǎn)品經(jīng)理在設(shè)計初期要畫好的，了解下就好了床估，他們是從兩個不同的維度來梳理產(chǎn)品的含滴。

產(chǎn)品結(jié)構(gòu)圖作用是梳理產(chǎn)品功能點，梳理了產(chǎn)品有多少個功能模塊丐巫。羅列出來各個功能模塊下的各個頁面谈况，但不需要羅列頁面中的內(nèi)容。

信息結(jié)構(gòu)圖作用是梳理具體頁面顯示信息递胧。羅列產(chǎn)品各個數(shù)據(jù)元素羅列出來碑韵，只需要羅列活的數(shù)據(jù)，固定在頁面里的信息數(shù)據(jù)不需要羅列缎脾。

5.?業(yè)務(wù)流程圖/功能流程圖

業(yè)務(wù)流程圖祝闻，用于說明整個業(yè)務(wù)邏輯流向；功能流程圖遗菠，用于確定產(chǎn)品功能設(shè)計邏輯联喘。

6. 需求列表

用來整理本次需要做的需求進(jìn)行相關(guān)描述，是做哪個端口的哪個頁面及做完之后可能存在的相關(guān)影響舷蒲。

7. 全局通用說明

交互設(shè)計師在輸出交互文檔的過程中耸袜，或多或少會存在的一些通用頁面、組件或說明等牲平。如果每次都將這些組件在原型上面展示出來堤框，不僅給交互文檔帶來冗余，還會增加交互和視覺的工作量以及理解的成本纵柿，因此對于一些產(chǎn)品的通用公共控件我都會放在這個目錄下蜈抓。

1）界面復(fù)用

顧名思義就是全局可復(fù)用的一些內(nèi)頁，比如分享頁昂儒、缺省頁沟使、搜索頁、相冊等渊跋。

2）常用組件/控件的復(fù)用

常用的控件比如按鈕腊嗡、列表框、導(dǎo)航欄拾酝、標(biāo)簽欄以及一些網(wǎng)絡(luò)異常界面燕少、空白頁、對話框的文案規(guī)范說明蒿囤、加載方式等客们。

3）單位

規(guī)范產(chǎn)品中涉及到的所有單位，例如里程用“公里”，時間用“2021年01月14日或2021-01-14”的形式底挫，金額用“元”或“￥”等等恒傻。以時間單位為例：

4）字符控制

每個項目不同，需要限制的字符名稱也不同建邓，根據(jù)實際情況而定盈厘。

8. 非功能性需求

簡而言之就是，為了滿足用戶涝缝、業(yè)務(wù)需求開發(fā)需要考慮的需求稱為非功能性需求扑庞，這個可能會偏向技術(shù)一些具體需要前期和開發(fā)同學(xué)溝通清楚譬重，避免后期互相扯皮拒逮，如：性能、安全等臀规。

1）安全性相關(guān)

身份校驗和權(quán)限：是否確認(rèn)操作者身份滩援，從而確定該用戶是否具有對某種資源的訪問和使用權(quán)限。

文檔加密：是否對文檔進(jìn)行讀寫控制塔嬉、打印控制玩徊、剪切板控制、拖拽谨究、拷屏/截屏控制恩袱、和內(nèi)存竊取控制等技術(shù)，防止泄漏機(jī)密數(shù)據(jù)胶哲。

表單驗證：是否要考慮表單驗證呢畔塔？一般后端為了安全性必須校驗，前端驗證可以提升用戶體驗（及時反饋狀態(tài)）鸯屿，減少無意義的請求澈吨，可以選擇性驗證。

防攻擊策略：針對惡意操作是否需要IP限制寄摆、是否需要高頻訪問限制等等的考慮谅辣。

2）性能相關(guān)

響應(yīng)時間：是系統(tǒng)最重要的性能指標(biāo)，直觀的反映了系統(tǒng)的快慢婶恼。是否對響應(yīng)時間有要求桑阶，響應(yīng)時間太長怎么辦呢？

并發(fā)量：單位時間內(nèi)成功地傳送數(shù)據(jù)的數(shù)量勾邦。這一塊與系統(tǒng)并發(fā)相關(guān)蚣录，根據(jù)業(yè)務(wù)量估計，我們的系統(tǒng)需要支持多少并發(fā)检痰，確定支撐項目所需要的服務(wù)器配置包归。

吞吐量：吞吐量是指單位時間內(nèi)系統(tǒng)能處理的請求數(shù)量，體現(xiàn)系統(tǒng)處理請求的能力，這是目前最常用的性能測試指標(biāo)公壤。

3）用戶體驗相關(guān)

數(shù)據(jù)加載：進(jìn)入新頁面的時候换可，數(shù)據(jù)如何加載，用什么樣式提示用戶頁面正在加載厦幅，需不需要異步加載來提高用戶體驗等等沾鳄。

Dialog和toast：各種臨時框和toast的樣式和文案的規(guī)范說明等。

統(tǒng)一組件：此時將系統(tǒng)功能模塊化确憨，支持靈活配置译荞，有利于減少重復(fù)開發(fā)量。

網(wǎng)絡(luò)異常處理：網(wǎng)絡(luò)異常時休弃、網(wǎng)絡(luò)切換時（從WiFi狀態(tài)到蜂窩狀態(tài)）吞歼、網(wǎng)絡(luò)中斷等情況下的交互設(shè)計。

4）其他

兼容性：產(chǎn)品在不同系統(tǒng)/終端之間和不和諧塔猾、融不融洽的意思篙骡。

升級策略；強(qiáng)制升級時產(chǎn)品怎么處理丈甸？非強(qiáng)制升級時產(chǎn)品怎么處理糯俗？升級的彈框和文案是怎樣的？是否在URL中預(yù)留版本號睦擂。

國際化：考慮產(chǎn)品是否需要支持國際化得湘，比如不同語言環(huán)境中，是否需要在開發(fā)時將產(chǎn)品界面中和提示文案全部寫在一個配置文件中顿仇，根據(jù)當(dāng)前運(yùn)行的系統(tǒng)語言環(huán)境淘正，會自動識別和判斷應(yīng)該加載那個文案配置文件來顯示界面文案。

用戶行為分析埋點：是否需要做埋點夺欲？是公司自己后臺做統(tǒng)計還是借助第三方數(shù)據(jù)統(tǒng)計平臺跪帝？

9. 頁面交互流程圖

1）交互稿結(jié)構(gòu)怎么組織

交互稿的結(jié)構(gòu)依賴于產(chǎn)品架構(gòu)圖，把各個頁面的功能層級表現(xiàn)出來很容易地找到就行些阅，可以從【平臺-功能-頁面-子頁面-子頁面分支】這個維度去搭建樹形結(jié)構(gòu)伞剑，結(jié)構(gòu)搭好完后剩下的就是對文檔的命名了。

2）每頁交互稿的內(nèi)容

一般而言市埋，交互頁面顧名思義就是頁面內(nèi)容黎泣、交互說明，那么具體要包含哪些內(nèi)容才能把交互頁面說清楚呢缤谎？

頁面標(biāo)題：告訴別人這個頁面是什么抒倚？導(dǎo)航欄標(biāo)題，讓頁面標(biāo)題常駐坷澡；

界面標(biāo)題：方便交互稿中的互相索引托呕，比如“回到界面B狀態(tài)”；

界面內(nèi)容：建議尺寸為375*812px，內(nèi)容黑白灰稿為主项郊，要便于閱讀馅扣；

設(shè)計說明：邏輯關(guān)系、元素狀態(tài)着降、小微流程差油，都可放在設(shè)計說明中；

流程線：說明界面間邏輯關(guān)系任洞，可使用軟件自帶流程線蓄喇；

鏈接：指向其他頁面，比如支線流程交掏，開發(fā)同學(xué)閱讀起來會很方便妆偏。

3）交互說明寫什么？

接下來就要開始我們交互文檔最為關(guān)鍵的部分了耀销，如何書寫交互說明呢楼眷？

記得剛開始寫交互說明的時候不知道要寫些什么，寫完之后總感覺哪里不對勁熊尉，卻又發(fā)現(xiàn)不了問題在哪里，能咋辦呢掌腰？就是很絕望呀狰住！后面就請教同事要怎么寫交互說明才不會被懟呢，然后他就直接發(fā)給我的一份交互說明自查表齿梁，這里也做了一些整理供參考催植。

另外我們交互說明應(yīng)該盡量寫得詳細(xì)些，這樣最終的驗收效果也會比較好勺择。

4）交互說明中不寫什么

商業(yè)邏輯相關(guān)：不寫為什么要實現(xiàn)這個功能创南，解決了什么問題等一些在交互說明里與產(chǎn)品實現(xiàn)無關(guān)的內(nèi)容，這是需求分析階段該做的省核；

視覺規(guī)范相關(guān)：不寫視覺規(guī)范規(guī)格標(biāo)注稿辙，各司其職專心做自己的事情，術(shù)業(yè)有專攻气忠；

研發(fā)代碼相關(guān)：不寫功能代碼實現(xiàn)邏輯和規(guī)則等邻储。

10. 廢紙簍

廢紙簍，被稱為是交互文檔的“后悔藥”旧噪。在改了很多稿的交互稿中你永遠(yuǎn)不知道哪一稿才是最終稿吨娜，所以，請把你遺棄的稿子放這里淘钟！萬一老大很喜歡第一稿呢…

三宦赠、綜上所述寫文檔需要注意什么

文檔規(guī)范化：交互稿目錄命名規(guī)范、頁面布局規(guī)范、交互說明的精簡勾扭、使用黑白灰稿缤骨，這對于提高交互文檔的易讀性至關(guān)重要；

數(shù)據(jù)真實化：頁面的展示元素要還原真實的場景尺借，有代入感才能發(fā)現(xiàn)交互文檔中更微妙的細(xì)節(jié)绊起；

任務(wù)流程化：一個頁面一個任務(wù)，一個任務(wù)從開始到結(jié)束要邏輯清晰燎斩、有閉環(huán)虱歪；

交互組件化：建立起自己的交互組件庫，組件不在多在于精栅表，要持續(xù)更新笋鄙；

方案明確化：很忌諱臨時更改交互文檔或文檔中的說明含糊不清，如果不可避免也要及時通知相關(guān)人員怪瓶。

四萧落、后記

不管用什么形式或工具撰寫交互設(shè)計文檔，只要能提高效率洗贰、降低溝通成本找岖、設(shè)計方案是否滿足用戶需求就能體現(xiàn)文檔的價值了。

另外敛滋，在交互文檔中并不是說交互稿畫的多美觀就很專業(yè)许布，說明文字信息的層級清晰能看懂就行，更重要的是基于你輸出內(nèi)容的背后思考绎晃。

以上為小編在實際工作中寫交互文檔的一些粗略總結(jié)蜜唾。