DRD撰寫(xiě)指南（如何寫(xiě)出科學(xué)易懂的寫(xiě)指寫(xiě)出交互設計文檔）
從概念講起，筆者分享了撰寫(xiě)交互文檔的南何全流程指南，經(jīng)驗分享帶你繞??過(guò)產(chǎn)品設計的科學(xué)那些坑。
最近停更(???)了一段時(shí)間了，易懂一??直在琢磨著(zhù)交互文檔這個(gè)事。交檔其實(shí)早幾個(gè)月前就整理了一部分，互設把自己給整自閉了就整平臺規范去了。計文好了，寫(xiě)指寫(xiě)出說(shuō)了一堆廢話(huà)言歸正傳。南何??
在做交互文檔之前，科學(xué)我們先要明白什么是易懂交互文檔、為什么要做以(yi)及做了給誰(shuí)看。交檔
什么是互設交??互文檔
交互文檔，即交?互設計說(shuō)明文檔。計文英文 Design Requirement Document ，寫(xiě)指寫(xiě)出簡(jiǎn)稱(chēng)Dヽ(′ー｀)ノRD。主要是用來(lái)承載設計思路??、設計方案、信息架構、原型線(xiàn)框、交互說(shuō)明等內容。
為什么需要交互文檔
有些人可能對文檔這??種東西比較反感，尤其是從事工作不久的朋友。其實(shí)工(gong)作得越久，越會(huì )發(fā)現文檔的重要性，它可以幫助你理清思路，并記錄下來(lái)，便于回顧。工作上而(╯‵□′)╯言，有一份規范的文檔可以讓你的設計更有說(shuō)服力，也易于工作對接，提高彼此之間的溝通效率。
交互文檔其實(shí)要說(shuō)給誰(shuí)看，其實(shí)具體情況具體分析。有的公司老板也要盯交互文檔，以(yi)及甲方爸爸、運營(yíng)部門(mén)同事，都有查看的可能。
不過(guò)有4類(lèi)人，無(wú)論如何他們都必須是交(jiao)互文檔的忠實(shí)“讀者“：
產(chǎn)品經(jīng)理：產(chǎn)品經(jīng)理與交互設計師可能是溝通最多的人，產(chǎn)品經(jīng)理主要在文檔中確認設計思路和業(yè)務(wù)流程，然后過(guò)一下頁(yè)面交互模塊。視覺(jué)設計：UI設計師通常最關(guān)注的是頁(yè)面交互模塊，有著(zhù)產(chǎn)品思維和體驗思維的設計師也會(huì )仔細看一下設計思路和產(chǎn)品背景，以便于自己更了解產(chǎn)品業(yè)務(wù)邏輯和用戶(hù)心理。開(kāi)發(fā)人員：前端的開(kāi)發(fā)同事和UI設計師一樣，最關(guān)注頁(yè)面交互模塊，其他的作為提升會(huì )輔助了解。而后端開(kāi)發(fā)人員ヽ(′▽?zhuān)?ノ關(guān)注更多的(de)是業(yè)務(wù)邏輯、信息架構、操作流程等，這些都清晰了，他們才能輸出一份準確合格的開(kāi)發(fā)文檔。測試人員：因為測試人員是把關(guān)產(chǎn)品上線(xiàn)的一群人，所以各個(gè)模??塊、步驟都應該去了解透徹，才能提出有效的bug。如何撰寫(xiě)交互文檔
比如小需求可以用Sketch，快而高效。如果是要給甲方爸爸/大老板看的，使用PPT會(huì )讓他們更好理解。
通(′ω｀)常，一個(gè)比較基礎、規范的交互文檔（DRD）由：文檔封面、更新日志、文檔圖例、設計背景/思路、業(yè)務(wù)流程、頁(yè)面交互、全局通用說(shuō)明、廢紙簍八部分組成。當然(╯°□°）╯︵ ┻━┻，這不是絕對，你可以根據你的實(shí)際工作需要進(jìn)行增減。
比如，如果是C端產(chǎn)品的話(huà)，用戶(hù)調研的結論、??用戶(hù)畫(huà)像、用戶(hù)ˉ\_(ツ)_/ˉ體驗地圖等等，都可以放進(jìn)去給看的人一個(gè)參考。尤其(′?_?`)是在如今這么關(guān)注用戶(hù)體驗、產(chǎn)品思維的一個(gè)大環(huán)境下，這些數據支撐很有力量。同時(shí)還可以幫助開(kāi)發(fā)人員、界面設計人員培養產(chǎn)品思維、體驗思維，大家一起將產(chǎn)品變得更好。
其次，交互文檔的整潔??與美觀(guān)也很有必要。相信在過(guò)去幾年不少人有遇到過(guò)這樣的產(chǎn)品經(jīng)理（兼交互），他們會(huì )輸出一些(′；д；`)有時(shí)連他們自己都看不太懂或者直接從其它競品截圖來(lái)的線(xiàn)框圖。當開(kāi)??發(fā)和界面設計的(′?_?`)人提出質(zhì)疑的時(shí)候還美其名曰線(xiàn)框不重要，(′ω｀*)重要的是里面的業(yè)務(wù)邏輯。其實(shí)用產(chǎn)(′；ω；`)品思維想，交互文檔就是交互設計師的產(chǎn)品，而看的人就是用戶(hù)，保持良好(hao)的可讀性，可謂至關(guān)重要。
1. 文檔封面
交互文檔的封面如上圖，通常包括產(chǎn)品的名稱(chēng)、Logo、版本號以及版本發(fā)布時(shí)間、所屬部門(mén)、對接負責人/對接人。
2. 更新日志
我們都ヽ(′?｀)ノ知道(dao)，在產(chǎn)品的迭代的過(guò)??程中，需求/功能是會(huì )不斷調整的ヽ(′▽?zhuān)?ノ。而更新日志，就是為了迭代而生。??它一般由修改日期、修改內容、修改人、版本號和備注組成。
如果是新增的功能或模塊，建議是要加上鏈接可直接跳轉至新增內容的，如上(shang)圖。
版本號也是同理，都應加上對應(ying)的版本鏈接，便于查?看者回溯之前的內容，與當ヾ(′▽?zhuān)??前的新版本形(╯°□°)╯成對比。
這一點(diǎn)對開(kāi)發(fā)人員來(lái)說(shuō)很重要，其次對于新同事深入理解產(chǎn)品也能起到很大的幫助。
修改日期，通常是按時(shí)間倒序排列，查看起來(lái)會(huì )比較方便。
3. 文檔圖例
4. 設計背景/思路
設計背景，根據實(shí)際工作需要(′?｀*)，放置一些關(guān)于思路整理(′▽?zhuān)?、靈感來(lái)源的(de)文檔。比如用研報告、用戶(hù)畫(huà)像、競品分析報告、商業(yè)畫(huà)布等增強文檔的說(shuō)服力，盡量讓每一個(gè)人都能理解到產(chǎn)品的戰略目標和業(yè)務(wù)邏輯。
圖為我今年對接最久的是一個(gè)B端產(chǎn)品的項目，所以整理了一個(gè)產(chǎn)品畫(huà)像，僅供參考??。
5. 業(yè)務(wù)流程
業(yè)務(wù)流程圖，不是操作流程圖也不是頁(yè)??面流程ヽ(′ー｀)ノ圖。它是產(chǎn)品的整體業(yè)務(wù)流程，直接和業(yè)務(wù)掛鉤，可以說(shuō)是產(chǎn)品的核心流程。
例如淘寶APP，買(mǎi)家購物由始至終的流程就是它的業(yè)務(wù)流程。通常用泳道圖的形式展(zhan)示，多數情況下是由產(chǎn)品經(jīng)理繪制。
以上是我所負責產(chǎn)品的核心業(yè)務(wù)的流程圖。因為是B端產(chǎn)品，涉及角色較多，針對3個(gè)代表性角色分別進(jìn)行了繪制，僅供參考(涉及到保密協(xié)議，所有關(guān)鍵詞都去掉了)。
6. 頁(yè)面交互
1)信息架構
信息架構屬于用戶(hù)體驗的結構層，是產(chǎn)品的骨架，一般是由產(chǎn)品經(jīng)理或者更高層的管理人員給出大框架。除非是大的產(chǎn)品迭代，否則不會(huì )大改。
2)權限說(shuō)明
如果是C端產(chǎn)品，權限這一塊相對簡(jiǎn)單，比較好整理的。B端產(chǎn)品涉及角色眾多，可能要單獨拎出來(lái)ヽ(′▽?zhuān)?ノ分析整理。 以上僅供參考，大家具體情況具體分析。若是(shi)功能很單一的產(chǎn)品，交互文檔中也可省去這個(gè)模塊。
3)操作流程圖
注：不要將所有流程匯總在一個(gè)表里，或者展示在同一個(gè)頁(yè)面中，而應跟隨具體的操作或者功能模塊放置。時(shí)刻想著(zhù)看文檔的人的感受，怎么易懂怎么來(lái)。
上圖是登錄、注冊和找回密碼的操作流程圖，僅供參考。
頁(yè)面線(xiàn)框圖，是通過(guò)圖形化的表達形式，闡述產(chǎn)品在頁(yè)面層面的信息。包括：
頁(yè)面標題：即每一個(gè)頁(yè)面的對應標題ヽ(′?｀)ノ，一般就是導航欄標題。頁(yè)面(mian)內容：以黑白為主，保證信息規整易讀。交互說(shuō)明：用標簽將其(qi)對應起來(lái)，包括交互邏輯、操作流程及反饋、元素狀態(tài)、字符限制、異??常/特殊狀態(tài)、相關(guān)規則等。主流程線(xiàn)：只需(xu)要畫(huà)出主流程線(xiàn)即(???)可，千萬(wàn)不可太多太雜，時(shí)刻考慮讀者的感受。以上是注冊的的頁(yè)面線(xiàn)框圖，僅供參考。
7. 全局通用說(shuō)明
全局通用說(shuō)明，指整個(gè)產(chǎn)品可通用或者復用的元素。一般是邊做文檔邊整理出來(lái)的，方便自己或者接ヽ(′▽?zhuān)?ノ手該項目的設計師直接調用。其次，對開(kāi)發(fā)及時(shí)封裝可復用控件也是有參考價(jià)值的。
1)常用控件
常用控件類(lèi)似UIKit，通常將極具復用價(jià)值的控制整理在一起，方便及時(shí)調用。
2)復用界面
顧名思義就是全局可復用的一些內頁(yè)，比如選擇聯(lián)系人、獨立搜索頁(yè)等。
3)時(shí)間規范
在做產(chǎn)品的第一步，就應該約定一個(gè)時(shí)間規范。不然各個(gè)端開(kāi)發(fā)出來(lái)，你會(huì )發(fā)現iOS是斜杠的，Android是橫杠的，WEB是圓點(diǎn)的……真到了發(fā)現的時(shí)候再改，那真是彼此??都是無(wú)比崩潰的。
4)缺省頁(yè)匯總
缺省頁(yè)一般包括加載(′?ω?`)失敗、加載中、網(wǎng)絡(luò )中斷和無(wú)數據的空頁(yè)面。為空頁(yè)可(ke)以按照模塊整理在一起，方便UI設計師??最后一起設計缺省頁(yè)，保持風(fēng)格統一。
8. 廢紙ヽ(′ー｀)ノ簍
廢紙簍，被稱(chēng)為是交互文檔的“后悔藥”。在需求不斷變動(dòng)的情況下，改改改的過(guò)程中，請把你改過(guò)的稿子，放這里?。?！因為很可能最后還是用的第一個(gè)方案（此刻(ke)內心有點(diǎn)絕望）……
總結
文檔、軟件只是工具，最重要的還是要落地、實(shí)行起來(lái)才能對產(chǎn)品有所幫助。所以在撰寫(xiě)文檔的每時(shí)每刻，都應該站在“讀者”的角度思考，他們?看的時(shí)候感受會(huì )是怎樣的，會(huì )覺(jué)得很難理解嗎？
除此之外，還需要有耐心，耐心給他們講解理解不透徹的地方。
