作者：青溪Joanna
微信公眾號：青溪札記（ID：qingxizhaji）
作者授權(quán)早讀課發(fā)表，轉(zhuǎn)載請聯(lián)系作者。
交互說明文檔，是交互設(shè)計師的輸出物中必不可少的一項，它關(guān)系著設(shè)計方案能否最大程度的被實現(xiàn)。交互新人，大多會煩惱如何寫交互文檔，今天來聊聊這個話題。
交互文檔可以看做交互設(shè)計師輸出的”產(chǎn)品”，它面向的”用戶”是下游的同事——視覺設(shè)計師、測試工程師、開發(fā)工程師。他們會根據(jù)文檔中的線框圖、交互細(xì)節(jié)說明等等，來輸出視覺設(shè)計稿、寫測試用例、用代碼實現(xiàn)產(chǎn)品設(shè)計方案，并以此為依據(jù)完成驗收測試等工作。
最初寫交互文檔時，很多人會有疑惑該寫些什么內(nèi)容。我的看法是，開發(fā)同事在寫代碼時需要考慮的與界面顯示邏輯、用戶操作相關(guān)的內(nèi)容，幾乎都要在交互文檔中體現(xiàn)，建議越全面越好。
如果有遺漏的內(nèi)容，開發(fā)可能會找你討論，也可能懶得費時間溝通直接按照自己的理解去實現(xiàn)。最終，驗收測試的效果不如意，你也不能全賴開發(fā)。所以盡量將交互文檔寫的全面些，別消費開發(fā)同事對你的信賴值。
那么，到底交互文檔中，需要寫哪些內(nèi)容呢？
1、頁面流程（界面之間）
頁面流程圖，可以表達(dá)產(chǎn)品的整體結(jié)構(gòu)，幫助同事了解界面之間的關(guān)系。在撰寫交互文檔時，也可以以任務(wù)、子任務(wù)為模塊來詳細(xì)介紹界面如何跳轉(zhuǎn)、何時跳轉(zhuǎn)。
2、內(nèi)容布局（界面內(nèi)）
3、交互操作與反饋（界面內(nèi)）
根據(jù)用戶與界面之間發(fā)生的交互操作，提供相應(yīng)的反饋，可能是提示內(nèi)容，也可能是界面內(nèi)或界面之間的跳轉(zhuǎn)。
剛?cè)腴T的交互新人，喜歡把重心放在界面之間的跳轉(zhuǎn)，而遺漏了界面內(nèi)的內(nèi)容布局和交互操作。對此，我的小技巧是，先整體看界面全局，再review界面上的每一個元素，思考各種不同場景下這些元素是否變化、如何變化。
下圖，是一個簡單的登錄界面，我們試著先整體后部分的方式，看看這個界面的交互說明需要考慮哪些方面。
1、登錄界面的跳轉(zhuǎn)流程
2、賬號輸入框
3、密碼輸入框
4、登錄按鈕
5、注冊按鈕
6、關(guān)閉按鈕
以上只是拋磚引玉，給大家打開思路。雖然只是幾個輸入框，但其細(xì)節(jié)比大多數(shù)界面都要復(fù)雜。你可以找一款優(yōu)秀的APP，去研究它如何設(shè)計這些細(xì)節(jié)，是否還有我沒有提到的點，研究透了下次自己設(shè)計才能做到更加全面。
當(dāng)然，交互細(xì)節(jié)說明，只是方案的表述，每一個小點都有好幾種設(shè)計方案。如何權(quán)衡選擇體驗更優(yōu)的方案，才最是考驗交互設(shè)計師的能力。你可以對比研究幾款優(yōu)秀產(chǎn)品，看它們在細(xì)節(jié)設(shè)計有何不同，分析其中的緣由，想想是否有更好的方案，學(xué)無止盡。
交互設(shè)計師的目標(biāo)是提升產(chǎn)品的體驗，我們輸出的文檔本身也應(yīng)該有上佳的瀏覽體驗。為了達(dá)到這個目標(biāo)，我也在不斷優(yōu)化文檔的撰寫方式和排版。下面聊聊我嘗試過的幾種方式。
方式1：一頁紙表示所有的線框圖，配上箭頭+簡單的文字說明
網(wǎng)上流傳著很多這種風(fēng)格的圖，最初覺得這樣的圖很有范兒，以為這就是他們輸出的全部交互文檔，所以按照這種模式產(chǎn)出。等到自己做的多了會發(fā)現(xiàn)這類圖大多只表達(dá)了某個界面的正常狀態(tài)，并沒有詳細(xì)的交互說明來體現(xiàn)界面的內(nèi)容布局和交互操作反饋。
方式2：一頁一個界面，每個界面建一個交互說明文件夾，分功能模塊寫交互說明（Web產(chǎn)品）
工具: Axure
Web產(chǎn)品的特點是，層級復(fù)雜，每個界面比較大而且內(nèi)容很豐富。通常會組織好頁面層級，再畫每個界面的原型，待幾輪討論過后界面布局和內(nèi)容基本確定之后，再為每個界面撰寫各自的交互說明。
考慮到每個界面中的內(nèi)容模塊和功能點不少，我沒有在確定好的界面上直接標(biāo)注交互說明，而是將這個界面劃分為幾個功能模塊，并給每個功能模塊新建一個頁面用來寫交互說明。
如下圖，分別是 Axure的文檔目錄（左）、某個功能模塊的交互說明（右）
方式3：一頁顯示一個大功能點的所有界面和交互說明（App 產(chǎn)品）
工具: Axure
App相比Web界面內(nèi)容簡潔很多，很多人輸出App的交互文檔都是一頁展示很多個界面，上下左右排滿了。設(shè)計師大多是大屏電腦，這樣設(shè)計起來確實比較連貫流暢。
但是開發(fā)大多用MacBook，沒有外接的大屏顯示器，一屏看不到幾個界面。雖然我會按照橫向主流程豎向次要或分支流程的規(guī)律排列，但是他們對這些規(guī)律并不熟悉，左右拖拽上下滾動幾次就容易犯暈，可能一會兒就找不到剛看過的界面了。
如下圖，界面右側(cè)配上對應(yīng)的交互說明（通常情況，交互原型應(yīng)該以黑白灰顏色為主，不過因為我們的APP處于迭代優(yōu)化的階段，已經(jīng)確定了視覺風(fēng)格，而且某些狀態(tài)需要用顏色來區(qū)分對錯，所以會有一些配色。）
期間優(yōu)化過這種方式，將大功能點拆分，按照以往設(shè)計Web 產(chǎn)品的方式來組織。對此開發(fā)同事仍然覺得不夠好，所以有了后面ppt/keynote演示文稿的方式。
方式4：一頁介紹一個子任務(wù)，每頁最多4個界面，輸出PDF格式（App 產(chǎn)品）
工具: Axure 畫原型，Keynote 寫交互說明
為什么采用這種方式呢？源于開發(fā)同事看到產(chǎn)品老大介紹需求用的幻燈片，覺得一張圖配一個表格的方式很清晰，強烈建議用這種方式來寫交互文檔。
我覺得用幻燈片輸出PDF 的方式確實可取，易于瀏覽。不過一頁一個圖太零散，界面之間、界面內(nèi)容的不同狀態(tài)關(guān)鍵性很強，放在一起介紹更直觀。
于是，我想到了以前 yoyo 在騰訊CDC 官方博客上分享的交互文檔撰寫方式。以前嘗試過用他推薦的indesign寫文檔，但對這個工具不那么習(xí)慣以至于效率并不高，嘗試過寫完一個產(chǎn)品的交互文檔之后就沒再用了。不過 yoyo 推薦的將大故事拆分為一個個小故事來寫交互說明的方法讓我記憶猶新。
就這樣，嘗試了這種新的搭配方式，Axure 畫原型，Keynote 寫交互說明。
Keynote縮略圖預(yù)覽如下圖，為每個功能模塊建立一個任務(wù)/子任務(wù)的目錄結(jié)構(gòu)，按照劃分的結(jié)構(gòu)依次介紹各個子任務(wù)。每個頁面最多介紹四個界面，頁面底部作為固定的區(qū)域用來寫交互說明。
測試、開發(fā)同事反饋這種方式不錯，一方面是因為每頁文檔的結(jié)構(gòu)大小一致，滑動瀏覽的體驗也更好；另一方面是因為他們寫代碼也是按照這樣的方式一個小模塊一種場景依次往下走，更容易專注看當(dāng)前寫的這個模塊的交互說明。
雖然有同事的肯定，但這種方式還有優(yōu)化的空間。因為采用了兩個工具，一個畫原型一個寫文檔，如果Axure原型有改動，需要復(fù)制到keynote，兩處都要更新顯然影響效率。所以我還在考慮是否切換到某一個工具搞定這兩件事，比如用sketch 。除此之外，文檔模板也可以改進(jìn)優(yōu)化。
就像前面說的，交互說明文檔，就像是交互設(shè)計師輸出的產(chǎn)品，既要根據(jù)場景的變化不斷調(diào)整，又要聽取用戶的意見，持續(xù)優(yōu)化提升體驗。
聯(lián)系客服
