在項(xiàng)目開發(fā)中，交互文檔是其中的一個(gè)重要組成部分，在互聯(lián)網(wǎng)發(fā)展進(jìn)程加速的過程中，統(tǒng)一規(guī)范的交互文檔能夠提高團(tuán)隊(duì)的辦公效率。但很多交互文檔的寫法五花八門，普適性不強(qiáng)。作者結(jié)合實(shí)戰(zhàn)案例，分享了遵從基礎(chǔ)的規(guī)范細(xì)節(jié)且適合團(tuán)隊(duì)人員閱讀的交互文檔。

交互文檔是項(xiàng)目開發(fā)中一個(gè)很重要的組成部分，在互聯(lián)網(wǎng)飛速發(fā)展迭代的產(chǎn)品開發(fā)過程中，統(tǒng)一且規(guī)范的交互文檔撰寫模式讓團(tuán)隊(duì)運(yùn)作效率更高。交互文檔寫的好與不好本身其實(shí)沒有絕對的統(tǒng)一標(biāo)準(zhǔn)，也不要認(rèn)為大公司的文檔就是最好的。

以前也在網(wǎng)上學(xué)習(xí)了很多大公司交互文檔的寫法，都是五花八門的，而且每個(gè)公司的項(xiàng)目規(guī)模不一樣、人員對文檔的閱讀習(xí)慣不一樣，所以一昧地照搬模仿只會收效甚微，而遵從基礎(chǔ)的規(guī)范細(xì)節(jié)且適合團(tuán)隊(duì)人員閱讀的交互文檔才是最有效率的！

1. 交互文檔的價(jià)值
2. 交互文檔的組成
3. 交互文檔的規(guī)范和撰寫

這篇文章關(guān)于交互文檔撰寫以“蘇寧智慧屏項(xiàng)目”為實(shí)戰(zhàn)案例進(jìn)行講解，經(jīng)優(yōu)化迭代之后得到的項(xiàng)目總結(jié)和思考，僅供參考。

一、交互文檔的價(jià)值

交互文檔的主要使用人員是交互設(shè)計(jì)師和界面設(shè)計(jì)師、產(chǎn)品經(jīng)理、開發(fā)工作人員（前后端工程師，測試專員）。

蘇寧智能終端智慧屏是復(fù)雜的系統(tǒng)級業(yè)務(wù)，項(xiàng)目人員配置都是一個(gè)籮卜一個(gè)坑，以保證開發(fā)的每個(gè)環(huán)節(jié)都能精益求精。不過在UED內(nèi)部，視覺設(shè)計(jì)和交互設(shè)計(jì)的職責(zé)是比較重疊的，所以基本一個(gè)設(shè)計(jì)師會單獨(dú)負(fù)責(zé)整個(gè)模塊的交互和視覺工作。

這樣對產(chǎn)品的創(chuàng)新延展也會有很大幫助，基本交互文檔的存在不會影響設(shè)計(jì)的發(fā)揮。雙重身份的加持可以讓設(shè)計(jì)和交互并行。直接針對已立項(xiàng)的需求進(jìn)行設(shè)計(jì)思考。

交互文檔是在ued內(nèi)部進(jìn)行制定評審后形成一個(gè)基礎(chǔ)的框架，這里的交互文檔規(guī)范必須要嚴(yán)謹(jǐn)，把控細(xì)節(jié)，考慮全面。組織各部門協(xié)同討論交互文檔初稿，提出改進(jìn)意見后并整理同步給相關(guān)人員，并做一份交互文檔說明供以后新來的同事做參考和學(xué)習(xí)。

不同的公司對于文檔的要求都會有差異，小公司可能沒有專門的交互崗位，基本上產(chǎn)品經(jīng)理會通過合并需求和交互文檔會作為項(xiàng)目的唯一一份文檔，但產(chǎn)品經(jīng)理不是專業(yè)的交互設(shè)計(jì)師，他們可以講清楚業(yè)務(wù)的規(guī)則和邏輯，但很多細(xì)節(jié)還是需要設(shè)計(jì)師來優(yōu)化設(shè)計(jì)。

交互文檔閱讀的舒適度，信息完整度等也會影響到技術(shù)人員的開發(fā)心情。經(jīng)常在評審的過程中會遇到到技術(shù)人員提出的各種問題，有抱怨需求的，有抱怨文檔不規(guī)范的，有質(zhì)疑專業(yè)度的。

所以交互文檔必須評審實(shí)時(shí)同步給技術(shù)人員以達(dá)成共識，在UED部門輸出的交互文檔的架構(gòu)的基礎(chǔ)上去優(yōu)化，采納各部門使用人員的意見，形成一份高效率且適合團(tuán)隊(duì)的交互文檔格式。交互文檔的價(jià)值簡言之就是協(xié)調(diào)各部門之間溝通的工具。能提高大家工作效率的工具自然是最合適的。

二、交互文檔的組成

交互文檔的組成部分不一定要很全，但需要挑選重點(diǎn)內(nèi)容，表達(dá)得當(dāng)，就可以最大程度的發(fā)揮交互文檔的價(jià)值。

如果真的把組成部分都寫全，那閱讀的人看起來也非常吃力，蘇寧智慧屏項(xiàng)目交互文檔的基礎(chǔ)組成分為：需求描述和業(yè)務(wù)目標(biāo)、設(shè)計(jì)目標(biāo)、調(diào)研分析、流程圖（業(yè)務(wù)、任務(wù)、界面），設(shè)計(jì)方案、交互規(guī)則說明、版本說明、全局的設(shè)計(jì)規(guī)范（這部分在交互設(shè)計(jì)文檔1.0的時(shí)候就會完善，之后的版本寫相關(guān)功能的交互規(guī)范說明時(shí)，遇到類似描述不會做過多帶入，除特殊場景，或交互方式有重新定義，那么會補(bǔ)充到此版本和全局規(guī)范當(dāng)中）。

注意：并不是每一個(gè)功能都要對應(yīng)這些組成，通常優(yōu)先級比較高的需求盡量會有全而多的組成部分。對應(yīng)的小需求可簡略分析說明對應(yīng)文案、跳轉(zhuǎn)即可。（以“詳情頁訂閱功能”為例，因?yàn)檫@個(gè)功能優(yōu)先級比較高，業(yè)務(wù)關(guān)聯(lián)比較多，所以這個(gè)功能的交互組成會比較全）。

1. 版本說明

2. 需求描述和業(yè)務(wù)目標(biāo)

3. 設(shè)計(jì)目標(biāo)與策略

1. 主推TV登錄訂閱，移動端關(guān)注公眾號訂閱；
2. 優(yōu)化登錄關(guān)注流程，云鉆激勵(lì)連續(xù)兩次掃碼；
3. 再次使用時(shí)無需重復(fù)關(guān)注。

4. 調(diào)研分析

競品分析方式用“詳情頁改版設(shè)計(jì)”為例作簡要說明。

1）改版背景

小窗播放詳情頁承載很多視頻的重要信息內(nèi)容（視頻名稱，視頻基礎(chǔ)信息、基礎(chǔ)功能、運(yùn)營活動，會員購買，選集等），在蘇寧智慧屏低端機(jī)上需要精細(xì)化設(shè)計(jì)布局，剔除冗余的設(shè)計(jì)信息，提升視覺效果和信息層次，高端機(jī)需要使用沉浸式設(shè)計(jì)方式提升用戶體驗(yàn)和視覺觀感。（下圖為Biu os4.3版本詳情頁）

2）改版立項(xiàng)

在蘇寧的實(shí)際項(xiàng)目工作中，設(shè)計(jì)師可以參與需求和設(shè)計(jì)改版的討論，并由設(shè)計(jì)部門發(fā)起需求立項(xiàng)，因?yàn)閁ED設(shè)計(jì)部們的小伙伴會在版本上線以后，會去做很多次的設(shè)計(jì)體驗(yàn)測試，去發(fā)現(xiàn)一些設(shè)計(jì)、功能、體驗(yàn)等問題。

總結(jié)歸納之后，會針對具體的問題思考后續(xù)的設(shè)計(jì)優(yōu)化，設(shè)計(jì)與產(chǎn)品相沖突的部分會提前和產(chǎn)品溝通協(xié)調(diào)后決定是否可以由UED設(shè)計(jì)部發(fā)起改版立項(xiàng)并跟進(jìn)。

3）改版原因

改版原因可分為以下幾點(diǎn)：實(shí)際上線數(shù)據(jù)以及用戶調(diào)研、產(chǎn)品測試反饋；

1. 存在問題：詳情頁頁面對于用戶讀取信息的體驗(yàn)不好，線上數(shù)據(jù)反饋用戶頁面停留時(shí)間短，會員購買及續(xù)費(fèi)轉(zhuǎn)化率比較低。
2. 改版重要性：好的詳情頁設(shè)計(jì)不光只是為了提升用戶體驗(yàn)，同時(shí)也能夠讓設(shè)計(jì)賦能產(chǎn)品的商業(yè)價(jià)值，增加產(chǎn)品收入。
3. 改版結(jié)論：需要通過對詳情頁的設(shè)計(jì)改版，提升用戶體驗(yàn)和會員購買效率。

4）改版調(diào)研

用戶調(diào)研通過內(nèi)部和外部用戶的用戶調(diào)研，我們歸納了用戶主要的痛點(diǎn)如下：

• 關(guān)于導(dǎo)演演員的信息介紹的內(nèi)容權(quán)重過高；
• 需要增加視頻關(guān)鍵詞標(biāo)簽和熱劇排行，引導(dǎo)用戶資源內(nèi)容選擇 ；
• 主要功能點(diǎn)層次分散，設(shè)計(jì)整體太普通，功能區(qū)視覺沒有識別性。

競品分析：

通過競品分析，去觀察競品是如何優(yōu)化詳情頁設(shè)計(jì)，參考競品：騰訊、優(yōu)酷、愛奇藝、小米進(jìn)行調(diào)研。（下圖為詳情頁頁面競品分析比較）

5）改版推進(jìn)

這個(gè)改版需求是智慧屏系統(tǒng)設(shè)計(jì)的冰山一角，但僅僅這個(gè)需求就有很多的問題點(diǎn)需要設(shè)計(jì)師去反復(fù)思考，分析，出方案，評審到最終跟進(jìn)落地，同時(shí)改版需要結(jié)合項(xiàng)目資源判斷是否適合做優(yōu)化迭代，設(shè)計(jì)改版時(shí)，如果改動使功能和交互有沖突，導(dǎo)致了前后端數(shù)據(jù)架構(gòu)的調(diào)整，也會增加開發(fā)成本。

所以在立項(xiàng)之前需要結(jié)合數(shù)據(jù)、用戶反饋和競品分析、優(yōu)化方案等，準(zhǔn)備充分，這樣評審的時(shí)候才能夠有機(jī)會說服技術(shù)人員對改版意見保持一致，然后再去具體細(xì)化。（下圖為Biu os5.2版本詳情頁）

5. 流程圖（業(yè)務(wù)、任務(wù)、界面）

業(yè)務(wù)流程是由產(chǎn)品經(jīng)理或高級交互設(shè)計(jì)師通過泳道圖繪制，交互文檔的主要流程圖就是任務(wù)流程圖，頁面流程圖主要是為了去呈現(xiàn)頁面跳轉(zhuǎn)，此部分通過頁面交互說明來描述。

6. 設(shè)計(jì)方案

• 主推登錄TV訂閱提醒，關(guān)注公眾號微信提醒，掃碼登錄的彈框與關(guān)注的彈框頁面結(jié)構(gòu)保持一致，讓用戶連貫的完成任務(wù)；
• 為了激勵(lì)用戶掃碼登錄和關(guān)注，提醒送云鉆的獎(jiǎng)勵(lì)；
• 關(guān)注成功TV端需要toast提示，按鈕有明確的文案提示；
• 移動端提醒消息要有明確的影片名稱提示；
• 對一些誤操作沒有進(jìn)行微信關(guān)注的用戶提供統(tǒng)一的關(guān)注入口。

7. 交互規(guī)則說明

業(yè)務(wù)規(guī)則、數(shù)據(jù)規(guī)則、適配規(guī)則、文案說明、交互說明等。

8. 全局的規(guī)范

智慧屏的全局規(guī)范包括用戶權(quán)限、交互流程、登錄方式、系統(tǒng)模式選擇、內(nèi)容（圖片比例、文字選擇），運(yùn)營位使用規(guī)范、交互的組件、交互狀態(tài)的反饋和提示（無網(wǎng)絡(luò)、物理斷網(wǎng)）、加載，蘇寧智慧屏規(guī)范制定時(shí)單獨(dú)將這些內(nèi)容從交互文檔里面剝離出來，整理出另外兩份文檔：交互設(shè)計(jì)規(guī)范和運(yùn)營使用規(guī)范文件。

三、交互文檔的撰寫和規(guī)范

界面和設(shè)計(jì)說明的布局、交互說明規(guī)范化、頁面目錄拆分規(guī)則、交互原型稿設(shè)計(jì)、交互說明的優(yōu)化。

1. 界面和設(shè)計(jì)說明的布局

說明布局遵循左邊為頁面，右邊為文字描述的方式。而且每一橫行只展示一個(gè)頁面，新頁面另起一行。撰寫交互文檔的軟件為axure，最終是需要將文件導(dǎo)成網(wǎng)頁htnl格式，方便技術(shù)人員使用瀏覽器查看。網(wǎng)頁瀏覽是通過鼠標(biāo)縱向滾動來查看內(nèi)容，上下滾動瀏覽符合操作習(xí)慣。

2. 交互文檔元素對應(yīng)規(guī)則

首先進(jìn)入一個(gè)界面，可以講頁面進(jìn)行模塊化一個(gè)個(gè)拆分，利用英文字母或者數(shù)字和內(nèi)容進(jìn)行對應(yīng)，蘇寧智慧平項(xiàng)目中采用和字母和熟悉相結(jié)合的方案去標(biāo)記頁面和元素，比如（字母A對應(yīng)一張頁面，A-1對應(yīng)頁面中的某一個(gè)模塊，模塊可以由自己去定義，可以是信息或者功能。

3. 交互文檔名詞標(biāo)點(diǎn)符號規(guī)則

此處參考了《產(chǎn)品文檔中，特殊標(biāo)點(diǎn)符號的使用建議》。

頁面當(dāng)描述的內(nèi)容包含某個(gè)菜單頁面的時(shí)候，建議使用「」或者“”，后面增加名詞修飾。

Tab欄或狀態(tài)：當(dāng)描述的內(nèi)容包含了某個(gè)頁面下的Tab信息或狀態(tài)的時(shí)候，建議使用「」或者“”，后面增加名詞修飾。

字段或者行內(nèi)代碼：當(dāng)描述的內(nèi)容包含某個(gè)新增的字段的時(shí)候，建議使用 反引號（`code`）來表示。

按鈕或者功能：當(dāng)描述的內(nèi)容中需要點(diǎn)擊某個(gè)按鈕或者使用某個(gè)功能的時(shí)候，建議使用【】來表示，不建議使用「」是怕直角引號太多，代表的含義太雜引起閱讀負(fù)擔(dān)。

智能終端舉例：我的會員權(quán)益模塊

先打開「會員權(quán)益頁」，然后落焦“Biu教育”會員tab，選擇對應(yīng)的會員類型，落焦按【確認(rèn)】鍵。由于確認(rèn)購買完成之后，返回此頁面，按鈕狀態(tài)會變?yōu)槔m(xù)約。需要新增‘續(xù)約’字段。

4. 交互說明分類

交互文檔內(nèi)容分類主要為：規(guī)則說明（業(yè)務(wù)規(guī)則、數(shù)據(jù)規(guī)則、適配規(guī)則、文案說明）、操作反饋、評審備注作為后續(xù)功能交互文檔的細(xì)節(jié)補(bǔ)充。

分類說明除了文字表述之外，還可以建立表格式的展示方式，針對不同的功能說明可以合理使用，如下圖詳情頁的功能文案規(guī)則和操作說明使用表格的方式替代文字表述，清晰明了。

5. 頁面目錄拆分規(guī)則

每個(gè)模塊頁面最多不要超多6個(gè)。

• 如果一個(gè)界面中有多個(gè)功能，可另起一行作為子頁面說明每一個(gè)功能；子頁面下有如果很多狀態(tài)頁面，可再另起一行放置；
• 如果一個(gè)界面有多個(gè)內(nèi)容類型，可在同一級頁面下增加一個(gè)頁面；
• 如果一個(gè)功能，有多個(gè)業(yè)務(wù)流程，可拆解成多個(gè)頁面。

6. 交互原型稿設(shè)計(jì)

移動端習(xí)慣使用黑白灰的填充色塊去做交互設(shè)計(jì)原型稿，顏色取值深度、中度、淺度三種來保持原型頁面的色彩平衡，智慧屏選取的是線框加色塊的處理樣式，因?yàn)橹悄芷脸叽缦鄬^大，信息承載更多，選用線框樣式更為簡單，所以不管什么樣的形式，適合團(tuán)隊(duì)的才是最好的。

7. 交互說明的優(yōu)化

交互評審時(shí)，需要高度保持注意力去記錄技術(shù)人員關(guān)于功能的一些細(xì)節(jié)的問題，作為后續(xù)交互文檔的補(bǔ)充，對于業(yè)務(wù)和交互的一些規(guī)則在評審時(shí)需要幾下更改的點(diǎn)，所以我們在評審后會進(jìn)行完善修改，更改后用“紅色文字”做標(biāo)記。（見交互說明分類配圖）

總結(jié)

以上就是我想和大家分享的關(guān)于交互文檔撰寫的相關(guān)內(nèi)容，項(xiàng)目的本質(zhì)除了考慮商業(yè)價(jià)值和用戶體驗(yàn)之外，還要去節(jié)省人力和時(shí)間成本，提升開發(fā)效率。能讓項(xiàng)目有效率的推進(jìn)的東西肯定是有價(jià)值的。所以多思考，多理解，多認(rèn)真的去傾聽項(xiàng)目組人員的反饋，精雕細(xì)琢去做一份契合自己團(tuán)隊(duì)的交互文檔吧！

注釋：項(xiàng)目版權(quán)歸屬蘇寧智能終端有限公司