不同的公司會有不同的工作流程，根據(jù)項目、流程等實際情況來設(shè)計適合自己的交互設(shè)計文檔。

在項目設(shè)計中，交互設(shè)計師與上游的產(chǎn)品經(jīng)理，下游的視覺設(shè)計師，開發(fā)工程師和測試等崗位的工作密不可分。不論是承上啟下的工作溝通， 還是方案評審的設(shè)計講解，專業(yè)的交互設(shè)計師應該具備優(yōu)秀的表達能力，不僅是語言方面的表達，交互文檔的表達也尤其重要。交互文檔是對接上下游崗位，利于協(xié)同團隊工作的重要輸出件。（本文會以Axure軟件輸出形式舉例說明）

一、交互文檔的輸出原則

交互文檔本身就相當于一個產(chǎn)品，我們要考慮到上下游不同崗位（目標用戶）對交互文檔的不同需求（用戶目標），交互文檔輸出原則（設(shè)計目標），在文檔的結(jié)構(gòu)，內(nèi)容和形式上可總結(jié)為三大原則：

1. 邏輯嚴謹，文本簡明

邏輯混亂的文字表達通常會顯得比較啰嗦，甚至會讓人不知道你要表達的是什么，降低了閱讀效率，也增大了溝通成本。交互文檔的整體內(nèi)容結(jié)構(gòu)與頁面內(nèi)容結(jié)構(gòu)（文字關(guān)系）的書寫要思路清晰，邏輯嚴謹，簡明扼要，并盡可能的做到“不重復，不遺漏”將交互設(shè)計的思路和方案更好的可視化。當然，邏輯和文本的表達都是可以訓練的，日常生活中我們也應該注意這方面的培養(yǎng)與提升。

2. 便于迭代，利于協(xié)同

剛?cè)胄械臅r候我是一名UI設(shè)計師，我的第一份交互文檔是用PS做的，在PS里輸出圖片再粘貼到Axure上，首先是文檔管理起來很麻煩，其次是編輯起來不方便，迭代修改都要找到對應頁面的PS源文件修改后再轉(zhuǎn)移到Axure，工作效率大大降低。交互稿在方便別人的同時，也應該方便自己，而我卻忘記了自己也是這個產(chǎn)品的用戶。

文章開始說到交互文檔是對接上下游利于協(xié)同團隊工作的重要輸出件，所以文檔應該保證利于其他崗位人員的查看或編輯的。如在文檔格式方面，如果你是用Axure做設(shè)計，發(fā)給對方源文件外也要生成一份HTML文件，這樣就算對方?jīng)]有Axure軟件，也可以順利打開。

3. 美即適用?

美國心理學家丹尼爾·麥克尼爾提出美即好效應：“對一個外表英俊漂亮的人，人們很容易誤認為他或她的其他方面也很不錯。”

交互文檔不僅要邏輯“美”，表現(xiàn)層面也要考慮視覺上的美，可以從圖文排版、字體大小、明暗層次等方面去考慮。輸出一份美的交互文檔從視覺上來說還能潛移默化的促進人們形成正面積極的態(tài)度，積極的態(tài)度會使你的交互評審更高效，也會提升程序大哥們寫代碼過程中的愉悅感。當然，追求美的產(chǎn)出也應該是設(shè)計師的職業(yè)素養(yǎng)。

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

下面我簡單介紹下交互文檔的輸出思路，供大家學習參考。這里要注意的是，每位設(shè)計師要根據(jù)公司實際工作情況來定文檔的樣式，有針對性地進行設(shè)計輸出。

文檔的整體結(jié)構(gòu)可以理解為圖書中的目錄部分，下圖是我整理的一份文檔結(jié)構(gòu)模板，分為文檔封面、更新日志、設(shè)計思路、需求表、交互稿、廢紙簍六個部分。必要時，還可包含信息架構(gòu)、交互規(guī)范說明、頁面流程圖等部分。

1. 文檔封面

這個部分呈現(xiàn)產(chǎn)品簡介，包含版本信息、參與人員等基本信息。

2. 更新日志

在項目中設(shè)計方案的修改和優(yōu)化是不可避免的，方案有調(diào)整時更新日志就比較重要了。更新日志可以清晰記錄新增或修改了哪個具體頁面，新增或修改的內(nèi)容是什么，日期、版本……這樣項目成員就可以一目了然關(guān)注到重點修改更新信息，提升了工作效率。

3. 設(shè)計思路

這一部分在交互評審會中尤為重要，因為參加評審的人很可能還不了解這個項目，如果我們會上直接講方案，忽略設(shè)計思路的講解，評審的過程就很可能局限在了布局排版上，評審也就沒有了意義。將設(shè)計過程更加結(jié)構(gòu)化呈現(xiàn)出來，如概述項目背景、目標用戶、產(chǎn)品目標、場景分析、用戶目標 、設(shè)計目標與設(shè)計思路（如圖），方便他人理解整個項目背景下的設(shè)計思路，也方便以后回溯總結(jié)項目設(shè)計。但沒必要將全部的分析內(nèi)容都放進來，畢竟這份文檔不是需求分析文檔，篩選放入重要且適當?shù)膬?nèi)容展現(xiàn)即可。

任務流程是用圖形化的形式來表達產(chǎn)品邏輯關(guān)系的步驟和過程，指用戶使用產(chǎn)品中操作后的各種結(jié)果反饋等。進行流程設(shè)計前提是完全了解需求，站在用戶的角度去考慮引導用戶完成用戶目標，關(guān)注用戶的操作不僅可以讓你的思維更清晰，還可以避免有操作邏輯的遺漏。還能讓其他人能快速理解。

4. 需求表

當交互設(shè)計中涉及到其他崗位的需求時（如動畫、語音、音效等），可選擇表格呈現(xiàn)，或是提供共享盤路徑方便他人查看，但要記的在需求更改或更換路徑要及時更新，這個部分可根據(jù)實際情況選擇呈現(xiàn)。

5. 交互稿

交互稿主體結(jié)構(gòu)的功能層級要清晰，合理的命名，格式統(tǒng)一，新增/修改的內(nèi)容以及日期要統(tǒng)一標識清晰，方便他人瀏覽查找。

交互稿單頁面包含界面圖、設(shè)計說明。不要包含太多功能交叉，方便他人理解。交互說明可以通過文字，流程圖配合方式呈現(xiàn)，比純文字的說明更直觀。還要注意不要遺漏異常、特殊情況說明，保證交互說明思路清晰而內(nèi)容詳盡，交互說明類型有以下幾種：

1. 限制：包含極限值、范圍值等，如：數(shù)值是否存在極值，最多顯示多少字符，多出是否折行，如99+等；
2. 狀態(tài)：包含默認狀態(tài)、常見狀態(tài)、特殊狀態(tài)；
3. 操作：包含常見操作（正常操作得到的反饋）、特殊操作（極端情況操作）、誤操作、手勢操作（雙擊、長按、捏、伸、滑動）等；
4. 反饋：操作后得到的反饋動作（提示、跳轉(zhuǎn)，動畫語音等）。

6. 廢紙簍

交互文檔中的回收站（后悔藥），廢棄的頁面或過程方案稿別急著刪除，方案在不斷調(diào)整優(yōu)化的過程，本以為沒有用的頁面，統(tǒng)統(tǒng)放這里，后期很可能用的到哦！

三、后記

不同的公司會有不同的工作流程，根據(jù)項目、流程等實際情況來設(shè)計適合自己的交互設(shè)計文檔。當然，最重要的還是對設(shè)計本身的多方面思考。在什么樣的場景下，你通過什么方式解決了什么問題，還有沒有更好的方式…… 細致去分析并權(quán)衡取舍，就可以做出一份邏輯清晰會表達的交互設(shè)計文檔了。

以上分享希望對大家會有所幫助。同時歡迎各位同行指正交流~

…… 遇見你真好，謝謝你的閱讀……

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

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