DRD撰寫指南:如何寫出科學(xué)易懂的交互設(shè)計(jì)文檔

9 評(píng)論 15142 瀏覽 202 收藏 15 分鐘

從概念講起,筆者分享了撰寫交互文檔的全流程指南,經(jīng)驗(yàn)分享帶你繞過產(chǎn)品設(shè)計(jì)的那些坑。

最近停更了一段時(shí)間了,一直在琢磨著交互文檔這個(gè)事。其實(shí)早幾個(gè)月前就整理了一部分,把自己給整自閉了就整平臺(tái)規(guī)范去了。好了,說了一堆廢話言歸正傳。

在做交互文檔之前,我們先要明白什么是交互文檔、為什么要做以及做了給誰看。

什么是交互文檔

交互文檔,即交互設(shè)計(jì)說明文檔。英文 Design Requirement Document ,簡(jiǎn)稱DRD。主要是用來承載設(shè)計(jì)思路、設(shè)計(jì)方案、信息架構(gòu)、原型線框、交互說明等內(nèi)容。

為什么需要交互文檔

有些人可能對(duì)文檔這種東西比較反感,尤其是從事工作不久的朋友。其實(shí)工作得越久,越會(huì)發(fā)現(xiàn)文檔的重要性,它可以幫助你理清思路,并記錄下來,便于回顧。工作上而言,有一份規(guī)范的文檔可以讓你的設(shè)計(jì)更有說服力,也易于工作對(duì)接,提高彼此之間的溝通效率。

交互文檔給誰看的

交互文檔其實(shí)要說給誰看,其實(shí)具體情況具體分析。有的公司老板也要盯交互文檔,以及甲方爸爸、運(yùn)營(yíng)部門同事,都有查看的可能。

不過有4類人,無論如何他們都必須是交互文檔的忠實(shí)“讀者“:

  1. 產(chǎn)品經(jīng)理:產(chǎn)品經(jīng)理與交互設(shè)計(jì)師可能是溝通最多的人,產(chǎn)品經(jīng)理主要在文檔中確認(rèn)設(shè)計(jì)思路和業(yè)務(wù)流程,然后過一下頁面交互模塊。
  2. 視覺設(shè)計(jì):UI設(shè)計(jì)師通常最關(guān)注的是頁面交互模塊,有著產(chǎn)品思維和體驗(yàn)思維的設(shè)計(jì)師也會(huì)仔細(xì)看一下設(shè)計(jì)思路和產(chǎn)品背景,以便于自己更了解產(chǎn)品業(yè)務(wù)邏輯和用戶心理。
  3. 開發(fā)人員:前端的開發(fā)同事和UI設(shè)計(jì)師一樣,最關(guān)注頁面交互模塊,其他的作為提升會(huì)輔助了解。而后端開發(fā)人員關(guān)注更多的是業(yè)務(wù)邏輯、信息架構(gòu)、操作流程等,這些都清晰了,他們才能輸出一份準(zhǔn)確合格的開發(fā)文檔。
  4. 測(cè)試人員:因?yàn)闇y(cè)試人員是把關(guān)產(chǎn)品上線的一群人,所以各個(gè)模塊、步驟都應(yīng)該去了解透徹,才能提出有效的bug。

如何撰寫交互文檔

本文主要闡述以Axure軟件為撰寫工具,大家可以根據(jù)實(shí)際需求決定用什么軟件(Sketch、PPT、Word、PS、AI 等)。

比如小需求可以用Sketch,快而高效。如果是要給甲方爸爸/大老板看的,使用PPT會(huì)讓他們更好理解。

通常,一個(gè)比較基礎(chǔ)、規(guī)范的交互文檔(DRD)由:文檔封面、更新日志、文檔圖例、設(shè)計(jì)背景/思路、業(yè)務(wù)流程、頁面交互、全局通用說明、廢紙簍八部分組成。當(dāng)然,這不是絕對(duì),你可以根據(jù)你的實(shí)際工作需要進(jìn)行增減。

比如,如果是C端產(chǎn)品的話,用戶調(diào)研的結(jié)論、用戶畫像、用戶體驗(yàn)地圖等等,都可以放進(jìn)去給看的人一個(gè)參考。尤其是在如今這么關(guān)注用戶體驗(yàn)、產(chǎn)品思維的一個(gè)大環(huán)境下,這些數(shù)據(jù)支撐很有力量。同時(shí)還可以幫助開發(fā)人員、界面設(shè)計(jì)人員培養(yǎng)產(chǎn)品思維、體驗(yàn)思維,大家一起將產(chǎn)品變得更好。

其次,交互文檔的整潔與美觀也很有必要。相信在過去幾年不少人有遇到過這樣的產(chǎn)品經(jīng)理(兼交互),他們會(huì)輸出一些有時(shí)連他們自己都看不太懂或者直接從其它競(jìng)品截圖來的線框圖。當(dāng)開發(fā)和界面設(shè)計(jì)的人提出質(zhì)疑的時(shí)候還美其名曰線框不重要,重要的是里面的業(yè)務(wù)邏輯。其實(shí)用產(chǎn)品思維想,交互文檔就是交互設(shè)計(jì)師的產(chǎn)品,而看的人就是用戶,保持良好的可讀性,可謂至關(guān)重要。

1. 文檔封面

交互文檔的封面如上圖,通常包括產(chǎn)品的名稱、Logo、版本號(hào)以及版本發(fā)布時(shí)間、所屬部門、對(duì)接負(fù)責(zé)人/對(duì)接人。

2. 更新日志

我們都知道,在產(chǎn)品的迭代的過程中,需求/功能是會(huì)不斷調(diào)整的。而更新日志,就是為了迭代而生。它一般由修改日期、修改內(nèi)容、修改人、版本號(hào)和備注組成。

如果是新增的功能或模塊,建議是要加上鏈接可直接跳轉(zhuǎn)至新增內(nèi)容的,如上圖。

版本號(hào)也是同理,都應(yīng)加上對(duì)應(yīng)的版本鏈接,便于查看者回溯之前的內(nèi)容,與當(dāng)前的新版本形成對(duì)比。

這一點(diǎn)對(duì)開發(fā)人員來說很重要,其次對(duì)于新同事深入理解產(chǎn)品也能起到很大的幫助。

修改日期,通常是按時(shí)間倒序排列,查看起來會(huì)比較方便。

3. 文檔圖例

文檔圖例,顧名思義就是關(guān)于此文檔的一些輔助說明,目的是為了讓讀者更好地理解文檔。如上圖的:操作/跳轉(zhuǎn)圖例、標(biāo)簽圖例、流程圖例以及手勢(shì)操作圖例。

4. 設(shè)計(jì)背景/思路

設(shè)計(jì)背景,根據(jù)實(shí)際工作需要,放置一些關(guān)于思路整理、靈感來源的文檔。比如用研報(bào)告、用戶畫像、競(jìng)品分析報(bào)告、商業(yè)畫布等增強(qiáng)文檔的說服力,盡量讓每一個(gè)人都能理解到產(chǎn)品的戰(zhàn)略目標(biāo)和業(yè)務(wù)邏輯。

圖為我今年對(duì)接最久的是一個(gè)B端產(chǎn)品的項(xiàng)目,所以整理了一個(gè)產(chǎn)品畫像,僅供參考。

5. 業(yè)務(wù)流程

業(yè)務(wù)流程圖,不是操作流程圖也不是頁面流程圖。它是產(chǎn)品的整體業(yè)務(wù)流程,直接和業(yè)務(wù)掛鉤,可以說是產(chǎn)品的核心流程。

例如淘寶APP,買家購物由始至終的流程就是它的業(yè)務(wù)流程。通常用泳道圖的形式展示,多數(shù)情況下是由產(chǎn)品經(jīng)理繪制。

以上是我所負(fù)責(zé)產(chǎn)品的核心業(yè)務(wù)的流程圖。因?yàn)槭荁端產(chǎn)品,涉及角色較多,針對(duì)3個(gè)代表性角色分別進(jìn)行了繪制,僅供參考(涉及到保密協(xié)議,所有關(guān)鍵詞都去掉了)。

6. 頁面交互

1)信息架構(gòu)

信息架構(gòu)屬于用戶體驗(yàn)的結(jié)構(gòu)層,是產(chǎn)品的骨架,一般是由產(chǎn)品經(jīng)理或者更高層的管理人員給出大框架。除非是大的產(chǎn)品迭代,否則不會(huì)大改。

2)權(quán)限說明

如果是C端產(chǎn)品,權(quán)限這一塊相對(duì)簡(jiǎn)單,比較好整理的。B端產(chǎn)品涉及角色眾多,可能要單獨(dú)拎出來分析整理。
以上僅供參考,大家具體情況具體分析。若是功能很單一的產(chǎn)品,交互文檔中也可省去這個(gè)模塊。

3)操作流程圖

產(chǎn)品操作流程圖就是通過圖形化的表達(dá)形式,闡述產(chǎn)品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個(gè)功能時(shí),會(huì)產(chǎn)生的一系列操作和反饋的圖標(biāo)。

注:不要將所有流程匯總在一個(gè)表里,或者展示在同一個(gè)頁面中,而應(yīng)跟隨具體的操作或者功能模塊放置。時(shí)刻想著看文檔的人的感受,怎么易懂怎么來。

上圖是登錄、注冊(cè)和找回密碼的操作流程圖,僅供參考。

4)頁面線框圖

頁面線框圖,是通過圖形化的表達(dá)形式,闡述產(chǎn)品在頁面層面的信息。包括:

  • 頁面標(biāo)題:即每一個(gè)頁面的對(duì)應(yīng)標(biāo)題,一般就是導(dǎo)航欄標(biāo)題。
  • 頁面內(nèi)容:以黑白為主,保證信息規(guī)整易讀。
  • 交互說明:用標(biāo)簽將其對(duì)應(yīng)起來,包括交互邏輯、操作流程及反饋、元素狀態(tài)、字符限制、異常/特殊狀態(tài)、相關(guān)規(guī)則等。
  • 主流程線:只需要畫出主流程線即可,千萬不可太多太雜,時(shí)刻考慮讀者的感受。

以上是注冊(cè)的的頁面線框圖,僅供參考。

以上是登錄的線框圖和詳細(xì)的交互說明。將重點(diǎn)內(nèi)容用紅色標(biāo)記,可以讓查看者一目了然更好理解文檔。

7. 全局通用說明

全局通用說明,指整個(gè)產(chǎn)品可通用或者復(fù)用的元素。一般是邊做文檔邊整理出來的,方便自己或者接手該項(xiàng)目的設(shè)計(jì)師直接調(diào)用。其次,對(duì)開發(fā)及時(shí)封裝可復(fù)用控件也是有參考價(jià)值的。

1)常用控件

常用控件類似UIKit,通常將極具復(fù)用價(jià)值的控制整理在一起,方便及時(shí)調(diào)用。

2)復(fù)用界面

顧名思義就是全局可復(fù)用的一些內(nèi)頁,比如選擇聯(lián)系人、獨(dú)立搜索頁等。

3)時(shí)間規(guī)范

在做產(chǎn)品的第一步,就應(yīng)該約定一個(gè)時(shí)間規(guī)范。不然各個(gè)端開發(fā)出來,你會(huì)發(fā)現(xiàn)iOS是斜杠的,Android是橫杠的,WEB是圓點(diǎn)的……真到了發(fā)現(xiàn)的時(shí)候再改,那真是彼此都是無比崩潰的。

4)缺省頁匯總

缺省頁一般包括加載失敗、加載中、網(wǎng)絡(luò)中斷和無數(shù)據(jù)的空頁面。為空頁可以按照模塊整理在一起,方便UI設(shè)計(jì)師最后一起設(shè)計(jì)缺省頁,保持風(fēng)格統(tǒng)一。

8. 廢紙簍

廢紙簍,被稱為是交互文檔的“后悔藥”。在需求不斷變動(dòng)的情況下,改改改的過程中,請(qǐng)把你改過的稿子,放這里?。。∫?yàn)楹芸赡茏詈筮€是用的第一個(gè)方案(此刻內(nèi)心有點(diǎn)絕望)……

總結(jié)

文檔、軟件只是工具,最重要的還是要落地、實(shí)行起來才能對(duì)產(chǎn)品有所幫助。所以在撰寫文檔的每時(shí)每刻,都應(yīng)該站在“讀者”的角度思考,他們看的時(shí)候感受會(huì)是怎樣的,會(huì)覺得很難理解嗎?

除此之外,還需要有耐心,耐心給他們講解理解不透徹的地方。

用一個(gè)朋友的話總結(jié)下:好的設(shè)計(jì)都是被虐出來的(其實(shí)干哪一行不是呢..……??♀?重要的是:心態(tài)心態(tài)~)。

本文旨在提供參考,并非絕對(duì)的規(guī)范,還望拋磚引玉,多多交流。

 

本文由 @宛蘇 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 注冊(cè)和登錄的線框圖怎么看著是一樣的?

    來自上海 回復(fù)
  2. 請(qǐng)問模板哪里可以下載,謝謝~

    來自廣東 回復(fù)
  3. 請(qǐng)問模板哪里可以下載,謝謝

    回復(fù)
  4. 搜不到你的公眾號(hào)唉

    來自上海 回復(fù)
    1. 找到了 ??

      來自上海 回復(fù)
    2. 公眾號(hào)是什么

      回復(fù)
  5. 請(qǐng)問每個(gè)頁面里的內(nèi)容字段是怎么獲取來的,然后再做出原型圖的?

    來自江蘇 回復(fù)
  6. 下載了,很有幫助,十分感謝!

    來自安徽 回復(fù)
    1. 模板哪里可以下載?望告知,十分感謝

      回復(fù)