編輯導(dǎo)語(yǔ)：交互說(shuō)明文檔可以讓項(xiàng)目人員更加快速地理解設(shè)計(jì)規(guī)劃，進(jìn)而推動(dòng)后續(xù)項(xiàng)目的進(jìn)行與落地。這也就要求交互說(shuō)明文檔的撰寫(xiě)需要清晰、明了、完整。本篇文章里，作者就如何書(shū)寫(xiě)一份完整的交互說(shuō)明文檔進(jìn)行了總結(jié)，一起來(lái)看一下。

在0到1的產(chǎn)品開(kāi)發(fā)流程中，項(xiàng)目經(jīng)理經(jīng)歷過(guò)需求階段，開(kāi)完需求評(píng)審會(huì)議后就開(kāi)始投入到原型的制作了。原型是公司內(nèi)部的產(chǎn)品使用說(shuō)明書(shū)，所以畫(huà)原型的時(shí)候，項(xiàng)目經(jīng)理應(yīng)該去思考如何能讓UI和技術(shù)人員更快速、準(zhǔn)確的理解原型的交互說(shuō)明？

所以今天就來(lái)和大家分享一下，如何制作出一份完整的交互說(shuō)明？

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

當(dāng)產(chǎn)品經(jīng)理把原型圖畫(huà)好時(shí)，旁邊都會(huì)寫(xiě)上一些關(guān)于產(chǎn)品原型的一些規(guī)則或者是一些操作等等，這些都屬于交互說(shuō)明。所以可以把交互說(shuō)明簡(jiǎn)單理解為是對(duì)產(chǎn)品原型的解釋、強(qiáng)調(diào)、補(bǔ)充。

在公司內(nèi)部，會(huì)把交互說(shuō)明當(dāng)成一個(gè)簡(jiǎn)單的、初步的產(chǎn)品使用說(shuō)明書(shū)。我們可以把交互說(shuō)明想象成一座橋，橋的一端站著項(xiàng)目經(jīng)理，另一端站著UI設(shè)計(jì)師和程序員，通過(guò)橋的連接，能讓產(chǎn)品經(jīng)理把產(chǎn)品操作規(guī)則、限制條件、變化形式等，準(zhǔn)確的讓程序員和UI設(shè)計(jì)師了解，快速地投入到產(chǎn)品制作的工作中，設(shè)計(jì)出產(chǎn)品。

二、如何寫(xiě)一份完整的交互說(shuō)明文檔？

當(dāng)我第一次寫(xiě)交互說(shuō)明的時(shí)候，我非常疑惑，到底交互說(shuō)明要寫(xiě)什么內(nèi)容呢？

做了幾個(gè)項(xiàng)目之后，我的經(jīng)驗(yàn)告訴我：首先，把自己假設(shè)成一個(gè)用戶，當(dāng)我在使用這個(gè)產(chǎn)品時(shí)，我希望這個(gè)產(chǎn)品能怎樣的簡(jiǎn)化我的操作路徑？

其次，我角色從用戶變成產(chǎn)品經(jīng)理，我希望讓用戶看到什么，使用什么功能？最后，我又從產(chǎn)品經(jīng)理變成技術(shù)人員，這個(gè)功能到底可不可行？符不符合實(shí)際情況？根據(jù)這三種不同的身份，寫(xiě)出產(chǎn)品的交互說(shuō)明。

1. 步驟一：統(tǒng)一思維

為了讓文檔的視覺(jué)性更強(qiáng)，就需要做到一個(gè)統(tǒng)一。比如你的機(jī)模要統(tǒng)一，操作規(guī)則、字體大小行間距都需要統(tǒng)一，包括思維也要統(tǒng)一。

統(tǒng)一思維，就是要把用戶想象成豬，又笨又懶，不要認(rèn)為用戶肯定不會(huì)做這個(gè)錯(cuò)誤，所以不寫(xiě)出來(lái)。要保證整個(gè)產(chǎn)品的嚴(yán)謹(jǐn)性，比如登錄頁(yè)面，如果你登錄不了，那到底是手機(jī)出錯(cuò)，還是驗(yàn)證碼出錯(cuò)，你都需要告訴用戶，不然用戶云里霧里登錄得太麻煩，他就不登陸了，那你就失去了一個(gè)用戶。

所以在寫(xiě)錯(cuò)誤提醒說(shuō)明的時(shí)候，只要說(shuō)出錯(cuò)誤的原因，也要給出解決的方法，讓用戶覺(jué)得你這個(gè)產(chǎn)品是人性化的，不會(huì)激起用戶的憤怒感，從而繼續(xù)使用產(chǎn)品。

2. 步驟二：明確每個(gè)要寫(xiě)的部分——頁(yè)面、模塊、交互說(shuō)明

我在工作中習(xí)慣把交互說(shuō)明文檔分成三個(gè)部分，第一個(gè)部分是頁(yè)面，第二個(gè)部分是模塊，第三個(gè)模塊是交互說(shuō)明。

首先，你需要把你構(gòu)思的產(chǎn)品在文檔里畫(huà)出來(lái)，把產(chǎn)品的每一個(gè)頁(yè)面都畫(huà)到交互說(shuō)明文檔來(lái)，放在頁(yè)面這個(gè)部分。

所有頁(yè)面兩種狀態(tài)：一種是進(jìn)入即可看見(jiàn)的狀態(tài)，另一種是操作后狀態(tài)（隱藏狀態(tài)），只需要畫(huà)一種狀態(tài)即可，另一種狀態(tài)的變化規(guī)則要寫(xiě)進(jìn)交互說(shuō)明。頁(yè)面需要整潔清晰，布局統(tǒng)一。不需要花里胡哨的顏色，只需要簡(jiǎn)單的基礎(chǔ)色黑白灰等就行。我們不是UI，不需要為產(chǎn)品上色，只要能區(qū)別即可。

然后，把每一個(gè)會(huì)變化的、需要解釋說(shuō)明的模塊，單獨(dú)拖到模塊這一部分。接下去的交互說(shuō)明呢，就是根據(jù)一個(gè)個(gè)模塊來(lái)寫(xiě)的。

第三部分的交互說(shuō)明一定要寫(xiě)得很詳細(xì)，千萬(wàn)不要吝嗇文字，要寫(xiě)清楚限制條件。

我剛?cè)胄械臅r(shí)候那時(shí)候只是產(chǎn)品助理，遇到過(guò)一個(gè)情況：有一個(gè)項(xiàng)目，由兩個(gè)產(chǎn)品經(jīng)理負(fù)責(zé)，其中一個(gè)產(chǎn)品經(jīng)理寫(xiě)的交互說(shuō)明寫(xiě)得不夠細(xì)致，導(dǎo)致程序員沒(méi)有看懂。程序員就不斷地問(wèn)項(xiàng)目經(jīng)理，被項(xiàng)目經(jīng)理痛罵，說(shuō)他腦子不好使，程序員吃了癟。

再后來(lái)，程序員遇到自己看不懂的地方，就按照自己的想法來(lái)，搞得項(xiàng)目一拖再拖。兩個(gè)人都被人事批了一頓。

從此以后，每當(dāng)我寫(xiě)交互的時(shí)候，我常常反思：該怎么把交互說(shuō)明寫(xiě)得細(xì)致呢？如何一針見(jiàn)血地把要點(diǎn)表達(dá)出來(lái)？那就要從以下3個(gè)維度分析：

1. 按鈕、圖標(biāo)等操作以后出現(xiàn)的狀態(tài)變化。
2. 刷新、加載（上劃下滑）、數(shù)字顯示等頁(yè)面規(guī)則。
3. 錯(cuò)誤提醒、彈窗等。

使用過(guò)微博的朋友應(yīng)該了解，當(dāng)你看到一篇你覺(jué)得寫(xiě)的不錯(cuò)的文章時(shí)，你給這篇文章點(diǎn)了個(gè)贊，它的愛(ài)心圖標(biāo)就由空心的愛(ài)心變成了紅色愛(ài)心，并且愛(ài)心后面的數(shù)字也往上加一。如果超過(guò)100萬(wàn)人點(diǎn)贊的話，就會(huì)一直顯示100萬(wàn)+。這些按鈕的變化或者一些數(shù)字的顯示規(guī)則，都需要寫(xiě)到交互說(shuō)明里面。

你在刷抖音的時(shí)候，在刷新的時(shí)候，你有沒(méi)有想過(guò)它一次能加載幾條視頻？我就這么無(wú)聊，還真的去數(shù)了，但我不記得準(zhǔn)確的數(shù)字了，好像是30個(gè)。如果你在寫(xiě)加載規(guī)則的時(shí)候，也記得把加載出幾條內(nèi)容也寫(xiě)進(jìn)規(guī)則里面。

我分析過(guò)36氪的賬號(hào)密碼登錄頁(yè)面，（除了賬號(hào)密碼登錄頁(yè)面還有驗(yàn)證碼登陸頁(yè)面、一鍵登錄頁(yè)面）。

例如用戶再點(diǎn)擊這個(gè)區(qū)號(hào)時(shí)，頁(yè)面會(huì)跳出彈窗，這時(shí)候我們也得把彈窗的樣子畫(huà)出來(lái)，包括彈窗的一些操作規(guī)則也得說(shuō)清楚。

如果用戶在輸入手機(jī)號(hào)，會(huì)獲取光標(biāo)提示文字消失，尾部出現(xiàn)刪除的按鈕，這些規(guī)則是需要寫(xiě)進(jìn)交互說(shuō)明的。

包括用戶將手機(jī)號(hào)格式輸入錯(cuò)誤時(shí)，就是不等于11位開(kāi)頭也不為1時(shí)，點(diǎn)擊按鈕出現(xiàn)的錯(cuò)誤提示，請(qǐng)輸入正確的手機(jī)號(hào)。這個(gè)錯(cuò)誤提示也是需要說(shuō)明的。

分析一下以上操作時(shí)，最好把該頁(yè)面的全局說(shuō)明、頁(yè)面說(shuō)明、頁(yè)面權(quán)限、使用場(chǎng)景交代清楚。就是要把頁(yè)面進(jìn)入的方式，跳轉(zhuǎn)到哪些頁(yè)面；是VIP才能使用的，還是普通用戶也能使用的；用戶是在什么樣的場(chǎng)景下會(huì)使用該頁(yè)面；等等關(guān)于頁(yè)面的都可以說(shuō)。這樣可以讓UI在設(shè)計(jì)的時(shí)候更加個(gè)性化、人性化。

3. 步驟三：檢查

對(duì)一些隱藏狀態(tài)的規(guī)則，和錯(cuò)誤提醒的設(shè)計(jì)一定要寫(xiě)清楚限制條件。

比如返回鍵千萬(wàn)不要忘記畫(huà)，既然能進(jìn)入到這個(gè)頁(yè)面，就要能往回退到前一個(gè)頁(yè)面，要能進(jìn)就能退。

同理，有成功就有失敗，你既然能夠操作成功，就有操作失敗的時(shí)候。比如你使用發(fā)布功能，如果字?jǐn)?shù)超出限制，就不能發(fā)送成功，就會(huì)失敗，所以這些規(guī)則都得制定好。要睜大雙眼檢查自己可能會(huì)出錯(cuò)的地方。

四字真言：增刪查改。對(duì)于缺少的內(nèi)容，補(bǔ)充完整。

比如用戶在發(fā)表評(píng)論時(shí)，需要限制評(píng)論字?jǐn)?shù)，但在交互說(shuō)明中并沒(méi)有寫(xiě)，你就需要補(bǔ)充上去，留下能表達(dá)出意思的說(shuō)明即可。如果你從元件庫(kù)里拖出來(lái)的按鈕，你還解釋了一遍，說(shuō)明這個(gè)解釋是不需要的，因?yàn)閺脑?kù)庫(kù)里拖出來(lái)的按鈕，他已經(jīng)有含義了，不需要你再去解釋一遍。

三、總結(jié)

產(chǎn)品經(jīng)理在寫(xiě)交互說(shuō)明的時(shí)候，需要不斷地提出問(wèn)題，思考：這個(gè)功能要為什么要這么放？它需要怎么變化？用戶希望產(chǎn)品是怎么樣的？

寫(xiě)清楚操作內(nèi)容、限制條件，但要拒絕流水賬式說(shuō)明，另外當(dāng)描述文字過(guò)長(zhǎng)，看是自己在語(yǔ)言表達(dá)上存在問(wèn)題，還是可能需要重新考慮是否是設(shè)計(jì)邏輯存在問(wèn)題。

如果有一些核心功能、重點(diǎn)內(nèi)容、復(fù)雜難懂的交互，可以在必要的情況下，需要先跟團(tuán)隊(duì)強(qiáng)調(diào)交互說(shuō)明的存在意義，推動(dòng)大家去閱讀和反饋，才能對(duì)產(chǎn)品的發(fā)展起到真實(shí)有效的作用。如果交付文檔后，UI或者程序員實(shí)在有看不懂的地方，也要?dú)g迎他們隨時(shí)來(lái)問(wèn)，避免以后出現(xiàn)更復(fù)雜的問(wèn)題。

本文由大呂不加班 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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