@青溪Joanna?：交互說明文檔，是交互設(shè)計(jì)師的輸出物中必不可少的一項(xiàng)，它關(guān)系著設(shè)計(jì)方案能否最大程度的被實(shí)現(xiàn)。交互新人，大多會(huì)煩惱如何寫交互文檔，今天來聊聊這個(gè)話題。

交互文檔，寫給誰看

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

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

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

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

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

1、頁面流程（界面之間）

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

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

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

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

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

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

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

下圖，是一個(gè)簡單的登錄界面，我們試著先整體后部分的方式，看看這個(gè)界面的交互說明需要考慮哪些方面。

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

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

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

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

3、密碼輸入框

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

4、登錄按鈕

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

5、注冊按鈕

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

6、關(guān)閉按鈕

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

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

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

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

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

方式1：一頁紙表示所有的線框圖，配上箭頭+簡單的文字說明

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

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

工具: Axure

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

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

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

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

工具: Axure

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

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

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

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

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

工具: Axure 畫原型，Keynote 寫交互說明

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

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

于是，我想到了以前 yoyo 在騰訊CDC 官方博客上分享的交互文檔撰寫方式：《如何制作實(shí)用美觀的設(shè)計(jì)文檔》。以前嘗試過用他推薦的indesign寫文檔，但對這個(gè)工具不那么習(xí)慣以至于效率并不高，嘗試過寫完一個(gè)產(chǎn)品的交互文檔之后就沒再用了。不過 yoyo 推薦的將大故事拆分為一個(gè)個(gè)小故事來寫交互說明的方法讓我記憶猶新。

就這樣，嘗試了這種新的搭配方式，Axure 畫原型，Keynote 寫交互說明。

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

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

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

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

歡迎關(guān)注妹子的微信公眾號(hào)：

附交互新手入門手冊：

網(wǎng)易設(shè)計(jì)總監(jiān)親歷分享！
《網(wǎng)易美女設(shè)計(jì)主管！交互設(shè)計(jì)菜鳥如何入門？》

交互設(shè)計(jì)自學(xué)超全合集！
《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》

阿里巴巴資深交互設(shè)計(jì)師經(jīng)驗(yàn)！
《推薦！交互設(shè)計(jì)那些事兒（一）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com