手把手教你寫交互設(shè)計文檔
離開交互圈已經(jīng)有段時間了。但由于博客還在,還是能夠偶爾收到一些郵件,上周有位同學(xué)問我:我在求職,我看到很多招聘說明上需要交互設(shè)計師編寫界面交互設(shè)計文檔,請問界面交互設(shè)計文檔是什么文檔?怎么編寫呢
這讓我想起來2009年自己在項目里也大力推行過交互說明文檔(在下文中,簡稱為DRD),格式倒沒什么限制,交互設(shè)計師自己寫到界面上也行,單獨文檔成文也行,總之就是讓交互設(shè)計師能夠?qū)⒔缑娉休d不了的信息通過文檔沉淀下來,降低項目里的溝通成本和風(fēng)險。今天整理電腦,翻出以前的PPT,分享之。這將涉及到幾個問題:
一. 什么是交互說明文檔(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ā)項目基本的流程。
敏捷開發(fā)意味著很多不同角色的流程需要并行操作。如果等到產(chǎn)品經(jīng)理的FRD已經(jīng)全部敲定,交互設(shè)計師再開始去畫線框圖,固然會減少溝通成本和返工風(fēng)險,但是同時意味著交互設(shè)計師的很多想法不被采納。如果產(chǎn)品經(jīng)理再強一些,他甚至?xí)贔RD里連原始的DEMO也一并繪制出來了,功能性的需求和界面交互的需求有時無法區(qū)分太清楚——比如他會在FRD里直接要求每頁條目40條,超過40條即分頁。而交互設(shè)計師可能會認(rèn)為像蘑菇街那樣不斷裝載出足夠長的頁面會更親和……所以,我們希望是和產(chǎn)品經(jīng)理同時開始工作,在術(shù)業(yè)有專攻的時候相互補充。
同樣,開發(fā)工程師也希望及早介入需求,在FRD并未確認(rèn)的時候就了解需求,進而將商業(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評審會;
- 詳細(xì)審閱FRD文檔并不斷與PD確認(rèn)。
對于做這件事情的人來說,足夠詳盡的FRD是非常重要的。所以一份FRD雖然是PD產(chǎn)出,但是很多實施細(xì)節(jié)則是由開發(fā)工程師不斷溝通評估并確認(rèn)下來的。而設(shè)計需求的傳遞,卻存在很多問題。除了線框圖,沒有“詳盡的說明性的文檔”告訴他們。比如:
一方面,交互設(shè)計師對產(chǎn)品經(jīng)理說:這塊由我們來考慮,你的文檔不必包含設(shè)計上的說明,這隨時會調(diào)整的。
另一方面,線框圖的評審有時會讓RA參與,有時卻沒有叫他們。即使叫上了他們,他們也會發(fā)現(xiàn)交互設(shè)計的需求變化要比FRD變化快。另外,他們會認(rèn)為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去確認(rèn)這些內(nèi)容。
產(chǎn)品經(jīng)理:
- 前期RA和PD溝通過程中,有很多交互點點不能夠明確,比如“默認(rèn)顯示多少屬性值”,“標(biāo)題顯示多少字符”等。在以往的需求和項目中,對待這些問題我們都是想到一點補一點的到FRD文檔或者郵件中去。既增加了溝通成本又會存在遺漏細(xì)節(jié)的風(fēng)險。PD為了可控性的需求,往往會“越俎代庖”,直接在FRD注明這種需求(對于交互設(shè)計師來講,卻又導(dǎo)致沒有發(fā)揮余地)
走訪了一些交互設(shè)計師后,他們也存在如何清晰無遺漏將交互設(shè)計需求傳遞下去的困惑:
交互認(rèn)為很平常的設(shè)計需求,如果不表達出來,還是容易被前端和開發(fā)忽略掉。我經(jīng)歷的一個項目,前端從頭到尾更換了三個人,每次我都要重復(fù)去講解下設(shè)計需求,講得口干舌燥。而且做好后,還需要去驗收。
- DRD做為參考手冊,一定程度上避免不吻合的問題發(fā)生。
- 即使有問題發(fā)生,也可以作為界面驗收時的Checklist。將“我對A說,我對B說,A對B說”,轉(zhuǎn)變?yōu)椤癆和B共同參考同一份文檔”,減少溝通成本及信息不對稱。
- 全程影響用戶體驗(一直到測試,都需要參照設(shè)計文檔)。
可是以下問題都可以通過一份DRD來解決嗎?
三. 寫什么不寫什么?
要明確文檔的定位,從寫什么與不寫什么開始,劃清DRD以及FRD的邊界。
不寫視覺規(guī)范規(guī)格標(biāo)注
這些說明與功能實現(xiàn)沒有太大關(guān)系,主要是為前端做HTML的時候參考的。一般視覺設(shè)計師會在PSD里標(biāo)注清楚。如圖:
不寫功能實現(xiàn)邏輯。
如下圖所示,作為DRD,你有必要傳達清楚Browse by category區(qū)域的設(shè)計:鏈接的可點擊性,鏈接的指向,字符與條目的數(shù)量限制等,但是具體二級類目排列是按產(chǎn)品數(shù)目排還是按字母排,還是人工運營,是FRD要解決的任務(wù)。
那么文檔寫什么呢?
舉例子說明下:
字符限制
提高空間利用率,有時網(wǎng)頁上的動態(tài)文字需要從數(shù)據(jù)庫里提取部分然后截斷處理。比如下圖中的標(biāo)題和描述。你的DRD需要傳達清楚:1,是否要做限制?2,如果做限制的話,多少字出現(xiàn)截斷?截斷后是顯示為省略號還是不顯示?這個漢語設(shè)計相對簡單,如果英文單詞的話,因為是按字符,每個字符的寬度不一致,需要預(yù)估,另外還需要注明是整詞截斷還是詞間截斷。
鏈接具體化
很多網(wǎng)站都有對搜索結(jié)果的篩選設(shè)計(refine search),比如aliexpress搜索結(jié)果頁左側(cè)。這塊區(qū)域的交互事件是非常復(fù)雜的。
- 類目和屬性的不同如何處理
- 屬性以及每條屬性顯示的屬性值的條目是否有顯示上的限制?
- 選中后,被選中的屬性值是停留在原地,方便用戶記憶,還是放到統(tǒng)一的位置,方便用戶統(tǒng)一查看?其他未被選中的屬性值是否消失?
要確保這些你設(shè)想中的復(fù)雜的交互邏輯能夠被理解被呈現(xiàn),除了一頁頁的線框圖,你有必要再三讓前端工程師和開發(fā)工程師了解并達成認(rèn)知一致。所以你需要將頁面上的關(guān)鍵鏈接事件標(biāo)識清楚。它們有的指向無需刷新頁面的交互,有的指向你安排的并非PD安排的某個中間頁面(page flow是交互設(shè)計師的職責(zé))
交互細(xì)節(jié)說明
相信我,我很不愿意寫這些東西。我喜歡在會議室向各位涉眾演示我的線框圖,我會研究用axure制作各種動態(tài)效果,達到它足夠逼真呈現(xiàn)各種聯(lián)動——比如當(dāng)你選擇了下拉菜單中的某項時,頁面上其他區(qū)域也發(fā)生相應(yīng)的變化。可是,Axure不是全能的。即使能夠表達出來,線框圖交付出去,也不能確保其他人都能夠一一進行點擊嘗試。所以只能在會議室反復(fù)講解,在事后再三檢查并敦促修改。
但是當(dāng)我嘗試用下圖對這塊小小且復(fù)雜的區(qū)域進行詳細(xì)說明后,事情變得簡單多了。所以我用節(jié)省的時間去寫了這份PPT.
又如,你可以在這里說明任何你想要的效果。你的受眾也只需要用10分鐘時間閱讀完畢,標(biāo)注出與他工作相關(guān)的重點,存檔并在遇到問題,找不到你人時隨時參考。
表單的校驗
這也是一項不怎么有創(chuàng)意的事情,但是你若不事先想清楚,在項目過程中有點麻煩。寫文檔看似枯燥乏味,反過來想也是讓你自己再好好思量審核設(shè)計本身的關(guān)鍵步驟。我曾經(jīng)自以為完善的交互設(shè)計方案就是在寫DRD的時候發(fā)現(xiàn)存在重大的紕漏,然后及時優(yōu)化的。
瀏覽器的兼容性要求
你們的產(chǎn)品兼容所有瀏覽器簡直是夢想,但是有時出于效率的要求,我們必須戰(zhàn)略性放棄某些瀏覽器,比如IE6.:D 。 這個決定誰來做?是前端工程師還是產(chǎn)品經(jīng)理?還是你——交互設(shè)計師?我認(rèn)為決定權(quán)在交互設(shè)計師這里,但是他必須和產(chǎn)品經(jīng)理達成一致,并與前端確認(rèn)。你要求兼容的瀏覽器越多,標(biāo)準(zhǔn)越高,前端的工作量就會越大,測試的工作量甚至也會翻倍。
四. 什么時間交付呢?
Heidi的建議:盡可能與你的線框圖同時交付,如果你先交付出線框圖,在撰寫DRD的時候,極大可能會發(fā)現(xiàn)問題或產(chǎn)生優(yōu)化的想法。但是往往寫DRD至少需要1-2天的時間,你不可能讓所有下游等著你的工作。所以:
- 你可以交付出線框圖供視覺先開始。視覺設(shè)計往往會先做風(fēng)格定位設(shè)計,這和交互細(xì)節(jié)關(guān)系不大。
- 先交付出已經(jīng)確定的線框圖給前端,然后在1-2天DRD后,若有改動,與前端當(dāng)面一一確認(rèn)并一起交付。
五. 如何寫DRD?
選擇最有效率的工具。
我的經(jīng)驗是這個工具最好能夠提供清晰的目錄導(dǎo)航結(jié)構(gòu),而且易標(biāo)注。word確實是個寫文檔的好工具,不管你信不信,反正我是信了。
建立固定的目錄結(jié)構(gòu)
下圖僅供參考。
具體里面的細(xì)節(jié),就不一一羅嗦了。
六. 重要的原則
準(zhǔn)備寫DRD的朋友,請認(rèn)識清楚此文檔真正要解決的問題是什么?如果是解決溝通偏差、需求遺漏、溝通成本高的問題,你在項目里沒有出現(xiàn)過這種問題,各合作方也反饋良好,那么這個文檔就無需寫。如果是解決對設(shè)計需求進行存檔,便于后續(xù)人員改版時查看的問題,則又是另外一回事(經(jīng)驗證明,過去的DRD確實能夠在改版時起到一定的幫助,在我離開原項目很久后,新的設(shè)計師還找我要過相應(yīng)項目的文檔,了解過去的設(shè)計邏輯)。
- 不是為了寫文檔而寫文檔(而是為了解決問題)
- 適合于項目、合作方(大項目有大文檔,小需求有靈巧的解決方案)
- 工具不是問題(易傳播,易標(biāo)注,成目錄即可)
- 模版不是問題,大家看明白就可
- 完美的文檔無法取代面對面的溝通(評審會和討論不會因為文檔而減少)
- 需要在實踐中不斷改進
七. 誰來寫?
我建議由交互設(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)不同的使用角色,如下圖所示:
但是有個問題是,雖然DRD的目標(biāo)受眾有開發(fā)和測試,但是讓開發(fā)工程師同時參考那么多文檔是不現(xiàn)實的,所以仍然是開發(fā)工程師的接口人,也就是事實上的RA需求分析作為需求整合傳遞的角色,將商業(yè)需求和設(shè)計需求,傳達給具體的執(zhí)行開發(fā)工程師與測試工程師:
【總結(jié)】
對于堅持撰寫DRD的我來說,DRD的好處自己當(dāng)然是明白的——在撰寫過程中重新梳理設(shè)計邏輯,優(yōu)化設(shè)計;降低溝通成本等等。
但是并非所有人都喜歡寫文檔或者都喜歡看文檔。
解決問題有多種方案,DRD只是其中一個。不過,當(dāng)你因為設(shè)計需求傳遞過程中發(fā)生了問題,或者你的需求被理解偏差,或者你的需求被遺漏,或者你接手的項目改版,因為要梳理過去的設(shè)計邏輯焦頭爛額時,你可以試試用DRD。如果使用過程中還是存在問題,那么就想想是否還存在別的解決方案吧~
作者:heidixie
來源:http://heidixie.lofter.com/post/b8226_168d4b5
老師,我想多學(xué)點交互方面的知識,可以發(fā)一份DRD文檔學(xué)習(xí)一下嗎?郵箱syouliki@126.com,謝謝!
老師,我想多學(xué)點產(chǎn)品思維方面的知識,希望您能發(fā)一份DRD文檔給我學(xué)習(xí)一下,謝謝??郵箱1647318879@qq.com
似乎現(xiàn)在有Sketch 能幫助更好更快地寫這個交互說明文檔
Sketch比較局限,只能是蘋果電腦才能打開,DRD更多的應(yīng)用場景是跨部門合作,所以使用Ax更適合
老師,能否發(fā)一份DRD模板給我參考下嗎?郵箱:281291507@qq.com,謝謝!
老師,跪求一份DRD文檔,可以向您學(xué)習(xí),萬分感謝老師,2840560826@qq.com。在此謝謝曹老師
曹老師,看完受益匪淺,感謝您,可否分享一個案例參考,284272284@qq.com
FBRD是啥
老師,感覺您寫的好詳細(xì),跪求一份DRD文檔,可以繼續(xù)向你學(xué)習(xí),謝謝您,85735654@qq.com
老師,能否發(fā)一份DRD模板給我參考下嗎?郵箱:279451052@qq.com,謝謝! ??
大師,可以發(fā)一份DRD文檔給我參考一下下嗎?先謝謝了,我的郵箱1362336024@qq.com
跪求DRD文檔,1184624388@qq.com 謝謝!
最近幾天學(xué)習(xí)看到最有用的干貨,跪求DRD文檔,534982963@qq.com,謝謝老師!
跪求一份drd,郵箱643136432@qq.com
老師跪求一份prd,643136432@qq.com
老師,跪求一份DRD文檔,可以向您學(xué)習(xí),萬分感謝老師,944549030@qq.com
曹老師,可以發(fā)一份DRD文檔參考學(xué)一下號碼?先謝謝了。我的郵箱591580365@qq.com
老師,跪求一份DRD文檔,可以向您學(xué)習(xí),萬分感謝老師,2339206151@qq.com
大師,可以發(fā)一份DRD文檔給我參考一下下嗎?先謝謝了,我的郵箱757005604@qq.com
謝謝大神分享,能否發(fā)一份DRD文檔參考嗎,郵箱:1139871156@qq.com,感謝 ??
老師,感覺您寫的好詳細(xì),可以發(fā)一份詳細(xì)的DRD文檔,可以繼續(xù)向你學(xué)習(xí),謝謝您,郵箱:wangkang@42du.net
老師,能不能給我一份完整的DRD文檔,33085992@qq.com。謝謝老師您了!
曹老師,產(chǎn)品新人,求發(fā)一份DRD文檔模板,不勝感激qdtosj@163.com
感謝?。?!
曹老師,求發(fā)一份DRD文檔模板,參考一下,感謝!1029275534@qq.com
老曹,做為一位新人,看了你的文章頗有收獲,希望在這里能收到你的DRD文檔模板,與老曹一起學(xué)習(xí)是我的榮幸。blogmz@163.com
曹老師,產(chǎn)品新人,求發(fā)一份DRD文檔模板,不勝感激!601290920@qq.com
曹老師,求發(fā)一份DRD文檔模板,感謝!1197432567@qq.com
老師,跪求一份DRD文檔,每天被開發(fā)問這個問題那個問題的產(chǎn)品新人急需要一份!跪謝!
134706228@qq.com
曹老師,可以發(fā)一份DRD文檔模板給我(253630048@qq.com)參考一下下嗎?產(chǎn)品小白,謝謝了。
老師,可以發(fā)一份DRD文檔模板給我(15700171174@163.com)參考一下下嗎?產(chǎn)品新人,先謝謝了。
老師,感覺您寫的非常棒,跪求一份DRD文檔,可以繼續(xù)向你學(xué)習(xí),謝謝您,924908891@qq.com
老師有發(fā)了嗎