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

前言

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

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

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

一、交互模型

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

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

模型二（圖 2 ）由 Ivar Jacobson 提出，描述用例中的一個(gè)步驟為一個(gè)事務(wù)（Transaction），進(jìn)一步細(xì)分為四階段——

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

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

二、概念提取

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

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

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

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

三、概念細(xì)化

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

1. 交互中的媒介為電腦和手機(jī)；
2. 交互回合的顆粒度為用戶的一個(gè)動(dòng)作級(jí)別而非一場(chǎng)活動(dòng)（一組動(dòng)作序列）級(jí)別。

1. 輸出（Output）

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

① 和 ②按下不表，這里重點(diǎn)說一下 ③。

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

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

2. 界面（Interface）

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

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

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

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

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

3. 輸入（Input）

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

4. 條件（Condition）

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

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

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

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

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

結(jié)語

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

參考資料：

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