手把手教你寫交互設(shè)計文檔

159 評論 318044 瀏覽 1402 收藏 21 分鐘

離開交互圈已經(jīng)有段時間了。但由于博客還在,還是能夠偶爾收到一些郵件,上周有位同學(xué)問我:我在求職,我看到很多招聘說明上需要交互設(shè)計師編寫界面交互設(shè)計文檔,請問界面交互設(shè)計文檔是什么文檔?怎么編寫呢

這讓我想起來2009年自己在項目里也大力推行過交互說明文檔(在下文中,簡稱為DRD),格式倒沒什么限制,交互設(shè)計師自己寫到界面上也行,單獨文檔成文也行,總之就是讓交互設(shè)計師能夠?qū)⒔缑娉休d不了的信息通過文檔沉淀下來,降低項目里的溝通成本和風(fēng)險。今天整理電腦,翻出以前的PPT,分享之。這將涉及到幾個問題:

10031L342-11

一. 什么是交互說明文檔(DRD)?

所謂DRD即是用來承載交互說明,并交付給前端、測試以及開發(fā)工程師參考的文檔。

在項目中,交互設(shè)計師的主要產(chǎn)出物可能依次是:site map,page flow,wireframes。有的大型項目前期,交互設(shè)計師有可能還會產(chǎn)出用戶需求分析文檔(與PD產(chǎn)出的市場需求文檔不一樣的是,URD更多側(cè)重于對目標(biāo)用戶的需求分析)。

DRD則很少有人專門撰寫。如果需要對交互設(shè)計進行說明,聰明的交互設(shè)計師往往會直接標(biāo)注在線框圖里,或者在項目中不斷和前端工程師和開發(fā)工程師口口相傳,反復(fù)驗收,不斷迭代修改來確保所有的交互設(shè)計意圖最終得以呈現(xiàn)。

二. 為什么要寫?

DRD非項目必需環(huán)節(jié),一般情況下也不會為交互設(shè)計師專門留出相應(yīng)的時間預(yù)估。沒有這份文檔,項目也會繼續(xù),但是可能項目會為此承擔(dān)不必要的溝通成本和時間成本。嚴(yán)重的話,項目的質(zhì)量也會受到影響。所以寫與不寫,交互設(shè)計師需要做把握,時間被統(tǒng)一包含在“線框圖”環(huán)節(jié)內(nèi)——如果你要寫,請在評估時預(yù)留1-2天的時間。

那么,結(jié)合我過去的經(jīng)歷,談一下此文檔的必要性。

下圖是一個產(chǎn)品開發(fā)項目基本的流程。

10031K4E-21

敏捷開發(fā)意味著很多不同角色的流程需要并行操作。如果等到產(chǎn)品經(jīng)理的FRD已經(jīng)全部敲定,交互設(shè)計師再開始去畫線框圖,固然會減少溝通成本和返工風(fēng)險,但是同時意味著交互設(shè)計師的很多想法不被采納。如果產(chǎn)品經(jīng)理再強一些,他甚至?xí)贔RD里連原始的DEMO也一并繪制出來了,功能性的需求和界面交互的需求有時無法區(qū)分太清楚——比如他會在FRD里直接要求每頁條目40條,超過40條即分頁。而交互設(shè)計師可能會認為像蘑菇街那樣不斷裝載出足夠長的頁面會更親和……所以,我們希望是和產(chǎn)品經(jīng)理同時開始工作,在術(shù)業(yè)有專攻的時候相互補充。

同樣,開發(fā)工程師也希望及早介入需求,在FRD并未確認的時候就了解需求,進而將商業(yè)需求和功能需求轉(zhuǎn)化為開發(fā)工程師看得明白的開發(fā)需求清單(這個清單,大部分叫做UC,即USE CASE),當(dāng)這份清單由工程師需求分析師——在過去,這個角色被叫簡稱為RA,但是目前已經(jīng)取消此專門的職位,而是由開發(fā)工程師代表擔(dān)綱此環(huán)節(jié)工作,為了便于描述,在此文里,我仍然將做這件事情的人稱為RA——交付給具體的執(zhí)行工程師后,執(zhí)行工程師基本上可以當(dāng)作一條條的checklist開始高效工作,而不必再思考商業(yè)邏輯和需求。同樣,測試工程師也需要編寫具體的文檔去指導(dǎo)很多測試人員在開發(fā)后高效測試,這也是基于UC和FRD去撰寫的。

所以,開發(fā)需求分析是個很重要的環(huán)節(jié)。那RA是如何來完成需求分析工作的呢?

  • 前期介入,對PD進行開發(fā)需求評估支持;
  • 如何寫一份交互說明文檔參與每次的FRD評審會;
  • 詳細審閱FRD文檔并不斷與PD確認。

對于做這件事情的人來說,足夠詳盡的FRD是非常重要的。所以一份FRD雖然是PD產(chǎn)出,但是很多實施細節(jié)則是由開發(fā)工程師不斷溝通評估并確認下來的。而設(shè)計需求的傳遞,卻存在很多問題。除了線框圖,沒有“詳盡的說明性的文檔”告訴他們。比如:

10031J257-31

一方面,交互設(shè)計師對產(chǎn)品經(jīng)理說:這塊由我們來考慮,你的文檔不必包含設(shè)計上的說明,這隨時會調(diào)整的。

另一方面,線框圖的評審有時會讓RA參與,有時卻沒有叫他們。即使叫上了他們,他們也會發(fā)現(xiàn)交互設(shè)計的需求變化要比FRD變化快。另外,他們會認為UC不必寫太多關(guān)于交互設(shè)計的需求。

在某個大型項目結(jié)束后,作為交互設(shè)計師,我進行了一些調(diào)研,聽聽這相關(guān)人員是怎么表述問題的:

開發(fā)部門的需求分析師:

  • 每次變動都很痛苦,設(shè)計變了之后,我就要跟著改UC,改截圖,有時候UED改了還忘了通知我們,導(dǎo)致UC有問題……
  • 頁面交互的需求容易漏掉,因為UC里面不可能寫太多交互方面的東西。
  • 希望UED能夠在提交HTML DEMO給RA時,能同時給出一份頁面元素描述文檔,需要介紹html demo中的文案、鏈接以及相關(guān)的圖片尺寸或顯示字符個數(shù)?,F(xiàn)在RA在這方面花費的時間比較多,經(jīng)常要和UED去確認這些內(nèi)容。

產(chǎn)品經(jīng)理:

  • 前期RA和PD溝通過程中,有很多交互點點不能夠明確,比如“默認顯示多少屬性值”,“標(biāo)題顯示多少字符”等。在以往的需求和項目中,對待這些問題我們都是想到一點補一點的到FRD文檔或者郵件中去。既增加了溝通成本又會存在遺漏細節(jié)的風(fēng)險。PD為了可控性的需求,往往會“越俎代庖”,直接在FRD注明這種需求(對于交互設(shè)計師來講,卻又導(dǎo)致沒有發(fā)揮余地)

走訪了一些交互設(shè)計師后,他們也存在如何清晰無遺漏將交互設(shè)計需求傳遞下去的困惑:

交互認為很平常的設(shè)計需求,如果不表達出來,還是容易被前端和開發(fā)忽略掉。我經(jīng)歷的一個項目,前端從頭到尾更換了三個人,每次我都要重復(fù)去講解下設(shè)計需求,講得口干舌燥。而且做好后,還需要去驗收。

  • DRD做為參考手冊,一定程度上避免不吻合的問題發(fā)生。
  • 即使有問題發(fā)生,也可以作為界面驗收時的Checklist。將“我對A說,我對B說,A對B說”,轉(zhuǎn)變?yōu)椤癆和B共同參考同一份文檔”,減少溝通成本及信息不對稱。
  • 全程影響用戶體驗(一直到測試,都需要參照設(shè)計文檔)。

可是以下問題都可以通過一份DRD來解決嗎?

10031H402-41

三. 寫什么不寫什么?

10031J208-51

要明確文檔的定位,從寫什么與不寫什么開始,劃清DRD以及FRD的邊界。

不寫視覺規(guī)范規(guī)格標(biāo)注

這些說明與功能實現(xiàn)沒有太大關(guān)系,主要是為前端做HTML的時候參考的。一般視覺設(shè)計師會在PSD里標(biāo)注清楚。如圖:

10031JP6-61

不寫功能實現(xiàn)邏輯。

如下圖所示,作為DRD,你有必要傳達清楚Browse by category區(qū)域的設(shè)計:鏈接的可點擊性,鏈接的指向,字符與條目的數(shù)量限制等,但是具體二級類目排列是按產(chǎn)品數(shù)目排還是按字母排,還是人工運營,是FRD要解決的任務(wù)。

10031H923-71

那么文檔寫什么呢?

10031H913-81

舉例子說明下:

字符限制

提高空間利用率,有時網(wǎng)頁上的動態(tài)文字需要從數(shù)據(jù)庫里提取部分然后截斷處理。比如下圖中的標(biāo)題和描述。你的DRD需要傳達清楚:1,是否要做限制?2,如果做限制的話,多少字出現(xiàn)截斷?截斷后是顯示為省略號還是不顯示?這個漢語設(shè)計相對簡單,如果英文單詞的話,因為是按字符,每個字符的寬度不一致,需要預(yù)估,另外還需要注明是整詞截斷還是詞間截斷。

10031HY1-91

鏈接具體化

很多網(wǎng)站都有對搜索結(jié)果的篩選設(shè)計(refine search),比如aliexpress搜索結(jié)果頁左側(cè)。這塊區(qū)域的交互事件是非常復(fù)雜的。

  • 類目和屬性的不同如何處理
  • 屬性以及每條屬性顯示的屬性值的條目是否有顯示上的限制?
  • 選中后,被選中的屬性值是停留在原地,方便用戶記憶,還是放到統(tǒng)一的位置,方便用戶統(tǒng)一查看?其他未被選中的屬性值是否消失?
10031L1b-101

要確保這些你設(shè)想中的復(fù)雜的交互邏輯能夠被理解被呈現(xiàn),除了一頁頁的線框圖,你有必要再三讓前端工程師和開發(fā)工程師了解并達成認知一致。所以你需要將頁面上的關(guān)鍵鏈接事件標(biāo)識清楚。它們有的指向無需刷新頁面的交互,有的指向你安排的并非PD安排的某個中間頁面(page flow是交互設(shè)計師的職責(zé))

10031G349-111

交互細節(jié)說明

相信我,我很不愿意寫這些東西。我喜歡在會議室向各位涉眾演示我的線框圖,我會研究用axure制作各種動態(tài)效果,達到它足夠逼真呈現(xiàn)各種聯(lián)動——比如當(dāng)你選擇了下拉菜單中的某項時,頁面上其他區(qū)域也發(fā)生相應(yīng)的變化??墒?,Axure不是全能的。即使能夠表達出來,線框圖交付出去,也不能確保其他人都能夠一一進行點擊嘗試。所以只能在會議室反復(fù)講解,在事后再三檢查并敦促修改。

但是當(dāng)我嘗試用下圖對這塊小小且復(fù)雜的區(qū)域進行詳細說明后,事情變得簡單多了。所以我用節(jié)省的時間去寫了這份PPT.

10031MZ9-121

又如,你可以在這里說明任何你想要的效果。你的受眾也只需要用10分鐘時間閱讀完畢,標(biāo)注出與他工作相關(guān)的重點,存檔并在遇到問題,找不到你人時隨時參考。

10031H129-131

表單的校驗

這也是一項不怎么有創(chuàng)意的事情,但是你若不事先想清楚,在項目過程中有點麻煩。寫文檔看似枯燥乏味,反過來想也是讓你自己再好好思量審核設(shè)計本身的關(guān)鍵步驟。我曾經(jīng)自以為完善的交互設(shè)計方案就是在寫DRD的時候發(fā)現(xiàn)存在重大的紕漏,然后及時優(yōu)化的。

10031G040-141

瀏覽器的兼容性要求

你們的產(chǎn)品兼容所有瀏覽器簡直是夢想,但是有時出于效率的要求,我們必須戰(zhàn)略性放棄某些瀏覽器,比如IE6.:D 。 這個決定誰來做?是前端工程師還是產(chǎn)品經(jīng)理?還是你——交互設(shè)計師?我認為決定權(quán)在交互設(shè)計師這里,但是他必須和產(chǎn)品經(jīng)理達成一致,并與前端確認。你要求兼容的瀏覽器越多,標(biāo)準(zhǔn)越高,前端的工作量就會越大,測試的工作量甚至也會翻倍。

10031IS1-151

四. 什么時間交付呢?

Heidi的建議:盡可能與你的線框圖同時交付,如果你先交付出線框圖,在撰寫DRD的時候,極大可能會發(fā)現(xiàn)問題或產(chǎn)生優(yōu)化的想法。但是往往寫DRD至少需要1-2天的時間,你不可能讓所有下游等著你的工作。所以:

  • 你可以交付出線框圖供視覺先開始。視覺設(shè)計往往會先做風(fēng)格定位設(shè)計,這和交互細節(jié)關(guān)系不大。
  • 先交付出已經(jīng)確定的線框圖給前端,然后在1-2天DRD后,若有改動,與前端當(dāng)面一一確認并一起交付。

五. 如何寫DRD?

選擇最有效率的工具。

我的經(jīng)驗是這個工具最好能夠提供清晰的目錄導(dǎo)航結(jié)構(gòu),而且易標(biāo)注。word確實是個寫文檔的好工具,不管你信不信,反正我是信了。

10031K408-161

建立固定的目錄結(jié)構(gòu)

下圖僅供參考。

10031K3N-171

具體里面的細節(jié),就不一一羅嗦了。

六. 重要的原則

準(zhǔn)備寫DRD的朋友,請認識清楚此文檔真正要解決的問題是什么?如果是解決溝通偏差、需求遺漏、溝通成本高的問題,你在項目里沒有出現(xiàn)過這種問題,各合作方也反饋良好,那么這個文檔就無需寫。如果是解決對設(shè)計需求進行存檔,便于后續(xù)人員改版時查看的問題,則又是另外一回事(經(jīng)驗證明,過去的DRD確實能夠在改版時起到一定的幫助,在我離開原項目很久后,新的設(shè)計師還找我要過相應(yīng)項目的文檔,了解過去的設(shè)計邏輯)。

  • 不是為了寫文檔而寫文檔(而是為了解決問題)
  • 適合于項目、合作方(大項目有大文檔,小需求有靈巧的解決方案)
  • 工具不是問題(易傳播,易標(biāo)注,成目錄即可)
  • 模版不是問題,大家看明白就可
  • 完美的文檔無法取代面對面的溝通(評審會和討論不會因為文檔而減少)
  • 需要在實踐中不斷改進

七. 誰來寫?

10031G5W-181

我建議由交互設(shè)計師發(fā)起,但是由前端工程師進行修訂,再傳遞給開發(fā)工程師。

有很多需求,交互設(shè)計師只要求實現(xiàn)即可,但是他可能并不在乎是前端實現(xiàn)還是后端實現(xiàn)。前端工程師對DRD進行把關(guān)和修訂,能夠?qū)⒃O(shè)計語言轉(zhuǎn)化為工程師能夠看懂的語言,且能夠劃定與開發(fā)的實現(xiàn)邊界。

八. 與其他產(chǎn)出物的關(guān)系

項目中交付物對應(yīng)不同的使用角色,如下圖所示:

10031J315-191

但是有個問題是,雖然DRD的目標(biāo)受眾有開發(fā)和測試,但是讓開發(fā)工程師同時參考那么多文檔是不現(xiàn)實的,所以仍然是開發(fā)工程師的接口人,也就是事實上的RA需求分析作為需求整合傳遞的角色,將商業(yè)需求和設(shè)計需求,傳達給具體的執(zhí)行開發(fā)工程師與測試工程師:

10031G423-201

【總結(jié)】

對于堅持撰寫DRD的我來說,DRD的好處自己當(dāng)然是明白的——在撰寫過程中重新梳理設(shè)計邏輯,優(yōu)化設(shè)計;降低溝通成本等等。

但是并非所有人都喜歡寫文檔或者都喜歡看文檔。

解決問題有多種方案,DRD只是其中一個。不過,當(dāng)你因為設(shè)計需求傳遞過程中發(fā)生了問題,或者你的需求被理解偏差,或者你的需求被遺漏,或者你接手的項目改版,因為要梳理過去的設(shè)計邏輯焦頭爛額時,你可以試試用DRD。如果使用過程中還是存在問題,那么就想想是否還存在別的解決方案吧~

 

作者:heidixie

來源:http://heidixie.lofter.com/post/b8226_168d4b5

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 謝謝大神分享,能否發(fā)一份DRD文檔參考嗎?,郵箱:51728328@qq.com,謝謝

    來自重慶 回復(fù)
  2. 謝謝大神分享,能否發(fā)一份DRD文檔參考嗎,郵箱:83948935@qq.com,謝謝

    來自浙江 回復(fù)
  3. 謝謝曹大師的分享,能發(fā)一份DRD參考模板給我么?產(chǎn)品新人一枚,希望能學(xué)習(xí)更多的產(chǎn)品知識
    郵箱:youlaizhucea@163.com
    感謝 ??

    來自北京 回復(fù)
  4. 有個疑問,想問下老師,交互設(shè)計文檔為什么簡稱DRD?而不是IDD(Interactive Design Document)?

    來自廣東 回復(fù)
  5. 從我的感覺來說,這么寫比較奶媽,其實,可能將某一些交互形為組件化,不用每次都說,還且一些通用的頁面模型,可以直接和通用的說明跳轉(zhuǎn)即可,程序其實很討論很多文字的。
    最后,為什么這些說明不是放在交互稿里面的的,為什么還要獨立文檔,這不是折騰么。

    在公司,交互出原型,我在原型的上面寫業(yè)務(wù)需求,并補充異常場景,如數(shù)據(jù)為空的時候怎么展示(不包后端的處理模塊,跟你目樣的一樣。)
    程序一般性看交互稿就有全部的需求帶入感了,反而減弱了prd的存在感。prd更多的是業(yè)務(wù)流程類的講解,偏后端。

    來自廣東 回復(fù)
  6. 大佬。我也想要一份,能發(fā)我一份嗎,謝謝12079030@qq.com

    來自江蘇 回復(fù)
  7. 老師,能否發(fā)一份DRD模板給我參考下嗎?、83471779@qq.com O(∩_∩)O謝謝

    來自廣東 回復(fù)
  8. 覺得這個文檔寫的比那個產(chǎn)品需求文檔寫的實用多了

    來自北京 回復(fù)
  9. 老師,能否發(fā)一份DRD模板給我參考下嗎?謝謝414826982@qq.com

    來自山東 回復(fù)
  10. 大師,可以發(fā)一份DRD文檔給我參考一下下嗎?先謝謝了,我的郵箱609043607@qq.com

    來自廣東 回復(fù)
  11. 謝謝分享

    來自北京 回復(fù)
  12. 首先謝謝大神的分享,受益頗豐,老師可否發(fā)一份原作DRD文檔給我們參考一下?郵箱545982882@qq.com

    來自江蘇 回復(fù)
  13. 大神老師,可以發(fā)一份DRD文檔給我參考一下下嗎?先謝謝了,我的郵箱402268450@qq.com

    來自上海 回復(fù)
  14. 跪求一種,老濕 ? 781334600@qq.com

    來自山東 回復(fù)
  15. 老師,能否發(fā)一份DRD模板給我參考下嗎?、1465355809@qq.com O(∩_∩)O謝謝

    來自廣東 回復(fù)
  16. 老師,可以發(fā)一份DRD文檔給我參考一下下嗎?先謝謝了,我的郵箱1229805062@qq.com

    來自湖南 回復(fù)
  17. 大師,可以發(fā)一份DRD文檔給我參考一下下嗎?先謝謝了,我的郵箱497676911@qq.com

    來自浙江 回復(fù)
  18. 大師,可以發(fā)一份DRD文檔給我參考一下下嗎?先謝謝了,我的郵箱784559855@qq.com

    來自上海 回復(fù)
  19. 大師,可以發(fā)一份DRD文檔給我參考一下下嗎?先謝謝了,我的郵箱944549030@qq.com

    來自北京 回復(fù)
  20. 大師,可以發(fā)一份DRD文檔參考下么? 謝謝非常感謝 455469999@qq.com

    來自北京 回復(fù)
  21. 大師,可以發(fā)一份DRD文檔參考一下嗎?謝謝了。郵箱3089950634@qq.com

    來自上海 回復(fù)
  22. 大師,可以發(fā)一份DRD文檔給我參考一下下嗎?先謝謝了,我的郵箱543004344@qq.com

    來自上海 回復(fù)
  23. 大師,可以發(fā)一份DRD文檔給我參考一下下嗎?先謝謝了,我的郵箱helenyxl@foxmail.com

    來自香港 回復(fù)
  24. 想打賞都提示我不支持,哈哈

    來自北京 回復(fù)
  25. ??

    來自上海 回復(fù)
  26. FBRD和UC是什么意思?

    來自上海 回復(fù)
  27. 不錯

    來自上海 回復(fù)
  28. 對于新手還是有用的

    來自香港 回復(fù)
  29. 絕對是篇好文章。值得閱讀。

    來自菲律賓 回復(fù)
  30. 好東西

    來自四川 回復(fù)