交互文檔可以看做交互設(shè)計(jì)師輸出的”產(chǎn)品”，它面向的”用戶(hù)”是下游的同事——視覺(jué)設(shè)計(jì)師、測(cè)試工程師、開(kāi)發(fā)工程師。他們會(huì)根據(jù)文檔中的線(xiàn)框圖、交互細(xì)節(jié)說(shuō)明等等，來(lái)輸出視覺(jué)設(shè)計(jì)稿、寫(xiě)測(cè)試用例、用代碼實(shí)現(xiàn)產(chǎn)品設(shè)計(jì)方案，并以此為依據(jù)完成驗(yàn)收測(cè)試等工作。

交互文檔，寫(xiě)什么內(nèi)容

最初寫(xiě)交互文檔時(shí)，很多人會(huì)有疑惑該寫(xiě)些什么內(nèi)容。我的看法是，開(kāi)發(fā)同事在寫(xiě)代碼時(shí)需要考慮的與界面顯示邏輯、用戶(hù)操作相關(guān)的內(nèi)容，幾乎都要在交互文檔中體現(xiàn)，建議越全面越好。

如果有遺漏的內(nèi)容，開(kāi)發(fā)可能會(huì)找你討論，也可能懶得費(fèi)時(shí)間溝通直接按照自己的理解去實(shí)現(xiàn)。最終，驗(yàn)收測(cè)試的效果不如意，你也不能全賴(lài)開(kāi)發(fā)。所以盡量將交互文檔寫(xiě)的全面些，別消費(fèi)開(kāi)發(fā)同事對(duì)你的信賴(lài)值。

那么，到底交互文檔中，需要寫(xiě)哪些內(nèi)容呢？

1、頁(yè)面流程（界面之間）

頁(yè)面流程圖，可以表達(dá)產(chǎn)品的整體結(jié)構(gòu)，幫助同事了解界面之間的關(guān)系。在撰寫(xiě)交互文檔時(shí)，也可以以任務(wù)、子任務(wù)為模塊來(lái)詳細(xì)介紹界面如何跳轉(zhuǎn)、何時(shí)跳轉(zhuǎn)。

2、內(nèi)容布局（界面內(nèi)）

• 正在加載狀態(tài)、加載完成有內(nèi)容的狀態(tài)、加載完成無(wú)內(nèi)容的空狀態(tài)、失敗狀態(tài)（比如網(wǎng)絡(luò)異常/權(quán)限未開(kāi)啟）、不同角色的用戶(hù)看到的內(nèi)容是否一樣、不同狀態(tài)的文案圖標(biāo)變化
• 內(nèi)容的加載方式，何時(shí)加載、何時(shí)顯示、何時(shí)刷新
• 其他 …

3、交互操作與反饋（界面內(nèi)）

根據(jù)用戶(hù)與界面之間發(fā)生的交互操作，提供相應(yīng)的反饋，可能是提示內(nèi)容，也可能是界面內(nèi)或界面之間的跳轉(zhuǎn)。

剛?cè)腴T(mén)的交互新人，喜歡把重心放在界面之間的跳轉(zhuǎn)，而遺漏了界面內(nèi)的內(nèi)容布局和交互操作。對(duì)此，我的小技巧是，先整體看界面全局，再review界面上的每一個(gè)元素，思考各種不同場(chǎng)景下這些元素是否變化、如何變化。

以登錄界面為例，看看怎么寫(xiě)交互細(xì)節(jié)說(shuō)明

下圖，是一個(gè)簡(jiǎn)單的登錄界面，我們?cè)囍日w后部分的方式，看看這個(gè)界面的交互說(shuō)明需要考慮哪些方面。

1、登錄界面的跳轉(zhuǎn)流程

• 什么情況下，從哪些界面可以進(jìn)入登錄界面
• 登錄成功后進(jìn)入哪個(gè)界面
• 取消登錄后回到哪里
• 界面轉(zhuǎn)場(chǎng)方式，比如從下向上進(jìn)入界面，從上往下離開(kāi)界面

2、賬號(hào)輸入框

• 字段格式要求，字段長(zhǎng)度、字段類(lèi)別（漢子、字母、數(shù)字、手機(jī)號(hào)）
• 是否有默認(rèn)提示文案，如果上次登錄過(guò)是否顯示上次的賬號(hào)
• 光標(biāo)是否置入此輸入框，鍵盤(pán)是否顯示，鍵盤(pán)用哪種視圖
• 何時(shí)檢測(cè)用戶(hù)填寫(xiě)的是否正確，填寫(xiě)正確的提示，填寫(xiě)錯(cuò)誤的提示，反饋提示何時(shí)顯示、何時(shí)消失
• 輸入框中的內(nèi)容是否支持一鍵清除

3、密碼輸入框

• 字段格式要求
• 何時(shí)檢測(cè)格式是否符合
• 光標(biāo)置入后顯示鍵盤(pán)的哪種視圖
• 輸入框中的內(nèi)容是否支持一鍵清除
• 是否支持密碼可見(jiàn)、如何切換可見(jiàn)狀態(tài)

4、登錄按鈕

• 按鈕是否有可用不可用之分，何時(shí)可用狀態(tài)、何時(shí)不可用狀態(tài)
• 點(diǎn)擊按鈕之后提示正在登錄的方式
• 登錄成功如何提示、跳轉(zhuǎn)進(jìn)入哪個(gè)界面
• 有哪幾種登錄失敗的場(chǎng)景（比如賬號(hào)未注冊(cè)、網(wǎng)絡(luò)異常等），不同失敗的情況下如何提示
• 多次登錄失敗提示方式是否變化

5、注冊(cè)按鈕

• 點(diǎn)擊進(jìn)入哪個(gè)界面
• 界面的轉(zhuǎn)場(chǎng)方式是怎樣的

6、關(guān)閉按鈕

• 點(diǎn)擊進(jìn)入哪個(gè)界面
• 界面的轉(zhuǎn)場(chǎng)方式是怎樣的

以上只是拋磚引玉，給大家打開(kāi)思路。雖然只是幾個(gè)輸入框，但其細(xì)節(jié)比大多數(shù)界面都要復(fù)雜。你可以找一款優(yōu)秀的APP，去研究它如何設(shè)計(jì)這些細(xì)節(jié)，是否還有我沒(méi)有提到的點(diǎn)，研究透了下次自己設(shè)計(jì)才能做到更加全面。

當(dāng)然，交互細(xì)節(jié)說(shuō)明，只是方案的表述，每一個(gè)小點(diǎn)都有好幾種設(shè)計(jì)方案。如何權(quán)衡選擇體驗(yàn)更優(yōu)的方案，才最是考驗(yàn)交互設(shè)計(jì)師的能力。你可以對(duì)比研究幾款優(yōu)秀產(chǎn)品，看它們?cè)诩?xì)節(jié)設(shè)計(jì)有何不同，分析其中的緣由，想想是否有更好的方案，學(xué)無(wú)止盡。

如何提升交互文檔的瀏覽體驗(yàn)

交互設(shè)計(jì)師的目標(biāo)是提升產(chǎn)品的體驗(yàn)，我們輸出的文檔本身也應(yīng)該有上佳的瀏覽體驗(yàn)。為了達(dá)到這個(gè)目標(biāo)，我也在不斷優(yōu)化文檔的撰寫(xiě)方式和排版。下面聊聊我嘗試過(guò)的幾種方式。

方式1：一頁(yè)紙表示所有的線(xiàn)框圖，配上箭頭+簡(jiǎn)單的文字說(shuō)明

網(wǎng)上流傳著很多這種風(fēng)格的圖，最初覺(jué)得這樣的圖很有范兒，以為這就是他們輸出的全部交互文檔，所以按照這種模式產(chǎn)出。等到自己做的多了會(huì)發(fā)現(xiàn)這類(lèi)圖大多只表達(dá)了某個(gè)界面的正常狀態(tài)，并沒(méi)有詳細(xì)的交互說(shuō)明來(lái)體現(xiàn)界面的內(nèi)容布局和交互操作反饋。

方式2：一頁(yè)一個(gè)界面，每個(gè)界面建一個(gè)交互說(shuō)明文件夾，分功能模塊寫(xiě)交互說(shuō)明（Web產(chǎn)品）

工具: Axure

Web產(chǎn)品的特點(diǎn)是，層級(jí)復(fù)雜，每個(gè)界面比較大而且內(nèi)容很豐富。通常會(huì)組織好頁(yè)面層級(jí)，再畫(huà)每個(gè)界面的原型，待幾輪討論過(guò)后界面布局和內(nèi)容基本確定之后，再為每個(gè)界面撰寫(xiě)各自的交互說(shuō)明。

考慮到每個(gè)界面中的內(nèi)容模塊和功能點(diǎn)不少，我沒(méi)有在確定好的界面上直接標(biāo)注交互說(shuō)明，而是將這個(gè)界面劃分為幾個(gè)功能模塊，并給每個(gè)功能模塊新建一個(gè)頁(yè)面用來(lái)寫(xiě)交互說(shuō)明。

如下圖，分別是 Axure的文檔目錄（左）、某個(gè)功能模塊的交互說(shuō)明（右）

方式3：一頁(yè)顯示一個(gè)大功能點(diǎn)的所有界面和交互說(shuō)明（App 產(chǎn)品）

工具: Axure

App相比Web界面內(nèi)容簡(jiǎn)潔很多，很多人輸出App的交互文檔都是一頁(yè)展示很多個(gè)界面，上下左右排滿(mǎn)了。設(shè)計(jì)師大多是大屏電腦，這樣設(shè)計(jì)起來(lái)確實(shí)比較連貫流暢。

但是開(kāi)發(fā)大多用MacBook，沒(méi)有外接的大屏顯示器，一屏看不到幾個(gè)界面。雖然我會(huì)按照橫向主流程豎向次要或分支流程的規(guī)律排列，但是他們對(duì)這些規(guī)律并不熟悉，左右拖拽上下滾動(dòng)幾次就容易犯暈，可能一會(huì)兒就找不到剛看過(guò)的界面了。

如下圖，界面右側(cè)配上對(duì)應(yīng)的交互說(shuō)明（通常情況，交互原型應(yīng)該以黑白灰顏色為主，不過(guò)因?yàn)槲覀兊腁PP處于迭代優(yōu)化的階段，已經(jīng)確定了視覺(jué)風(fēng)格，而且某些狀態(tài)需要用顏色來(lái)區(qū)分對(duì)錯(cuò)，所以會(huì)有一些配色。）

期間優(yōu)化過(guò)這種方式，將大功能點(diǎn)拆分，按照以往設(shè)計(jì)Web 產(chǎn)品的方式來(lái)組織。對(duì)此開(kāi)發(fā)同事仍然覺(jué)得不夠好，所以有了后面ppt/keynote演示文稿的方式。

方式4：一頁(yè)介紹一個(gè)子任務(wù)，每頁(yè)最多4個(gè)界面，輸出PDF格式（App 產(chǎn)品）

工具: Axure 畫(huà)原型，Keynote 寫(xiě)交互說(shuō)明

為什么采用這種方式呢？源于開(kāi)發(fā)同事看到產(chǎn)品老大介紹需求用的幻燈片，覺(jué)得一張圖配一個(gè)表格的方式很清晰，強(qiáng)烈建議用這種方式來(lái)寫(xiě)交互文檔。

我覺(jué)得用幻燈片輸出PDF 的方式確實(shí)可取，易于瀏覽。不過(guò)一頁(yè)一個(gè)圖太零散，界面之間、界面內(nèi)容的不同狀態(tài)關(guān)鍵性很強(qiáng)，放在一起介紹更直觀。

于是，我想到了以前 yoyo 在騰訊CDC 官方博客上分享的交互文檔撰寫(xiě)方式。以前嘗試過(guò)用他推薦的indesign寫(xiě)文檔，但對(duì)這個(gè)工具不那么習(xí)慣以至于效率并不高，嘗試過(guò)寫(xiě)完一個(gè)產(chǎn)品的交互文檔之后就沒(méi)再用了。不過(guò) yoyo 推薦的將大故事拆分為一個(gè)個(gè)小故事來(lái)寫(xiě)交互說(shuō)明的方法讓我記憶猶新。

就這樣，嘗試了這種新的搭配方式，Axure 畫(huà)原型，Keynote 寫(xiě)交互說(shuō)明。

Keynote縮略圖預(yù)覽如下圖，為每個(gè)功能模塊建立一個(gè)任務(wù)/子任務(wù)的目錄結(jié)構(gòu)，按照劃分的結(jié)構(gòu)依次介紹各個(gè)子任務(wù)。每個(gè)頁(yè)面最多介紹四個(gè)界面，頁(yè)面底部作為固定的區(qū)域用來(lái)寫(xiě)交互說(shuō)明。

測(cè)試、開(kāi)發(fā)同事反饋這種方式不錯(cuò)，一方面是因?yàn)槊宽?yè)文檔的結(jié)構(gòu)大小一致，滑動(dòng)瀏覽的體驗(yàn)也更好；另一方面是因?yàn)樗麄儗?xiě)代碼也是按照這樣的方式一個(gè)小模塊一種場(chǎng)景依次往下走，更容易專(zhuān)注看當(dāng)前寫(xiě)的這個(gè)模塊的交互說(shuō)明。

雖然有同事的肯定，但這種方式還有優(yōu)化的空間。因?yàn)椴捎昧藘蓚€(gè)工具，一個(gè)畫(huà)原型一個(gè)寫(xiě)文檔，如果Axure原型有改動(dòng)，需要復(fù)制到keynote，兩處都要更新顯然影響效率。所以我還在考慮是否切換到某一個(gè)工具搞定這兩件事，比如用sketch 。除此之外，文檔模板也可以改進(jìn)優(yōu)化。

就像前面說(shuō)的，交互說(shuō)明文檔，就像是交互設(shè)計(jì)師輸出的產(chǎn)品，既要根據(jù)場(chǎng)景的變化不斷調(diào)整，又要聽(tīng)取用戶(hù)的意見(jiàn)，持續(xù)優(yōu)化提升體驗(yàn)。

#專(zhuān)欄作家#

青溪Joanna，微信公眾號(hào)-青溪札記（qingxizhaji），交互設(shè)計(jì)師一枚，喜歡體驗(yàn)各種App，關(guān)注社交、在線(xiàn)旅游、O2O、工具類(lèi)產(chǎn)品；擅長(zhǎng)需求分析、交互設(shè)計(jì)，有一定前端開(kāi)發(fā)經(jīng)驗(yàn)；業(yè)余時(shí)間喜歡網(wǎng)球、ukulele、簡(jiǎn)筆畫(huà)，正在努力攢技能。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。