編輯導(dǎo)語(yǔ)：在設(shè)計(jì)流程中，交互設(shè)計(jì)師需要建立交互設(shè)計(jì)文檔（DRD），以清晰地向團(tuán)隊(duì)成員展示頁(yè)面設(shè)計(jì)細(xì)節(jié)與交互設(shè)計(jì)輸出，進(jìn)而有效降低溝通成本，推動(dòng)業(yè)務(wù)進(jìn)程。本篇文章里，作者總結(jié)了交互文檔的常見(jiàn)誤區(qū)與關(guān)鍵要素，一起來(lái)看一下。

交互設(shè)計(jì)文檔也稱(chēng)DRD（Design Requirement Document），是交互設(shè)計(jì)師把抽象的產(chǎn)品需求轉(zhuǎn)化為具象的線框圖呈現(xiàn)的過(guò)程。是交互設(shè)計(jì)日常工作輸出的最終產(chǎn)物，用來(lái)告訴別人「頁(yè)面設(shè)計(jì)細(xì)節(jié)」的一個(gè)說(shuō)明文檔。

一般會(huì)是交互設(shè)計(jì)或UX（體驗(yàn)設(shè)計(jì)師）寫(xiě)交互文檔，也可能會(huì)是產(chǎn)品經(jīng)理寫(xiě)交互文檔，不同類(lèi)型或體量的產(chǎn)品團(tuán)隊(duì)寫(xiě)文檔的角色可能會(huì)不一樣。

很多在工作了一兩年的同學(xué)依舊會(huì)被吐槽交互文檔不規(guī)范、出圖慢，我將從以下幾個(gè)方面全面講解，助你高效輸出規(guī)范的交互文檔。

一、交互文檔常見(jiàn)誤區(qū)

1. 所有內(nèi)容平鋪在一個(gè)頁(yè)面上

剛開(kāi)始工作的時(shí)候，你可能會(huì)遇到做一個(gè)功能眾多的小應(yīng)用，當(dāng)你想再添加一些特色功能之前，會(huì)發(fā)現(xiàn)已經(jīng)被你弄得滿(mǎn)屏幕都是按鈕和信息了。

2. 控件不規(guī)范、不統(tǒng)一

頁(yè)面上的某些元素可以幫助你確定正在瀏覽的頁(yè)面，其他元素應(yīng)該盡可能清晰一致。

最常見(jiàn)的例子是：“接受”和“取消”按鈕，是放在左邊還是右邊。

按經(jīng)驗(yàn)來(lái)說(shuō)，當(dāng)你在流程中前進(jìn)時(shí)，繼續(xù)的那個(gè)按鈕應(yīng)該是綠色的，放在右邊，并且按鈕上有一個(gè)文本，解釋它的功能，比如：“同意”，“繼續(xù)”或“購(gòu)買(mǎi)”。

3. 遺漏頁(yè)面或狀態(tài)

很多同學(xué)只輸出正向流程，或者只提供較少的異常情況。這在后續(xù)的工作推進(jìn)過(guò)程中會(huì)增加很多溝通成本，比如斷網(wǎng)、弱網(wǎng)、服務(wù)異常、加載中……

4. 可讀性差

交互文檔不僅僅是給自己看的，它作為需求轉(zhuǎn)化為具象的線框圖，通常會(huì)有開(kāi)發(fā)、測(cè)試、UI、產(chǎn)品、周邊相關(guān)同事甚至領(lǐng)導(dǎo)來(lái)閱讀，設(shè)計(jì)表述是否完整和清晰顯得至關(guān)重要。

另外頁(yè)面對(duì)齊、字體大小的把握也是很容易忽視的細(xì)節(jié)問(wèn)題。

5. 缺少全局說(shuō)明

交互文檔還有可能交接給其他設(shè)計(jì)師來(lái)繼續(xù)迭代，但很多同學(xué)根本沒(méi)有整理全局設(shè)計(jì)規(guī)范和規(guī)則，這會(huì)導(dǎo)致下一個(gè)接手的同事直接“另起爐灶”，讓整個(gè)文檔越來(lái)越不統(tǒng)一，開(kāi)發(fā)成本也會(huì)更高。

二、交互文檔7要素

首先應(yīng)該明確交互文檔的意義：

• 個(gè)人而言，它可以幫助你理清思路，并記錄下來(lái)，便于項(xiàng)目總結(jié)沉淀。
• 工作而言，文檔的作用降低項(xiàng)目里的溝通成本和風(fēng)險(xiǎn)、反饋和迭代。文檔很好地解決了記不住、理解錯(cuò)誤、歷史記錄的問(wèn)題，所以還是要把所有細(xì)節(jié)記錄在文檔中比較好，這些都是要基于文檔的。
• 團(tuán)隊(duì)而言，沉淀的歷史交互文檔可以?xún)?nèi)部共享，互相交流學(xué)習(xí)。團(tuán)隊(duì)中統(tǒng)一的交互文檔規(guī)范能提供團(tuán)隊(duì)各角色一致的文檔體驗(yàn)，降低學(xué)習(xí)成本。

1. 文檔封面

就類(lèi)似書(shū)籍的封面，介紹是什么書(shū)？出版社和作者是誰(shuí)？主要是描述書(shū)籍的基礎(chǔ)信息。交互文檔的封面也同理，通常包括、Logo、版本號(hào)、時(shí)間、團(tuán)隊(duì)名稱(chēng)或產(chǎn)品名稱(chēng)、對(duì)接交互人員。

2. 修訂記錄

在實(shí)際項(xiàng)目中要對(duì)產(chǎn)品進(jìn)行迭代，我們會(huì)把某次迭代的版本、時(shí)間、責(zé)任人、內(nèi)容都寫(xiě)清楚，方便落實(shí)責(zé)任，也方便以后追溯。

3. 項(xiàng)目說(shuō)明

包含項(xiàng)目背景、需求說(shuō)明、信息架構(gòu)、業(yè)務(wù)流程。

項(xiàng)目背景分析可以根據(jù)實(shí)際項(xiàng)目的需要，放置一些關(guān)于設(shè)計(jì)推導(dǎo)過(guò)程、靈感來(lái)源的文檔。

比如用研報(bào)告、用戶(hù)畫(huà)像、競(jìng)品分析報(bào)告、用戶(hù)體驗(yàn)地圖等一些分析過(guò)程，可以讓交互文檔也更有說(shuō)服力，團(tuán)隊(duì)各角色理解后才能更好地推進(jìn)方案。

需求說(shuō)明可以記錄各個(gè)功能模塊的需求背景和描述，便于后期追溯。

產(chǎn)品結(jié)構(gòu)圖作用是梳理產(chǎn)品功能點(diǎn)，梳理了產(chǎn)品有多少個(gè)功能模塊。羅列出來(lái)各個(gè)功能模塊下的各個(gè)頁(yè)面，但不需要羅列頁(yè)面中的內(nèi)容。

業(yè)務(wù)流程圖，用于說(shuō)明整個(gè)業(yè)務(wù)邏輯流向；功能流程圖，用于確定產(chǎn)品功能設(shè)計(jì)邏輯。

4. 全局說(shuō)明

通常包含界面標(biāo)記說(shuō)明、通用控件說(shuō)明。

界面標(biāo)記說(shuō)明是指在整個(gè)文檔中廣泛存在的標(biāo)識(shí)元素，幫助閱讀者快速了解文檔的專(zhuān)用標(biāo)識(shí)和術(shù)語(yǔ)。

通用組件說(shuō)明是指在開(kāi)發(fā)一個(gè)全新的產(chǎn)品時(shí)，建立的一套簡(jiǎn)化版的設(shè)計(jì)規(guī)范，該設(shè)計(jì)規(guī)范指定了當(dāng)前文檔中一些組件的樣式、交互以及特殊情況。

常用的控件比如按鈕、列表框、導(dǎo)航欄、標(biāo)簽欄以及一些網(wǎng)絡(luò)異常界面、空白頁(yè)、對(duì)話(huà)框的文案規(guī)范說(shuō)明、加載方式等。

5. 交互頁(yè)面

一般而言，交互頁(yè)面顧名思義就是頁(yè)面流程、頁(yè)面內(nèi)容、交互說(shuō)明，那么具體要包含哪些內(nèi)容才能把交互頁(yè)面說(shuō)清楚呢？

下圖是交互文檔的局部截圖：

• 頁(yè)面標(biāo)題：告訴別人這個(gè)頁(yè)面是什么？導(dǎo)航欄標(biāo)題，讓頁(yè)面標(biāo)題常駐。
• 界面標(biāo)題：方便交互稿中的互相索引，比如“回到界面B狀態(tài)”。
• 界面內(nèi)容：建議尺寸為375*667px，內(nèi)容黑白灰稿為主，要便于閱讀。
• 交互說(shuō)明：邏輯關(guān)系、元素狀態(tài)、小微流程，都可放在設(shè)計(jì)說(shuō)明中。
• 流程線：說(shuō)明界面間邏輯關(guān)系，可使用軟件自帶流程線。

交互說(shuō)明寫(xiě)什么？

交互說(shuō)明中不寫(xiě)什么：

• 商業(yè)邏輯相關(guān)：不寫(xiě)為什么要實(shí)現(xiàn)這個(gè)功能，解決了什么問(wèn)題等一些在交互說(shuō)明里與產(chǎn)品實(shí)現(xiàn)無(wú)關(guān)的內(nèi)容，這是需求分析階段該做的。
• 視覺(jué)規(guī)范相關(guān)：不寫(xiě)視覺(jué)規(guī)范規(guī)格標(biāo)注，各司其職專(zhuān)心做自己的事情，術(shù)業(yè)有專(zhuān)攻。
• 研發(fā)代碼相關(guān)：不寫(xiě)功能代碼實(shí)現(xiàn)邏輯和規(guī)則等。

6. 廢紙簍

是指需求變動(dòng)或者其他原因?qū)е履阕龅慕M件和頁(yè)面用不上了，需要將其整個(gè)優(yōu)化或者刪掉，但是不排除以后又會(huì)改回來(lái)。

你只需要將你的組件或者頁(yè)面放到回收站，標(biāo)記好相應(yīng)的名稱(chēng)（為了方便下次查詢(xún)），如以后需要可直接復(fù)制到相應(yīng)的頁(yè)面。

7. 交互自查表

建立交互走查表首先需要熟悉產(chǎn)品業(yè)務(wù)邏輯，走查表是建立在產(chǎn)品功能之上，每個(gè)產(chǎn)品的交互走查表都不一樣。

其中，平臺(tái)的差異是比較大的。比如，移動(dòng)端app和web平臺(tái)的差異性導(dǎo)致了其頁(yè)面實(shí)現(xiàn)的邏輯不一致，因此容易遺漏的點(diǎn)也不一致。web端是基于瀏覽器的實(shí)現(xiàn)邏輯，而app則需要根據(jù)每個(gè)平臺(tái)的差異（iOS和安卓），建立不同的走查表。但是這只是針對(duì)平臺(tái)規(guī)范的走查，主要的業(yè)務(wù)邏輯的走查都是相通的。

建立走查表是一個(gè)不斷完善迭代的過(guò)程，只要不偷懶，一般都會(huì)建立一個(gè)很好的規(guī)避措施。

三、總結(jié)

如果按照上述的7個(gè)要素來(lái)制作交互文檔并長(zhǎng)期堅(jiān)持下來(lái)，你的交互文檔規(guī)范性能夠得到大幅度提升。

以上內(nèi)容便是本文的上半部分內(nèi)容，包含了「交互文檔常見(jiàn)誤區(qū)」和「交互文檔7要素」，剩下的兩章：「提升輸出效率的3種方式」和「提升設(shè)計(jì)質(zhì)量的3種方式」（下篇）》中為大家奉上，敬請(qǐng)期待~

文中觀點(diǎn)有什么不合適的地方歡迎大家指正交流~~

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

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