交互設(shè)計說明文檔，簡稱DRD。用來說明產(chǎn)品設(shè)計思路、設(shè)計方案、信息架構(gòu)、原型線框、交互說明等內(nèi)容，文檔中的內(nèi)容包括：

交互文檔中的主要內(nèi)容

1、用戶權(quán)限：根據(jù)不同用戶的權(quán)限對該需求進行檢查，比如普通用戶、vip用戶、內(nèi)外網(wǎng)用戶、游客用戶，在登錄未登錄時候?qū)π枨髢?nèi)功能的使用是否有影響

2、登錄方式：用戶登錄和注冊、終端的兼容，不同方式注冊的用戶是否需要補填相關(guān)信息等等

3、流程

該需求中的功能流程是否和其他類似或者相同功能流程保持一致性；

逆向流程和非正常流程的思考有沒有完全；

流程的閉環(huán)有沒有做好；頁面跳轉(zhuǎn)的方式是否合理；

中斷后的恢復(fù)狀態(tài)如何呈現(xiàn)；

是否保留原信息等等

4.界面內(nèi)容

• 頁面布局：從頁面的布局可以看出產(chǎn)品的整體結(jié)構(gòu)，幫助同事了解界面的功能展示和元素布局。頁面布局即對界面信息的設(shè)計。

• 獲取來源：如圖片新聞中的圖片來源和信息流中的圖片來源有可能是不同的，要寫清楚，圖片或者數(shù)據(jù)的來源來自于用戶的上傳還是系統(tǒng)后臺的配置獲??；獲取的方式如何，手動刷新還是切換頁面自動刷新或設(shè)定時間自動刷新。字段、圖標是從接口獲取還是前端寫死，氣泡展示的規(guī)則，還有一張圖片用在多個地方，呈現(xiàn)的尺寸不同，要說明剪裁規(guī)則和圖片的來源。

• 緩存機制：資源通常需要對其進行緩存，一般來說需要緩存的內(nèi)容是通過瀏覽產(chǎn)生的，包括圖片以及cookie等，瀏覽過的視頻和廣告也會被緩存。不同的網(wǎng)絡(luò)環(huán)境下緩存的時間標準也不同，無網(wǎng)絡(luò)只能讀取緩存文件，wifi環(huán)境下緩存時間可設(shè)置短些，流量環(huán)境下時間可以長緩存時間。

• 狀態(tài)：初始狀態(tài)（冷啟動無緩存第一次進入）、空狀態(tài)（無任何內(nèi)容比如空的購物車）、常規(guī)狀態(tài)、失敗狀態(tài)（比如網(wǎng)絡(luò)異常/權(quán)限未開啟）、異常狀態(tài)（網(wǎng)絡(luò)中斷、接口報錯）、過期狀態(tài)、正在加載狀態(tài)、加載完成有內(nèi)容的狀態(tài)、加載完成無內(nèi)容的空狀態(tài)、不同角色的用戶看到的內(nèi)容是否一樣、不同狀態(tài)的文案圖標變化。內(nèi)容的加載方式，何時加載、何時顯示、何時刷新。

• 顯示：數(shù)據(jù)和內(nèi)容的極限值，最大和最小，如關(guān)注數(shù)量，小于1萬人顯示完整數(shù)量，大于等于1萬小于11000顯示1萬以此類推。敏感信息、錯誤提示以及超時的信息提示。金額的格式、小數(shù)點保留的規(guī)則。

• 反饋&提示：反饋和提示樣式有很多種，一般反饋指的是用戶對某一個控件進行觸發(fā)后獲得的反饋，如按鈕按下的反饋，以及之后收到的反饋，跳轉(zhuǎn)還是給用戶提示，采用的模態(tài)還是非模態(tài)的提示等。反饋效果分兩類：一類是在當(dāng)前頁面的反饋效果，另一類是跳轉(zhuǎn)到下一個頁面的反饋效果。

• 手勢：手勢交互需要說明，如滑動后內(nèi)容置頂、拖拽、左右輕掃的tab滑動、重按的3dtouch等等。常見手勢操作有單擊，雙擊，左滑，右滑，長按，拖拽，滑動，下?lián)?，抬起，夾捏等

• 頁面跳轉(zhuǎn)：產(chǎn)品有多個任務(wù)，頁面流程圖上要清楚標注出通過怎樣的操作跳轉(zhuǎn)到哪個界面。一般進入下一級界面是從右往左滑入，返回上一級界面通常是從左往右滑入。對于特殊的跳轉(zhuǎn)效果要特殊說明。

• 加載：說明使用模態(tài)還是非模態(tài)還是分布加載，說明加載時間，內(nèi)容等規(guī)則，如當(dāng)用戶在某個圖文前停留時間達到某個值后就預(yù)先給用戶加載里面的內(nèi)容。

• 環(huán)境、設(shè)備與場景：不同設(shè)備、廠商的不同版本會影響到方案的落地和用戶體驗。如一些交互控件我們在6、iphonex和大屏幕尺寸上使用起來效果很好，但是小屏幕的時候這個交互控件顯得就很難受，所以說明用戶使用情況。還有橫豎屏的交互方案是否兼容、是否需要與其他硬件進行兼容，白天、晚上是否需要做不同的風(fēng)格設(shè)計，是否需要給用戶遮擋隱私的功能

• 異常頁面和異常情況的說明：常見異常頁面包含：數(shù)據(jù)為空的頁面、操作失敗的頁面、拉取數(shù)據(jù)失敗的頁面、頁面不存在的頁面。常見的異常情況包含：斷網(wǎng)狀態(tài)、服務(wù)器異常、操作失敗、字符限制、網(wǎng)絡(luò)切換（從wifi切換到移動數(shù)據(jù)）、權(quán)限限制，關(guān)鍵字段超行。

• 文案：產(chǎn)品文案的語氣和產(chǎn)品調(diào)性，不同的文案使用直接影響用戶對該信息的理解。

• ? ?控件說明

編寫交互文檔

規(guī)范的交互文檔（DRD）由：文檔封面、更新日志、文檔圖例、設(shè)計背景/思路、業(yè)務(wù)流程、頁面交互、全局通用說明等部分組成。

文檔結(jié)構(gòu)不是絕對的，可以根據(jù)實際情況增減。如C端產(chǎn)品，用戶調(diào)研結(jié)論、用戶畫像、用戶體驗地圖等都可以放進去。如今關(guān)注用戶體驗的環(huán)境下，有數(shù)據(jù)支撐很有力量。

1. 文檔封面

交互文檔的封面通常包括產(chǎn)品的名稱、Logo、版本號以及版本發(fā)布時間、所屬部門、對接負責(zé)人/對接人。

2. 更新日志

更新日志為了迭代而生。一般由修改日期、修改內(nèi)容、修改人、版本號和備注組成。版本號可加對應(yīng)的版本鏈接，便于查看、回溯，修改日期按時間倒序排列，查看起來會比較方便。

?

3. 文檔圖例

文檔圖例是關(guān)于文檔的輔助說明，如：操作/跳轉(zhuǎn)圖例、標簽圖例、流程圖例以及手勢操作圖例。

4. 設(shè)計背景/思路

設(shè)計背景內(nèi)容主要是關(guān)于思路整理、靈感來源的文檔。如：用研報告、用戶畫像、競品分析報告、商業(yè)畫布等等。增強文檔的說服力，盡量讓每一個人都能理解到產(chǎn)品的戰(zhàn)略目標和業(yè)務(wù)邏輯。

?

5. 業(yè)務(wù)流程

業(yè)務(wù)流程圖通常用泳道圖的形式展示，多數(shù)情況下是由產(chǎn)品經(jīng)理繪制。

?

6. 頁面交互

• 信息架構(gòu)：信息架構(gòu)是產(chǎn)品的骨架。由產(chǎn)品經(jīng)理或者更高層的管理人員給出大框架。

• 權(quán)限說明：對產(chǎn)品各功能權(quán)限的定義，如下圖：

• 產(chǎn)品流程圖：產(chǎn)品流程能夠更清晰、直觀地展示用戶在使用某個功能時，產(chǎn)生的一系列操作和反饋的圖標。

• 界面線框圖：線框圖是圖形化的需求表達形式，闡述產(chǎn)品界面層面的信息。內(nèi)容包括：

頁面標題：即每一個頁面的對應(yīng)標題，一般就是導(dǎo)航欄標題

頁面內(nèi)容：以黑白為主，保證信息規(guī)整易讀

交互說明：用標簽將其對應(yīng)起來，包括交互邏輯、操作流程及反饋、元素狀態(tài)、字符限制、異常/特殊狀態(tài)、相關(guān)規(guī)則等等

主流程線：畫出主流程路線

7. 全局通用說明

全局通用說明是產(chǎn)品可通用、復(fù)用的元素。方便自己或者接手該項目的設(shè)計師直接調(diào)用。其次，對開發(fā)及時封裝可復(fù)用控件也有參考價值。

• 常用控件：常用控件是將具有復(fù)用價值的控件整理在一起，方便調(diào)用。

• 復(fù)用界面：是全局可復(fù)用的界頁，如：選擇聯(lián)系人、獨立搜索頁等。

• 時間規(guī)范：時間規(guī)范必免出現(xiàn)展示時間時iOS是斜杠的，Android是橫杠的，WEB是圓點的這樣混亂的展示效果。

• 缺省頁匯總：缺省頁一般包括加載失敗、加載中、網(wǎng)絡(luò)中斷和無數(shù)據(jù)的空頁面。為空頁可以按照模塊整理在一起，方便UI設(shè)計師最后一起設(shè)計缺省頁，保持風(fēng)格統(tǒng)一。