所謂交互說明预伺，簡(jiǎn)單的理解就是對(duì)交互原型的解釋订咸、強(qiáng)調(diào)或補(bǔ)充的說明文字。原型頁面往往無法展示全部的交互細(xì)節(jié)酬诀，即便完全做到了脏嚷，團(tuán)隊(duì)中的下游也不一定能夠全部get到。所以瞒御，一份足夠完整和詳細(xì)的交互說明文檔可以減少溝通成本及信息不對(duì)稱父叙。
相信大多數(shù)的交互設(shè)計(jì)師們都有寫交互說明的經(jīng)歷。那么大家知道如何完成一份合格的交互說明文檔嗎?不妨從以下幾個(gè)角度了解下到底該怎么寫交互說明。

1趾唱、寫給誰看

首先需要明確交互說明的讀者和在項(xiàng)目中的作用：

• 視覺設(shè)計(jì)師：輸出視覺稿
• 前后端開發(fā)工程師：代碼實(shí)現(xiàn)產(chǎn)品設(shè)計(jì)
• 測(cè)試工程師：寫測(cè)試用例
• 產(chǎn)品經(jīng)理：項(xiàng)目緊張的情況下涌乳，可能會(huì)需求和原型設(shè)計(jì)并行，這時(shí)候甜癞，交互說明可以協(xié)助產(chǎn)品經(jīng)理整理并輸出需求文檔
• 自己：原型細(xì)節(jié)自檢夕晓，優(yōu)化設(shè)計(jì)邏輯

2、由誰來寫

很明顯作為項(xiàng)目的交互設(shè)計(jì)師是交互說明的主要撰寫人和維護(hù)者带欢。
在項(xiàng)目進(jìn)程中运授，交互說明應(yīng)由設(shè)計(jì)師發(fā)起，前端開發(fā)工程師也會(huì)協(xié)助修訂細(xì)節(jié)乔煞。交互設(shè)計(jì)師更多的關(guān)注點(diǎn)在需求到原型的轉(zhuǎn)化吁朦，對(duì)于前后端能否實(shí)現(xiàn)并不是很確定。前端開發(fā)工程師對(duì)交互說明的的把關(guān)和疑問渡贾，能夠幫助設(shè)計(jì)師將設(shè)計(jì)思想轉(zhuǎn)為工程師能夠理解和實(shí)現(xiàn)的語言逗宜。這樣交互說明也能幫助前端開發(fā)工程師明確設(shè)計(jì)實(shí)際執(zhí)行方案。

3空骚、寫什么內(nèi)容

寫交互說明文檔時(shí)纺讲，很多人都會(huì)疑惑，到底需要寫什么呢囤屹？我的意見是熬甚，站在下游的角度祟身，視覺設(shè)計(jì)師和開發(fā)工程師在需要考慮的與頁面相關(guān)的邏輯和用戶操作相關(guān)的內(nèi)容基本都是需要在說明中體現(xiàn)出來铁蹈。另外我們應(yīng)該盡量寫得詳細(xì)些，避免研發(fā)同事多次來討論或者直接按照自己的理解直接實(shí)現(xiàn)翻屈，這樣最終的驗(yàn)收效果也會(huì)比較好智厌。那么具體的該寫什么不該寫什么诲泌，這里也做了整理供參考。

寫什么內(nèi)容.png

3.1這些要寫

3.1.1頁面整體說明模塊

1. 頁面統(tǒng)一布局：頁面整體的排版布局簡(jiǎn)單說明（比較直觀可不寫）
2. 相同的交互動(dòng)作：統(tǒng)一的頁面切換方式铣鹏、手勢(shì)敷扫、彈窗等

3. 相同的處理規(guī)則和注意點(diǎn)：比如所有的表格在自適應(yīng)時(shí)的變化規(guī)則
   整體說明.png

3.1.2對(duì)象

用戶身份和系統(tǒng)功能頁面緊密相關(guān)。比如后臺(tái)系統(tǒng)常見的會(huì)區(qū)分管理員身份诚卸，普通管理員還是超級(jí)管理員葵第。

3.1.3限制

1. 范圍值：比如列表超過10項(xiàng)出現(xiàn)滾動(dòng)條
2. 極限值：比如某個(gè)字段文字超過展示極限值才有缺省，hover氣泡展示全部

3.1.4表單校驗(yàn)

表單校驗(yàn)邏輯：是實(shí)時(shí)校驗(yàn)還是觸發(fā)按鈕后做校驗(yàn)合溺，還是兩者結(jié)合羹幸，表達(dá)清楚邏輯并將相關(guān)的提示和反饋描述清楚。

3.1.5操作與反饋

1. 操作：

• 交互方式：點(diǎn)擊辫愉、拖動(dòng)栅受、長按、縮小、放大等
• 文本框等：獲取焦點(diǎn)屏镊、失去焦點(diǎn)（比如app鍵盤的呼出和隱藏）
• 熱區(qū)范圍：比如卡片展示形式有時(shí)將整個(gè)卡片作為可觸發(fā)操作的區(qū)域
  2.反饋：
• 提示內(nèi)容：系統(tǒng)對(duì)用戶操作的及時(shí)反饋比如報(bào)錯(cuò)提示依疼、失敗提示、成功提示等
• 提示形式：提示的控件樣式而芥，比如彈出框是否可關(guān)閉等

• 跳轉(zhuǎn)：跳轉(zhuǎn)形式是當(dāng)前窗口/新窗口律罢？跳轉(zhuǎn)到哪里？寫清楚標(biāo)號(hào)或頁面名稱棍丐。

  
  
  跳轉(zhuǎn).png
• 過渡動(dòng)畫：轉(zhuǎn)場(chǎng)方式

3.1.5狀態(tài)變化

1. 默認(rèn)：

• 默認(rèn)選項(xiàng)選中
• 默認(rèn)顯示的文案
• 默認(rèn)排序方式

2. 正常：
   正常場(chǎng)景下的操作帶來的變化误辑，比如點(diǎn)擊表格的表頭排序
3. 特殊：

• 功能特殊，比如兩個(gè)復(fù)選框必須有一個(gè)選中
• 場(chǎng)景特殊歌逢，比如無數(shù)據(jù)情況巾钉、加載失敗、網(wǎng)絡(luò)錯(cuò)誤

3.1.6其他交互細(xì)節(jié)

根據(jù)項(xiàng)目內(nèi)容特性和業(yè)務(wù)將邏輯細(xì)節(jié)和交互細(xì)節(jié)表達(dá)清楚秘案。比如app可能有鎖屏推送砰苍，項(xiàng)目是否有數(shù)據(jù)埋點(diǎn)。

3.2這些不寫

• 商業(yè)邏輯阱高，比如：某個(gè)功能的實(shí)現(xiàn)有怎樣的意義赚导，跟產(chǎn)品實(shí)現(xiàn)無關(guān)的前期準(zhǔn)備，就不要畫蛇添足了
• 視覺規(guī)范相關(guān)赤惊，術(shù)業(yè)有專攻吼旧，尊重和相信團(tuán)隊(duì)視覺設(shè)計(jì)師
• 研發(fā)代碼的邏輯和規(guī)則等，PRD需要解決的問題未舟，不要贅述

4圈暗、怎么寫

4.1 目錄

提供一個(gè)參考的目錄，可以進(jìn)行適當(dāng)?shù)恼{(diào)整作為項(xiàng)目交互原型的目錄：

目錄.png

4.2 格式

相比較word等文本記錄工具比較推薦Axure处面，原因有三：

• 和原型源文件放在一起厂置，方便維護(hù)
• 生成html文件后菩掏，研發(fā)閱讀更方便
• 熟悉Axure操作魂角，能夠便捷的添加跳轉(zhuǎn)和動(dòng)作

4.3 排版布局

根據(jù)項(xiàng)目類型和情況確定具體合適的排版，基本可以按照從上到下從左到右的順序去排版智绸。

• web的頁面一般比較寬野揪，可以采用先上下，后左右的結(jié)構(gòu)：
  上圖加標(biāo)注瞧栗，下文字說明（左圖右文）

  
  
  web.png

• app的頁面比較窄斯稳，可以放在原型頁面中做說明：

  
  
  app.png

5、怎么做才是不錯(cuò)的交互說明

以上都能理解和做到迹恐，已經(jīng)可以完成一份合格的交互說明文檔了挣惰。那么怎樣才算是一份不錯(cuò)的交互說明的呢？
這里分享幾個(gè)注意點(diǎn)：

5.1固定的目錄結(jié)構(gòu)

對(duì)接的下游有時(shí)候是同一部門或同一個(gè)同事，目錄保持基本的統(tǒng)一憎茂，可以降低下游的學(xué)習(xí)成本珍语，另外也讓自己在寫說明時(shí)不必每次都去思考目錄的劃分。當(dāng)然竖幔，針對(duì)不同的產(chǎn)品類型和產(chǎn)品特性需要去調(diào)整制訂目錄板乙。

5.2簡(jiǎn)潔文字

拒絕流水賬式說明，另外當(dāng)描述文字過長拳氢，可能需要重新考慮是否是設(shè)計(jì)邏輯存在問題募逞。那么如何讓說明文字盡可能的簡(jiǎn)單呢？

• 流程圖代替純文字說明：流程性強(qiáng)的功能可以嘗試這種方式馋评，簡(jiǎn)單且直接放接。

  
  
  流程圖.png

• 表格羅列復(fù)雜狀態(tài)變化

  
  
  表格.png

• 靈活運(yùn)用開發(fā)語言（if/else/case等）

• 結(jié)合動(dòng)態(tài)效果：遇到動(dòng)畫或者效果不太好用語言描述的話，不如直接把動(dòng)畫放在說明頁面展示栗恩，并結(jié)合簡(jiǎn)單的語言描述透乾。

5.3盡量使用真實(shí)、符合邏輯的數(shù)據(jù)

原型設(shè)計(jì)的過程中磕秤，需要展示數(shù)據(jù)乳乌，對(duì)數(shù)據(jù)的模擬盡可能的真實(shí)，撰寫交互說明可以將場(chǎng)景還原更加貼近真實(shí)可能性市咆。而且汉操，真實(shí)符合邏輯的數(shù)據(jù)，研發(fā)也比較能更快理解頁面邏輯蒙兰，所以也可以減少溝通成本磷瘤。

5.4處理重復(fù)內(nèi)容

原型頁面很多內(nèi)容是復(fù)用，那同樣的這些重復(fù)的內(nèi)容搜变，按照常見的處理方法采缚，就會(huì)重復(fù)寫很多次的交互說明（相信大家也會(huì)復(fù)制粘貼），但是這樣帶來2個(gè)問題挠他，一是研發(fā)會(huì)不會(huì)懷疑前后的交互說明是否有區(qū)別扳抽，二是如果需要修改的話，需要對(duì)所有的相關(guān)頁面修改殖侵，維護(hù)的工作量就變大了很多贸呢。有2鐘解決方法：

• 寫在一處：引用時(shí)加鏈接
• 寫在單獨(dú)頁面，引用時(shí)加鏈接

5.5更新后及時(shí)周知

每次更新都是一次改進(jìn)的過程拢军，添加新內(nèi)容的同時(shí)楞陷，保留舊的內(nèi)容，讓其他人也看到走過的彎路茉唉，讓他們知道每次修改都是深思熟慮后的決定固蛾。為什么要周知呢结执？下圖，是不是很直接地解釋清楚了：

另外艾凯，當(dāng)我們?cè)陧?xiàng)目中寫交互說明寫多了就會(huì)發(fā)現(xiàn)昌犹，組件可以自己設(shè)計(jì)生成元件庫，調(diào)用元件庫就可以快捷使用览芳，那么組件的交互說明也可以組件化進(jìn)行歸類入庫斜姥，在需要的時(shí)候直接拿出來根據(jù)具體情況調(diào)整使用。附上沧竟，我整理出的交互說明組件庫的部分頁面供參考铸敏，大家可以根據(jù)自己的操作習(xí)慣和經(jīng)常接入的項(xiàng)目特點(diǎn)制作一套適合自己的交互說明模板庫：

通用交互說明：

通用交互說明.png

頁面交互說明：

頁面交互說明.png

表文結(jié)合形式：

表文結(jié)合.png

6、總結(jié)

以上就是我在項(xiàng)目進(jìn)行過程中發(fā)現(xiàn)的問題和個(gè)人思考的解決方案悟泵。但是杈笔，并非所有人都喜歡寫說明文檔或者看說明文檔。有必要的情況下糕非，需要跟團(tuán)隊(duì)成員強(qiáng)調(diào)交互說明的存在意義蒙具，推動(dòng)大家去閱讀和反饋，這樣辛辛苦苦寫出來的說明才能對(duì)項(xiàng)目的發(fā)展起到真實(shí)的作用朽肥。另外在項(xiàng)目合作的過程中禁筏，除了做好自己的任務(wù)以外，要多站在項(xiàng)目的角度上去思考衡招，要去考慮團(tuán)隊(duì)中其他角色尤其是下游伙伴是否能夠較好及時(shí)地實(shí)現(xiàn)或完成相關(guān)任務(wù)篱昔，這樣思考后才去決定自己手下急需和應(yīng)該完成的任務(wù)項(xiàng)。