今天給各位分享交互設(shè)計(jì)說(shuō)明文檔模板的知識(shí)，其中也會(huì)對(duì)交互設(shè)計(jì)報(bào)告書進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、項(xiàng)目的交互文檔怎么寫
• 2、交互說(shuō)明怎么寫？
• 3、交互設(shè)計(jì)說(shuō)明文檔內(nèi)容

項(xiàng)目的交互文檔怎么寫

1、交互文檔用來(lái)記錄在交互設(shè)計(jì)過(guò)程中的任何內(nèi)容，供團(tuán)隊(duì)內(nèi)人員或者其他相關(guān)人員使用。

2、從長(zhǎng)遠(yuǎn)來(lái)看，交互文檔對(duì)整個(gè)團(tuán)隊(duì)比較有好處。

一個(gè)好的交互文檔：團(tuán)隊(duì)的新人通過(guò)文檔可以輕松接手。

1、設(shè)計(jì)系統(tǒng) (DS)的說(shuō)明

設(shè)計(jì)團(tuán)隊(duì)有一個(gè)很大的DS，實(shí)際使用時(shí)有些組件的用法和DS里寫的不太一樣。這時(shí)需要記錄下來(lái)到底怎么用、舉列、說(shuō)明建議的用法和不建議的用法等，以便團(tuán)隊(duì)所有設(shè)計(jì)師都能遵守。

還有整個(gè)UX pattern（模型）也可以記錄，放截圖和文字介紹，給新來(lái)的設(shè)計(jì)師或者相關(guān)人員查看。

2、記錄UX設(shè)計(jì)時(shí)做的決定

做復(fù)雜的新產(chǎn)品時(shí)，可以記錄整個(gè)設(shè)計(jì)過(guò)程。如PM給的設(shè)計(jì)要求、Tech的限制、research、設(shè)計(jì)上做決定的理由、最后的設(shè)計(jì)圖等。

方便團(tuán)隊(duì)外成員了解設(shè)計(jì)的理由，防止忘記，方便回看歷史設(shè)計(jì)決策并做優(yōu)化迭代。

3、記錄UI里面的所有文字

亞馬遜特有的記錄所有文案的部分。不建議把UI里面的文字只放到Figma里面，可在UX Documentation建一個(gè)表格，放一些截圖并把各種UI文字放在截圖下面，這樣方便程序員們改文字，也方便UX writer查看所有設(shè)計(jì)師的作品里面用的文字是否有一致性。（有的團(tuán)隊(duì)有UX writer）。

1、使用獨(dú)立文檔，可以用Word文檔等，不建議放在figma或sketch，給相關(guān)人員看的越簡(jiǎn)單越好

2、根據(jù)團(tuán)隊(duì)人員和其他相關(guān)人員的反饋，不斷改善交互文檔

3、亞馬遜的交互文檔模板如下文

1、項(xiàng)目時(shí)間年月

2、項(xiàng)目概述

3、商業(yè)需求或相關(guān)文檔的鏈接

1、該項(xiàng)目解決了核心用戶的什么問(wèn)題

2、用戶對(duì)于一定要到網(wǎng)頁(yè)端支付感到很煩，因?yàn)檫@樣……

3、用戶的需求舉證

產(chǎn)品戰(zhàn)略：XXX

產(chǎn)品范圍：如下圖

產(chǎn)品經(jīng)理：John Smith / john.smith@

開發(fā)主管：Jane Doe / Jane.doe@

軟件開發(fā)工程師：Jack Li / jack.li@

1、相關(guān)調(diào)研的鏈接

2、相關(guān)調(diào)研的要點(diǎn)，例如：90%的用戶有5個(gè)或者更多的銀行賬戶；收款人的平均數(shù)量是16位

對(duì)比圖【方案1圖】【方案2圖】

1、開發(fā)建議修改……因?yàn)椤?/p>

2、設(shè)計(jì)團(tuán)隊(duì)建議新增……因?yàn)椤?/p>

3、……的限制……

【圖】

1、設(shè)計(jì)原則

2、版本迭代的反饋/限制： 相關(guān)人員對(duì)版本迭代的反饋或一些限制因素

【圖】

1、相關(guān)人員評(píng)審和反饋記錄地址XXX

2、交接文件地址XXX

3、設(shè)計(jì)系統(tǒng)更新記錄

最終版反饋

1、設(shè)計(jì)團(tuán)隊(duì)評(píng)審一致通過(guò)方案的日期：2022-02-22，無(wú)異議

2、技術(shù)團(tuán)隊(duì)評(píng)審日期：2022-02-22，關(guān)于XXX有疑問(wèn)，無(wú)其他異議

用戶驗(yàn)收記錄，例如：沒(méi)有用戶測(cè)試的預(yù)算，在測(cè)試版中跟蹤用戶數(shù)據(jù)

【圖】

開發(fā)過(guò)程中的一些備注，例如：2022-02-22，開發(fā)提出XXXXX的方案

1、UX文檔：XXX

2、產(chǎn)品文檔：XXX

3、技術(shù)文檔：XXX

交互說(shuō)明怎么寫？

所謂交互說(shuō)明，簡(jiǎn)單的理解就是對(duì)交互原型的解釋、強(qiáng)調(diào)或補(bǔ)充的說(shuō)明文字。原型頁(yè)面往往無(wú)法展示全部的交互細(xì)節(jié)，即便完全做到了，團(tuán)隊(duì)中的下游也不一定能夠全部get到。所以，一份足夠完整和詳細(xì)的交互說(shuō)明文檔可以減少溝通成本及信息不對(duì)稱。

相信大多數(shù)的交互設(shè)計(jì)師們都有寫交互說(shuō)明的經(jīng)歷。那么大家知道如何完成一份合格的交互說(shuō)明文檔嗎?不妨從以下幾個(gè)角度了解下到底該怎么寫交互說(shuō)明。

首先需要明確交互說(shuō)明的讀者和在項(xiàng)目中的作用：

很明顯作為項(xiàng)目的 交互設(shè)計(jì)師 是交互說(shuō)明的主要撰寫人和維護(hù)者。

在項(xiàng)目進(jìn)程中，交互說(shuō)明應(yīng)由設(shè)計(jì)師發(fā)起， 前端開發(fā)工程師 也會(huì)協(xié)助修訂細(xì)節(jié)。交互設(shè)計(jì)師更多的關(guān)注點(diǎn)在需求到原型的轉(zhuǎn)化，對(duì)于前后端能否實(shí)現(xiàn)并不是很確定。前端開發(fā)工程師對(duì)交互說(shuō)明的的把關(guān)和疑問(wèn)，能夠幫助設(shè)計(jì)師將設(shè)計(jì)思想轉(zhuǎn)為工程師能夠理解和實(shí)現(xiàn)的語(yǔ)言。這樣交互說(shuō)明也能幫助前端開發(fā)工程師明確設(shè)計(jì)實(shí)際執(zhí)行方案。

寫交互說(shuō)明文檔時(shí)，很多人都會(huì)疑惑，到底需要寫什么呢？我的意見是，站在下游的角度，視覺(jué)設(shè)計(jì)師和開發(fā)工程師在需要考慮的與頁(yè)面相關(guān)的邏輯和用戶操作相關(guān)的內(nèi)容基本都是需要在說(shuō)明中體現(xiàn)出來(lái)。另外我們應(yīng)該盡量寫得詳細(xì)些，避免研發(fā)同事多次來(lái)討論或者直接按照自己的理解直接實(shí)現(xiàn)，這樣最終的驗(yàn)收效果也會(huì)比較好。那么具體的該寫什么不該寫什么，這里也做了整理供參考。

用戶身份和系統(tǒng)功能頁(yè)面緊密相關(guān)。比如后臺(tái)系統(tǒng)常見的會(huì)區(qū)分管理員身份，普通管理員還是超級(jí)管理員。

表單校驗(yàn)邏輯：是實(shí)時(shí)校驗(yàn)還是觸發(fā)按鈕后做校驗(yàn)，還是兩者結(jié)合，表達(dá)清楚邏輯并將相關(guān)的提示和反饋描述清楚。

根據(jù)項(xiàng)目?jī)?nèi)容特性和業(yè)務(wù)將邏輯細(xì)節(jié)和交互細(xì)節(jié)表達(dá)清楚。比如app可能有鎖屏推送，項(xiàng)目是否有數(shù)據(jù)埋點(diǎn)。

提供一個(gè)參考的目錄，可以進(jìn)行適當(dāng)?shù)恼{(diào)整作為項(xiàng)目交互原型的目錄：

相比較word等文本記錄工具比較推薦Axure，原因有三：

根據(jù)項(xiàng)目類型和情況確定具體合適的排版，基本可以按照從上到下從左到右的順序去排版。

以上都能理解和做到，已經(jīng)可以完成一份合格的交互說(shuō)明文檔了。那么怎樣才算是一份不錯(cuò)的交互說(shuō)明的呢？

這里分享幾個(gè)注意點(diǎn)：

對(duì)接的下游有時(shí)候是同一部門或同一個(gè)同事，目錄保持基本的統(tǒng)一，可以降低下游的學(xué)習(xí)成本，另外也讓自己在寫說(shuō)明時(shí)不必每次都去思考目錄的劃分。當(dāng)然，針對(duì)不同的產(chǎn)品類型和產(chǎn)品特性需要去調(diào)整制訂目錄。

拒絕流水賬式說(shuō)明，另外當(dāng)描述文字過(guò)長(zhǎng)，可能需要重新考慮是否是設(shè)計(jì)邏輯存在問(wèn)題。那么如何讓說(shuō)明文字盡可能的簡(jiǎn)單呢？

原型設(shè)計(jì)的過(guò)程中，需要展示數(shù)據(jù)，對(duì)數(shù)據(jù)的模擬盡可能的真實(shí)，撰寫交互說(shuō)明可以將場(chǎng)景還原更加貼近真實(shí)可能性。而且，真實(shí)符合邏輯的數(shù)據(jù)，研發(fā)也比較能更快理解頁(yè)面邏輯，所以也可以減少溝通成本。

原型頁(yè)面很多內(nèi)容是復(fù)用，那同樣的這些重復(fù)的內(nèi)容，按照常見的處理方法，就會(huì)重復(fù)寫很多次的交互說(shuō)明（相信大家也會(huì)復(fù)制粘貼），但是這樣帶來(lái)2個(gè)問(wèn)題，一是研發(fā)會(huì)不會(huì)懷疑前后的交互說(shuō)明是否有區(qū)別，二是如果需要修改的話，需要對(duì)所有的相關(guān)頁(yè)面修改，維護(hù)的工作量就變大了很多。有2鐘解決方法：

每次更新都是一次改進(jìn)的過(guò)程，添加新內(nèi)容的同時(shí)，保留舊的內(nèi)容，讓其他人也看到走過(guò)的彎路，讓他們知道每次修改都是深思熟慮后的決定。為什么要周知呢？下圖，是不是很直接地解釋清楚了：

另外，當(dāng)我們?cè)陧?xiàng)目中寫交互說(shuō)明寫多了就會(huì)發(fā)現(xiàn)，組件可以自己設(shè)計(jì)生成元件庫(kù)，調(diào)用元件庫(kù)就可以快捷使用，那么組件的交互說(shuō)明也可以組件化進(jìn)行歸類入庫(kù)，在需要的時(shí)候直接拿出來(lái)根據(jù)具體情況調(diào)整使用。附上，我整理出的交互說(shuō)明組件庫(kù)的部分頁(yè)面供參考，大家可以根據(jù)自己的操作習(xí)慣和經(jīng)常接入的項(xiàng)目特點(diǎn)制作一套適合自己的交互說(shuō)明模板庫(kù)：

通用交互說(shuō)明：

頁(yè)面交互說(shuō)明：

表文結(jié)合形式：

以上就是我在項(xiàng)目進(jìn)行過(guò)程中發(fā)現(xiàn)的問(wèn)題和個(gè)人思考的解決方案。但是，并非所有人都喜歡寫說(shuō)明文檔或者看說(shuō)明文檔。有必要的情況下，需要跟團(tuán)隊(duì)成員強(qiáng)調(diào)交互說(shuō)明的存在意義，推動(dòng)大家去閱讀和反饋，這樣辛辛苦苦寫出來(lái)的說(shuō)明才能對(duì)項(xiàng)目的發(fā)展起到真實(shí)的作用。另外在項(xiàng)目合作的過(guò)程中，除了做好自己的任務(wù)以外，要多站在項(xiàng)目的角度上去思考，要去考慮團(tuán)隊(duì)中其他角色尤其是下游伙伴是否能夠較好及時(shí)地實(shí)現(xiàn)或完成相關(guān)任務(wù)，這樣思考后才去決定自己手下急需和應(yīng)該完成的任務(wù)項(xiàng)。

交互設(shè)計(jì)說(shuō)明文檔內(nèi)容

完整的交互設(shè)計(jì)內(nèi)容：

一、設(shè)計(jì)背景

1、產(chǎn)品定位(目標(biāo)用戶、競(jìng)爭(zhēng)策略（差異化、控制成本））

2、具體設(shè)計(jì)內(nèi)容

3、設(shè)計(jì)目標(biāo)

二、流程圖

1、業(yè)務(wù)流程圖（各角色的協(xié)作運(yùn)行）

2、任務(wù)流程圖（用戶的操作流程，有：主任務(wù)流程、次任務(wù)流程）

3、頁(yè)面流程圖（在原型圖之前繪制、可便于整理頁(yè)面間的邏輯，包括頁(yè)面、行動(dòng)點(diǎn)、連接線）

三、原型圖

信息架構(gòu)（頁(yè)面的內(nèi)容及排布、頁(yè)面之間的跳轉(zhuǎn)）

四、需求描述文檔

功能點(diǎn)、觸發(fā)條件（要窮盡異常的情況（情況1、情況2、情況3...））、結(jié)果描述、備注

五、其他元素

*網(wǎng)絡(luò)異常處理

1、整頁(yè)提示（插畫、說(shuō)明、重連按鈕、小貼士）

2、預(yù)設(shè)圖、占位符提示（不增加操作負(fù)擔(dān)）

3、Toast/dialog提示（最好給出設(shè)置網(wǎng)絡(luò)的通道）

*臨時(shí)框（暫停主任務(wù)，關(guān)閉后回到主任務(wù)）

1、警告視圖（不易過(guò)多，比如訪問(wèn)手機(jī)接口是獲取用戶許可）

2、Toast (1~1.5S,反饋信息但不中斷操作流程）

3、操作列表（將不常用的功能入口統(tǒng)一打包）

4、模態(tài)視圖（輸入頁(yè)面、用戶須知等）

標(biāo)志說(shuō)明：

頁(yè)面標(biāo)題：

寫在每一頁(yè)的頂部。表明當(dāng)前頁(yè)所述的功能是屬于哪個(gè)模塊的

對(duì)齊：

單個(gè)界面之中元素的對(duì)齊、界面和界面之間的對(duì)齊，頁(yè)面上任何東西都是應(yīng)該能找到對(duì)齊點(diǎn)的。注釋右對(duì)齊。

顏色：

使用黑白灰，避免使用黑色線條和黑底白字，灰色會(huì)顯得更精致。

用深淺不同的灰來(lái)表現(xiàn)層次和重點(diǎn)。

合理留白，避免界面過(guò)擠或過(guò)空。

熱區(qū)：

標(biāo)明熱區(qū)的范圍。

緊密相連的熱區(qū)區(qū)分方法：

圖片：

使用圖片時(shí)，要注意和背景融合。

若暫沒(méi)有找到合適的圖標(biāo)，寧可統(tǒng)一用占位符替代，輔以文字注釋。

若對(duì)圖片內(nèi)容或風(fēng)格有想法，用各種形式在交互文檔中表現(xiàn)出來(lái)。

流程圖

主線和分支的走向要始終保持一致（是和否）。

善用輔助線

原型說(shuō)明：

寫清楚各種異常情況的處理

多去考慮一下 交互文檔 閱讀者的體驗(yàn)，可能就會(huì)想盡各種辦法來(lái)滿足他們。

交互設(shè)計(jì)說(shuō)明文檔模板的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于交互設(shè)計(jì)報(bào)告書、交互設(shè)計(jì)說(shuō)明文檔模板的信息別忘了在本站進(jìn)行查找喔。