手把手教你撰寫交互設(shè)計(jì)文檔(保姆級教程)

16 評論 20938 瀏覽 271 收藏 23 分鐘

編輯導(dǎo)語:作為交互設(shè)計(jì)師,我們平時工作最大的產(chǎn)出就是交互設(shè)計(jì)文檔,很多剛轉(zhuǎn)行的同學(xué)會在網(wǎng)上尋找模板直接套用或者自己慢慢摸索,而這篇文章會手把手教你怎樣完成一份完整的交互設(shè)計(jì)文檔,一起來看看吧。

大家好,今天想跟大家分享一下如何撰寫一份專業(yè)的交互設(shè)計(jì)文檔,作為交互設(shè)計(jì)師,我們平時工作最大的產(chǎn)出就是交互設(shè)計(jì)文檔,很多剛轉(zhuǎn)行的同學(xué)會在網(wǎng)上尋找模板直接套用或者自己慢慢摸索,而這篇文章會手把手教你怎樣完成一份完整的交互設(shè)計(jì)文檔。

一、為什么要寫交互設(shè)計(jì)文檔?交互設(shè)計(jì)文檔有什么用

1. 保存記錄自己的設(shè)計(jì)思路

交互設(shè)計(jì)師的交互設(shè)計(jì)文檔就好像UI設(shè)計(jì)師的PSD文件一樣用于保存記錄自己的設(shè)計(jì)思路,但交互設(shè)計(jì)師負(fù)責(zé)的任務(wù)不僅僅停留在頁面當(dāng)中,還包括產(chǎn)品的需求分析、用戶畫像、競品分析、產(chǎn)品數(shù)據(jù)分析、用戶交互邏輯等等。我們都可以寫在交互設(shè)計(jì)文檔中做記錄,為我們的交互設(shè)計(jì)提供依據(jù)(其實(shí)就是避免開發(fā)懟你問你設(shè)計(jì)依據(jù)是啥,你就馬上把分析擺他臉上,避免尷尬)。

2. 利用交互設(shè)計(jì)文檔去表達(dá)我們的設(shè)計(jì)思路

交互設(shè)計(jì)師作為產(chǎn)品的上游(一般開發(fā)流程是產(chǎn)品經(jīng)理負(fù)責(zé)收集需求給予交互設(shè)計(jì)師進(jìn)行交互設(shè)計(jì),撰寫交互設(shè)計(jì)文檔,然后文檔評審?fù)ㄟ^后,UI同學(xué)負(fù)責(zé)UI設(shè)計(jì),接著提供前端同學(xué)進(jìn)行界面開發(fā),后端同學(xué)則根據(jù)交互稿搭建框架和業(yè)務(wù)邏輯,開發(fā)完成后進(jìn)行測試,反饋測試結(jié)果,如此循環(huán),因此交互設(shè)計(jì)師一般處于產(chǎn)品線的上游階段)。

撰寫一份標(biāo)準(zhǔn)和規(guī)范的交互設(shè)計(jì)文檔是非常重要的,因?yàn)槲覀冃枰媒换ピO(shè)計(jì)文檔去表達(dá)我們的設(shè)計(jì)思路,通過交互文檔我們可以讓UI同學(xué)知道頁面需要給用戶表達(dá)什么情緒,達(dá)到怎樣的目的,告訴前端同學(xué)頁面跳轉(zhuǎn)邏輯以及交互模塊怎么寫,幫助后端同學(xué)清晰搭建后臺框架與數(shù)據(jù)庫以及產(chǎn)品業(yè)務(wù)邏輯是怎么樣的,最后測試童鞋還會拿著你的交互稿進(jìn)行單元測試,編寫測試用例。

所以只有我們先把文檔寫好了,才能避免后面產(chǎn)品開發(fā)出現(xiàn)問題。

3. 未來我們用于跳槽加薪面試作品

內(nèi)行看門道,外行看熱鬧,如果你面試交互設(shè)計(jì)師的時候還是帶著一條長長的JPG或者是網(wǎng)上千篇一律排版的PDF作品集,在面試官眼中顯得不入行(或許你會遇到性格好的面試官,畢竟千人千面,面試特別看人)。

因?yàn)閷I(yè)的交互設(shè)計(jì)師在平時工作中為了避免干擾UI同學(xué)設(shè)計(jì),只會使用黑白灰做交互稿,也很少做成一條長長的PNG或JPG,我們可以適當(dāng)包裝作品集。

但如果過度了會讓人覺得不落地,或許只停留在剛?cè)胄须A段,所以在技術(shù)面試,我們可以拿著我們的交互設(shè)計(jì)文檔跟面試官敘述產(chǎn)品從需求層面怎樣思考完成交互設(shè)計(jì)的,解決了用戶什么痛點(diǎn),最后取得了什么樣的成果,得到了怎樣的數(shù)據(jù),我相信成功幾率會大很多(PS:用交互設(shè)計(jì)文檔進(jìn)行面試前請注意把公司機(jī)密信息做脫敏處理,避免發(fā)生糾紛)。

二、交互文檔包含什么內(nèi)容?以及怎樣撰寫交互文檔

說了那么多,那究竟交互設(shè)計(jì)文檔包含哪些內(nèi)容?

一般來講,一個基礎(chǔ)、規(guī)范的交互設(shè)計(jì)文檔應(yīng)該包含文檔封面、更新文檔、設(shè)計(jì)說明文檔、業(yè)務(wù)流程圖、交互原型、垃圾桶等模塊,當(dāng)然了,這些模塊也不是永恒不變的,有些是必須要,有些是選擇性添加的,至于這些模塊有什么功能和怎樣進(jìn)行撰寫,這篇文章會逐一分享給大家。

(說明:作者比較習(xí)慣使用Axure軟件撰寫交互設(shè)計(jì)文檔,大家可以根據(jù)自身愛好或者公司規(guī)定進(jìn)行選擇(例如sketch、figma、PS等等..都是可以的)。

這里要引用一句話:軟件僅僅是工具,并不能限制我們的思維,好的工具能讓我們走得更快但不能使我們走得更遠(yuǎn)——沃·茲基碩德。

1. 文檔封面(必須)

文檔封面就相當(dāng)于一本書的封面一樣,用于記錄產(chǎn)品名稱、版本號、日期以及文檔負(fù)責(zé)人(這樣開發(fā)童鞋就能精準(zhǔn)找到你進(jìn)行撕X),只要能展示以上信息,其他信息(例如產(chǎn)品經(jīng)理是誰等)可以自行添加。

2. 更新日志(必須)

以前我都習(xí)慣把更新日志放到產(chǎn)品文檔后面,但是隨著工作時間變久,我發(fā)現(xiàn)開發(fā)童鞋在SVN上打開設(shè)計(jì)文檔后第一時間就是查看更新日志,所以后來把這一頁提了上來(是的,設(shè)計(jì)文檔也是需要跟產(chǎn)品一樣不斷優(yōu)化迭代的)。

更新日志主要用于記錄產(chǎn)品迭代修改的內(nèi)容,讓開發(fā)同學(xué)快速了解這次迭代修改了什么內(nèi)容,他需要做哪些工作。

我的更新日志特別簡單,就只有日期、變更內(nèi)容、所在頁面以及備注四個字段,這里唯一注意的是,日期必須是最新修改的內(nèi)容放在上面,以前的日期在下面,很多同學(xué)每次迭代的時候會在下面列進(jìn)行內(nèi)容添加,這樣開發(fā)同學(xué)每次都必須滾到最下面查看信息,大哥,你是交互設(shè)計(jì)師,專業(yè)一點(diǎn)好嗎。

3. 產(chǎn)品項(xiàng)目背景(必須)

產(chǎn)品項(xiàng)目背景是一個項(xiàng)目的核心關(guān)鍵,告訴所有的團(tuán)隊(duì)成員我們要做一個什么樣的產(chǎn)品,需要創(chuàng)造什么樣的價值,就好比我們寫作文時的中心句,時刻提醒著我們要不忘初心,為團(tuán)隊(duì)成員開發(fā)項(xiàng)目指明方向。

前段時間有個同學(xué)來問我,他們本來是剛開始是做校園教育系統(tǒng)的,但是隨著產(chǎn)品慢慢迭代,功能逐漸強(qiáng)大了,最近老板希望在系統(tǒng)中加上財(cái)務(wù)功能,本來用戶學(xué)習(xí)成本就高,如果再加上去會不會適得其反?雖然我不知道那位同學(xué)的老板產(chǎn)品戰(zhàn)略是啥,背后是怎樣思考的,但是在我看來這樣的行為就不能是不忘初心,這頂多能算不忘出薪吧(拒絕諧音梗從我做起)。

好了,至于里面產(chǎn)品背景、產(chǎn)品目標(biāo)以及定位的內(nèi)容應(yīng)該如何撰寫?對,我抄的。一般情況下,這些內(nèi)容我們都能夠在項(xiàng)目立項(xiàng)文檔或者在招投標(biāo)書上就能找到,我們不用親自寫(但可以加以設(shè)計(jì)),再不行也能找到產(chǎn)品經(jīng)理去了解。

或者你會說,小公司既沒有立項(xiàng)、也沒有招投標(biāo)書,產(chǎn)品經(jīng)理也是你,那該怎么辦?那么你就得發(fā)揮出自己當(dāng)年高考的作文水平,積極了解清楚產(chǎn)品背景定位,努力完成這一部分,因?yàn)樾畔⒌膫鬟f是有消耗性的,只有我們作為產(chǎn)品的上游做好了,才能為團(tuán)隊(duì)成員后面的努力提供方向。

4. 產(chǎn)品需求(必須)

產(chǎn)品需求列表用于記錄產(chǎn)品需要做哪些【功能點(diǎn)】,這些功能點(diǎn)我們一般能在產(chǎn)品經(jīng)理或者項(xiàng)目經(jīng)理上獲得,我們收集需求后需要對其按照重要程度P0、P1、P2等級進(jìn)行分類,我分類的原則是KANO法則(不知道的同學(xué)可以百度),P0等級是非做不可的需求。

例如像微信的聊天,淘寶的支付功能等,P1是錦上添花的需求,時間緊迫的話可以下次再做的,例如微信的語音、視頻聊天等等,排到最后Pn就是一些不必要可做可不做,就算做了也沒太大影響的功能,就可以與領(lǐng)導(dǎo)層商討是否確認(rèn)要做(例如炸屎,你們現(xiàn)在還有人炸屎嗎?什么?炸屎你都不知道?那當(dāng)我沒說。)。

5. 用戶畫像(可選)

所謂知己知彼百戰(zhàn)不殆,通過用戶畫像我們可以快速了解產(chǎn)品目標(biāo)用戶群體特征,分析目標(biāo)用戶群體的期望、需求、動機(jī)等,再根據(jù)用戶場景去進(jìn)行設(shè)計(jì),有了用戶畫像的支撐,能避免我們在設(shè)計(jì)過程中出現(xiàn)一些不必要的因素,例如我們目標(biāo)用戶是中老年人的話,那么按鈕、字體就應(yīng)該適當(dāng)?shù)姆糯蟆⑴虐婧唵蚊髁?,而針對青少年就可以偏個性化風(fēng)格設(shè)計(jì)。

當(dāng)然,如果是小公司的話可能沒有那么多的資源去做用戶的調(diào)研,在這里分享一下我當(dāng)年在創(chuàng)業(yè)公司經(jīng)常使用的一種快速獲取用戶畫像的方法,既快速又特別專業(yè)。

這里需要借助一個網(wǎng)站:艾瑞數(shù)據(jù)(https://index.iresearch.com.cn),打開后選擇自己產(chǎn)品的類型(例如學(xué)習(xí)教育類),網(wǎng)站會把該類型的產(chǎn)品按照用戶數(shù)量從高到低展示給你,然后我們選擇一個差不多的競品點(diǎn)擊去查看他們的用戶特征,最后Ctrl C+Ctrl V到我們的文檔中,完成。

6. 競品分析(可選)

競品分析相信大家都特別熟悉,我之前的文章也教過大家怎么進(jìn)行詳細(xì)的競品分析,這里就不細(xì)講了,雖然在交互文檔中競品分析可做可不做,但是在產(chǎn)品初期階段我們?nèi)绻J(rèn)真做競品分析的話能夠快速了解產(chǎn)品業(yè)務(wù)、熟悉用戶的使用習(xí)慣,同時當(dāng)我們在做交互原型的時候能提供快速借(cao)鑒(xi),因此有條件的同學(xué)還是建議盡量做一下。

7. 數(shù)據(jù)分析(可選)

數(shù)據(jù)分析時交互設(shè)計(jì)師必不可少的一項(xiàng)技能,也是驗(yàn)證設(shè)計(jì)成果的重要因素。如果缺少了數(shù)據(jù)分析而單憑個人主觀因素的話,我們難以說明設(shè)計(jì)效果的好壞,畢竟現(xiàn)實(shí)中會出現(xiàn)各種意想不到的情況。

所謂“無對比,不分析”,一般數(shù)據(jù)分析都是通過數(shù)值進(jìn)行對比,去查看數(shù)據(jù)相對是上升、下降、還是持平,是否跟當(dāng)初設(shè)計(jì)預(yù)期的一樣,對于初期的產(chǎn)品會更關(guān)注產(chǎn)品的一些DAU(日活數(shù))、GMV(成交總額)、以及支付人數(shù)等,因?yàn)檫@些數(shù)據(jù)的增減是直接影響到整個產(chǎn)品的存活,如果產(chǎn)品的DAU不斷下降的話,那你就要馬上查找原因,及時調(diào)整,避免惡性循環(huán)。

一般情況下,像日活數(shù)那些簡單的數(shù)據(jù)可以直接問后臺同學(xué)就能獲得,而用戶某些環(huán)節(jié)的存活率、轉(zhuǎn)化率等就需要利用【數(shù)據(jù)埋點(diǎn)】,市場上也有很多第三方做數(shù)據(jù)埋點(diǎn)的,例如神策數(shù)據(jù)、Growing IO等,這里就不展開說了,但是面試的時候你能說出這些就會顯得很專業(yè)。

8. 信息架構(gòu)(必須)

信息架構(gòu)屬于用戶體驗(yàn)的結(jié)構(gòu)層,就像產(chǎn)品的骨架一樣,而信息架構(gòu)設(shè)計(jì)就是對產(chǎn)品信息進(jìn)行構(gòu)架、歸類的設(shè)計(jì),信息架構(gòu)能夠防止我們對產(chǎn)品功能點(diǎn)遺漏,同時也可以通過產(chǎn)品大體的信息架構(gòu)觀察出產(chǎn)品設(shè)計(jì)是否合理。

一般來說(干貨來了),產(chǎn)品架構(gòu)分支可以分為度和層,而好產(chǎn)品的信息架構(gòu)在廣度和層度都是恰到好處,下面我舉兩個反例大家就懂了:

?(1)產(chǎn)品架構(gòu)的廣度太廣(不懂的看下圖)

信息架構(gòu)的廣度太廣意味著頁面的承載信息量特別的多,沒有側(cè)重點(diǎn),這樣用戶點(diǎn)進(jìn)頁面后會思考很久而不知所措,最經(jīng)典的就是某某寶和某同城,新用戶進(jìn)入到首頁真的模棱兩可。

?(2)產(chǎn)品架構(gòu)的層太深

信息架構(gòu)的層太深會導(dǎo)致另外一個問題就是頁面非常的多,要找到一些功能的話操作非常的困難,最常見的就是某些視頻的取消會員流程(包括當(dāng)年的ofo退費(fèi)),你們是不是為了退費(fèi)或者取消某APP會員百度過很多次(反過來思考,如果某些功能你不想被用戶發(fā)現(xiàn),但是又必不可少的話應(yīng)如何設(shè)計(jì),你懂得)。

9. 業(yè)務(wù)流程圖(可選)

(1)繪制業(yè)務(wù)流程圖的目的

繪制業(yè)務(wù)流程圖的目的就是梳理并分析優(yōu)化業(yè)務(wù)流程。我知道很多同學(xué)做UI設(shè)計(jì)師的時候可以完全不管業(yè)務(wù),直接做設(shè)計(jì),但是作為交互設(shè)計(jì)師了解產(chǎn)品業(yè)務(wù)是非常重要的,因?yàn)椴涣私鈽I(yè)務(wù)你就無法完成交互設(shè)計(jì),優(yōu)化業(yè)務(wù)場景。

舉個例子:在教育考試系統(tǒng)中一般流程是:教育局出通知→學(xué)生報(bào)名考試→老師審核→報(bào)名通過→老師編排學(xué)生考試名單→學(xué)生開始考試對號入座→教育局公布成績→學(xué)生查詢成績→考試結(jié)束,看這一些列的流程,因?yàn)殛P(guān)聯(lián)特別多,如果對業(yè)務(wù)不熟悉的話設(shè)計(jì)起來會非常的不便,如果前期因?yàn)闃I(yè)務(wù)流程不熟悉而設(shè)計(jì)出錯誤的交互稿的話,后面就會特別麻煩。

(2)如何去繪制完整的業(yè)務(wù)流程

如果你的產(chǎn)品經(jīng)理比較專業(yè)的話,可能會直接給你一個現(xiàn)成的業(yè)務(wù)流程圖,那樣就能省事很多。

要是沒有產(chǎn)品經(jīng)理的話,最直接的就是問用戶,這里介紹我最常用的方法就是“一聽二問三確認(rèn)”:

  • 一聽:先聽客戶代表或者業(yè)務(wù)方的介紹。聽得過程中,不打斷對方,以最簡單的方式勾出主體脈絡(luò),即基本要素中的角色、活動、協(xié)作關(guān)系梳理出即可。
  • 二問:完成上一步后,就可以進(jìn)行提問了。主要是沿著流程進(jìn)行發(fā)問,重點(diǎn)放在分支、產(chǎn)物關(guān)系上??纯词欠翊嬖诜种У那闆r,各協(xié)作之間是否有交付物。一邊問,一邊修正。
  • 三確認(rèn):最后一步就是自己講一遍流程,和客戶代表或者業(yè)務(wù)專家進(jìn)行最后的確認(rèn)。

10. 交互原型(必須)

幾乎可以說,上面所有的東西都是為了完成交互原型做鋪墊的,我相信對大家來講交互原型都非常熟悉,但是給大家分享幾個經(jīng)常犯錯的點(diǎn):

  1. 頁面盡量只采用黑白灰配色,避免干擾UI同學(xué)設(shè)計(jì)這是大家經(jīng)常犯錯的一個點(diǎn),畢竟很多同學(xué)以前是UI出身,做交互稿時也順便配配色,這樣會非常影響UI同學(xué)設(shè)計(jì)的(不在其位不謀其政,你做UI的時候也不希望有人在旁邊指指點(diǎn)點(diǎn)吧),所以我們做交互稿時只采用黑白灰就夠了,灰度大小就代表信息的重要程度,簡潔規(guī)范即可。
  2. 頁面的跳轉(zhuǎn)用連線表示其實(shí)就很方便了,真正厲害的人不會到處炫技。有些同學(xué)在交互稿上各種跳轉(zhuǎn)、動態(tài)面板、中繼器等花里胡哨一大堆,這樣開發(fā)同學(xué)看起來特別的難受,所以很多時候用連線的方式表示往往是最簡單明了的。
  3. 如果涉及到多端設(shè)計(jì)(IOS、Andriod、PC端)的話,除非產(chǎn)品非常龐大,不然就放在同一個設(shè)計(jì)文檔中,避免以后評審還要弄多個文件。
  4. 創(chuàng)建一個適合自己的組件庫,在日常設(shè)計(jì)中,80%的控件是可以重復(fù)利用的,做一個合適的組件庫能節(jié)省大量時間(我整理了工作多年的B端以及移動端常用的組件,你們需要也可以分享給你們)。

11. 垃圾桶(可選)

做交互文檔時垃圾桶就相當(dāng)于后悔藥,因?yàn)橐恍╉撁嫒绻麆h掉保存后是不能還原了的,因此在改稿時如果一些暫時不需要的頁面可以丟到垃圾桶中,避免到最后用回以前的方案時重新再做浪費(fèi)時間。

三、最后總結(jié)

好啦,文章分享的內(nèi)容比較多,但是并不是每一部分都非做不可,文檔也并不是絕對的規(guī)范,每一家公司交互設(shè)計(jì)師的職責(zé)可能都不太相同,所以大家可以根據(jù)自身需求因地制宜。

曾經(jīng)有人說過,設(shè)計(jì)的本質(zhì)并不是把簡單的事情做復(fù)雜,而是把復(fù)雜的事情做簡單。

所以我希望有一天你們能把交互設(shè)計(jì)文檔做到很簡單,而把產(chǎn)品做得非常好,然后跟我分享經(jīng)驗(yàn),這才是我寫文章的初心。

最后希望大家有所收獲,與大家共同進(jìn)步,共勉!

 

作者:北沐而川;公眾號:北沐而川

原文鏈接:https://mp.weixin.qq.com/s/lu2StHVqNAxLM0zzS7musA

本文由 @北沐而川 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

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

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

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

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 可以分享一下組件庫嗎?可以私信我

    來自上海 回復(fù)
  2. 可以分享一下組件庫嗎?公眾號的打不開

    來自廣東 回復(fù)
  3. 可以分享一下組件庫嗎?

    來自北京 回復(fù)
  4. 這篇只是轉(zhuǎn)載的,原作者公眾號有交互設(shè)計(jì)文檔模版

    來自新加坡 回復(fù)
  5. 可以分享一下組件庫么

    來自河北 回復(fù)
  6. 可以分享一下組件嗎?

    來自廣東 回復(fù)
  7. 可以分享一下組件庫和這個設(shè)計(jì)文檔的rp模板嗎??

    回復(fù)
  8. 可以分享一下組件庫嘛

    來自廣東 回復(fù)
    1. 加V

      來自湖北 回復(fù)
    2. 麻煩說一下v號可以嗎

      來自廣東 回復(fù)
  9. 可以分享一下組件庫嘛

    來自浙江 回復(fù)
  10. 大佬可以分享一下您的組件庫

    來自四川 回復(fù)
  11. 可以分享組件庫嗎

    來自陜西 回復(fù)
  12. 可以分享組件庫嗎

    來自廣東 回復(fù)
  13. 設(shè)計(jì)的本質(zhì)并不是把簡單的事情做復(fù)雜,而是把復(fù)雜的事情做簡單,不止設(shè)計(jì),很多事情都是如此,把復(fù)雜的事情簡單化才是真本事

    來自四川 回復(fù)
  14. 大佬可以分享一下您的組件庫

    來自廣東 回復(fù)