編輯導語：在設計流程中，互動設計師需要建立互動設計文件（DRD），以清晰地向團隊成員展示頁面設計細節與互動設計輸出，進而有效降低溝通成本，推動業務程序。本篇文章裡，作者總結了互動文件的常見誤區與關鍵要素，一起來看一下。

互動設計文件也稱DRD（Design Requirement Document），是互動設計師把抽象的產品需求轉化為具象的線框圖呈現的過程。是互動設計日常工作輸出的最終產物，用來告訴別人「頁面設計細節」的一個說明文件。

一般會是互動設計或UX（體驗設計師）寫互動文件，也可能會是產品經理寫互動文件，不同型別或體量的產品團隊寫文件的角色可能會不一樣。

很多在工作了一兩年的同學依舊會被吐槽互動文件不規範、出圖慢，我將從以下幾個方面全面講解，助你高效輸出規範的互動文件。

一、互動文件常見誤區

1. 所有內容平鋪在一個頁面上

剛開始工作的時候，你可能會遇到做一個功能眾多的小應用，當你想再新增一些特色功能之前，會發現已經被你弄得滿螢幕都是按鈕和資訊了。

2. 控制元件不規範、不統一

頁面上的某些元素可以幫助你確定正在瀏覽的頁面，其他元素應該儘可能清晰一致。

最常見的例子是：“接受”和“取消”按鈕，是放在左邊還是右邊。

按經驗來說，當你在流程中前進時，繼續的那個按鈕應該是綠色的，放在右邊，並且按鈕上有一個文字，解釋它的功能，比如：“同意”，“繼續”或“購買”。

3. 遺漏頁面或狀態

很多同學只輸出正向流程，或者只提供較少的異常情況。這在後續的工作推進過程中會增加很多溝通成本，比如斷網、弱網、服務異常、載入中……

4. 可讀性差

互動文件不僅僅是給自己看的，它作為需求轉化為具象的線框圖，通常會有開發、測試、UI、產品、周邊相關同事甚至領導來閱讀，設計表述是否完整和清晰顯得至關重要。

另外頁面對齊、字型大小的把握也是很容易忽視的細節問題。

5. 缺少全域性說明

互動文件還有可能交接給其他設計師來繼續迭代，但很多同學根本沒有整理全域性設計規範和規則，這會導致下一個接手的同事直接“另起爐灶”，讓整個文件越來越不統一，開發成本也會更高。

二、互動文件7要素

首先應該明確互動文件的意義：

個人而言，它可以幫助你理清思路，並記錄下來，便於專案總結沉澱。

工作而言，文件的作用降低專案裡的溝通成本和風險、反饋和迭代。文件很好地解決了記不住、理解錯誤、歷史記錄的問題，所以還是要把所有細節記錄在文件中比較好，這些都是要基於文件的。

團隊而言，沉澱的歷史互動文件可以內部共享，互相交流學習。團隊中統一的互動文件規範能提供團隊各角色一致的文件體驗，降低學習成本。

1. 文件封面

就類似書籍的封面，介紹是什麼書？出版社和作者是誰？主要是描述書籍的基礎資訊。互動文件的封面也同理，通常包括、Logo、版本號、時間、團隊名稱或產品名稱、對接互動人員。

2. 修訂記錄

在實際專案中要對產品進行迭代，我們會把某次迭代的版本、時間、責任人、內容都寫清楚，方便落實責任，也方便以後追溯。

3. 專案說明

包含專案背景、需求說明、資訊架構、業務流程。

專案背景分析可以根據實際專案的需要，放置一些關於設計推導過程、靈感來源的文件。

比如用研報告、使用者畫像、競品分析報告、使用者體驗地圖等一些分析過程，可以讓互動文件也更有說服力，團隊各角色理解後才能更好地推進方案。

需求說明可以記錄各個功能模組的需求背景和描述，便於後期追溯。

產品結構圖作用是梳理產品功能點，梳理了產品有多少個功能模組。羅列出來各個功能模組下的各個頁面，但不需要羅列頁面中的內容。

業務流程圖，用於說明整個業務邏輯流向；功能流程圖，用於確定產品功能設計邏輯。

4. 全域性說明

通常包含介面標記說明、通用控制元件說明。

介面標記說明是指在整個文件中廣泛存在的標識元素，幫助閱讀者快速瞭解文件的專用標識和術語。

通用元件說明是指在開發一個全新的產品時，建立的一套簡化版的設計規範，該設計規範指定了當前文件中一些元件的樣式、互動以及特殊情況。

常用的控制元件比如按鈕、列表框、導航欄、標籤欄以及一些網路異常介面、空白頁、對話方塊的文案規範說明、載入方式等。

5. 互動頁面

一般而言，互動頁面顧名思義就是頁面流程、頁面內容、互動說明，那麼具體要包含哪些內容才能把互動頁面說清楚呢？

下圖是互動文件的區域性截圖：

頁面標題：告訴別人這個頁面是什麼？導航欄標題，讓頁面標題常駐。

介面標題：方便互動稿中的互相索引，比如“回到介面B狀態”。

介面內容：建議尺寸為375*667px，內容黑白灰稿為主，要便於閱讀。

互動說明：邏輯關係、元素狀態、小微流程，都可放在設計說明中。

流程線：說明介面間邏輯關係，可使用軟體自帶流程線。

互動說明寫什麼？

互動說明中不寫什麼：

商業邏輯相關：不寫為什麼要實現這個功能，解決了什麼問題等一些在互動說明裡與產品實現無關的內容，這是需求分析階段該做的。

視覺規範相關：不寫視覺規範規格標註，各司其職專心做自己的事情，術業有專攻。

研發程式碼相關：不寫功能程式碼實現邏輯和規則等。

6. 廢紙簍

是指需求變動或者其他原因導致你做的元件和頁面用不上了，需要將其整個最佳化或者刪掉，但是不排除以後又會改回來。

你只需要將你的元件或者頁面放到回收站，標記好相應的名稱（為了方便下次查詢），如以後需要可直接複製到相應的頁面。

7. 互動自查表

建立互動走查表首先需要熟悉產品業務邏輯，走查表是建立在產品功能之上，每個產品的互動走查表都不一樣。

其中，平臺的差異是比較大的。比如，移動端app和web平臺的差異性導致了其頁面實現的邏輯不一致，因此容易遺漏的點也不一致。web端是基於瀏覽器的實現邏輯，而app則需要根據每個平臺的差異（iOS和安卓），建立不同的走查表。但是這只是針對平臺規範的走查，主要的業務邏輯的走查都是相通的。

建立走查表是一個不斷完善迭代的過程，只要不偷懶，一般都會建立一個很好的規避措施。

三、總結

如果按照上述的7個要素來製作互動文件並長期堅持下來，你的互動文件規範性能夠得到大幅度提升。

以上內容便是本文的上半部分內容，包含了「互動文件常見誤區」和「互動文件7要素」，剩下的兩章：「提升輸出效率的3種方式」和「提升設計質量的3種方式」（下篇）》中為大家奉上，敬請期待~

文中觀點有什麼不合適的地方歡迎大家指正交流~~

本文由 @Rinoa 原創釋出於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議