大家好，今天想跟大家分享一下如何撰寫(xiě)一份專業(yè)的交互設(shè)計(jì)文檔，作為交互設(shè)計(jì)師，我們平時(shí)工作最大的產(chǎn)出就是交互設(shè)計(jì)文檔，很多剛轉(zhuǎn)行的同學(xué)會(huì)在網(wǎng)上尋找模板直接套用或者自己慢慢摸索，而這篇文章會(huì)手把手教你怎樣完成一份完整的交互設(shè)計(jì)文檔。

一、為什么要寫(xiě)交互設(shè)計(jì)文檔？交互設(shè)計(jì)文檔有什么用

1. 保存記錄自己的設(shè)計(jì)思路

交互設(shè)計(jì)師的交互設(shè)計(jì)文檔就好像UI設(shè)計(jì)師的PSD文件一樣用于保存記錄自己的設(shè)計(jì)思路，但交互設(shè)計(jì)師負(fù)責(zé)的任務(wù)不僅僅停留在頁(yè)面當(dāng)中，還包括產(chǎn)品的需求分析、用戶畫(huà)像、競(jìng)品分析、產(chǎn)品數(shù)據(jù)分析、用戶交互邏輯等等。我們都可以寫(xiě)在交互設(shè)計(jì)文檔中做記錄，為我們的交互設(shè)計(jì)提供依據(jù)（其實(shí)就是避免開(kāi)發(fā)懟你問(wèn)你設(shè)計(jì)依據(jù)是啥，你就馬上把分析擺他臉上，避免尷尬）。

2. 利用交互設(shè)計(jì)文檔去表達(dá)我們的設(shè)計(jì)思路

交互設(shè)計(jì)師作為產(chǎn)品的上游（一般開(kāi)發(fā)流程是產(chǎn)品經(jīng)理負(fù)責(zé)收集需求給予交互設(shè)計(jì)師進(jìn)行交互設(shè)計(jì)，撰寫(xiě)交互設(shè)計(jì)文檔，然后文檔評(píng)審?fù)ㄟ^(guò)后，UI同學(xué)負(fù)責(zé)UI設(shè)計(jì)，接著提供前端同學(xué)進(jìn)行界面開(kāi)發(fā)，后端同學(xué)則根據(jù)交互稿搭建框架和業(yè)務(wù)邏輯，開(kāi)發(fā)完成后進(jìn)行測(cè)試，反饋測(cè)試結(jié)果，如此循環(huán)，因此交互設(shè)計(jì)師一般處于產(chǎn)品線的上游階段）。

撰寫(xiě)一份標(biāo)準(zhǔn)和規(guī)范的交互設(shè)計(jì)文檔是非常重要的，因?yàn)槲覀冃枰媒换ピO(shè)計(jì)文檔去表達(dá)我們的設(shè)計(jì)思路，通過(guò)交互文檔我們可以讓UI同學(xué)知道頁(yè)面需要給用戶表達(dá)什么情緒，達(dá)到怎樣的目的，告訴前端同學(xué)頁(yè)面跳轉(zhuǎn)邏輯以及交互模塊怎么寫(xiě)，幫助后端同學(xué)清晰搭建后臺(tái)框架與數(shù)據(jù)庫(kù)以及產(chǎn)品業(yè)務(wù)邏輯是怎么樣的，最后測(cè)試童鞋還會(huì)拿著你的交互稿進(jìn)行單元測(cè)試，編寫(xiě)測(cè)試用例。

所以只有我們先把文檔寫(xiě)好了，才能避免后面產(chǎn)品開(kāi)發(fā)出現(xiàn)問(wèn)題。

3. 未來(lái)我們用于跳槽加薪面試作品

內(nèi)行看門(mén)道，外行看熱鬧，如果你面試交互設(shè)計(jì)師的時(shí)候還是帶著一條長(zhǎng)長(zhǎng)的JPG或者是網(wǎng)上千篇一律排版的PDF作品集，在面試官眼中顯得不入行（或許你會(huì)遇到性格好的面試官，畢竟千人千面，面試特別看人）。

因?yàn)閷I(yè)的交互設(shè)計(jì)師在平時(shí)工作中為了避免干擾UI同學(xué)設(shè)計(jì)，只會(huì)使用黑白灰做交互稿，也很少做成一條長(zhǎng)長(zhǎng)的PNG或JPG，我們可以適當(dāng)包裝作品集。

但如果過(guò)度了會(huì)讓人覺(jué)得不落地，或許只停留在剛?cè)胄须A段，所以在技術(shù)面試，我們可以拿著我們的交互設(shè)計(jì)文檔跟面試官敘述產(chǎn)品從需求層面怎樣思考完成交互設(shè)計(jì)的，解決了用戶什么痛點(diǎn)，最后取得了什么樣的成果，得到了怎樣的數(shù)據(jù)，我相信成功幾率會(huì)大很多（PS：用交互設(shè)計(jì)文檔進(jìn)行面試前請(qǐng)注意把公司機(jī)密信息做脫敏處理，避免發(fā)生糾紛）。

二、交互文檔包含什么內(nèi)容？以及怎樣撰寫(xiě)交互文檔

說(shuō)了那么多，那究竟交互設(shè)計(jì)文檔包含哪些內(nèi)容？

一般來(lái)講，一個(gè)基礎(chǔ)、規(guī)范的交互設(shè)計(jì)文檔應(yīng)該包含文檔封面、更新文檔、設(shè)計(jì)說(shuō)明文檔、業(yè)務(wù)流程圖、交互原型、垃圾桶等模塊，當(dāng)然了，這些模塊也不是永恒不變的，有些是必須要，有些是選擇性添加的，至于這些模塊有什么功能和怎樣進(jìn)行撰寫(xiě)，這篇文章會(huì)逐一分享給大家。

（說(shuō)明：作者比較習(xí)慣使用Axure軟件撰寫(xiě)交互設(shè)計(jì)文檔，大家可以根據(jù)自身愛(ài)好或者公司規(guī)定進(jìn)行選擇（例如sketch、figma、PS等等..都是可以的）。

這里要引用一句話：軟件僅僅是工具，并不能限制我們的思維，好的工具能讓我們走得更快但不能使我們走得更遠(yuǎn)——沃·茲基碩德。

1. 文檔封面（必須）

文檔封面就相當(dāng)于一本書(shū)的封面一樣，用于記錄產(chǎn)品名稱、版本號(hào)、日期以及文檔負(fù)責(zé)人（這樣開(kāi)發(fā)童鞋就能精準(zhǔn)找到你進(jìn)行撕X），只要能展示以上信息，其他信息（例如產(chǎn)品經(jīng)理是誰(shuí)等）可以自行添加。

2. 更新日志（必須）

以前我都習(xí)慣把更新日志放到產(chǎn)品文檔后面，但是隨著工作時(shí)間變久，我發(fā)現(xiàn)開(kāi)發(fā)童鞋在SVN上打開(kāi)設(shè)計(jì)文檔后第一時(shí)間就是查看更新日志，所以后來(lái)把這一頁(yè)提了上來(lái)（是的，設(shè)計(jì)文檔也是需要跟產(chǎn)品一樣不斷優(yōu)化迭代的）。

更新日志主要用于記錄產(chǎn)品迭代修改的內(nèi)容，讓開(kāi)發(fā)同學(xué)快速了解這次迭代修改了什么內(nèi)容，他需要做哪些工作。

我的更新日志特別簡(jiǎn)單，就只有日期、變更內(nèi)容、所在頁(yè)面以及備注四個(gè)字段，這里唯一注意的是，日期必須是最新修改的內(nèi)容放在上面，以前的日期在下面，很多同學(xué)每次迭代的時(shí)候會(huì)在下面列進(jìn)行內(nèi)容添加，這樣開(kāi)發(fā)同學(xué)每次都必須滾到最下面查看信息，大哥，你是交互設(shè)計(jì)師，專業(yè)一點(diǎn)好嗎。

3. 產(chǎn)品項(xiàng)目背景（必須）

產(chǎn)品項(xiàng)目背景是一個(gè)項(xiàng)目的核心關(guān)鍵，告訴所有的團(tuán)隊(duì)成員我們要做一個(gè)什么樣的產(chǎn)品，需要?jiǎng)?chuàng)造什么樣的價(jià)值，就好比我們寫(xiě)作文時(shí)的中心句，時(shí)刻提醒著我們要不忘初心，為團(tuán)隊(duì)成員開(kāi)發(fā)項(xiàng)目指明方向。

前段時(shí)間有個(gè)同學(xué)來(lái)問(wèn)我，他們本來(lái)是剛開(kāi)始是做校園教育系統(tǒng)的，但是隨著產(chǎn)品慢慢迭代，功能逐漸強(qiáng)大了，最近老板希望在系統(tǒng)中加上財(cái)務(wù)功能，本來(lái)用戶學(xué)習(xí)成本就高，如果再加上去會(huì)不會(huì)適得其反？雖然我不知道那位同學(xué)的老板產(chǎn)品戰(zhàn)略是啥，背后是怎樣思考的，但是在我看來(lái)這樣的行為就不能是不忘初心，這頂多能算不忘出薪吧（拒絕諧音梗從我做起）。

好了，至于里面產(chǎn)品背景、產(chǎn)品目標(biāo)以及定位的內(nèi)容應(yīng)該如何撰寫(xiě)？對(duì)，我抄的。一般情況下，這些內(nèi)容我們都能夠在項(xiàng)目立項(xiàng)文檔或者在招投標(biāo)書(shū)上就能找到，我們不用親自寫(xiě)（但可以加以設(shè)計(jì)），再不行也能找到產(chǎn)品經(jīng)理去了解。

或者你會(huì)說(shuō)，小公司既沒(méi)有立項(xiàng)、也沒(méi)有招投標(biāo)書(shū)，產(chǎn)品經(jīng)理也是你，那該怎么辦？那么你就得發(fā)揮出自己當(dāng)年高考的作文水平，積極了解清楚產(chǎn)品背景定位，努力完成這一部分，因?yàn)樾畔⒌膫鬟f是有消耗性的，只有我們作為產(chǎn)品的上游做好了，才能為團(tuán)隊(duì)成員后面的努力提供方向。

4. 產(chǎn)品需求（必須）

產(chǎn)品需求列表用于記錄產(chǎn)品需要做哪些【功能點(diǎn)】，這些功能點(diǎn)我們一般能在產(chǎn)品經(jīng)理或者項(xiàng)目經(jīng)理上獲得，我們收集需求后需要對(duì)其按照重要程度P0、P1、P2等級(jí)進(jìn)行分類，我分類的原則是KANO法則（不知道的同學(xué)可以百度），P0等級(jí)是非做不可的需求。

例如像微信的聊天，淘寶的支付功能等，P1是錦上添花的需求，時(shí)間緊迫的話可以下次再做的，例如微信的語(yǔ)音、視頻聊天等等，排到最后Pn就是一些不必要可做可不做，就算做了也沒(méi)太大影響的功能，就可以與領(lǐng)導(dǎo)層商討是否確認(rèn)要做（例如炸屎，你們現(xiàn)在還有人炸屎?jiǎn)?？什么？炸屎你都不知道？那?dāng)我沒(méi)說(shuō)。）。

5. 用戶畫(huà)像（可選）

所謂知己知彼百戰(zhàn)不殆，通過(guò)用戶畫(huà)像我們可以快速了解產(chǎn)品目標(biāo)用戶群體特征，分析目標(biāo)用戶群體的期望、需求、動(dòng)機(jī)等，再根據(jù)用戶場(chǎng)景去進(jìn)行設(shè)計(jì)，有了用戶畫(huà)像的支撐，能避免我們?cè)谠O(shè)計(jì)過(guò)程中出現(xiàn)一些不必要的因素，例如我們目標(biāo)用戶是中老年人的話，那么按鈕、字體就應(yīng)該適當(dāng)?shù)姆糯?、排版?jiǎn)單明了，而針對(duì)青少年就可以偏個(gè)性化風(fēng)格設(shè)計(jì)。

當(dāng)然，如果是小公司的話可能沒(méi)有那么多的資源去做用戶的調(diào)研，在這里分享一下我當(dāng)年在創(chuàng)業(yè)公司經(jīng)常使用的一種快速獲取用戶畫(huà)像的方法，既快速又特別專業(yè)。

這里需要借助一個(gè)網(wǎng)站：艾瑞數(shù)據(jù)（https://index.iresearch.com.cn），打開(kāi)后選擇自己產(chǎn)品的類型（例如學(xué)習(xí)教育類），網(wǎng)站會(huì)把該類型的產(chǎn)品按照用戶數(shù)量從高到低展示給你，然后我們選擇一個(gè)差不多的競(jìng)品點(diǎn)擊去查看他們的用戶特征，最后Ctrl C+Ctrl V到我們的文檔中，完成。

6. 競(jìng)品分析（可選）

競(jìng)品分析相信大家都特別熟悉，我之前的文章也教過(guò)大家怎么進(jìn)行詳細(xì)的競(jìng)品分析，這里就不細(xì)講了，雖然在交互文檔中競(jìng)品分析可做可不做，但是在產(chǎn)品初期階段我們?nèi)绻J(rèn)真做競(jìng)品分析的話能夠快速了解產(chǎn)品業(yè)務(wù)、熟悉用戶的使用習(xí)慣，同時(shí)當(dāng)我們?cè)谧鼋换ピ偷臅r(shí)候能提供快速借（cao）鑒（xi），因此有條件的同學(xué)還是建議盡量做一下。

7. 數(shù)據(jù)分析（可選）

數(shù)據(jù)分析時(shí)交互設(shè)計(jì)師必不可少的一項(xiàng)技能，也是驗(yàn)證設(shè)計(jì)成果的重要因素。如果缺少了數(shù)據(jù)分析而單憑個(gè)人主觀因素的話，我們難以說(shuō)明設(shè)計(jì)效果的好壞，畢竟現(xiàn)實(shí)中會(huì)出現(xiàn)各種意想不到的情況。

所謂“無(wú)對(duì)比，不分析”，一般數(shù)據(jù)分析都是通過(guò)數(shù)值進(jìn)行對(duì)比，去查看數(shù)據(jù)相對(duì)是上升、下降、還是持平，是否跟當(dāng)初設(shè)計(jì)預(yù)期的一樣，對(duì)于初期的產(chǎn)品會(huì)更關(guān)注產(chǎn)品的一些DAU(日活數(shù))、GMV（成交總額）、以及支付人數(shù)等，因?yàn)檫@些數(shù)據(jù)的增減是直接影響到整個(gè)產(chǎn)品的存活，如果產(chǎn)品的DAU不斷下降的話，那你就要馬上查找原因，及時(shí)調(diào)整，避免惡性循環(huán)。

一般情況下，像日活數(shù)那些簡(jiǎn)單的數(shù)據(jù)可以直接問(wèn)后臺(tái)同學(xué)就能獲得，而用戶某些環(huán)節(jié)的存活率、轉(zhuǎn)化率等就需要利用【數(shù)據(jù)埋點(diǎn)】，市場(chǎng)上也有很多第三方做數(shù)據(jù)埋點(diǎn)的，例如神策數(shù)據(jù)、Growing IO等，這里就不展開(kāi)說(shuō)了，但是面試的時(shí)候你能說(shuō)出這些就會(huì)顯得很專業(yè)。

8. 信息架構(gòu)（必須）

信息架構(gòu)屬于用戶體驗(yàn)的結(jié)構(gòu)層，就像產(chǎn)品的骨架一樣，而信息架構(gòu)設(shè)計(jì)就是對(duì)產(chǎn)品信息進(jìn)行構(gòu)架、歸類的設(shè)計(jì)，信息架構(gòu)能夠防止我們對(duì)產(chǎn)品功能點(diǎn)遺漏，同時(shí)也可以通過(guò)產(chǎn)品大體的信息架構(gòu)觀察出產(chǎn)品設(shè)計(jì)是否合理。

一般來(lái)說(shuō)（干貨來(lái)了），產(chǎn)品架構(gòu)分支可以分為度和層，而好產(chǎn)品的信息架構(gòu)在廣度和層度都是恰到好處，下面我舉兩個(gè)反例大家就懂了：

?（1）產(chǎn)品架構(gòu)的廣度太廣（不懂的看下圖）

信息架構(gòu)的廣度太廣意味著頁(yè)面的承載信息量特別的多，沒(méi)有側(cè)重點(diǎn)，這樣用戶點(diǎn)進(jìn)頁(yè)面后會(huì)思考很久而不知所措，最經(jīng)典的就是某某寶和某同城，新用戶進(jìn)入到首頁(yè)真的模棱兩可。

?（2）產(chǎn)品架構(gòu)的層太深

信息架構(gòu)的層太深會(huì)導(dǎo)致另外一個(gè)問(wèn)題就是頁(yè)面非常的多，要找到一些功能的話操作非常的困難，最常見(jiàn)的就是某些視頻的取消會(huì)員流程（包括當(dāng)年的ofo退費(fèi)），你們是不是為了退費(fèi)或者取消某APP會(huì)員百度過(guò)很多次（反過(guò)來(lái)思考，如果某些功能你不想被用戶發(fā)現(xiàn)，但是又必不可少的話應(yīng)如何設(shè)計(jì)，你懂得）。

9. 業(yè)務(wù)流程圖（可選）

（1）繪制業(yè)務(wù)流程圖的目的

繪制業(yè)務(wù)流程圖的目的就是梳理并分析優(yōu)化業(yè)務(wù)流程。我知道很多同學(xué)做UI設(shè)計(jì)師的時(shí)候可以完全不管業(yè)務(wù)，直接做設(shè)計(jì)，但是作為交互設(shè)計(jì)師了解產(chǎn)品業(yè)務(wù)是非常重要的，因?yàn)椴涣私鈽I(yè)務(wù)你就無(wú)法完成交互設(shè)計(jì)，優(yōu)化業(yè)務(wù)場(chǎng)景。

舉個(gè)例子：在教育考試系統(tǒng)中一般流程是：教育局出通知→學(xué)生報(bào)名考試→老師審核→報(bào)名通過(guò)→老師編排學(xué)生考試名單→學(xué)生開(kāi)始考試對(duì)號(hào)入座→教育局公布成績(jī)→學(xué)生查詢成績(jī)→考試結(jié)束，看這一些列的流程，因?yàn)殛P(guān)聯(lián)特別多，如果對(duì)業(yè)務(wù)不熟悉的話設(shè)計(jì)起來(lái)會(huì)非常的不便，如果前期因?yàn)闃I(yè)務(wù)流程不熟悉而設(shè)計(jì)出錯(cuò)誤的交互稿的話，后面就會(huì)特別麻煩。

（2）如何去繪制完整的業(yè)務(wù)流程

如果你的產(chǎn)品經(jīng)理比較專業(yè)的話，可能會(huì)直接給你一個(gè)現(xiàn)成的業(yè)務(wù)流程圖，那樣就能省事很多。

要是沒(méi)有產(chǎn)品經(jīng)理的話，最直接的就是問(wèn)用戶，這里介紹我最常用的方法就是“一聽(tīng)二問(wèn)三確認(rèn)”：

• 一聽(tīng)：先聽(tīng)客戶代表或者業(yè)務(wù)方的介紹。聽(tīng)得過(guò)程中，不打斷對(duì)方，以最簡(jiǎn)單的方式勾出主體脈絡(luò)，即基本要素中的角色、活動(dòng)、協(xié)作關(guān)系梳理出即可。
• 二問(wèn)：完成上一步后，就可以進(jìn)行提問(wèn)了。主要是沿著流程進(jìn)行發(fā)問(wèn)，重點(diǎn)放在分支、產(chǎn)物關(guān)系上?？纯词欠翊嬖诜种У那闆r，各協(xié)作之間是否有交付物。一邊問(wèn)，一邊修正。
• 三確認(rèn)：最后一步就是自己講一遍流程，和客戶代表或者業(yè)務(wù)專家進(jìn)行最后的確認(rèn)。

10. 交互原型（必須）

幾乎可以說(shuō)，上面所有的東西都是為了完成交互原型做鋪墊的，我相信對(duì)大家來(lái)講交互原型都非常熟悉，但是給大家分享幾個(gè)經(jīng)常犯錯(cuò)的點(diǎn)：

1. 頁(yè)面盡量只采用黑白灰配色，避免干擾UI同學(xué)設(shè)計(jì)這是大家經(jīng)常犯錯(cuò)的一個(gè)點(diǎn)，畢竟很多同學(xué)以前是UI出身，做交互稿時(shí)也順便配配色，這樣會(huì)非常影響UI同學(xué)設(shè)計(jì)的（不在其位不謀其政，你做UI的時(shí)候也不希望有人在旁邊指指點(diǎn)點(diǎn)吧），所以我們做交互稿時(shí)只采用黑白灰就夠了，灰度大小就代表信息的重要程度，簡(jiǎn)潔規(guī)范即可。
2. 頁(yè)面的跳轉(zhuǎn)用連線表示其實(shí)就很方便了，真正厲害的人不會(huì)到處?kù)偶肌Ｓ行┩瑢W(xué)在交互稿上各種跳轉(zhuǎn)、動(dòng)態(tài)面板、中繼器等花里胡哨一大堆，這樣開(kāi)發(fā)同學(xué)看起來(lái)特別的難受，所以很多時(shí)候用連線的方式表示往往是最簡(jiǎn)單明了的。
3. 如果涉及到多端設(shè)計(jì)（IOS、Andriod、PC端）的話，除非產(chǎn)品非常龐大，不然就放在同一個(gè)設(shè)計(jì)文檔中，避免以后評(píng)審還要弄多個(gè)文件。
4. 創(chuàng)建一個(gè)適合自己的組件庫(kù)，在日常設(shè)計(jì)中，80%的控件是可以重復(fù)利用的，做一個(gè)合適的組件庫(kù)能節(jié)省大量時(shí)間（我整理了工作多年的B端以及移動(dòng)端常用的組件，你們需要也可以分享給你們）。

11. 垃圾桶（可選）

做交互文檔時(shí)垃圾桶就相當(dāng)于后悔藥，因?yàn)橐恍╉?yè)面如果刪掉保存后是不能還原了的，因此在改稿時(shí)如果一些暫時(shí)不需要的頁(yè)面可以丟到垃圾桶中，避免到最后用回以前的方案時(shí)重新再做浪費(fèi)時(shí)間。

三、最后總結(jié)

好啦，文章分享的內(nèi)容比較多，但是并不是每一部分都非做不可，文檔也并不是絕對(duì)的規(guī)范，每一家公司交互設(shè)計(jì)師的職責(zé)可能都不太相同，所以大家可以根據(jù)自身需求因地制宜。

曾經(jīng)有人說(shuō)過(guò)，設(shè)計(jì)的本質(zhì)并不是把簡(jiǎn)單的事情做復(fù)雜，而是把復(fù)雜的事情做簡(jiǎn)單。

所以我希望有一天你們能把交互設(shè)計(jì)文檔做到很簡(jiǎn)單，而把產(chǎn)品做得非常好，然后跟我分享經(jīng)驗(yàn)，這才是我寫(xiě)文章的初心。

最后希望大家有所收獲，與大家共同進(jìn)步，共勉！

作者：北沐而川；公眾號(hào)：北沐而川

原文鏈接：https://mp.weixin.qq.com/s/lu2StHVqNAxLM0zzS7musA

本文由 @北沐而川 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。