2023年交互文檔的撰寫-實(shí)戰(zhàn)案例講解

交互文檔的撰寫——實(shí)戰(zhàn)案例講解交互文檔是項(xiàng)目開發(fā)中一個(gè)很重要的組成部分，在互聯(lián)網(wǎng)飛速進(jìn)展迭代的產(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ī)模不一樣、人員對(duì)文檔的閱讀習(xí)慣不一樣，所以一昧地照搬仿照只會(huì)收效甚微，而遵從基礎(chǔ)的規(guī)范細(xì)節(jié)且適合團(tuán)隊(duì)人員閱讀的交互文檔才是最有效率的！

交互文檔的價(jià)值交互文檔的組成交互文檔的規(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ā)工作人員（前后端工程師，測(cè)試專員）。

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

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

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

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

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

所以交互文檔必需評(píng)審實(shí)時(shí)同步給技術(shù)人員以達(dá)成共識(shí)，在UED部門輸出的交互文檔的架構(gòu)的基礎(chǔ)上去優(yōu)化，接受各部門使用人員的看法，形成一份高效率且適合團(tuán)隊(duì)的交互文檔格式。交互文檔的價(jià)值簡(jiǎn)言之就是協(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í)候就會(huì)完善，之后的版本寫相關(guān)功能的交互規(guī)范說明時(shí)，遇到類似描述不會(huì)做過多帶入，除特別場(chǎng)景，或交互方式有重新定義，那么會(huì)補(bǔ)充到此版本和全局規(guī)范當(dāng)中）。

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

1.版本說明

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

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

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

4.調(diào)研分析

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

1）改版背景

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

2）改版立項(xiàng)

在蘇寧的實(shí)際項(xiàng)目工作中，設(shè)計(jì)師可以參加需求和設(shè)計(jì)改版的爭(zhēng)論，并由設(shè)計(jì)部門發(fā)起需求立項(xiàng)，由于UED設(shè)計(jì)部們的小伙伴會(huì)在版本上線以后，會(huì)去做許多次的設(shè)計(jì)體驗(yàn)測(cè)試，去發(fā)覺一些設(shè)計(jì)、功能、體驗(yàn)等問題。

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

3）改版緣由

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

存在問題：詳情頁頁面對(duì)于用戶讀取信息的體驗(yàn)不好，線上數(shù)據(jù)反饋用戶頁面停留時(shí)間短，會(huì)員購(gòu)買及續(xù)費(fèi)轉(zhuǎn)化率比較低。改版重要性：好的詳情頁設(shè)計(jì)不光只是為了提升用戶體驗(yàn)，同時(shí)也能夠讓設(shè)計(jì)賦能產(chǎn)品的商業(yè)價(jià)值，增加產(chǎn)品收入。改版結(jié)論：需要通過對(duì)詳情頁的設(shè)計(jì)改版，提升用戶體驗(yàn)和會(huì)員購(gòu)買效率。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ū)視覺沒有識(shí)別性。競(jìng)品分析：

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

5）改版推動(dòng)

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

所以在立項(xiàng)之前需要結(jié)合數(shù)據(jù)、用戶反饋和競(jìng)品分析、優(yōu)化方案等，預(yù)備充分，這樣評(píng)審的時(shí)候才能夠有機(jī)會(huì)勸說技術(shù)人員對(duì)改版看法保持全都，然后再去詳細(xì)細(xì)化。（下圖為Biuos5.2版本詳情頁）

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

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

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

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

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

8.全局的規(guī)范

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

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

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

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

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

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

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

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

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

頁面當(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í)候，建議使用反引號(hào)（`code`）來表示。

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

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

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

4.交互說明分類

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

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

5.頁面名目拆分規(guī)章

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

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

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

移動(dòng)端習(xí)慣使用黑白灰的填充色塊去做交互設(shè)計(jì)原型稿，顏色取值深度、中度、淺度三種來保持原型頁面的顏色平衡，才智屏選取的是線框加色塊的處理樣式，由于智能屏尺寸相對(duì)較大，信息承載更多，選用線框樣式更為簡(jiǎn)潔，所以不管什么樣的形式，適合團(tuán)隊(duì)的才是最好的。

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

交互評(píng)審時(shí)，需要高度保持留意力去記錄技術(shù)人員關(guān)于功能的一些細(xì)節(jié)的問題，作為后續(xù)交互文檔的補(bǔ)充，對(duì)于業(yè)務(wù)和交互的一些規(guī)章