如何輸出一份專業(yè)優(yōu)秀的交互文檔？

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

一、交互文檔的輸出原則

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

1. 邏輯嚴謹，文本簡明

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

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

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

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

3. 美即適用

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

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

二、交互文檔的結構與內容

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

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

1. 文檔封面

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

2. 更新日志

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

3. 設計思路

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

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

4. 需求表

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

5. 交互稿

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

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

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

6. 廢紙簍

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

三、后記

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

「交互文檔到底怎么寫？」

• 《做好這個交互文檔細節(jié)，讓你和工程師的合作效率提高50%》
• 《超全面！教你打造美觀清晰易使用的交互文檔》
• 《專業(yè)的交互輸出文檔應該怎么寫？高級設計師來教你！》
• 《專業(yè)干貨！如何寫一份全面易讀的交互說明文檔？》

================明星欄目推薦================

優(yōu)優(yōu)教程網： UiiiUiii.com 是優(yōu)設旗下優(yōu)質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com