1.信息架構圖：產品的內容有哪些，如何組織起來。綜合考慮產品的邏輯結構和用戶習慣得到的結果。

2.任務流程圖&業務流程圖

任務流程圖：用戶使用產品時，它的每一步操作會遇到什么結果，系統如何反饋。

關注用戶如何操作、界面如何反饋等，從而引導用戶完成用戶目標。

業務流程圖：偏向于業務限制、后臺邏輯等，并不過分注重用戶的操作邏輯。（PRD需求文檔中的業務流程圖）

3.頁面流程圖：比任務流程圖清晰具體。具體頁面，用戶如何操作，從一個頁面跳轉到另一個頁面的完整過程。

任務流程圖是頁面流程圖的基礎和依據。

線框圖：代表靜態部分。

交互說明：代表動態部分（邏輯嚴密、內容詳細）。實際工作中，文字說明+動態效果相配合。

? ? ? ? ? ? ? ? ?文字說明：讓團隊成員清晰、快速地看到全部的動態說明，更一目了然。

? ? ? ? ? ? ? ? ?動態效果：當文字或靜態圖片描述不直觀時，采用動效效果。

交互說明的類型：

1.限制：范圍值、極限值。

范圍值：數據的取值范圍。

極限值：數據的顯示限制。

2.狀態：包含默認狀態、常見狀態、特殊狀態等。

a.默認狀態：默認顯示的文字、數據、選項等（eg.hint）

b.常見狀態：針對某一模塊，經常遇到的一些狀態。eg.積分模塊：未登錄狀態、已登錄未簽到狀態、已登錄已簽到狀態。

c.特殊狀態：非正式情況下的樣式、文案、說明等。

3.操作：常見操作、特殊操作、誤操作、手勢操作等。

a.常見操作? ??eg.翻頁控件：普通、聚焦、鼠標懸停、點擊后。

b.特殊操作：一些極端情況下的操作。（積極和開發同學探討~）

c.誤操作：用戶操作錯誤時的情況。

d.手勢操作：用戶使用移動產品時的操作方式

4.反饋：用戶操作后得到的反饋動作，包含提示、跳轉、動畫等。

a.提示：操作后，系統反饋給用戶的文字說明。

b.跳轉：點擊某個連接后，頁面跳轉到哪里。（原頁面刷新 or 新頁面打開）

? ? ? ? ? ? ? 如果是手機應用，需注明跳轉時的轉場方式。

c.動畫: 用戶操作后，系統通過動畫的方式反饋給用戶。

總結以上：撰寫交互設計文檔時，除靜態頁面外，還需考慮各種動態情況。除正常情況外，還需考慮特殊和錯誤情況。

參考資料：破繭成蝶: 用戶體驗設計師的成長之路??

? ? ? ? ? ? ? ? ? 劉津 李月