在設計流程中，DRD，即交互（設計）說明文檔，是大多數情況下需要涉及的環節或因素之一。那么你知道在文檔中，究竟需要依照什么樣的邏輯信息進行設計需求信息的編寫嗎？本篇文章里，作者便結合交互模型的解析，對該問題做了解答，一起來看一下。

前言

DRD 的全稱是 Design Requirements Document ，直譯設計需求文檔，行業內叫交互（設計）說明文檔。

作為 PRD 的子文檔，以前有點疑惑為什么叫“交互說明文檔”，在后來逐步發現 DRD 中編寫的設計需求在交互邏輯上的關系后，便理解了這樣的“意譯”。

DRD 的編寫大綱和內容行業內也有很多文章講解，本文主要通過交互模型的解析，細聊一下文檔中按照什么邏輯關系編寫什么設計需求信息。

一、交互模型

模型一（圖 1 ）由 Donald Norman 提出，描述了人機交互（HCI）的基本交互框架（Interaction framework）。用戶將完成的目標任務與領域知識相結合，轉化為對系統界面的動作行為序列，形成界面輸入。輸入設備得到輸入信息后，將其根據當前系統的狀態解釋為系統理解的交互行為，并由界面實體執行該行為所對應的任務操作，給出相應的結果反饋。最后，用戶通過觀察來評估系統的執行結果是否滿足自己的期望。

這個模型定義了“人機”的主要行為及行為的先后順序，結合《設計心理學》中的行為模型進一步理解人的行動邏輯后，我們要思考“機”應該如何配合“人”的行為并最終幫助人實現目標。

模型二（圖 2 ）由 Ivar Jacobson 提出，描述用例中的一個步驟為一個事務（Transaction），進一步細分為四階段——

1. 用戶請求系統做某事并附帶相關（數據）信息；
2. 系統收到請求后驗證用戶提供的信息和請求的任務；
3. 根據驗證結果系統改變內部的狀態；
4. 完成后將結果信息反饋給用戶。

這位大師是從事軟件工程開發的，模型的內容側重點與第一個模型相反，傾向于表達“機”，進一步的細化“機”的行為，明確系統如何才能行動和行動所需要的東西，涉及的交互活動顆粒度比較大。

二、概念提取

我們屏蔽掉模型一中的“人機”的內心活動，只關注人執行和可感知的行為及承載行為的媒介，于是提取出三個概念（圖 3）：（用戶）輸入、（系統）輸出、界面。

從模型二可知，系統會根據驗證（不是所有輸入都要驗證）結果執行不同的動作和反饋不同的信息，在這里將驗證的信息統稱為“條件（圖 4）”。所要驗證的條件大部分繼承 PRD 文檔中用例的功能規約。雖然用戶無法直接感知條件，但是會影響系統的輸出，繼而影響用戶的行為。

將四個概念根據交互模型中的流程順序，再以“交互回合”分類并串聯起來得到圖 5。

提取包含了四個概念的回合 2，進一步簡化得到圖 6.1。在實際交互的時間線中，用戶是先看見輸出后的界面，然后再輸入，最后系統根據不同條件輸出不同的結果（界面）。最終得到的一個以“輸出”為起點的交互回合概念流程（圖 6.2）：輸出 → 界面 → 輸入 → 條件，這就是 DRD 中要描述的需求及其邏輯。

三、概念細化

進一步細化概念，但是細化內容約束在以下兩點：

1. 交互中的媒介為電腦和手機；
2. 交互回合的顆粒度為用戶的一個動作級別而非一場活動（一組動作序列）級別。

1. 輸出（Output）

系統執行該動作，將用戶輸入后的反饋結果通過顯示器、喇叭、震動器等媒介（輸出設備）傳達給用戶。這里我們聚焦顯示器中的界面，關于輸出的界面要清楚三個問題：① 界面中有什么內容信息？② 輸出界面什么形式？③ 怎么呈現界面？

① 和 ②按下不表，這里重點說一下 ③。

界面怎么呈現換個角度說就是界面的出/入場動畫是什么？這就屬于動效設計（Motion Graphics Design）。動效設計的界面對象大到頁面小到圖標，在設計完后將動效參數標注出來（圖 7），對于開發者需要以下基本參數信息：

1. 動畫觸發事件/條件；
2. 動畫對象、對象屬性、屬性值、曲線值；
3. 動畫持續時間（開始/結束）。

2. 界面（Interface）

作為各種元素、組件和信息的集合，其功能就是服務于輸入與輸出。在文檔中把界面直接呈現出來就回答了輸出中的問題 ①和 ②，但呈現的界面只能提供界面的顯性屬性，還有隱性屬性——適配規則和交互熱區。

適配規則：指根據設備的不同屏幕尺寸和分辨率，調整網頁或應用程序的布局和顯示效果，細分為界面布局和信息呈現。

界面布局中，組件級別的布局信息一般為：固定（Fixed）和自動（Auto），有時兩者會結合使用，例如：表格（圖 8）中“包名”及往右部分為了避免小屏上過于擁擠，會設置為 Min: (Fixed) 160px，分辨率夠大時為 Mix: Auto 自動拉伸；頁面級別的布局是斷點（Breakpoint）及柵格（Grid），這些可放進全局說明中去。

信息呈現主要有文本、圖片和視頻。文本是針對于字符數過多溢出容器時顯示省略號的文本省略規則，省略的文本分為前段、中段、后段（圖 9）。圖片和視頻的容器適配規則一樣，常用的有五種方式：Contain、Cover、Fill、None 和 Scale-down。

交互熱區：指界面中可交互的部分，是系統可接收用戶操作指令的范圍，在這里需將交互熱區和熱區功能標注出來（圖 10）。

3. 輸入（Input）

用戶執行該動作，將操作指令通過鍵盤、鼠標或觸控屏等媒介（輸入設備）發送給系統。在計算機術語中對用戶在窗口里對各種組件的操作稱為（用戶）事件，每一種組件有自己可以識別的事件。電腦和手機的事件類型各不相同，但是事件的描述結構基本一致（圖 11）：設備 + 動作 + 對象（組件&熱區）。

4. 條件（Condition）

指用戶輸入后系統內部驗證環節要驗證的信息，系統要執行某些操作必須確認這些條件是否滿足，當不滿足時系統反饋什么結果，滿足時反饋什么結果。

引用編程語言 C 語言中 If-Else 條件語句來表達這種系統內心活動—— If 條件表達式成立，則執行 XX 語句（系統改變的動作）。當然，我們只關心執行后系統的輸出，為了提供完整的上下文信息，把輸入后要驗證的每個條件對應的界面放在一起展示說明（圖 12），以“輸入 + 條件”來對界面進行整理歸類。

事件/條件會引起對象的狀態遷移。為了快速交付、降低文檔復雜度等多方面原因，省略事件（輸入）/條件信息，直接描述結果的“狀態”信息，通過狀態描述和界面上的信息就知道什么場景下（事件+ 條件）出現的（圖 13）。

但引起狀態遷移的事件/條件有多個，它們是多對多的關系。如圖 14 中的篩選器標題欄界面有 4 種功能狀態，這種一個界面多個狀態的情況，只是看狀態描述和界面信息是無法獲得所有狀態的遷移信息的。

此時可以補充一個狀態機（圖 15）來描述這個界面的不同狀態是什么事件/條件引起遷移。

結語

概念細化的內容局限于筆者工作中常遇到的，并且這些信息在文檔中如何組織、簡化根據公司和個人需求。此文對想了解交互的 UI 朋友有一定作用，文中的許多概念還可以繼續深入研究，例如兩個交互模型背后的實際應用和思考，有助于提升產品功能和交互設計。文中有什么不足和建議也請大家和筆者交流討論，下一篇再見。

參考資料：

1. 《以交互為中心的 Post-WIMP 界面模型》
2. 《編寫有效用例》