2022-10-13 資深UI設(shè)計者
交互文檔，是一份用來解釋項目交互方式、內(nèi)容、規(guī)則的說明文檔，也叫 DRD ( Design Requirement Document )。
在過去的分享中，我們有解釋過，B 端項目會包含大量的交互內(nèi)容，需要前期繪制交互原型來展示和確認(rèn)交互方案。
如果是比較簡單的小型項目，或成熟產(chǎn)品的小迭代，那么這樣的連線圖確實就足以表達(dá)交互的意圖和方案了，寫太多注釋文字反而會畫蛇添足提高觀看者的認(rèn)知成本。
但是，如果項目和展示的流程內(nèi)容，邏輯非常復(fù)雜，包含非常多的選項和狀態(tài)，那么單靠原型和連線是絕對不夠的，添加更多的圖文說明就變得非常有必要了。
同時在團(tuán)隊協(xié)作場景中，就需要將這些內(nèi)容制作成一份規(guī)范的 “文檔”，用來進(jìn)行統(tǒng)一的展示、備份、歸檔。
所以做交互光靠畫交互原型是不夠的，“文檔” 就成為必要的輸出成果。
在產(chǎn)品側(cè)（非開發(fā)），文檔就有好幾類：
- 商業(yè)需求文檔:BRD,Business Requirement Document
- 市場需求文檔:MRD,Market Requirement Document
- 產(chǎn)品需求文檔:PRD,Product Requirement Document
- 交互說明文檔:DRD,Design Requirement Document
- 設(shè)計規(guī)范文檔:DGD,Design Guidline Document
BRD 和 MRD 是一個產(chǎn)品經(jīng)理行業(yè)內(nèi)部也在反復(fù)科普討論的東西，和我們沒多大關(guān)系可以暫時忽略。設(shè)計規(guī)范文檔 DGD 大家應(yīng)該也有概念，比較容易辨識，也不需要在這里強(qiáng)調(diào)。
而產(chǎn)品需求文檔 PRD，是和交互文檔最撞臉的文檔類型。它們的文檔規(guī)格、樣式幾乎一致，還包含大量界限模糊、相互交叉的內(nèi)容范疇，會對新手的理解造成很大的不便。
要理解產(chǎn)品文檔和交互文檔的核心差異，就得從他們各自的工作職能說起，產(chǎn)品經(jīng)理的主要產(chǎn)出是解釋產(chǎn)品要做的功能和邏輯，所有的原型和連線的目標(biāo)都是為了解釋功能本身。
部分產(chǎn)品經(jīng)理會 “順帶” 在這個基礎(chǔ)上增加交互的元素，以及相關(guān)的說明。這恰恰是問題的關(guān)鍵所在，因為產(chǎn)品經(jīng)理制作產(chǎn)品原型的過程是可以覆蓋一部分交互信息的，所以很多設(shè)計師也天真的認(rèn)為交互內(nèi)容是應(yīng)該由產(chǎn)品來出的。
這當(dāng)中一定要關(guān)注里面的 “順帶”，因為一份有效的 PRD 主旨一定不是以交互為核心的，在面對需要大量圖例、連線、方案、解釋的交互問題下面，產(chǎn)品經(jīng)理往往選擇直接跳過，只把功能描述清楚，剩下的就交給交互設(shè)計師還是 UI 設(shè)計師來完成具體的交互方案。
所以，交互文檔就是在產(chǎn)品文檔的基礎(chǔ)上，進(jìn)行交互內(nèi)容的補(bǔ)充，專注于解釋項目的交互內(nèi)容，讓設(shè)計師和前端開發(fā)可以更直觀得理解后續(xù)的工作內(nèi)容。
來自 UEDART 的付費文檔，案例地址：http://vip.uedart.com/interactive.html
交互文檔和產(chǎn)品文檔是相互獨立和補(bǔ)充的，當(dāng)產(chǎn)品文檔無法完成對產(chǎn)品交互的有效解釋時，我們就應(yīng)該選擇輸出獨立的交互文檔，來提升項目協(xié)作的效率。
主流的交互文檔輸出有三種方式：
1. Axure/墨刀 導(dǎo)出
2. 一般文檔制作
3. 線上 Wiki 記錄
Axure 和墨刀是用來制作產(chǎn)品原型的軟件工具，也是目前在產(chǎn)品經(jīng)理、交互設(shè)計行業(yè)中應(yīng)用最廣泛的原型工具。
它的主要優(yōu)勢，在于可以比較方便的制作可交互的組件、連線、導(dǎo)出。
當(dāng)然，光制作原型圖并不能叫交互文檔，它們還提供了比較全面的內(nèi)容標(biāo)注、文本記錄、圖形繪制的功能。
這就可以讓我們完成原型繪制以后，結(jié)合頁面結(jié)構(gòu)的管理，添加交互文檔所需的其它信息，并最終輸出文件。
而在一些比較傳統(tǒng)的行業(yè)或外包領(lǐng)域，使用的記錄文檔往往要使用 Word 或 PPT（方便開會演示或要打?。?。這就要在原型完成以后，導(dǎo)出原型圖例，并使用這些文檔軟件進(jìn)行文字的記錄和連線。
受限于 Word、PPT 的布局限制（強(qiáng)行分頁），使用它們做交互文檔是非常難受的，并且這些文檔需要保存到本地，存在各種文檔版本管理的問題。
所以還有另一部分也希望使用普通文檔格式記錄，并滿足云端同步、備份、版本管理的團(tuán)隊，就會使用 Wiki 類的工具來制作交互文檔。如語雀、飛書、Confluence、Notion 等工具。
如果只是一些比較小的項目迭代、一次性使用的交互文檔，使用前兩種方法都可以勝任。而真正大型、系統(tǒng)性的交互文檔，往往都使用團(tuán)隊內(nèi)部的 Wiki 進(jìn)行創(chuàng)建和管理。和設(shè)計稿不同，這些使用了內(nèi)部賬號或需要內(nèi)網(wǎng)訪問的文檔資料，是不會沒事發(fā)到網(wǎng)上來分享的，這也是在網(wǎng)上找不到完整交互文檔的主要原因。
和你們網(wǎng)上可以找到的大多數(shù)交互設(shè)計干貨不同，我即不推薦你們使用 Axure/墨刀 來畫原型，也不推薦用它們或普通文檔、Wiki 的形式來輸出交互文檔。因為：
—— 太低效了！
產(chǎn)品經(jīng)理和交互設(shè)計師的主要產(chǎn)出物就是文檔，自然可以耗費比較多的精力和時間去制作原型和編寫內(nèi)容。而 UI 設(shè)計師的主要工作肯定是最終的視覺界面和交付，所以用最復(fù)雜的方法去制作交互文檔，顯然是不合理的。
同時還要提一句，Axure/墨刀 等軟件用來制作一般的線框圖原型，效率實在是太低了。且絕大多數(shù)情況下的頁面跳轉(zhuǎn)、交互都是可以忽略不做的。而且隨頁面增加，它的左側(cè)導(dǎo)航層級、數(shù)量會非常龐大，導(dǎo)致查找和瀏覽的效率進(jìn)一步降低。
在我自己的所有課程和分享中，我始終都建議直接使用你們正在用的云端 UI 設(shè)計軟件直接繪制產(chǎn)品、交互原型并輸出文檔，如即時設(shè)計或 Figma。
原因包含：
- 速度快：能用 Axure 五分之一的時間完成所有原型繪制
- 可復(fù)用：做好的原型方便復(fù)用，而且可以直接在原型上完成后續(xù)設(shè)計
- 交互性：對于表達(dá)交互流程所需的基礎(chǔ)跳轉(zhuǎn)和動效都能滿足
- 更自由：一些需要復(fù)雜圖文結(jié)合的說明方式不再受到普通文檔布局限制
比如下面這樣的原型案例，就可以通過一個簡單的鏈接快速分享出去，或者添加團(tuán)隊成員自由查看。
在我過去長期的實踐體會中，這種方式是優(yōu)勢最明顯，效率最高，最易懂，也符合 UI 設(shè)計師工作需要的。如果項目中有其它因素要求，你們也可以選擇前面的方式輸出。
任何文檔的目標(biāo)都是為了書面記錄和讓看的人更容易理解我們要表達(dá)的信息，不要被固定的方法局限住，要努力去探索適合團(tuán)隊當(dāng)前場景的方式。
前面把基本的信息聊完了，這里就來具體講講交互文檔應(yīng)該如何進(jìn)行輸出。
當(dāng)然，輸出交互文檔前需要先理解交互是什么，交互設(shè)計的具體設(shè)計內(nèi)容和步驟。交互文檔是對你已經(jīng)設(shè)計出來的方案的書面記錄，你不能在對交互一無所知的情況下強(qiáng)行編寫文檔。
交互文檔制作首先要確認(rèn)文檔的記錄內(nèi)容和文檔結(jié)構(gòu)。
記錄內(nèi)容指的是你在該文檔準(zhǔn)備放哪些交互內(nèi)容進(jìn)去，并不是每次項目設(shè)計都要把項目所有頁面和流程交互都重做一遍。
比如一次中等規(guī)模的迭代，新增幾個通用的列表頁面，調(diào)整了一些細(xì)節(jié)字段，增加了一個功能流程。那么文檔重點記錄內(nèi)容肯定就是流程而不是所有頁面。畢竟通用的列表頁和細(xì)節(jié)更改，在產(chǎn)品需求評審階段就可以完整的解釋，而功能流程則不行。
如果是全新的項目，包含數(shù)十上百個頁面。把所有流程、頁面的交互內(nèi)容全部表現(xiàn)出來的工作量是頂不住的，在繪制原型的過程中，你就會發(fā)現(xiàn)有大量的重復(fù)頁面、流程和交互。所以制作文檔就要有目的性的對重復(fù)的內(nèi)容進(jìn)行合并，以及只保留重要的頁面和流程。
具體該放什么要考慮項目的實際情況，需要設(shè)計師自己評估。除此以外，標(biāo)準(zhǔn)的交互文檔里面會包含背景介紹、編輯日志、文字圖例、業(yè)務(wù)流程、名詞解釋、頁面結(jié)構(gòu)等等。
這些 “文縐縐” 的細(xì)節(jié)，并不是必備的，你可以根據(jù)當(dāng)前場景自己決定需要加哪些。比如項目、業(yè)務(wù)背景前面的產(chǎn)品需求已經(jīng)講清楚了，業(yè)務(wù)流程、名詞解釋團(tuán)隊成員也都了如指掌的時候，那么這些頁面模塊就完全沒有放的必要。
并且，基于前面對放置內(nèi)容的考慮，結(jié)構(gòu)的順序并不一定要類似下方案例，完全按照產(chǎn)品的導(dǎo)航目錄來走。
所以，根據(jù)一個中等規(guī)模的迭代項目，我會制定一個這樣的一級文檔結(jié)構(gòu)。
- 基本信息：項目的簡單信息，快速目錄，參與人信息等
- 基本組件：涉及的相關(guān)組件展示和交互規(guī)則說明
- 原型一覽：本次迭代涉及的所有頁面原型和連線一覽
- 流程介紹1：流程1的所有頁面、狀態(tài)、說明展示
- 流程介紹2：流程2的所有頁面、狀態(tài)、說明展示
- 流程介紹3：流程3的所有頁面、狀態(tài)、說明展示
每個1級文檔結(jié)構(gòu)對應(yīng) UI 軟件中的 Page 目錄，力求所需的 Page 數(shù)量越少越好，而不是像 Axure 的做法一樣密密麻麻的。
結(jié)構(gòu)可以根據(jù)復(fù)雜程度做進(jìn)一步的細(xì)分，它像寫文章的大綱一樣，幫助我們提前規(guī)劃好后續(xù)完成文檔所需的內(nèi)容和工作量。
有了結(jié)構(gòu)，就要在對應(yīng)的 Page 中填充內(nèi)容了。其中一般的文字介紹、流程圖、思維導(dǎo)圖，只要正常輸入或?qū)?dǎo)出的圖例黏貼進(jìn)來就可以。
而針對具體的交互內(nèi)容，流程解釋上，則重點處理連線和標(biāo)注說明。比如下面是我自己在課程演示中的一個簡單的交互流程演示案例。
在 UI 軟件中，制作連線其實是很簡單的事情，只要畫出一個直線，再設(shè)置箭頭和尾部圖形、描邊色彩和粗細(xì)即可。
然后，將該線段的圖層放置在畫布之外，起點放置在觸發(fā)交互的區(qū)域之中，終點尖頭則緊貼目標(biāo)畫布的邊緣（不用特意延伸進(jìn)畫布內(nèi)）。如果使用水平、垂直的方式連接兩個畫布，那就可以雙擊進(jìn)去添加錨點制作 90 度的折角。
連線的應(yīng)用是非常簡單的操作，不要舍近求遠(yuǎn)通過插件或是其它的一些功能來實現(xiàn)。而除此之外，我在文檔中添加的解釋性文本主要有兩種，交互事件和交互規(guī)則。
交互事件代表了連線的兩個頁面是如何被觸發(fā)跳轉(zhuǎn)的，所以我會在線段中帖一個文字卡片，解釋觸發(fā)的條件和交互操作是什么。
然后，就是頁面或流程中的交互細(xì)則，包含兩個部分，數(shù)字標(biāo)簽和對應(yīng)文字注釋。它們都是用 Auto layout 可以快速制作出來的組件，每次要做備注的時候，只要復(fù)制標(biāo)簽到頁面上，設(shè)置對應(yīng)的數(shù)值，再將右側(cè)的文字卡片復(fù)制到頁面旁邊，再加上對應(yīng)的數(shù)字、內(nèi)容信息即可。
在設(shè)計軟件中，畫布的自由度極高，你想要怎么備注和添加內(nèi)容都沒關(guān)系，只要在內(nèi)容翔實的基礎(chǔ)上保證 —— 團(tuán)隊成員能看懂，就是一份優(yōu)秀的交互文檔。多在繪制過程中和同事溝通，優(yōu)化展示的做法，可以避免很多會出現(xiàn)的問題，進(jìn)一步加速我們的制作效率。
將文檔全部做完以后，最終就是關(guān)于交付和協(xié)作的問題了。
既然我們使用線上的 UI 軟件來完成交互文檔的制作，那么文件設(shè)置公開訪問權(quán)限，再分享鏈接自然是最簡單的辦法。
但每次項目分享個網(wǎng)頁鏈接，或者并行有好幾個項目，需要其它成員自己去收藏網(wǎng)址，也是挺麻煩的。所以盡量充分應(yīng)用軟件中的團(tuán)隊協(xié)作功能，通過創(chuàng)建一個團(tuán)隊，添加成員，讓他們自行查看當(dāng)前文件目錄中的交互文檔。
查看過程中，團(tuán)隊其它成員可以通過評論的功能對交互內(nèi)容進(jìn)行糾錯、提問、建議，方便我們進(jìn)行優(yōu)化改進(jìn)。
通過這種簡單高效的文檔協(xié)作模式，我們可以非?？斓猛瓿烧w交互內(nèi)容的定稿，并開始后續(xù)的工作。
再回到前面的話題，我們是 UI 設(shè)計師，不是全職交互設(shè)計。原型文檔輸出完了，下一步可是要做視覺界面的，所以交互文檔就可以不用管了嘛？
交互文檔的最佳狀態(tài)是 —— 應(yīng)用最終界面圖例解釋交互內(nèi)容。
也就是當(dāng)我們把所有頁面內(nèi)容設(shè)計完成后，強(qiáng)烈建議將界面的展示和交互文檔進(jìn)行整合。除了前端和產(chǎn)品可以看到最終的交互落地效果外（有時候最終設(shè)計和前面的交互不一致），還可以直接通過這個文檔查看界面數(shù)值標(biāo)注，而不用往返于交互和設(shè)計文檔來回切換，這才能讓文檔作用最大化。
以上就是關(guān)于交互文檔的相關(guān)解釋。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍(lán)藍(lán)設(shè)計的小編 http://www.miumiuwan.com