當(dāng)你搜索并查閱了很多網(wǎng)上資料后，仍可能不會編輯交互設(shè)計說明書。那么究竟該怎么編輯交互設(shè)計說明書呢？在編輯的過程中又有哪些要點和注意事項呢？

目前很多公司會采用敏捷式開發(fā)流程，這時很多產(chǎn)品經(jīng)理或交互設(shè)計師會直接在 Axure 等原型設(shè)計工具中制作 PRD 而非原型，并且還會出現(xiàn) 多人編輯一份文檔的情況。

下面簡單介紹交互設(shè)計說明書的基本寫法，也算是拋磚引玉吧，最后會給出完整的項目交互設(shè)計文檔供大家學(xué)習(xí)參考。

這里需要注意的是，有時使用原型工具導(dǎo)出的交互設(shè)計說明書會很混亂，沒有可讀性，比如，完全是機器按照你的原型站點導(dǎo)航樹結(jié)構(gòu)導(dǎo)出的不符合業(yè)務(wù)邏輯的說明書，但當(dāng)開發(fā)人員、UI 設(shè)計師或 PM 拿到這樣一份“交互設(shè)計說明書”時，真的看不懂。所以需要設(shè)計師根據(jù)實際的業(yè)務(wù)需求與業(yè)務(wù)對象有針對性地編輯一份交互設(shè)計說明書。

交互設(shè)計說明書的閱讀對象

交互設(shè)計文檔都是給誰看的？這個文檔會根據(jù)閱讀的對象做什么優(yōu)化嗎？下面利用場景化模擬解釋交互設(shè)計說明文檔的使用場景。

交互設(shè)計說明書由交互設(shè)計師完成編輯、修訂、發(fā)布。

• 交互設(shè)計師提交交互設(shè)計說明書給產(chǎn)品經(jīng)理。
• 交互設(shè)計師提交交互設(shè)計說明書給 UI 設(shè)計師。
• 交互設(shè)計師提交交互設(shè)計說明書給研發(fā)人員。
• 交互設(shè)計師提交交互設(shè)計說明書給測試人員。

在交互設(shè)計過程中，上述四個角色會不斷有所交集。所以，一旦編輯文檔，就需要對這幾個角色有針對性地解釋和閱讀優(yōu)化。

1．產(chǎn)品經(jīng)理場景

交互設(shè)計說明書的閱讀人員包括：產(chǎn)品人員、設(shè)計人員、研發(fā)人員、測試人員等，他們就是交互設(shè)計文檔的使用主角，產(chǎn)品經(jīng)理在使用交互設(shè)計說明書的時候需要確認(rèn)的方向是 ：交互邏輯、功能架構(gòu)、交互事件、界面頁面流轉(zhuǎn)與內(nèi)容布局等。這里的產(chǎn)品經(jīng)理代表產(chǎn)品經(jīng)理及以上管理層。

關(guān)鍵點：為項目梳理清楚邏輯關(guān)系，文檔按照邏輯關(guān)系和功能架構(gòu)分支等設(shè)置大綱講清楚項目、功能、組件、頁面流轉(zhuǎn)關(guān)系。

2．UI設(shè)計師場景

UI 設(shè)計師在使用交互設(shè)計說明書的時候，更多的是看你的說明文檔的具體頁面數(shù)量，因為這決定 UI 設(shè)計師出多少效果圖。另外，要看你的原型設(shè)計給 UI 設(shè)計師留了多少發(fā)揮空間，不能一開始就制作高保真原型。

關(guān)鍵點：例如，一個頁面有三個狀態(tài)，制作原型動態(tài)面板時加原型事件即可，但是設(shè)計的文檔需要將三個狀態(tài)都截圖標(biāo)注好，頁面流轉(zhuǎn)標(biāo)記是告訴 UI 設(shè)計師這里有三個頁面，而不是告訴 UI 設(shè)計師有三個狀態(tài)。

3．研發(fā)工程師場景

研發(fā)人員拿到交互設(shè)計說明書的時候就非常關(guān)心細(xì)節(jié)實現(xiàn)，關(guān)心有多 少個功能、多少個功能新特性、多少個頁面元素組件、多少個交互動效等， 但他不關(guān)心方案里一個輸入框里是用彩色還是黑白，因為他是具體功能的實現(xiàn)者。

提供給研發(fā)人員的文檔需要注意以下關(guān)鍵點 ：明確表示出關(guān)于功能設(shè)計、頁面邏輯、組件交互等信息的細(xì)節(jié)，例如：一個頁面刷新，要分為觸發(fā)刷新事件、刷新加載中、刷新成功提示、刷新失敗提示。其中失敗提示又要分多種情況：網(wǎng)絡(luò)不佳、程序異常等。如果你沒有提出明確需求，責(zé)任就會在需求方，而不是程序部門。

4．測試與需求場景

測試是依靠需求說明書和交互設(shè)計說明書，進(jìn)行測試用例與測試腳本的編寫，在交互設(shè)計說明文檔里需要說明白每一個功能的交互動作與事件，測試是抓細(xì)節(jié)的，所以需要配一些說明性文字解釋交互設(shè)計的思路與實現(xiàn)路徑，這樣測試人員就可根據(jù)設(shè)計思路設(shè)計出測試用例。當(dāng)然，測試用例分多種類型，這里指的是功能測試與邏輯測試，一些性能測試等需要依靠程序使用的軟件、數(shù)據(jù)庫等技術(shù)性的接口文檔來定。

關(guān)鍵點：功能點、業(yè)務(wù)邏輯、界面元素、交互過程分解步驟。上面解釋了各角色使用交互設(shè)計說明文檔的場景及他們期待的真實需求，只有清楚地了解這些內(nèi)容，才能有針對性地制作交互設(shè)計說明書。

交互設(shè)計說明書包含的內(nèi)容

眾所周知，一份交互設(shè)計說明書最重要的當(dāng)然是內(nèi)容，下面介紹如何按照實際流程制作文檔。

1. 寫什么

很多新手在新建一份空白文檔后不知道具體寫什么內(nèi)容，如前面所說，對一份交互設(shè)計說明書，你只需要把原型截圖或原型直接畫成一個文檔即可。其實交互文檔就是頁面文檔，所有的軟件頁面、狀態(tài)都分離出頁面進(jìn)行展現(xiàn)，然后加入頁面流程和交互動作說明文字、箭頭指示線條等。

關(guān)鍵點：邏輯結(jié)構(gòu)、頁面跳轉(zhuǎn)、交互狀態(tài)的文字說明，統(tǒng)一交互體驗動作，確保頁面組件的一致性。

示例如圖1所示，這是一個包含交互界面動作、邏輯步驟、頁面流轉(zhuǎn)、文案和注釋的實例。

圖1包括交互界面動作、邏輯步驟、頁面流轉(zhuǎn)、文案與注釋的實例

圖中的這個交互動作是將所有出現(xiàn)的界面靜態(tài)化地寫在文檔里進(jìn) 行展示。如果你想直接展示動態(tài)交互，可以使用原型設(shè)計工具設(shè)計好交互 原型之后再截圖編輯文檔，在交付文檔時結(jié)合原型演示，這樣會更有效果。

2．怎么寫

一般的交互設(shè)計說明書的文檔結(jié)構(gòu)如下 ：

• 文檔封皮與版本信息。
• 目錄頁。
• Log（日志）修訂記錄頁。
• 交互行為邏輯圖 + 文字說明。
• 頁面展開圖 + 邏輯 + 文字。
• 詳細(xì)介紹其他單獨的交互動作。

（1）封皮和版本

圖2所示是交互設(shè)計說明書封皮和版本信息的示例。版本信息一般 包括版本、日期、參與人、變更內(nèi)容簡要、備注。

圖2交互設(shè)計說明書版本信息格式

（2）目錄

這個無須多說，平時我們看的書基本上都有目錄，不過要記住，目錄 要合理分級，以分清主次。

（3）Log 更新記錄頁

這個頁面用來描述某次更新的信息簡介與頁碼導(dǎo)航等。圖3為交互 設(shè)計說明文檔的更新記錄頁的示例。

圖3交互設(shè)計說明書的更新日志

（4）交互行為邏輯圖 + 文字說明

圖4所示是某個應(yīng)用商店的更新應(yīng)用交互邏輯 + 文字說明圖例。

圖4交互設(shè)計說明書中的交互邏輯頁面流程

從圖中可以看出，這個說明文檔是把應(yīng)用更新功能作為一頁，具 體包括其架構(gòu)、交互、流程、邏輯、交互事件及文字解釋說明。

這個過程是針對產(chǎn)品經(jīng)理和程序人員而言的，因為他們需要看明白交 互流程邏輯。

（5）頁面展開圖 + 邏輯 + 文字

圖5是頁面、元件、文案、邏輯、頁面狀態(tài)的展示。這部分是針對 視覺設(shè)計人員而言的，需要將所有的頁面都展開解釋一遍，公用部分可以單獨標(biāo)記。

圖5交互設(shè)計說明書的頁面元素

（6）詳細(xì)解釋其他單獨的交互動作

此部分是對不在流程中單獨或獨立的交互動作進(jìn)行補充說明。

本文節(jié)選自《交互設(shè)計那些事兒》一書

由阿西UED 編著，電子工業(yè)出版社出版

未經(jīng)出版社書面授權(quán)，禁止轉(zhuǎn)載，違者追究法律責(zé)任。