深入討論 DRD：從交互模型解析設(shè)計需求及關(guān)系

深入討論DRD：從交互模型解析設(shè)計需求及關(guān)系在設(shè)計流程中，DRD，即交互（設(shè)計）說明文檔，是大多數(shù)情況下需要涉及的環(huán)節(jié)或因素之一。那么你知道在文檔中，究竟需要依照什么樣的邏輯信息進行設(shè)計需求信息的編寫嗎？本篇文章里，作者便結(jié)合交互模型的解析，對該問題做了解答，一起來看一下。前言DRD的全稱是DesignRequirementsDocument，直譯設(shè)計需求文檔，行業(yè)內(nèi)叫交互（設(shè)計）說明文檔。作為PRD的子文檔，以前有點疑惑為什么叫“交互說明文檔”，在后來逐步發(fā)現(xiàn)DRD中編寫的設(shè)計需求在交互邏輯上的關(guān)系后，便理解了這樣的“意譯”。DRD的編寫大綱和內(nèi)容行業(yè)內(nèi)也有很多文章講解，本文主要通過交互模型的解析，細聊一下文檔中按照什么邏輯關(guān)系編寫什么設(shè)計需求信息。一、交互模型模型一（圖1）由DonaldNorman提出，描述了人機交互（HCI）的基本交互框架（Interactionframework）。用戶將完成的目標任務(wù)與領(lǐng)域知識相結(jié)合，轉(zhuǎn)化為對系統(tǒng)界面的動作行為序列，形成界面輸入。輸入設(shè)備得到輸入信息后，將其根據(jù)當前系統(tǒng)的狀態(tài)解釋為系統(tǒng)理解的交互行為，并由界面實體執(zhí)行該行為所對應(yīng)的任務(wù)操作，給出相應(yīng)的結(jié)果反饋。最后，用戶通過觀察來評估系統(tǒng)的執(zhí)行結(jié)果是否滿足自己的期望。這個模型定義了“人機”的主要行為及行為的先后順序，結(jié)合《設(shè)計心理學(xué)》中的行為模型進一步理解人的行動邏輯后，我們要思考“機”應(yīng)該如何配合“人”的行為并最終幫助人實現(xiàn)目標。模型二（圖2）由IvarJacobson提出，描述用例中的一個步驟為一個事務(wù)（Transaction），進一步細分為四階段——用戶請求系統(tǒng)做某事并附帶相關(guān)（數(shù)據(jù)）信息；系統(tǒng)收到請求后驗證用戶提供的信息和請求的任務(wù)；根據(jù)驗證結(jié)果系統(tǒng)改變內(nèi)部的狀態(tài)；完成后將結(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.輸出（Output）系統(tǒng)執(zhí)行該動作，將用戶輸入后的反饋結(jié)果通過顯示器、喇叭、震動器等媒介（輸出設(shè)備）傳達給用戶。這里我們聚焦顯示器中的界面，關(guān)于輸出的界面要清楚三個問題：①界面中有什么內(nèi)容信息？②輸出界面什么形式？③怎么呈現(xiàn)界面？①和②按下不表，這里重點說一下③。界面怎么呈現(xiàn)換個角度說就是界面的出/入場動畫是什么？這就屬于動效設(shè)計（MotionGraphicsDesign）。動效設(shè)計的界面對象大到頁面小到圖標，在設(shè)計完后將動效參數(shù)標注出來（圖7），對于開發(fā)者需要以下基本參數(shù)信息：動畫觸發(fā)事件/條件；動畫對象、對象屬性、屬性值、曲線值；動畫持續(xù)時間（開始/結(jié)束）。2.界面（Interface）作為各種元素、組件和信息的集合，其功能就是服務(wù)于輸入與輸出。在文檔中把界面直接呈現(xiàn)出來就回答了輸出中的問題①和②，但呈現(xiàn)的界面只能提供界面的顯性屬性，還有隱性屬性——適配規(guī)則和交互熱區(qū)。適配規(guī)則：指根據(jù)設(shè)備的不同屏幕尺寸和分辨率，調(diào)整網(wǎng)頁或應(yīng)用程序的布局和顯示效果，細分為界面布局和信息呈現(xiàn)。界面布局中，組件級別的布局信息一般為：固定（Fixed）和自動（Auto），有時兩者會結(jié)合使用，例如：表格（圖8）中“包名”及往右部分為了避免小屏上過于擁擠，會設(shè)置為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í)行該動作，將操作指令通過鍵盤、鼠標或觸控屏等媒介（輸入設(shè)備）發(fā)送給系統(tǒng)。在計算機術(shù)語中對用戶在窗口里對各種組件的操作稱為（用戶）事件，每一種組件有自己可以識別的事件。電腦和手機的事件類型各不相同，但是事件的描述結(jié)構(gòu)基本一致（圖11）：設(shè)備+動作+對象（組件&熱區(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)的輸出，為了提供完整的上下文信息，把輸入后要驗證的每個條件對應(yīng)的界面放在一起展示說明（圖12），以“輸入+條件”來對界面進行整理歸類。事件/條件會引起對象的狀態(tài)遷移。為了快速交付、降低文檔復(fù)雜度等多方面原因，省略事件（輸入）/條件信息，直接描述結(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)容局限于筆者工作中常遇到的，并且這些信息在文檔中如何組織、簡