從你的交互說(shuō)明中，即可看出你的思考是否全面，邏輯是否清晰。那么你知道交互說(shuō)明都需要寫(xiě)些什么嗎？

最近，經(jīng)常聽(tīng)到剛剛?cè)胄械男』锇閱?wèn)道：原型圖的注釋要寫(xiě)些什么內(nèi)容呀？交互說(shuō)明怎么寫(xiě)呀？我要怎么向開(kāi)發(fā)人員解釋清楚需求呢？也有小伙伴說(shuō)自己交付出去的文檔，總是丟三落四，惹來(lái)開(kāi)發(fā)同學(xué)的投訴與抱怨…

上述情況，相信每個(gè)產(chǎn)品人/交互設(shè)計(jì)師都曾遇到過(guò)苦惱過(guò)。那么接下來(lái)，結(jié)合自己這幾年的經(jīng)驗(yàn)和踩過(guò)的坑，給大家詳細(xì)講述下交互說(shuō)明該怎么寫(xiě)，寫(xiě)些什么。

一、交互說(shuō)明是什么？

交互說(shuō)明，簡(jiǎn)單來(lái)說(shuō)就是：原型圖邊上的注釋?zhuān)瑢?duì)原型圖的解釋說(shuō)明。

主要用于描述界面元素是什么？有什么限制條件？有幾種狀態(tài)？操作后有何反饋？以及元素的來(lái)龍去脈，從哪里來(lái)，到哪里去等。從交互說(shuō)明中，即可看出你的思考是否全面，邏輯是否清晰。

一份好的交互說(shuō)明，可以有效降低溝通成本，提高工作協(xié)同效率。講到這里，你可能還是有點(diǎn)懵，沒(méi)關(guān)系，我們?cè)敿?xì)往下看。

二、交互說(shuō)明怎么寫(xiě)？

我們先整體看下交互說(shuō)明包含哪些內(nèi)容：

接下來(lái)，逐一詳細(xì)為大家講述。

1.限制條件

限制條件包括【范圍值】和【極限值】，是對(duì)元素基本屬性的描述。

（1）范圍值數(shù)據(jù)的取值范圍，即有哪些可選項(xiàng)。

如：在發(fā)布文章時(shí)，可選擇的類(lèi)型有哪些；在選擇職位時(shí)，默認(rèn)可選職位有哪些。

舉例：在選擇擅長(zhǎng)菜系時(shí)，菜系的默認(rèn)可選范圍。

（2）極限值即該元素最大限和最小限時(shí)如何展示，以及不滿(mǎn)足限制時(shí)如何解決。

在設(shè)計(jì)原型時(shí)，我們需要特別注意這點(diǎn)（因?yàn)檎娴恼娴氖翘貏e容易遺忘的一點(diǎn)），而且元素的最大限和最小限，對(duì)界面排版有一定影響，很可能因最大限信息顯示不全，而更改排版方式。

舉例1：列表中文章的標(biāo)題，最大限制2行，超出后顯示省略號(hào)。

舉例2：文本框的極限值（大家在設(shè)計(jì)文本框時(shí)，需尤其注意，因?yàn)樗南拗茥l件比較多）。

2.狀態(tài)

（1）默認(rèn)狀態(tài)即默認(rèn)內(nèi)容，包括文案、選項(xiàng)、鍵盤(pán)、排序等。

舉例1：文本框的默認(rèn)狀態(tài)（一般包括：文本框提示文案和默認(rèn)鍵盤(pán)，為了方便解說(shuō)，我把文本框和文本域統(tǒng)稱(chēng)為文本框了哦）

舉例2：列表默認(rèn)排序方式。涉及到列表，就要想起這句話(huà)：按什么排序？幾種常見(jiàn)的排序：按發(fā)布時(shí)間倒序/正序、按更新時(shí)間倒序/正序、按熱度正序等，需具體情況具體分析哦。

（2）正常狀態(tài)用戶(hù)正常使用時(shí)，會(huì)遇到的狀態(tài)。

比較常見(jiàn)的如登錄/未登錄狀態(tài)，認(rèn)證審核狀態(tài)，訂單狀態(tài)等。

舉例：用戶(hù)申請(qǐng)身份認(rèn)證涉及的狀態(tài)。

注意：一定不要忘記【未登錄狀態(tài)】哦！因?yàn)閷?duì)于某些功能，當(dāng)用戶(hù)不登錄時(shí)，會(huì)涉及顯示內(nèi)容的變化及后臺(tái)權(quán)限邏輯的判斷。

（3）特殊狀態(tài)一些特殊場(chǎng)景才會(huì)出現(xiàn)的狀態(tài)。

包括無(wú)數(shù)據(jù)狀態(tài)、網(wǎng)絡(luò)加載狀態(tài)、網(wǎng)絡(luò)未連接、系統(tǒng)報(bào)錯(cuò)等。雖然這些狀態(tài)不會(huì)經(jīng)常出現(xiàn)，但是同樣會(huì)影響用戶(hù)的體驗(yàn)。所以我們?cè)谧鲈O(shè)計(jì)時(shí)，也要考慮全面。

舉例1：分享一個(gè)有趣的特殊狀態(tài)。（去哪兒APP的加載動(dòng)畫(huà)，降低用戶(hù)等待時(shí)的焦慮感）

舉例2：網(wǎng)絡(luò)錯(cuò)誤時(shí)

3.操作和反饋

當(dāng)用戶(hù)執(zhí)行某項(xiàng)操作后，需給予用戶(hù)及時(shí)的反饋。不管用戶(hù)是常見(jiàn)操作、錯(cuò)誤操作還是一些極端特殊操作，都要做到“防呆“，防止用戶(hù)不知所措。

我想你肯定遇到過(guò)這樣的情況：當(dāng)你在瀏覽器中點(diǎn)擊【下載按鈕】后，如果網(wǎng)絡(luò)狀況不太好，瀏覽器就沒(méi)有任何反饋，這時(shí)候是不是有些抓狂？會(huì)不斷嘗試再次點(diǎn)擊，結(jié)果下載了n多份。所以，想要給予用戶(hù)好的體驗(yàn)，就要重視用戶(hù)操作后的反饋。幾種常見(jiàn)的操作和反饋如下：

（1）正常操作：在正常狀態(tài)下，用戶(hù)的操作流程（即來(lái)龍去脈，從哪兒來(lái)到哪兒去）。在用戶(hù)的操作過(guò)程中，需要及時(shí)給予用戶(hù)反饋，告知用戶(hù)發(fā)生了什么。

（2）錯(cuò)誤操作：當(dāng)用戶(hù)進(jìn)行了一些錯(cuò)誤操作時(shí)，需要給出一些糾正反饋。錯(cuò)誤提示內(nèi)容需包括：當(dāng)前錯(cuò)誤和糾正信息，即告知用戶(hù)當(dāng)前發(fā)生了什么，接下來(lái)可以做什么。

舉例：一個(gè)評(píng)論框的操作和反饋（包括正常操作和錯(cuò)誤操作）

（3）特殊操作：當(dāng)用戶(hù)進(jìn)行了一些極端的操作時(shí)，也需要給出反饋。

舉例：還記得幾年前的淘寶二樓么。當(dāng)我一直往下拉時(shí)，會(huì)出現(xiàn)圖中這個(gè)提示。是不是讓人感覺(jué)很有趣～

4.其他

除上述內(nèi)容外，還有一些很重要的信息（放在其他里，是因?yàn)楸容^分散，不好匯總，并不是它不重要喲，這些往往是最容易遺忘的點(diǎn)）。

詳細(xì)的講解和一些注意事項(xiàng)，請(qǐng)期待拾月的下篇文章哦。

三、總結(jié)

以上，給大家介紹了交互說(shuō)明中的【限制條件】、【狀態(tài)】、【操作和反饋】。在下篇文章中，我會(huì)給大家講述一些其他零碎但很重要的點(diǎn)，以及一些注意事項(xiàng)。大家敬請(qǐng)期待哦。

再啰嗦幾句，本文中列出的一些交互說(shuō)明信息項(xiàng)僅供大家參考，還是需要具體問(wèn)題具體分析。希望大家活學(xué)活用，建立屬于自己的交互checklist。在每次寫(xiě)完文檔后，對(duì)照檢查一遍，有效防止遺漏哦（而且可以減少撕逼次數(shù)，提高你在開(kāi)發(fā)人員心中的印象，哈哈哈～）

感謝耐心閱讀，希望本文對(duì)你有所幫助。

相關(guān)閱讀：

如果你對(duì)原型排版有疑惑，推薦閱讀： 什么樣的原型更受開(kāi)發(fā)歡迎？

作者：拾月，4年產(chǎn)品交互設(shè)計(jì)經(jīng)驗(yàn)，個(gè)人公眾號(hào)：用戶(hù)體驗(yàn)研究所（ID：PM_Cynthia）

本文由 @Cynthia拾月 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 unsplash，基于CC0協(xié)議