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

深入討論DRD：從交互模型解析設(shè)計(jì)需求及關(guān)系在設(shè)計(jì)流程中，DRD，即交互（設(shè)計(jì)）說(shuō)明文檔，是大多數(shù)情況下需要涉及的環(huán)節(jié)或因素之一。那么你知道在文檔中，究竟需要依照什么樣的邏輯信息進(jìn)行設(shè)計(jì)需求信息的編寫(xiě)嗎？本篇文章里，作者便結(jié)合交互模型的解析，對(duì)該問(wèn)題做了解答，一起來(lái)看一下。前言DRD的全稱是DesignRequirementsDocument，直譯設(shè)計(jì)需求文檔，行業(yè)內(nèi)叫交互（設(shè)計(jì)）說(shuō)明文檔。作為PRD的子文檔，以前有點(diǎn)疑惑為什么叫“交互說(shuō)明文檔”，在后來(lái)逐步發(fā)現(xiàn)DRD中編寫(xiě)的設(shè)計(jì)需求在交互邏輯上的關(guān)系后，便理解了這樣的“意譯”。DRD的編寫(xiě)大綱和內(nèi)容行業(yè)內(nèi)也有很多文章講解，本文主要通過(guò)交互模型的解析，細(xì)聊一下文檔中按照什么邏輯關(guān)系編寫(xiě)什么設(shè)計(jì)需求信息。一、交互模型模型一（圖1）由DonaldNorman提出，描述了人機(jī)交互（HCI）的基本交互框架（Interactionframework）。用戶將完成的目標(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é)果反饋。最后，用戶通過(guò)觀察來(lái)評(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）由IvarJacobson提出，描述用例中的一個(gè)步驟為一個(gè)事務(wù)（Transaction），進(jìn)一步細(xì)分為四階段——用戶請(qǐng)求系統(tǒng)做某事并附帶相關(guān)（數(shù)據(jù)）信息；系統(tǒng)收到請(qǐng)求后驗(yàn)證用戶提供的信息和請(qǐng)求的任務(wù)；根據(jù)驗(yàn)證結(jié)果系統(tǒng)改變內(nèi)部的狀態(tài)；完成后將結(jié)果信息反饋給用戶。這位大師是從事軟件工程開(kāi)發(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ī)約。雖然用戶無(wú)法直接感知條件，但是會(huì)影響系統(tǒng)的輸出，繼而影響用戶的行為。將四個(gè)概念根據(jù)交互模型中的流程順序，再以“交互回合”分類并串聯(lián)起來(lái)得到圖5。提取包含了四個(gè)概念的回合2，進(jìn)一步簡(jiǎn)化得到圖6.1。在實(shí)際交互的時(shí)間線中，用戶是先看見(jiàn)輸出后的界面，然后再輸入，最后系統(tǒng)根據(jù)不同條件輸出不同的結(jié)果（界面）。最終得到的一個(gè)以“輸出”為起點(diǎn)的交互回合概念流程（圖6.2）：輸出→界面→輸入→條件，這就是DRD中要描述的需求及其邏輯。三、概念細(xì)化進(jìn)一步細(xì)化概念，但是細(xì)化內(nèi)容約束在以下兩點(diǎn)：交互中的媒介為電腦和手機(jī)；交互回合的顆粒度為用戶的一個(gè)動(dòng)作級(jí)別而非一場(chǎng)活動(dòng)（一組動(dòng)作序列）級(jí)別。1.輸出（Output）系統(tǒng)執(zhí)行該動(dòng)作，將用戶輸入后的反饋結(jié)果通過(guò)顯示器、喇叭、震動(dòng)器等媒介（輸出設(shè)備）傳達(dá)給用戶。這里我們聚焦顯示器中的界面，關(guān)于輸出的界面要清楚三個(gè)問(wèn)題：①界面中有什么內(nèi)容信息？②輸出界面什么形式？③怎么呈現(xiàn)界面？①和②按下不表，這里重點(diǎn)說(shuō)一下③。界面怎么呈現(xiàn)換個(gè)角度說(shuō)就是界面的出/入場(chǎng)動(dòng)畫(huà)是什么？這就屬于動(dòng)效設(shè)計(jì)（MotionGraphicsDesign）。動(dòng)效設(shè)計(jì)的界面對(duì)象大到頁(yè)面小到圖標(biāo)，在設(shè)計(jì)完后將動(dòng)效參數(shù)標(biāo)注出來(lái)（圖7），對(duì)于開(kāi)發(fā)者需要以下基本參數(shù)信息：動(dòng)畫(huà)觸發(fā)事件/條件；動(dòng)畫(huà)對(duì)象、對(duì)象屬性、屬性值、曲線值；動(dòng)畫(huà)持續(xù)時(shí)間（開(kāi)始/結(jié)束）。2.界面（Interface）作為各種元素、組件和信息的集合，其功能就是服務(wù)于輸入與輸出。在文檔中把界面直接呈現(xiàn)出來(lái)就回答了輸出中的問(wèn)題①和②，但呈現(xiàn)的界面只能提供界面的顯性屬性，還有隱性屬性——適配規(guī)則和交互熱區(qū)。適配規(guī)則：指根據(jù)設(shè)備的不同屏幕尺寸和分辨率，調(diào)整網(wǎng)頁(yè)或應(yīng)用程序的布局和顯示效果，細(xì)分為界面布局和信息呈現(xiàn)。界面布局中，組件級(jí)別的布局信息一般為：固定（Fixed）和自動(dòng)（Auto），有時(shí)兩者會(huì)結(jié)合使用，例如：表格（圖8）中“包名”及往右部分為了避免小屏上過(guò)于擁擠，會(huì)設(shè)置為Min:(Fixed)160px，分辨率夠大時(shí)為Mix:Auto自動(dòng)拉伸；頁(yè)面級(jí)別的布局是斷點(diǎn)（Breakpoint）及柵格（Grid），這些可放進(jìn)全局說(shuō)明中去。信息呈現(xiàn)主要有文本、圖片和視頻。文本是針對(duì)于字符數(shù)過(guò)多溢出容器時(shí)顯示省略號(hào)的文本省略規(guī)則，省略的文本分為前段、中段、后段（圖9）。圖片和視頻的容器適配規(guī)則一樣，常用的有五種方式：Contain、Cover、Fill、None和Scale-down。交互熱區(qū)：指界面中可交互的部分，是系統(tǒng)可接收用戶操作指令的范圍，在這里需將交互熱區(qū)和熱區(qū)功能標(biāo)注出來(lái)（圖10）。3.輸入（Input）用戶執(zhí)行該動(dòng)作，將操作指令通過(guò)鍵盤(pán)、鼠標(biāo)或觸控屏等媒介（輸入設(shè)備）發(fā)送給系統(tǒng)。在計(jì)算機(jī)術(shù)語(yǔ)中對(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é)果。引用編程語(yǔ)言C語(yǔ)言中If-Else條件語(yǔ)句來(lái)表達(dá)這種系統(tǒng)內(nèi)心活動(dòng)——If條件表達(dá)式成立，則執(zhí)行XX語(yǔ)句（系統(tǒng)改變的動(dòng)作）。當(dāng)然，我們只關(guān)心執(zhí)行后系統(tǒng)的輸出，為了提供完整的上下文信息，把輸入后要驗(yàn)證的每個(gè)條件對(duì)應(yīng)的界面放在一起展示說(shuō)明（圖12），以“輸入+條件”來(lái)對(duì)界面進(jìn)行整理歸類。事件/條件會(huì)引起對(duì)象的狀態(tài)遷移。為了快速交付、降低文檔復(fù)雜度等多方面原因，省略事件（輸入）/條件信息，直接描述結(jié)果的“狀態(tài)”信息，通過(guò)狀態(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)描述和界面信息是無(wú)法獲得所有狀態(tài)的遷移信息的。此時(shí)可以補(bǔ)充一個(gè)狀態(tài)機(jī)（圖15）來(lái)描述這個(gè)界面的不同狀態(tài)是什么事件/條件引起遷移。結(jié)語(yǔ)概念細(xì)化的內(nèi)容局限于筆者工作中常遇到的，并且這些信息在文檔中如何組織、簡(jiǎn)