您的位置:首頁>設計>正文

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

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

交互文檔是設計師的輸出物, 首先需要明確文檔的使用者和目標,

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

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

1.修改記錄

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

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

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

2.需求分析

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

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

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

注意事項:

大多數需求都是需要分析的, 儘管它看起來很小, 或很明確。 不要為了做需求分析而做, 要讓它指導設計。需求分析也是需要反覆運算的。3.資訊架構

資訊架構是整個產品的骨架,對於新產品、新功能我們通常會梳理資訊架構,而且它也是相對穩定的,除非大改版,一般不會動到資訊架構。資訊架構圖可以説明我們在前期梳理整個產品的結構,後期按照大的架構來反覆運算,同時讓資訊更易理解與流覽。

既然資訊架構如此重要,我們應該如何梳理資訊架構呢,筆者提供幾點思路:

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

注意事項:在有新功能、新方向時適時反覆運算。

4.流程圖

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

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

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

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

1.頁面結構

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

2.頁面圖

頁面圖包括主介面、特殊狀態、回饋等。

主介面圖需表明:

佈局關係內容主次功能操作

…..

特殊狀態包括:

中間狀態網路問題載入空狀態不可用

…..

回饋包括:

toast頁面回饋彈窗

…..

3.注釋 對介面的說明對操作的說明對視效、動效要求的說明需外界提供的資訊備註需求狀態說明

…..

4.頁面流程

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

注意事項:

能用圖形不用文字儘量簡潔有主次6.公共定義廢棄頁面

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

總結

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

作者:Jane ,1年交互設計師,歡迎指教交流。

本文由 @Jane 原創發佈于人人都是產品經理。未經許可,禁止轉載。

題圖來自PEXELS,基於CC0協議

要讓它指導設計。需求分析也是需要反覆運算的。3.資訊架構

資訊架構是整個產品的骨架,對於新產品、新功能我們通常會梳理資訊架構,而且它也是相對穩定的,除非大改版,一般不會動到資訊架構。資訊架構圖可以説明我們在前期梳理整個產品的結構,後期按照大的架構來反覆運算,同時讓資訊更易理解與流覽。

既然資訊架構如此重要,我們應該如何梳理資訊架構呢,筆者提供幾點思路:

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

注意事項:在有新功能、新方向時適時反覆運算。

4.流程圖

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

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

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

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

1.頁面結構

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

2.頁面圖

頁面圖包括主介面、特殊狀態、回饋等。

主介面圖需表明:

佈局關係內容主次功能操作

…..

特殊狀態包括:

中間狀態網路問題載入空狀態不可用

…..

回饋包括:

toast頁面回饋彈窗

…..

3.注釋 對介面的說明對操作的說明對視效、動效要求的說明需外界提供的資訊備註需求狀態說明

…..

4.頁面流程

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

注意事項:

能用圖形不用文字儘量簡潔有主次6.公共定義廢棄頁面

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

總結

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

作者:Jane ,1年交互設計師,歡迎指教交流。

本文由 @Jane 原創發佈于人人都是產品經理。未經許可,禁止轉載。

題圖來自PEXELS,基於CC0協議

Next Article
喜欢就按个赞吧!!!
点击关闭提示