在制作交互式文檔之前，我們首先要了解什么是交互式文檔、為什么制作交互式文檔以及它是為誰準(zhǔn)備的。

1.什么是交互式文檔

流程，然后過一遍頁面交互模塊。

【視覺設(shè)計(jì)】UI設(shè)計(jì)師一般最關(guān)注的是頁面交互模塊。 具有產(chǎn)品思維和體驗(yàn)思維的設(shè)計(jì)師也會(huì)仔細(xì)審視設(shè)計(jì)思路和產(chǎn)品背景，以便更好地理解產(chǎn)品商業(yè)邏輯和用戶心理。

【開發(fā)者】前端開發(fā)者和UI設(shè)計(jì)師一樣，最關(guān)注的是頁面交互模塊，其他的改進(jìn)將有助于理解。 前端開發(fā)人員更關(guān)注業(yè)務(wù)邏輯、信息架構(gòu)、操作流程等，這些都清晰，才能輸出真正合格的開發(fā)文檔。

【測試人員】由于測試人員是檢查產(chǎn)品上線的一群人，因此他們應(yīng)該對每個(gè)模塊和步驟有透徹的了解，并能夠提出有效的Bug。

4.如何編寫交互式文檔

本文主要討論使用Axure軟件作為寫作工具，大家可以根據(jù)自己的實(shí)際需要來決定使用哪些軟件（，PPT，Word，PS，AI等）。

比如小的需求都可以用，快速高效。 如果是給乙方的父親/老板看sketch 3 的用戶手冊，用PPT會(huì)讓他們更好地理解。

一般來說，一個(gè)比較基礎(chǔ)、規(guī)范的交互文檔（DRD）由八個(gè)部分組成：文檔封面、更新日志、文檔圖例、設(shè)計(jì)背景??/思路、業(yè)務(wù)流程、頁面交互、全局概要描述、廢小屋。 其實(shí)這并不是絕對的，你可以根據(jù)自己的實(shí)際工作需要來增減。

比如，如果是C端產(chǎn)品，用戶考察、用戶畫像、用戶體驗(yàn)圖等推論，都可以放進(jìn)去，供閱讀者參考。

尤其是在如此注重用戶體驗(yàn)和產(chǎn)品思維的環(huán)境下，這種數(shù)據(jù)支撐是非常強(qiáng)大的。 同時(shí)，也可以幫助開發(fā)者和界面設(shè)計(jì)師培養(yǎng)產(chǎn)品思維和體驗(yàn)思維，共同讓產(chǎn)品變得更好看。

其次，交互文檔的干凈、美觀也是必要的。 我相信這幾年很多人都遇到過這樣的產(chǎn)品總監(jiān)（和互動(dòng)）。 他們會(huì)輸出一些有時(shí)連自己都看不懂的線框圖或者直接從其他競品上截屏。

當(dāng)開發(fā)和界面設(shè)計(jì)的人指責(zé)的時(shí)候，他們也說線框圖不重要，上面的業(yè)務(wù)邏輯才重要。 。 。 雖然從產(chǎn)品角度思考，但交互文檔是交互設(shè)計(jì)師的產(chǎn)品，閱讀交互文檔的人是用戶。 保持良好的可讀性非常重要。

1. 文件封面

交互文檔的封面如上圖所示，一般包括產(chǎn)品名稱、logo、版本號(hào)、發(fā)布日期、部門、對接人/人。

2.更新日志

文檔圖例，顧名思義，是關(guān)于本文檔的一些輔助說明，其目的是為了讓讀者更好地理解本文檔。 如上圖所示：操作/跳轉(zhuǎn)圖例、標(biāo)簽圖例、流程圖示例和手勢操作圖例。

4. 設(shè)計(jì)背景/想法

設(shè)計(jì)背景，根據(jù)實(shí)際工作需要，放置一些關(guān)于思路的組織和靈感來源的文檔。

比如用戶研究報(bào)告、用戶畫像、競品分析報(bào)告、商業(yè)畫布等。提高文檔的說服力，盡量讓大家了解產(chǎn)品的戰(zhàn)略目標(biāo)和商業(yè)邏輯。

由于去年接觸時(shí)間最長的項(xiàng)目是B端產(chǎn)品項(xiàng)目，所以整理了一個(gè)產(chǎn)品畫像，僅供參考。

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

業(yè)務(wù)流程圖，不是操作流程圖或頁面流程圖。 它是產(chǎn)品的整體業(yè)務(wù)流程，與業(yè)務(wù)直接掛鉤，可以說是產(chǎn)品的核心流程。

比如天貓APP，賣家從始至終的購物流程就是它的業(yè)務(wù)流程。 一般以泳道圖的形式展示，大多數(shù)情況下是由產(chǎn)品總監(jiān)繪制的。

以上是我負(fù)責(zé)的產(chǎn)品的核心業(yè)務(wù)流程圖。 由于是B端產(chǎn)品，涉及的角色較多，所以列出了三個(gè)有代表性的角色，僅供參考。 （涉及保密合同，所有關(guān)鍵詞已刪除）

6、頁面交互

(一)信息架構(gòu)

信息架構(gòu)屬于用戶體驗(yàn)的結(jié)構(gòu)層，是產(chǎn)品的骨架。 通常，總體情況是由產(chǎn)品總監(jiān)或更高級(jí)別的管理層給出的。 除非是大的產(chǎn)品迭代，否則不會(huì)有大的變化。

(2)權(quán)限說明

如果是C端產(chǎn)品，權(quán)限比較簡單，容易組織。 B端產(chǎn)品涉及的角色較多，可能需要單獨(dú)分析整理。

以上僅供參考，具體情況具體分析。 對于功能單一的產(chǎn)品，交互文檔中也可以省略該模塊。

(3)操作流程圖

產(chǎn)品操作流程圖是通過圖形化的表達(dá)來討論產(chǎn)品在功能層面的邏輯和信息。 還可以更加清晰直觀地展示用戶在使用某項(xiàng)功能時(shí)會(huì)形成的一系列操作和反饋圖標(biāo)。

注意：不要將所有流程匯總在一張表格中，或者將它們顯示在同一頁面上，而是遵循特定的操作或功能模塊。 時(shí)刻思考閱讀文檔的人的體驗(yàn)，如何容易理解以及如何去做。

上圖是登錄、注冊、找回密碼的操作流程圖。 僅供參考。

(4)頁面線框

頁面線框圖是通過圖形化的表達(dá)方式來探索產(chǎn)品在頁面層面的信息。 包括：

【頁面標(biāo)題】是指每個(gè)頁面對應(yīng)的標(biāo)題，通常是導(dǎo)航欄的標(biāo)題；

【頁面內(nèi)容】以黑白為主，保證信息整齊、易讀；

【交互描述】使用標(biāo)簽與之對應(yīng)，包括交互邏輯、操作流程及反饋、元素狀態(tài)、字符限制、異常/特殊狀態(tài)、相關(guān)規(guī)則等；

【主流程線】只需要畫主流程線即可sketch 3 的用戶手冊，不能太多或太復(fù)雜，始終考慮讀者的體驗(yàn)。

以上為注冊頁面線框圖，僅供參考。

以上是登錄的線框圖和詳細(xì)的交互描述。 將關(guān)鍵內(nèi)容標(biāo)記為白色可以讓查看者一目了然地更好地理解文檔。

7. 全局通用說明

全局通用指令是指在整個(gè)產(chǎn)品中可以通用或重復(fù)使用的元素。 一般都是邊做文檔邊整理出來的，這樣方便自己或者接手項(xiàng)目的設(shè)計(jì)師直接調(diào)用。

其次，對于可復(fù)用控件的及時(shí)封裝也有參考價(jià)值。

(1) 常用控件

常用的控件與UIKit類似，一般將復(fù)用性高的控件組織在一起，方便及時(shí)調(diào)用。

以上僅供參考。

(2) 復(fù)用接口

顧名思義，就是一些可以全局復(fù)用的內(nèi)部頁面，比如選擇聯(lián)系人、獨(dú)立搜索頁面等。

(3) 時(shí)間規(guī)范

在制作產(chǎn)品的第一步中，應(yīng)商定時(shí)間規(guī)范。 不然各端開發(fā)完之后，你會(huì)發(fā)現(xiàn)iOS有斜杠、橫杠，WEB有點(diǎn)……意識(shí)到了再改，真的會(huì)互相崩塌。