1.信息架構圖:產品的內容有哪些,如何組織起來。綜合考慮產品的邏輯結構和用戶習慣得到的結果。
2.任務流程圖&業務流程圖
任務流程圖:用戶使用產品時,它的每一步操作會遇到什么結果,系統如何反饋。
關注用戶如何操作、界面如何反饋等,從而引導用戶完成用戶目標。
業務流程圖:偏向于業務限制、后臺邏輯等,并不過分注重用戶的操作邏輯。(PRD需求文檔中的業務流程圖)
3.頁面流程圖:比任務流程圖清晰具體。具體頁面,用戶如何操作,從一個頁面跳轉到另一個頁面的完整過程。
任務流程圖是頁面流程圖的基礎和依據。
線框圖:代表靜態部分。
交互說明:代表動態部分(邏輯嚴密、內容詳細)。實際工作中,文字說明+動態效果相配合。
? ? ? ? ? ? ? ? ?文字說明:讓團隊成員清晰、快速地看到全部的動態說明,更一目了然。
? ? ? ? ? ? ? ? ?動態效果:當文字或靜態圖片描述不直觀時,采用動效效果。
交互說明的類型:
1.限制:范圍值、極限值。
范圍值:數據的取值范圍。
極限值:數據的顯示限制。
2.狀態:包含默認狀態、常見狀態、特殊狀態等。
a.默認狀態:默認顯示的文字、數據、選項等(eg.hint)
b.常見狀態:針對某一模塊,經常遇到的一些狀態。eg.積分模塊:未登錄狀態、已登錄未簽到狀態、已登錄已簽到狀態。
c.特殊狀態:非正式情況下的樣式、文案、說明等。
3.操作:常見操作、特殊操作、誤操作、手勢操作等。
a.常見操作? ??eg.翻頁控件:普通、聚焦、鼠標懸停、點擊后。
b.特殊操作:一些極端情況下的操作。(積極和開發同學探討~)
c.誤操作:用戶操作錯誤時的情況。
d.手勢操作:用戶使用移動產品時的操作方式
4.反饋:用戶操作后得到的反饋動作,包含提示、跳轉、動畫等。
a.提示:操作后,系統反饋給用戶的文字說明。
b.跳轉:點擊某個連接后,頁面跳轉到哪里。(原頁面刷新 or 新頁面打開)
? ? ? ? ? ? ? 如果是手機應用,需注明跳轉時的轉場方式。
c.動畫: 用戶操作后,系統通過動畫的方式反饋給用戶。
總結以上:撰寫交互設計文檔時,除靜態頁面外,還需考慮各種動態情況。除正常情況外,還需考慮特殊和錯誤情況。
參考資料:破繭成蝶: 用戶體驗設計師的成長之路??
? ? ? ? ? ? ? ? ? 劉津 李月