從交互文檔的撰寫,看設計的思路

這次剛好給公司新同學培訓，梳理了撰寫交互文檔的思路，希望對新同學有一定幫助。

交互文檔是設計師的輸出物，首先需要明確文檔的用戶和目標，交互文檔面向的受眾主要是下遊同事，包括視覺、動畫、開發、測試等，另外還有自己和PM；文檔的目標就是讓下遊同事清楚地知道是如何設計的，讓他們在進行自己工作時有參考依據；另外文檔還應該能讓自己理清思路，同時方便與PM討論。

明確了交互文檔的用戶和目標後，我們來看看它應該包括哪些內容，具體內容根據工作需要會有不同，這裡就說說我自己在寫完整的交互文檔時會包括的內容。

1.修改記錄

修改記錄是整個文檔的歷史，它讓每一步修改可追溯，便於各職位查看每次新增、修改或刪除的內容，同時便於在工作交接時讓同事了解整個文檔的歷程。

一般修改記錄需要包括以下內容，文檔版本、需求版本、修改內容、修改界面（可連結到頁面） 、修改原因、修訂日期、修改人等。

注意事項：及時更新，保證內容詳細、完整。

2.需求分析

需求分析是在進行設計前的一個必要步驟，將它文檔化至少有如下兩點好處，讓自己理清思路，確保設計中的問題都思考清楚；評審時，讓大家對方案的推導過程有了解，更容易推動方案，減少分歧 。

需求分析的方法有很多，但做需求分析的思路是一致的。

1. 首先應該明確目標，是新產品、新功能設計，還是改版或優化，要達到怎樣的用戶目標和商業目標，不同的產品體量決定需求分析的體量，不同的目標決定分析的側重點。
2. 著手獲取相關信息，包括需求細節、競品信息、用戶反饋、用戶數據等，較小的需求可能不需要這麼多信息，根據不同的項目選擇需要的信息。
3. 最後就是分析，不同的項目會用到不同的方法，常見的方法有場景分析、體驗地圖、任務分析、用戶決策過程分析、全生命周期分析等。這裡就不詳細說明每種方法的使用，提供兩個例子供參考。

注意事項：

1. 大多數需求都是需要分析的，儘管它看起來很小，或很明確。
2. 不要為了做需求分析而做，要讓它指導設計。
3. 需求分析也是需要迭代的。

3.信息架構

信息架構是整個產品的骨架，對於新產品、新功能我們通常會梳理信息架構，而且它也是相對穩定的，除非大改版，一般不會動到信息架構。信息架構圖可以幫助我們在前期梳理整個產品的結構，後期按照大的架構來迭代，同時讓信息更易理解與瀏覽。

既然信息架構如此重要，我們應該如何梳理信息架構呢，筆者提供幾點思路：

1. 根據產品特徵確定結構類型，這個產品是適合層級結構、自然結構、線性結構或者矩陣結構，最常見的就是層級結構，將信息一層層分解，直至用戶需要的信息。
2. 分類組合，將不同類型的功能分類，將相似的整合到一起。
3. 明確功能優先級，根據其重要度、商業價值、使用頻率等排序，將重要功能抽提出來。
4. 構建信息架構，考慮可擴展性。

注意事項：在有新功能、新方向時適時迭代。

4.流程圖

流程圖是梳理任務、操作流程的工具。它可以幫助我們梳理流程，避免遺漏、明確流程的主次；對照流程進行頁面設計；向同事說明，一個任務是怎麼完成的。

在畫流程圖時需要注意幾點：

1. 根據流程類型寫，將任務流程、操作流程、內部算法流程區分開，不要混著寫，不然思路容易被打亂。
2. 分任務寫，不要將一個產品的所有流程寫在一個大流程裡，這樣容易遺漏，不方便查看，而且流程太龐大也容易出錯。
3. 區分主次流程\非必要流程，讓流程主次分明。
4. 儘量簡化流程圖，多種狀態指向同一結果可以合併。

5.頁面圖

頁面圖是詳細設計的主要內容，包括頁面結構、頁面圖、注釋、頁面流程。需要讓視覺、動效、開發、測試的同學明白設計細節 。

1.頁面結構

頁面結構是整個文檔的框架，不同類型的產品有不同的文檔結構，比如信息架構型 、流程型 、面向不同角色型等。

2.頁面圖

頁面圖包括主界面、特殊狀態、反饋等。

主界面圖需表明：

…..

特殊狀態包括:

…..

反饋包括：

…..

3.注釋

• 對界面的說明
• 對操作的說明
• 對視效、動效要求的說明
• 需外界提供的信息備註
• 需求狀態說明

…..

4.頁面流程

流程中的頁面，為了方便說明可以用頁面流程來表達，把頁面的跳轉關係串聯起來。

注意事項：

1. 能用圖形不用文字
2. 儘量簡潔
3. 有主次

6.公共定義\廢棄頁面

將公共定義單獨拿出來寫，便於維護，不用每次變動都修改每個界面。廢棄頁面單獨拿出了，便於追溯，讓下遊同事知道改動點 。

總結

寫文檔的過程也是設計思考的過程，一方面要確保設計思路沒有問題，另一方面要讓文檔可讀性高，以上是筆者的一點小總結。

 

作者：Jane ，1年互動設計師，歡迎指教交流。

本文由 @Jane 原創發布於人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基於CC0協議

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}