做一件事之前一定要先想清楚做這件事的目的，為什么要做這件事，只有這樣，才能萬變不離其宗，不會變成為了做事而做事，這很可怕。拿交互設(shè)計文檔來看，為什么要寫交互設(shè)計文檔，這是開始寫之前要想清楚的。

華坪網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)自2013年起到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
為什么要輸出《交互設(shè)計文檔》

產(chǎn)品進(jìn)行需求分析，得出需求文檔，交互設(shè)計師要將抽象的需求轉(zhuǎn)化為具象的線框圖。（關(guān)于需求分析可以查看《一篇文章搞懂需求分析...》）這其間涉及到信息架構(gòu)設(shè)計、導(dǎo)航設(shè)計、流程設(shè)計等分析，最后才能夠輸出較為合理的線框圖。交互設(shè)計文檔（縮寫DRD）就是要將這些分析過程用圖視化的形式展示出來，讓團(tuán)隊成員明白產(chǎn)品設(shè)計成這樣的原因是什么？增加交互設(shè)計的說服力。

同時一份詳盡的交互設(shè)計文檔，將很多產(chǎn)品細(xì)節(jié)都用圖視和文字的形式固定下來，起到了規(guī)范的作用，有助于團(tuán)隊成員的溝通，降低溝通成本。

交互設(shè)計文檔都有誰在看？

產(chǎn)品：交互文檔可以理解成是將需求文檔圖視化的一個過程，所做的產(chǎn)品原型有沒有滿足用戶需求，達(dá)到公司的商業(yè)目的，交互設(shè)計師要和產(chǎn)品反復(fù)溝通，確保達(dá)成用戶和公司的目標(biāo)。

UI設(shè)計師：UI設(shè)計是將灰不溜秋的線框圖轉(zhuǎn)化為美美的視覺稿的人，他必須知道有多少個頁面要設(shè)計，這些頁面之間的跳轉(zhuǎn)邏輯是怎樣的，遇到特殊情況（數(shù)據(jù)加載、異常流程、網(wǎng)絡(luò)異常等等）如何設(shè)計，這就是交互設(shè)計文檔對UI設(shè)計師的意義。

開發(fā)人員：不管是iOS、Android、H5等前端開發(fā)人員，還是后端開發(fā)人員，需要從交互文檔里知道，產(chǎn)品要實(shí)現(xiàn)多少功能？如何去實(shí)現(xiàn)？涉及到多少頁面？這些頁面又是通過什么去跳轉(zhuǎn)的？碰到異常流程怎么處理？...將這些問題理清后變成代碼語言，從而將產(chǎn)品實(shí)現(xiàn)出來。

測試人員：我們知道，產(chǎn)品必須經(jīng)過系統(tǒng)測試才能上線，而進(jìn)行系統(tǒng)測試之前，測試人員要進(jìn)行測試用例的梳理，測試用例必須得覆蓋所有的功能甚至是action，才能做到上線無bug，或者是少bug狀態(tài)。測試人員整理測試用例表的時候就會參考交互設(shè)計文檔。

交互設(shè)計文檔都包括哪些東西？

知道了誰會看DRD以及DRD的意義?，F(xiàn)在來說說DRD都包含哪些東西。

DRD的目錄

這是我整理DRD的一個目錄，包含九大部分：文檔封面；設(shè)計背景；信息架構(gòu)；整體業(yè)務(wù)流程；任務(wù)流程圖；頁面流；功能列表；交互規(guī)范說明；線框圖。

①文檔封面

把交互設(shè)計文檔看成一本書，文檔封面就是這本書的封面，封面就得包括書名，作者，出版時間等關(guān)于書的基本信息。同樣的，DRD的文檔封面包括：項目名稱；版本號；時間；交互人員；內(nèi)容。1.0版本的內(nèi)容多為創(chuàng)建一個新的APP或者ERP，迭代版本的內(nèi)容則是重構(gòu)某個功能的頁面，增加/刪除某個功能等等。

文檔封面

②設(shè)計背景

交代清楚產(chǎn)品定位；具體的設(shè)計內(nèi)容；設(shè)計的目標(biāo)是什么，讓觀眾通過設(shè)計背景模塊了解這次交互設(shè)計的一些基本情況。

③信息架構(gòu)

產(chǎn)品分為幾個模塊，每個模塊下包含多少信息和標(biāo)簽，一般會用思維導(dǎo)圖的形式畫出信息架構(gòu)圖。推薦一個Mac OS下的思維導(dǎo)圖軟件IThoughtsX，一款簡約易用的導(dǎo)圖軟件。（關(guān)于信息架構(gòu)設(shè)計可以查看《90%的設(shè)計師都不知道的信息架構(gòu)知識》）。

④整體業(yè)務(wù)流程圖

整個業(yè)務(wù)模式涉及到多少主體？每個主體要負(fù)責(zé)哪些模塊？這些業(yè)務(wù)的流程是怎么樣的？業(yè)務(wù)流程圖中的主體不光可以是買方、賣方等人，還可以是各個機(jī)構(gòu)或者是APP、ERP等產(chǎn)品形式。

由于公司的業(yè)務(wù)流程涉及保密信息，所以從網(wǎng)上找了個購物的業(yè)務(wù)流程。一般業(yè)務(wù)流程會用泳道圖的形式來表示。

購物支付的業(yè)務(wù)流程

⑤任務(wù)流程圖

梳理完產(chǎn)品的信息架構(gòu)和業(yè)務(wù)模式，接下來就要將產(chǎn)品分解為多個任務(wù)，一般一個產(chǎn)品只有一個主干任務(wù)，其他則是支干任務(wù)（微信的主干任務(wù)是即時聊天，朋友圈、搖一搖、購物、設(shè)置等都屬于支干任務(wù)）。

每個任務(wù)用一個流程圖表示，太過簡單的任務(wù)可以不需要畫流程圖（像設(shè)置里的任務(wù)，一般只涉及到兩三步操作）。

⑥頁面流

一個任務(wù)流程圖，繼續(xù)具體化，就要輸出該任務(wù)下的頁面流了，不同任務(wù)之間的頁面會存在重疊，這樣就可以將所有任務(wù)流程匯總，形成整個產(chǎn)品的頁面流。頁面流不需要將每個頁面的內(nèi)容都詳細(xì)的畫出，只要畫出每個頁面涉及到的行動點(diǎn)（按鈕）。

關(guān)于三種流程的設(shè)計可以查看《產(chǎn)品的三種流程圖，你都知道嗎？》。

⑦功能列表

跟我司測試人員溝通之后，發(fā)現(xiàn)在交互上列出整個產(chǎn)品涉及到的功能點(diǎn)很有意義，測試可以通過這個去梳理測試用例，開發(fā)也能根據(jù)功能列表去比對發(fā)現(xiàn)哪些功能實(shí)現(xiàn)了，哪些功能沒有實(shí)現(xiàn)。

⑧交互規(guī)范說明

對于一些特殊的交互狀態(tài)，包括產(chǎn)品會共用的控件我都會放在這個目錄下。

單位：規(guī)范產(chǎn)品中涉及到的所有單位，例如歷程用“公里”，時間用“2016年11月14日”的形式，金額用“元”或“￥”等等。

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

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

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

版本控制：強(qiáng)制升級時產(chǎn)品怎么處理？非強(qiáng)制升級時產(chǎn)品怎么處理？升級的彈框和文案是怎樣的？一般在版本1.0下會和產(chǎn)品、技術(shù)確定產(chǎn)品的升級方案。

⑨線框圖

經(jīng)過了上面重重分析，終于可以放開手畫線框圖了。線框圖一般包括三個部分：每個頁面的內(nèi)容和排布；各個頁面之間的跳轉(zhuǎn)邏輯；一些交互說明。

用什么工具寫DRD？

思維永遠(yuǎn)比工具重要，你可以用InDesign、可以用PPT或者keynote、也可以用Axure等。

我一般用Axure整理和輸出文檔，交互評審?fù)曛髸⒄麄€文檔通過HTML的形式分享出去，給團(tuán)隊的各個成員查看。用瀏覽器就能打開，而且還會在瀏覽器左側(cè)形成目錄，瀏覽起來很方便。

用Axure導(dǎo)出的網(wǎng)頁形式

一千個交互設(shè)計師就有一千個交互設(shè)計文檔，根據(jù)不同的項目和公司不同的工作流程，按需設(shè)計自己的交互設(shè)計文檔。雖然交互設(shè)計文檔不要求做的很美觀，但至少要做到規(guī)范和整齊。

分享名稱：如何輸出一份合格的交互設(shè)計文檔？
新聞來源：http://jinyejixie.com/article46/choheg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站改版、外貿(mào)網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、微信小程序、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)