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

前言

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

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

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

一、交互模型

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

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

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

1. 用戶請求系統(tǒng)做某事并附帶相關(guān)（數(shù)據(jù)）信息；
2. 系統(tǒng)收到請求后驗證用戶提供的信息和請求的任務；
3. 根據(jù)驗證結(jié)果系統(tǒng)改變內(nèi)部的狀態(tài)；
4. 完成后將結(jié)果信息反饋給用戶。

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

二、概念提取

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

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

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

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

三、概念細化

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

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

1. 輸出（Output）

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

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

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

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

2. 界面（Interface）

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

適配規(guī)則：指根據(jù)設備的不同屏幕尺寸和分辨率，調(diào)整網(wǎng)頁或應用程序的布局和顯示效果，細分為界面布局和信息呈現(xiàn)。

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

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

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

3. 輸入（Input）

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

4. 條件（Condition）

指用戶輸入后系統(tǒng)內(nèi)部驗證環(huán)節(jié)要驗證的信息，系統(tǒng)要執(zhí)行某些操作必須確認這些條件是否滿足，當不滿足時系統(tǒng)反饋什么結(jié)果，滿足時反饋什么結(jié)果。

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

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

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

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

結(jié)語

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

參考資料：

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