如何輸出一份會表達(dá)的交互文檔

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

一、交互文檔的輸出原則

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

1. 邏輯嚴(yán)謹(jǐn)，文本簡明

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

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

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

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

3. 美即適用 

美國心理學(xué)家丹尼爾·麥克尼爾提出美即好效應(yīng)：“對一個(gè)外表英俊漂亮的人，人們很容易誤認(rèn)為他或她的其他方面也很不錯(cuò)。”

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

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

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

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

1. 文檔封面

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

2. 更新日志

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

3. 設(shè)計(jì)思路

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

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

4. 需求表

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

5. 交互稿

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

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

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

6. 廢紙簍

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

三、后記

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

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

摘自：人人都是產(chǎn)品經(jīng)理