B端UI設(shè)計(jì)師的交互文檔應(yīng)該怎么寫(xiě)？

互文檔該怎么寫(xiě)呢？這個(gè)問(wèn)題不只是新手在問(wèn)，在工作中要負(fù)責(zé)交互問(wèn)題的產(chǎn)品經(jīng)理、設(shè)計(jì)師，都在糾結(jié)這個(gè)問(wèn)題。本篇文章就從基本認(rèn)識(shí)、工具選擇和制作過(guò)程這三部分內(nèi)容來(lái)為大家講解交互文檔要怎么寫(xiě)，快來(lái)看看吧。

今天要分享的，是后臺(tái)和社群里幾乎每天都有人問(wèn)的交互文檔該怎么寫(xiě)的問(wèn)題。不只是想要往交互設(shè)計(jì)師方向發(fā)展的新手，還有工作中要負(fù)責(zé)交互問(wèn)題的產(chǎn)品經(jīng)理、設(shè)計(jì)師，都對(duì)它存在大量的疑問(wèn)。

所以我們?cè)诮裉爝@篇分享里完成一次深入的掃盲。

一、交互文檔的基本認(rèn)識(shí)

1. 交互文檔是什么

交互文檔，是一份用來(lái)解釋項(xiàng)目交互方式、內(nèi)容、規(guī)則的說(shuō)明文檔，也叫 DRD ( Design Requirement Document )。

在過(guò)去的分享中，我們有解釋過(guò)，B端項(xiàng)目會(huì)包含大量的交互內(nèi)容，需要前期繪制交互原型來(lái)展示和確認(rèn)交互方案。

如果是比較簡(jiǎn)單的小型項(xiàng)目，或成熟產(chǎn)品的小迭代，那么這樣的連線圖確實(shí)就足以表達(dá)交互的意圖和方案了，寫(xiě)太多注釋文字反而會(huì)畫(huà)蛇添足提高觀看者的認(rèn)知成本。

但是，如果項(xiàng)目和展示的流程內(nèi)容，邏輯非常復(fù)雜，包含非常多的選項(xiàng)和狀態(tài)，那么單靠原型和連線是絕對(duì)不夠的，添加更多的圖文說(shuō)明就變得非常有必要了。

同時(shí)在團(tuán)隊(duì)協(xié)作場(chǎng)景中，就需要將這些內(nèi)容制作成一份規(guī)范的 “文檔”，用來(lái)進(jìn)行統(tǒng)一的展示、備份、歸檔。

所以做交互光靠畫(huà)交互原型是不夠的，“文檔” 就成為必要的輸出成果。

2. 它和產(chǎn)品文檔的區(qū)別

在產(chǎn)品側(cè)（非開(kāi)發(fā)），文檔就有好幾類：

商業(yè)需求文檔：BRD,Business Requirement Document
市場(chǎng)需求文檔：MRD,Market Requirement Document
產(chǎn)品需求文檔：PRD,Product Requirement Document
交互說(shuō)明文檔：DRD,Design Requirement Document
設(shè)計(jì)規(guī)范文檔：DGD,Design Guidline Document

BRD 和 MRD 是一個(gè)產(chǎn)品經(jīng)理行業(yè)內(nèi)部也在反復(fù)科普討論的東西，和我們沒(méi)多大關(guān)系可以暫時(shí)忽略。設(shè)計(jì)規(guī)范文檔 DGD 大家應(yīng)該也有概念，比較容易辨識(shí)，也不需要在這里強(qiáng)調(diào)。

而產(chǎn)品需求文檔 PRD，是和交互文檔最撞臉的文檔類型。它們的文檔規(guī)格、樣式幾乎一致，還包含大量界限模糊、相互交叉的內(nèi)容范疇，會(huì)對(duì)新手的理解造成很大的不便。

要理解產(chǎn)品文檔和交互文檔的核心差異，就得從他們各自的工作職能說(shuō)起，產(chǎn)品經(jīng)理的主要產(chǎn)出是解釋產(chǎn)品要做的功能和邏輯，所有的原型和連線的目標(biāo)都是為了解釋功能本身。

部分產(chǎn)品經(jīng)理會(huì) “順帶” 在這個(gè)基礎(chǔ)上增加交互的元素，以及相關(guān)的說(shuō)明。這恰恰是問(wèn)題的關(guān)鍵所在，因?yàn)楫a(chǎn)品經(jīng)理制作產(chǎn)品原型的過(guò)程是可以覆蓋一部分交互信息的，所以很多設(shè)計(jì)師也天真的認(rèn)為交互內(nèi)容是應(yīng)該由產(chǎn)品來(lái)出的。

這當(dāng)中一定要關(guān)注里面的 “順帶”，因?yàn)橐环萦行У?PRD 主旨一定不是以交互為核心的，在面對(duì)需要大量圖例、連線、方案、解釋的交互問(wèn)題下面，產(chǎn)品經(jīng)理往往選擇直接跳過(guò)，只把功能描述清楚，剩下的就交給交互設(shè)計(jì)師還是 UI 設(shè)計(jì)師來(lái)完成具體的交互方案。

所以，交互文檔就是在產(chǎn)品文檔的基礎(chǔ)上，進(jìn)行交互內(nèi)容的補(bǔ)充，專注于解釋項(xiàng)目的交互內(nèi)容，讓設(shè)計(jì)師和前端開(kāi)發(fā)可以更直觀得理解后續(xù)的工作內(nèi)容。

來(lái)自 UEDART 的付費(fèi)文檔，案例地址：http://vip.uedart.com/interactive.html

交互文檔和產(chǎn)品文檔是相互獨(dú)立和補(bǔ)充的，當(dāng)產(chǎn)品文檔無(wú)法完成對(duì)產(chǎn)品交互的有效解釋時(shí)，我們就應(yīng)該選擇輸出獨(dú)立的交互文檔，來(lái)提升項(xiàng)目協(xié)作的效率。

二、交互文檔的工具選擇

1. 主流的交互文檔工具說(shuō)明

主流的交互文檔輸出有三種方式：

Axure 和墨刀是用來(lái)制作產(chǎn)品原型的軟件工具，也是目前在產(chǎn)品經(jīng)理、交互設(shè)計(jì)行業(yè)中應(yīng)用最廣泛的原型工具。

它的主要優(yōu)勢(shì)，在于可以比較方便的制作可交互的組件、連線、導(dǎo)出。

當(dāng)然，光制作原型圖并不能叫交互文檔，它們還提供了比較全面的內(nèi)容標(biāo)注、文本記錄、圖形繪制的功能。

這就可以讓我們完成原型繪制以后，結(jié)合頁(yè)面結(jié)構(gòu)的管理，添加交互文檔所需的其它信息，并最終輸出文件。

而在一些比較傳統(tǒng)的行業(yè)或外包領(lǐng)域，使用的記錄文檔往往要使用 Word 或 PPT（方便開(kāi)會(huì)演示或要打印）。這就要在原型完成以后，導(dǎo)出原型圖例，并使用這些文檔軟件進(jìn)行文字的記錄和連線。

受限于 Word、PPT 的布局限制（強(qiáng)行分頁(yè)），使用它們做交互文檔是非常難受的，并且這些文檔需要保存到本地，存在各種文檔版本管理的問(wèn)題。

所以還有另一部分也希望使用普通文檔格式記錄，并滿足云端同步、備份、版本管理的團(tuán)隊(duì)，就會(huì)使用 Wiki 類的工具來(lái)制作交互文檔。如語(yǔ)雀、飛書(shū)、Confluence、Notion 等工具。

如果只是一些比較小的項(xiàng)目迭代、一次性使用的交互文檔，使用前兩種方法都可以勝任。而真正大型、系統(tǒng)性的交互文檔，往往都使用團(tuán)隊(duì)內(nèi)部的 Wiki 進(jìn)行創(chuàng)建和管理。和設(shè)計(jì)稿不同，這些使用了內(nèi)部賬號(hào)或需要內(nèi)網(wǎng)訪問(wèn)的文檔資料，是不會(huì)沒(méi)事發(fā)到網(wǎng)上來(lái)分享的，這也是在網(wǎng)上找不到完整交互文檔的主要原因。

2. B端設(shè)計(jì)師的交互文檔工具建議

和你們網(wǎng)上可以找到的大多數(shù)交互設(shè)計(jì)干貨不同，我即不推薦你們使用 Axure/墨刀來(lái)畫(huà)原型，也不推薦用它們或普通文檔、Wiki 的形式來(lái)輸出交互文檔。因?yàn)椋?/p>

—— 太低效了！

產(chǎn)品經(jīng)理和交互設(shè)計(jì)師的主要產(chǎn)出物就是文檔，自然可以耗費(fèi)比較多的精力和時(shí)間去制作原型和編寫(xiě)內(nèi)容。而 UI 設(shè)計(jì)師的主要工作肯定是最終的視覺(jué)界面和交付，所以用最復(fù)雜的方法去制作交互文檔，顯然是不合理的。

同時(shí)還要提一句，Axure/墨刀等軟件用來(lái)制作一般的線框圖原型，效率實(shí)在是太低了。且絕大多數(shù)情況下的頁(yè)面跳轉(zhuǎn)、交互都是可以忽略不做的。而且隨頁(yè)面增加，它的左側(cè)導(dǎo)航層級(jí)、數(shù)量會(huì)非常龐大，導(dǎo)致查找和瀏覽的效率進(jìn)一步降低。

我始終都建議直接使用你們正在用的云端 UI 設(shè)計(jì)軟件直接繪制產(chǎn)品、交互原型并輸出文檔，如即時(shí)設(shè)計(jì)或 Figma。原因包含：

速度快：能用 Axure 五分之一的時(shí)間完成所有原型繪制
可復(fù)用：做好的原型方便復(fù)用，而且可以直接在原型上完成后續(xù)設(shè)計(jì)
交互性：對(duì)于表達(dá)交互流程所需的基礎(chǔ)跳轉(zhuǎn)和動(dòng)效都能滿足
更自由：一些需要復(fù)雜圖文結(jié)合的說(shuō)明方式不再受到普通文檔布局限制

比如下面這樣的原型案例，就可以通過(guò)一個(gè)簡(jiǎn)單的鏈接快速分享出去，或者添加團(tuán)隊(duì)成員自由查看。

在我過(guò)去長(zhǎng)期的實(shí)踐體會(huì)中，這種方式是優(yōu)勢(shì)最明顯、效率最高、最易懂，也符合 UI 設(shè)計(jì)師工作需要的。如果項(xiàng)目中有其它因素要求，你們也可以選擇前面的方式輸出。

任何文檔的目標(biāo)都是為了書(shū)面記錄和讓看的人更容易理解我們要表達(dá)的信息，不要被固定的方法局限住，要努力去探索適合團(tuán)隊(duì)當(dāng)前場(chǎng)景的方式。

三、交互文檔的制作過(guò)程

1. 文檔框架結(jié)構(gòu)制定

前面把基本的信息聊完了，這里就來(lái)具體講講交互文檔應(yīng)該如何進(jìn)行輸出。

當(dāng)然，輸出交互文檔前需要先理解交互是什么，交互設(shè)計(jì)的具體設(shè)計(jì)內(nèi)容和步驟。交互文檔是對(duì)你已經(jīng)設(shè)計(jì)出來(lái)的方案的書(shū)面記錄，你不能在對(duì)交互一無(wú)所知的情況下強(qiáng)行編寫(xiě)文檔。

交互文檔制作首先要確認(rèn)文檔的記錄內(nèi)容和文檔結(jié)構(gòu)。

記錄內(nèi)容指的是你在該文檔準(zhǔn)備放哪些交互內(nèi)容進(jìn)去，并不是每次項(xiàng)目設(shè)計(jì)都要把項(xiàng)目所有頁(yè)面和流程交互都重做一遍。

比如一次中等規(guī)模的迭代，新增幾個(gè)通用的列表頁(yè)面，調(diào)整了一些細(xì)節(jié)字段，增加了一個(gè)功能流程。那么文檔重點(diǎn)記錄內(nèi)容肯定就是流程而不是所有頁(yè)面。畢竟通用的列表頁(yè)和細(xì)節(jié)更改，在產(chǎn)品需求評(píng)審階段就可以完整的解釋，而功能流程則不行。

如果是全新的項(xiàng)目，包含數(shù)十上百個(gè)頁(yè)面。把所有流程、頁(yè)面的交互內(nèi)容全部表現(xiàn)出來(lái)的工作量是頂不住的，在繪制原型的過(guò)程中，你就會(huì)發(fā)現(xiàn)有大量的重復(fù)頁(yè)面、流程和交互。所以制作文檔就要有目的性的對(duì)重復(fù)的內(nèi)容進(jìn)行合并，以及只保留重要的頁(yè)面和流程。

具體該放什么要考慮項(xiàng)目的實(shí)際情況，需要設(shè)計(jì)師自己評(píng)估。除此以外，標(biāo)準(zhǔn)的交互文檔里面會(huì)包含背景介紹、編輯日志、文字圖例、業(yè)務(wù)流程、名詞解釋、頁(yè)面結(jié)構(gòu)等等。

這些 “文縐縐” 的細(xì)節(jié)，并不是必備的，你可以根據(jù)當(dāng)前場(chǎng)景自己決定需要加哪些。比如項(xiàng)目、業(yè)務(wù)背景前面的產(chǎn)品需求已經(jīng)講清楚了，業(yè)務(wù)流程、名詞解釋團(tuán)隊(duì)成員也都了如指掌的時(shí)候，那么這些頁(yè)面模塊就完全沒(méi)有放的必要。

并且，基于前面對(duì)放置內(nèi)容的考慮，結(jié)構(gòu)的順序并不一定要類似下方案例，完全按照產(chǎn)品的導(dǎo)航目錄來(lái)走。

所以，根據(jù)一個(gè)中等規(guī)模的迭代項(xiàng)目，我會(huì)制定一個(gè)這樣的一級(jí)文檔結(jié)構(gòu)：

基本信息：項(xiàng)目的簡(jiǎn)單信息，快速目錄，參與人信息等
基本組件：涉及的相關(guān)組件展示和交互規(guī)則說(shuō)明
原型一覽：本次迭代涉及的所有頁(yè)面原型和連線一覽
流程介紹1：流程1的所有頁(yè)面、狀態(tài)、說(shuō)明展示
流程介紹2：流程2的所有頁(yè)面、狀態(tài)、說(shuō)明展示
流程介紹3：流程3的所有頁(yè)面、狀態(tài)、說(shuō)明展示

每個(gè)1級(jí)文檔結(jié)構(gòu)對(duì)應(yīng) UI 軟件中的 Page 目錄，力求所需的 Page 數(shù)量越少越好，而不是像 Axure 的做法一樣密密麻麻的。

結(jié)構(gòu)可以根據(jù)復(fù)雜程度做進(jìn)一步的細(xì)分，它像寫(xiě)文章的大綱一樣，幫助我們提前規(guī)劃好后續(xù)完成文檔所需的內(nèi)容和工作量。

2. 關(guān)于連線和標(biāo)注信息

有了結(jié)構(gòu)，就要在對(duì)應(yīng)的 Page 中填充內(nèi)容了。其中一般的文字介紹、流程圖、思維導(dǎo)圖，只要正常輸入或?qū)?dǎo)出的圖例黏貼進(jìn)來(lái)就可以。

而針對(duì)具體的交互內(nèi)容，流程解釋上，則重點(diǎn)處理連線和標(biāo)注說(shuō)明。比如下面是我自己在課程演示中的一個(gè)簡(jiǎn)單的交互流程演示案例。

在 UI 軟件中，制作連線其實(shí)是很簡(jiǎn)單的事情，只要畫(huà)出一個(gè)直線，再設(shè)置箭頭和尾部圖形、描邊色彩和粗細(xì)即可。

然后，將該線段的圖層放置在畫(huà)布之外，起點(diǎn)放置在觸發(fā)交互的區(qū)域之中，終點(diǎn)尖頭則緊貼目標(biāo)畫(huà)布的邊緣（不用特意延伸進(jìn)畫(huà)布內(nèi)）。如果使用水平、垂直的方式連接兩個(gè)畫(huà)布，那就可以雙擊進(jìn)去添加錨點(diǎn)制作 90 度的折角。

連線的應(yīng)用是非常簡(jiǎn)單的操作，不要舍近求遠(yuǎn)通過(guò)插件或是其它的一些功能來(lái)實(shí)現(xiàn)。而除此之外，我在文檔中添加的解釋性文本主要有兩種，交互事件和交互規(guī)則。

交互事件代表了連線的兩個(gè)頁(yè)面是如何被觸發(fā)跳轉(zhuǎn)的，所以我會(huì)在線段中帖一個(gè)文字卡片，解釋觸發(fā)的條件和交互操作是什么。

然后，就是頁(yè)面或流程中的交互細(xì)則，包含兩個(gè)部分，數(shù)字標(biāo)簽和對(duì)應(yīng)文字注釋。它們都是用 Auto layout 可以快速制作出來(lái)的組件，每次要做備注的時(shí)候，只要復(fù)制標(biāo)簽到頁(yè)面上，設(shè)置對(duì)應(yīng)的數(shù)值，再將右側(cè)的文字卡片復(fù)制到頁(yè)面旁邊，再加上對(duì)應(yīng)的數(shù)字、內(nèi)容信息即可。

在設(shè)計(jì)軟件中，畫(huà)布的自由度極高，你想要怎么備注和添加內(nèi)容都沒(méi)關(guān)系，只要在內(nèi)容翔實(shí)的基礎(chǔ)上保證 —— 團(tuán)隊(duì)成員能看懂，就是一份優(yōu)秀的交互文檔。多在繪制過(guò)程中和同事溝通，優(yōu)化展示的做法，可以避免很多會(huì)出現(xiàn)的問(wèn)題，進(jìn)一步加速我們的制作效率。

3. 文檔的團(tuán)隊(duì)協(xié)作應(yīng)用

將文檔全部做完以后，最終就是關(guān)于交付和協(xié)作的問(wèn)題了。

既然我們使用線上的 UI 軟件來(lái)完成交互文檔的制作，那么文件設(shè)置公開(kāi)訪問(wèn)權(quán)限，再分享鏈接自然是最簡(jiǎn)單的辦法。

但每次項(xiàng)目分享個(gè)網(wǎng)頁(yè)鏈接，或者并行有好幾個(gè)項(xiàng)目，需要其它成員自己去收藏網(wǎng)址，也是挺麻煩的。所以盡量充分應(yīng)用軟件中的團(tuán)隊(duì)協(xié)作功能，通過(guò)創(chuàng)建一個(gè)團(tuán)隊(duì)，添加成員，讓他們自行查看當(dāng)前文件目錄中的交互文檔。

查看過(guò)程中，團(tuán)隊(duì)其它成員可以通過(guò)評(píng)論的功能對(duì)交互內(nèi)容進(jìn)行糾錯(cuò)、提問(wèn)、建議，方便我們進(jìn)行優(yōu)化改進(jìn)。

通過(guò)這種簡(jiǎn)單高效的文檔協(xié)作模式，我們可以非常快得完成整體交互內(nèi)容的定稿，并開(kāi)始后續(xù)的工作。

再回到前面的話題，我們是 UI 設(shè)計(jì)師，不是全職交互設(shè)計(jì)。原型文檔輸出完了，下一步可是要做視覺(jué)界面的，所以交互文檔就可以不用管了嘛？

交互文檔的最佳狀態(tài)是 —— 應(yīng)用最終界面圖例解釋交互內(nèi)容。

也就是當(dāng)我們把所有頁(yè)面內(nèi)容設(shè)計(jì)完成后，強(qiáng)烈建議將界面的展示和交互文檔進(jìn)行整合。除了前端和產(chǎn)品可以看到最終的交互落地效果外（有時(shí)候最終設(shè)計(jì)和前面的交互不一致），還可以直接通過(guò)這個(gè)文檔查看界面數(shù)值標(biāo)注，而不用往返于交互和設(shè)計(jì)文檔來(lái)回切換，這才能讓文檔作用最大化。

四、結(jié)尾

以上就是關(guān)于交互文檔的相關(guān)解釋，下一篇，我們會(huì)聚焦在和表單有關(guān)的交互干貨分享。

我們下篇再見(jiàn)。

作者：酸梅干超人；公眾號(hào)：超人的電話亭（ID：Superman_Call）

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

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

該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

輯導(dǎo)語(yǔ)：作為交互設(shè)計(jì)師，離不開(kāi)交互設(shè)計(jì)文檔，剛?cè)胄械男』锇榭赡軙?huì)在網(wǎng)上找模板套用或者是自己摸索，這樣效率低下且容易走彎路。那么，如何完成一份完整的交互設(shè)計(jì)文檔呢？作者總結(jié)了以下幾點(diǎn)，教你手把手撰寫(xiě)交互設(shè)計(jì)文檔。

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

為什么要寫(xiě)交互設(shè)計(jì)文檔？交互設(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ù)是啥，你就馬上把分析擺他臉上，避免尷尬）。

第二點(diǎn)是交互設(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)題。

第三點(diǎn)也是最重要的一點(diǎn)就是未來(lái)我們用于跳槽加薪面試作品。

內(nèi)行看門道，外行看熱鬧，如果你面試交互設(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ě)交互文檔？

一、交互設(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)品初期階段我們。

如果認(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è)反例大家就懂了。

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

產(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ù)流程圖（可選）

繪制業(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ì)特別麻煩。

那么如何去繪制完整的業(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)系上。看看是否存在分支的情況，各協(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í)間。

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)步，共勉~~

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

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

大多數(shù)優(yōu)秀的企業(yè)網(wǎng)站建設(shè)中，他們的設(shè)計(jì)方案通常會(huì)包含了視覺(jué)部分、交互部分以及管理員使用部分這三大板塊的精雕細(xì)琢工作。而很多深圳很多企業(yè)負(fù)責(zé)人往往會(huì)只注重視覺(jué)設(shè)計(jì)部分，忽略了交互部分的定制。今天跟大家分享的這個(gè)陰陽(yáng)臉交互設(shè)計(jì)，是在不少領(lǐng)域、不少高級(jí)品牌網(wǎng)站中能看到的。所謂陰陽(yáng)臉交互，即用戶在一個(gè)屏幕內(nèi)會(huì)看到左右平均分布的兩塊內(nèi)容，隨著用戶自動(dòng)拖拽內(nèi)容后，從左往右展開(kāi)或從右往左展開(kāi)視窗的寬度，從而讓一半顯示更全的交互邏輯設(shè)計(jì)。

陰陽(yáng)臉網(wǎng)頁(yè)交互設(shè)計(jì)通常會(huì)用在藝術(shù)行業(yè)、科技行業(yè)、醫(yī)療行業(yè)等領(lǐng)域，它的特色就是神秘感、互動(dòng)感，在某些不適合渲染這種氛圍的行業(yè)，就不能隨意使用這種交互，效果會(huì)適得其反。

為了更好地展示這個(gè)交互效果，我們找來(lái)了一個(gè)在線的深圳公司網(wǎng)站案例

訪問(wèn)深圳網(wǎng)站建設(shè)官網(wǎng)，查看動(dòng)態(tài)的交互效果

https://www.gloshine.com/

值得設(shè)計(jì)師們注意的是，陰陽(yáng)臉網(wǎng)頁(yè)交互設(shè)計(jì)，需要注意它的承上啟下作用，要么作為官網(wǎng)Banner區(qū)域的全屏模塊內(nèi)容，要么作為下面兩個(gè)板塊之間的銜接模塊，這時(shí)需要注意虛實(shí)結(jié)合的節(jié)奏。而陰陽(yáng)臉通常都是深色為主的，所以它的上面和下面，盡量不要都是深色區(qū)域，至少有一個(gè)是淺色的（或顏色對(duì)比度稍微大一些的），避免連續(xù)三個(gè)重色模塊，導(dǎo)致視覺(jué)無(wú)法呼吸。

在看另一個(gè)深圳網(wǎng)站建設(shè)案例，這是一個(gè)產(chǎn)品H5專題頁(yè)的形式