這篇文章是為產(chǎn)品和交互設(shè)計(jì)師初階的小伙伴們總結(jié)的一份學(xué)習(xí)工作經(jīng)驗(yàn)復(fù)盤：如何讓交互文檔開口說話？

交互文檔的受眾

交互文檔是一名交互設(shè)計(jì)師或者產(chǎn)品經(jīng)理產(chǎn)出的最基礎(chǔ)的協(xié)同文檔，目標(biāo)讀者是和你一起作戰(zhàn)前線的精銳部隊(duì)：UI、開發(fā)、測試、運(yùn)營、或者其他產(chǎn)品經(jīng)理/交互設(shè)計(jì)師。

交互文檔的地位

我經(jīng)常聽到有同行小伙伴們抱怨：說自己明明是產(chǎn)品經(jīng)理，交互設(shè)計(jì)文檔為什么要寫的事無巨細(xì)？說自己是一名交互設(shè)計(jì)師，但每次開需求（交互）評(píng)審的時(shí)候，被開發(fā)懟得很慘，是不是他們故意找茬呢？

有些公司沒有交互設(shè)計(jì)師，所以產(chǎn)品經(jīng)理在很大程度上承擔(dān)了交互設(shè)計(jì)師的部分職責(zé)。因此，交互文檔可能就是產(chǎn)品需求的終極產(chǎn)物。

由此可見，交互文檔的地位舉足輕重。一份好的交互文檔的輸出，可以幫你解決很多那些你認(rèn)為開發(fā)經(jīng)常來“找茬”的問題。

好的交互文檔標(biāo)準(zhǔn)是什么？

那什么是一份會(huì)說話并且高效協(xié)同的交互文檔呢？

• 好的交互文檔可以讓你捋清自己的設(shè)計(jì)思路，和開發(fā)相關(guān)人員對(duì)接時(shí)可避免無效溝通。
• 好的設(shè)計(jì)文檔可以讓你一冊在手，追根溯源。防止背鍋，有理可依，有據(jù)可查。
• 好的交互文檔，易讀易懂、非常實(shí)用，就像一本使用說明書，直觀明了。我們進(jìn)入正題：如何讓交互文檔開口說話？

交互文檔的內(nèi)容結(jié)構(gòu)

交互文檔內(nèi)容結(jié)構(gòu)

交互文檔框架

我們先來說說除了（四）交互稿（第二部分詳述）以外的，你需要完成的內(nèi)容有如P1和P2所示，那我們就撿幾點(diǎn)比較難理解的結(jié)構(gòu)內(nèi)容進(jìn)行闡釋：

（一）封面：版本號(hào)、參與設(shè)計(jì)人員、時(shí)間。

（二）版本維護(hù)：這個(gè)文檔在整個(gè)設(shè)計(jì)和開發(fā)過程中非常重要，每一次無論是需求的變更還是設(shè)計(jì)稿修改，都要打一次版本號(hào)，并且用盡可能地方式通知到相關(guān)人員（郵件、微信、口頭等）?？梢詫ｉT建立一個(gè)Excel文檔來進(jìn)行維護(hù)和版本追蹤。

內(nèi)容信息：修改時(shí)間、原因、修改人員（需求還是單純的界面）、變更內(nèi)容等。試想，如果修改后，沒有通知到位，開發(fā)人員很有可能會(huì)拿著未迭代過的版本開發(fā)，后果可想而知，這也就是為什么總是存在“PM和開發(fā)干架的”原因之一。

（三）設(shè)計(jì)過程：包括需求記錄、需求分析、用研和競品情況、資料靈感的記錄、產(chǎn)品信息結(jié)構(gòu)（當(dāng)然根據(jù)自己的項(xiàng)目需要，選擇不同的信息）

1）需求記錄：

可以包括最初的需求記錄，評(píng)審后的會(huì)議記錄，需求變更記錄（也可以保留相關(guān)郵件，聊天記錄截圖等）。同樣，時(shí)間、變更內(nèi)容、人員、原因等都要寫清楚。

2）有關(guān)用戶體驗(yàn)分析：

可以用用戶體驗(yàn)地圖（如P3所示）——它展示的是用戶在使用一款產(chǎn)品和服務(wù)的過程中，每個(gè)階段的體驗(yàn)，包括行為、感受（痛點(diǎn)和滿意點(diǎn)）、思考想法。

價(jià)值：

1. 讓產(chǎn)品設(shè)計(jì)者有更全面的視野，從體驗(yàn)地圖中挖掘需求核心和痛點(diǎn)。
2. ?從用戶痛點(diǎn)中，發(fā)掘是否有創(chuàng)新的項(xiàng)目 或者 是否具有產(chǎn)品戰(zhàn)略上的機(jī)會(huì)點(diǎn)。當(dāng)然啦，可以進(jìn)行需求分析的方法還有很多，在這里就不一一贅述了，我也將會(huì)推出關(guān)于需求分析方法的文章。

3）產(chǎn)品功能結(jié)構(gòu)圖

以腦圖形式展示產(chǎn)品信息、功能、以及基本的交互信息。（是我在公司做的某產(chǎn)品功能結(jié)構(gòu)圖，因涉及商業(yè)機(jī)密，部分信息已做像素模糊處理，請(qǐng)見諒?。?/p>

接下來，我們揭開（四）交互稿的神秘面紗……

交互稿的目錄是怎么生成的？

答：交互稿的目錄結(jié)構(gòu)就是產(chǎn)品功能結(jié)構(gòu)圖推導(dǎo)出來（如圖所示），所以你要首先完善自己的產(chǎn)品功能結(jié)構(gòu)圖。

產(chǎn)品功能結(jié)構(gòu)目錄

一篇交互稿需要包含哪些元素呢？

如圖所示：

交互稿內(nèi)容結(jié)構(gòu)

• 頁面標(biāo)題：建議固定瀏覽器頂部。
• 界面標(biāo)題：方便交互稿互相索引。
• 作者信息：方便他人聯(lián)系設(shè)計(jì)師。
• 跳轉(zhuǎn)鏈接：可以通過點(diǎn)擊界面上的某個(gè)功能，實(shí)現(xiàn)跳轉(zhuǎn)。

交互說明的規(guī)范和原則

交互說明規(guī)范和原則

交互稿

交互說明位置：要不統(tǒng)一在下方，要不統(tǒng)一在界面左邊或者右邊。

對(duì)應(yīng)關(guān)系明確：界面中描述的點(diǎn)最好用1、2、3或者a、b、c角標(biāo)來一一對(duì)應(yīng)交互說明的內(nèi)容。

巧用柵格系統(tǒng)：可以讓布局變得井然有序，清晰明了：柵格布局-柵格與輔助線-網(wǎng)格設(shè)計(jì)，同時(shí)設(shè)置間距為40px。

界面說明：頁面邏輯說明，動(dòng)態(tài)動(dòng)效說明，動(dòng)態(tài)數(shù)據(jù)的來源和去向交代清楚、功能操作的說明等。

如果交互說明過長，可利用動(dòng)態(tài)面板：

動(dòng)態(tài)面板承載界面說明

交互文檔是否可以代替PRD文檔呢？

我認(rèn)為不能，交互文檔是用來承載交互說明，并交付給前端、測試以及開發(fā)工程師參考的文檔。

PRD文檔是產(chǎn)品項(xiàng)目由“概念化”階段進(jìn)入到”可視化“階段的最主要的一個(gè)文檔，它的適用對(duì)象包括：開發(fā)、測試、項(xiàng)目經(jīng)理、交互設(shè)計(jì)師、運(yùn)營及其他業(yè)務(wù)人員。

開發(fā)可以根據(jù)PRD獲知整個(gè)產(chǎn)品的邏輯；測試可以根據(jù)PRD建用例；項(xiàng)目經(jīng)理可以根據(jù)PRD拆分工作包，并分配開發(fā)人員；交互設(shè)計(jì)師可以通過PRD來設(shè)計(jì)交互細(xì)節(jié)。

本文由 @Jade 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議