做一件事之前一定要先想清楚做這件事的目的，為什么要做這件事，只有這樣，才能萬(wàn)變不離其宗，不會(huì )變成為了做事而做事，這很可怕。拿交互設計文檔來(lái)看，為什么要寫(xiě)交互設計文檔，這是開(kāi)始寫(xiě)之前要想清楚的。
產(chǎn)品進(jìn)行需求分析，得出需求文檔，交互設計師要將抽象的需求轉化為具象的線(xiàn)框圖。（關(guān)于需求分析可以查看《一篇文章搞懂需求分析...》）這其間涉及到信息架構設計、導航設計、流程設計等分析，最后才能夠輸出較為合理的線(xiàn)框圖。交互設計文檔（縮寫(xiě)DRD）就是要將這些分析過(guò)程用圖視化的形式展示出來(lái)，讓團隊成員明白產(chǎn)品設計成這樣的原因是什么？增加交互設計的說(shuō)服力。
同時(shí)一份詳盡的交互設計文檔，將很多產(chǎn)品細節都用圖視和文字的形式固定下來(lái)，起到了規范的作用，有助于團隊成員的溝通，降低溝通成本。
產(chǎn)品：交互文檔可以理解成是將需求文檔圖視化的一個(gè)過(guò)程，所做的產(chǎn)品原型有沒(méi)有滿(mǎn)足用戶(hù)需求，達到公司的商業(yè)目的，交互設計師要和產(chǎn)品反復溝通，確保達成用戶(hù)和公司的目標。
UI設計師：UI設計是將灰不溜秋的線(xiàn)框圖轉化為美美的視覺(jué)稿的人，他必須知道有多少個(gè)頁(yè)面要設計，這些頁(yè)面之間的跳轉邏輯是怎樣的，遇到特殊情況（數據加載、異常流程、網(wǎng)絡(luò )異常等等）如何設計，這就是交互設計文檔對UI設計師的意義。
開(kāi)發(fā)人員：不管是iOS、Android、H5等前端開(kāi)發(fā)人員，還是后端開(kāi)發(fā)人員，需要從交互文檔里知道，產(chǎn)品要實(shí)現多少功能？如何去實(shí)現？涉及到多少頁(yè)面？這些頁(yè)面又是通過(guò)什么去跳轉的？碰到異常流程怎么處理？...將這些問(wèn)題理清后變成代碼語(yǔ)言，從而將產(chǎn)品實(shí)現出來(lái)。
測試人員：我們知道，產(chǎn)品必須經(jīng)過(guò)系統測試才能上線(xiàn)，而進(jìn)行系統測試之前，測試人員要進(jìn)行測試用例的梳理，測試用例必須得覆蓋所有的功能甚至是action，才能做到上線(xiàn)無(wú)bug，或者是少bug狀態(tài)。測試人員整理測試用例表的時(shí)候就會(huì )參考交互設計文檔。
知道了誰(shuí)會(huì )看DRD以及DRD的意義?，F在來(lái)說(shuō)說(shuō)DRD都包含哪些東西。
DRD的目錄
這是我整理DRD的一個(gè)目錄，包含九大部分：文檔封面；設計背景；信息架構；整體業(yè)務(wù)流程；任務(wù)流程圖；頁(yè)面流；功能列表；交互規范說(shuō)明；線(xiàn)框圖。
①文檔封面
把交互設計文檔看成一本書(shū)，文檔封面就是這本書(shū)的封面，封面就得包括書(shū)名，作者，出版時(shí)間等關(guān)于書(shū)的基本信息。同樣的，DRD的文檔封面包括：項目名稱(chēng)；版本號；時(shí)間；交互人員；內容。1.0版本的內容多為創(chuàng )建一個(gè)新的APP或者ERP，迭代版本的內容則是重構某個(gè)功能的頁(yè)面，增加/刪除某個(gè)功能等等。
文檔封面
②設計背景
交代清楚產(chǎn)品定位；具體的設計內容；設計的目標是什么，讓觀(guān)眾通過(guò)設計背景模塊了解這次交互設計的一些基本情況。
③信息架構
產(chǎn)品分為幾個(gè)模塊，每個(gè)模塊下包含多少信息和標簽，一般會(huì )用思維導圖的形式畫(huà)出信息架構圖。推薦一個(gè)Mac OS下的思維導圖軟件IThoughtsX，一款簡(jiǎn)約易用的導圖軟件。（關(guān)于信息架構設計可以查看《90%的設計師都不知道的信息架構知識》）。
④整體業(yè)務(wù)流程圖
整個(gè)業(yè)務(wù)模式涉及到多少主體？每個(gè)主體要負責哪些模塊？這些業(yè)務(wù)的流程是怎么樣的？業(yè)務(wù)流程圖中的主體不光可以是買(mǎi)方、賣(mài)方等人，還可以是各個(gè)機構或者是APP、ERP等產(chǎn)品形式。
由于公司的業(yè)務(wù)流程涉及保密信息，所以從網(wǎng)上找了個(gè)購物的業(yè)務(wù)流程。一般業(yè)務(wù)流程會(huì )用泳道圖的形式來(lái)表示。
購物支付的業(yè)務(wù)流程
⑤任務(wù)流程圖
梳理完產(chǎn)品的信息架構和業(yè)務(wù)模式，接下來(lái)就要將產(chǎn)品分解為多個(gè)任務(wù)，一般一個(gè)產(chǎn)品只有一個(gè)主干任務(wù)，其他則是支干任務(wù)（微信的主干任務(wù)是即時(shí)聊天，朋友圈、搖一搖、購物、設置等都屬于支干任務(wù)）。
每個(gè)任務(wù)用一個(gè)流程圖表示，太過(guò)簡(jiǎn)單的任務(wù)可以不需要畫(huà)流程圖（像設置里的任務(wù)，一般只涉及到兩三步操作）。
⑥頁(yè)面流
一個(gè)任務(wù)流程圖，繼續具體化，就要輸出該任務(wù)下的頁(yè)面流了，不同任務(wù)之間的頁(yè)面會(huì )存在重疊，這樣就可以將所有任務(wù)流程匯總，形成整個(gè)產(chǎn)品的頁(yè)面流。頁(yè)面流不需要將每個(gè)頁(yè)面的內容都詳細的畫(huà)出，只要畫(huà)出每個(gè)頁(yè)面涉及到的行動(dòng)點(diǎn)（按鈕）。
關(guān)于三種流程的設計可以查看《產(chǎn)品的三種流程圖，你都知道嗎？》。
⑦功能列表
跟我司測試人員溝通之后，發(fā)現在交互上列出整個(gè)產(chǎn)品涉及到的功能點(diǎn)很有意義，測試可以通過(guò)這個(gè)去梳理測試用例，開(kāi)發(fā)也能根據功能列表去比對發(fā)現哪些功能實(shí)現了，哪些功能沒(méi)有實(shí)現。
⑧交互規范說(shuō)明
對于一些特殊的交互狀態(tài)，包括產(chǎn)品會(huì )共用的控件我都會(huì )放在這個(gè)目錄下。
單位：規范產(chǎn)品中涉及到的所有單位，例如歷程用“公里”，時(shí)間用“2016年11月14日”的形式，金額用“元”或“￥”等等。
網(wǎng)絡(luò )異常處理：網(wǎng)絡(luò )異常時(shí)、網(wǎng)絡(luò )切換時(shí)（從WiFi狀態(tài)到蜂窩狀態(tài)）、網(wǎng)絡(luò )中斷等情況下的交互設計。
dialog和toast：各種臨時(shí)框和toast的樣式和文案的規范說(shuō)明等。
數據加載：進(jìn)入新頁(yè)面的時(shí)候，數據如何加載，用什么樣式提示用戶(hù)頁(yè)面正在加載，需不需要異步加載來(lái)提高用戶(hù)體驗等等。
版本控制：強制升級時(shí)產(chǎn)品怎么處理？非強制升級時(shí)產(chǎn)品怎么處理？升級的彈框和文案是怎樣的？一般在版本1.0下會(huì )和產(chǎn)品、技術(shù)確定產(chǎn)品的升級方案。
⑨線(xiàn)框圖
經(jīng)過(guò)了上面重重分析，終于可以放開(kāi)手畫(huà)線(xiàn)框圖了。線(xiàn)框圖一般包括三個(gè)部分：每個(gè)頁(yè)面的內容和排布；各個(gè)頁(yè)面之間的跳轉邏輯；一些交互說(shuō)明。
思維永遠比工具重要，你可以用InDesign、可以用PPT或者keynote、也可以用Axure等。
我一般用Axure整理和輸出文檔，交互評審完之后會(huì )將整個(gè)文檔通過(guò)HTML的形式分享出去，給團隊的各個(gè)成員查看。用瀏覽器就能打開(kāi)，而且還會(huì )在瀏覽器左側形成目錄，瀏覽起來(lái)很方便。
用Axure導出的網(wǎng)頁(yè)形式
一千個(gè)交互設計師就有一千個(gè)交互設計文檔，根據不同的項目和公司不同的工作流程，按需設計自己的交互設計文檔。雖然交互設計文檔不要求做的很美觀(guān)，但至少要做到規范和整齊。
*著(zhù)作權歸作者所有，轉載請聯(lián)系作者獲得授權。
聯(lián)系客服
