產(chǎn)品展示 
聯(lián)系方式 怎樣做交互設計規范文檔？（交互設計規范文檔的3大戰略）
做一┐(′?｀)┌件事之前(qian)一定要先想清楚做這件事的交互交互目的，為什么要做這件事，設計設計只有這樣，規范規范才能萬(wàn)變不離其宗，文檔文檔不會(huì )變成為了(le)做事而做事，戰略這很可怕。交互交互拿交互設計文檔來(lái)看，設(╯°□°）╯︵ ┻━┻計設計為什么要寫(xiě)交互設計文檔，規范規范這是文檔文檔開(kāi)始寫(xiě)之前要想清楚的。
為什么要輸出《交互設計文??檔》產(chǎn)品進(jìn)行需求分析，戰略得出需求文檔，交互交互交互設計師要將??抽象的設計設計需求轉化為具象的線(xiàn)框圖。這其間涉及到信息架構設計、規范規范導航設計、文檔文檔流(′?_?`)程設計等分析，戰略最ヽ(′▽?zhuān)?ノ后才能夠輸出較為合理的線(xiàn)框圖。交互設計文檔（縮寫(xiě)DRD）就是要將這些分析過(guò)程用圖視化的形(xing)式展示出來(lái)，讓團(tuan)隊成員明白產(chǎn)品設計成這樣的原因是什么？增加交互設計的說(shuō)服力(???)。
同時(shí)一份詳盡的交互設計文檔，將很多產(chǎn)品細節都用圖視和文字的形式固定下(′▽?zhuān)?來(lái)，起到了規范的作用，有助于團隊成員的溝通，降低溝通成本。ヾ(′?｀)?
交互設計文檔都有誰(shuí)在看？產(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ò )異常等等）如何設計，這就是交互設計文(O_O)檔對UI設計師的意義。
測試人員：我們知道，產(chǎn)品必須經(jīng)過(guò)系統測試才能上線(xiàn)，而進(jìn)行系(xi)統測試之前，測試人員要進(jìn)行測試用例的梳理，測試用例(′?ω?`)必須得覆蓋所有的功能甚至是acti(′▽?zhuān)?on，才能做到上線(xiàn)無(wú)bug，或??者是少???bug狀態(tài)。測試人員整理測試用例表的時(shí)候(hou)就會(huì )參考交互設計文檔。
交互設計文檔都包括哪些東西？知道了誰(shuí)會(huì )看DRD以及DRD的意義?，F在來(lái)說(shuō)(′?｀)說(shuō)DRD都包含哪些東??西。
這是我整理DRD的一個(gè)目錄，包含九大部分：文檔封面；設ヽ(′▽?zhuān)?ノ計背景；信息架構；整體業(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ò)設計背景模塊了解這次交互設計的(de)一些基本情況。
③信息架構
產(chǎn)品分為幾個(gè)模塊，每個(gè)模塊下包含多少信息和標簽，一般會(huì )用思維導圖的形式畫(huà)出信息架構圖。推薦一個(gè)Mac OS下的思維導圖軟件IThoughtsX，(T_T)一款簡(jiǎn)約易用(′?_?`)的導圖軟件。
④整體業(yè)務(wù)流程圖
整個(gè)業(yè)務(wù)模式涉及到多少主體？每個(gè)主體要(yao)負責哪些模塊？這??些業(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ù)流程圖
梳理(li)完產(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ù)流程圖，繼續具體化，就(jiu)要輸出該任務(wù)下的頁(yè)面流了，不同任務(wù)之間的頁(yè)面會(huì )存在重疊，這樣就可以將所有任務(wù)流程匯總，形成整個(gè)(?Д?)產(chǎn)品的頁(yè)面流。頁(yè)面流不需要將每個(gè)頁(yè)面的內容都詳細的畫(huà)出，只要畫(huà)出每個(gè)頁(yè)面涉及到的行動(dòng)點(diǎ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)品??中涉及到的所有單位，例如歷程(cheng)用“公里”，時(shí)間用“2016年11月14日??”的形式，金額用“元”或“￥??”等等。網(wǎng)絡(luò )異常處理：網(wǎng)絡(luò )異常時(shí)、網(wǎng)絡(luò )切換時(shí)（從WiFi狀態(tài)到蜂窩狀態(tài)）、網(wǎng)絡(luò )中斷等??情況下的交互設計。dia??log和toast：各種臨時(shí)框和toast的樣式和文案的規范說(shuō)明等。數據加載：進(jìn)入新頁(yè)面的時(shí)候，數據如何加載，用什么樣式提示(′?_?`)用戶(hù)頁(yè)面正在??加載，需不(bu)需要異步加載來(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ō)明。
用什么工具寫(xiě)DRD？思維永遠比工具重要(yao)，??你可以用InDesign、可以用PPT或者keynote、也可以用??Axure等。
我一般用Axu(′▽?zhuān)?re整理和輸出文檔，交互評審完之后會(huì )將整個(gè)文( ?▽?)檔通過(guò)HTML的形式分享出去(╯°□°)╯，給團隊的各個(gè)成員查看。用瀏覽器就能打開(kāi)，而且還會(huì )在瀏覽器左側形成目錄，瀏覽起來(lái)??很方便。
用Axure導出的網(wǎng)頁(yè)形式
一千(′_｀)個(gè)交互設計師就有一千個(gè)交??互設計文檔，根據不同的項目和公司不同的工作流??(°o°)程，按需設計自己的交互設計(???)文檔。雖然交互設計文檔不要求做的很美觀(guān)，但至少要做到規范和整齊。