工作中兼任交互設(shè)計(jì)崗位2年多,平時(shí)接到需求的時(shí)候會(huì)和產(chǎn)品進(jìn)行深入溝通,然后產(chǎn)出交互原型圖進(jìn)行評(píng)審,確認(rèn)以后輸出完整的交互設(shè)計(jì)文檔到UI設(shè)計(jì)那邊(公司UI也是我來做)。

為什么需要寫交互文檔呢?

很多公司沒有交互這個(gè)崗位,其中原型圖產(chǎn)品經(jīng)理畫了,交互邏輯動(dòng)態(tài)圖是UI設(shè)計(jì)畫了,很多人就很好奇這個(gè)交互崗位是不是可有可無呢,答案肯定是必須要有的。

第一,交互設(shè)計(jì)師的交互文檔就想U(xiǎn)I設(shè)計(jì)的Sketch/Figma/Photoshop源文件一樣可以保存記錄你的整個(gè)產(chǎn)品過程設(shè)計(jì)思路和分析的過程,交互設(shè)計(jì)文檔可以包含你的產(chǎn)品的項(xiàng)目背景、需求分析、用戶畫像、競品分析、產(chǎn)品數(shù)據(jù)分析、業(yè)務(wù)交互邏輯等。

這里肯定會(huì)有人說了這不是一些產(chǎn)品經(jīng)理做的事情嗎?沒錯(cuò)現(xiàn)在很多產(chǎn)品也會(huì)做這些內(nèi)容,但是有交互設(shè)計(jì)的加入來一起做會(huì)更加系統(tǒng)的記錄和輸出完整的內(nèi)容,可以讓產(chǎn)品經(jīng)理更加專注到挖掘商業(yè)和產(chǎn)品目標(biāo)上去。

還有就是我們在后面設(shè)計(jì)走查的時(shí)候避免和開發(fā)扯皮,問你設(shè)計(jì)的依據(jù)啥的,這個(gè)時(shí)候可以把文檔甩他臉上。

第二、交互作為作為一個(gè)鏈接UI設(shè)計(jì)和產(chǎn)品的中間人,同時(shí)提供交互邏輯給前后端進(jìn)行框架和業(yè)務(wù)搭建,同時(shí)也提供給測試進(jìn)行測試用例的編寫,因此撰寫一份標(biāo)準(zhǔn)和規(guī)范的交互設(shè)計(jì)文檔這樣看來是不是很重要了。

因?yàn)槲覀冞M(jìn)行文檔評(píng)審的時(shí)候,UI同學(xué)了解頁面需要給用戶傳達(dá)什么情緒,達(dá)到什么目的,告訴前端同學(xué)頁面跳轉(zhuǎn)的邏輯以及交互動(dòng)態(tài)模塊怎么寫,幫助后端同學(xué)預(yù)先搭建后臺(tái)框架與數(shù)據(jù)庫以及業(yè)務(wù)邏輯,最后幫助測試同學(xué)進(jìn)行單元測試,以及完善他們的測試用例。

第三、訓(xùn)練你的撰寫能力為以后更好的跳槽作為作品集。

現(xiàn)在社招內(nèi)卷嚴(yán)重,如果你面試交互設(shè)計(jì)崗位還是千篇一律的PDF排版或者是長圖JPG,很容易在面試官眼中直接跳過。

所以為了體現(xiàn)專業(yè)性我們可以學(xué)習(xí)UI設(shè)計(jì)的包裝作品集,但是不要過度了,以免讓人覺得不落地,只是一個(gè)空殼而已。PS:作品集涉及到公司機(jī)密數(shù)據(jù)的時(shí)候要進(jìn)行數(shù)據(jù)脫敏處理

交互設(shè)計(jì)文檔應(yīng)該放什么內(nèi)容?

這里根據(jù)公司情況來說,一般來講,一個(gè)基礎(chǔ)規(guī)范交互設(shè)計(jì)文檔應(yīng)該包含,文檔封面、更新日志、設(shè)計(jì)說明文檔、業(yè)務(wù)流程圖、交互原型圖、垃圾桶等模塊,這里可以根據(jù)自己公司情況進(jìn)行增加其他內(nèi)容,有些內(nèi)容可以在產(chǎn)品文檔里面直接復(fù)制過來。

1.文檔封面

文檔封面相當(dāng)于一本書的給人的一個(gè)基本的了解,你可以知道產(chǎn)品名稱、版本編號(hào)、日期以及文檔負(fù)責(zé)人,除了以上信息外,你可以自行進(jìn)行的添加。

2.更新日志

更新日志主要記錄整個(gè)文檔的迭代修改內(nèi)容,讓產(chǎn)品、UI、開發(fā)同學(xué)快速了解本次需要做的內(nèi)容。

我這里更新日志借鑒了產(chǎn)品同學(xué)文檔的內(nèi)容,里面包括日期、變更內(nèi)容、所在頁面以及備注四個(gè)字段,這里需要提醒一下其他同學(xué)注意查看體驗(yàn)問題了,我們應(yīng)該把最新的內(nèi)容放在最上面啊。

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

產(chǎn)品項(xiàng)目背景是一個(gè)核心關(guān)鍵點(diǎn),他是告訴我們?yōu)槭裁醋鲞@個(gè)產(chǎn)品的一個(gè)北極星指標(biāo),對齊整個(gè)項(xiàng)目組的統(tǒng)一思想,時(shí)刻提醒著我們產(chǎn)品應(yīng)該怎么做,為團(tuán)隊(duì)成員指明一個(gè)方向。

比如我第一份工作的時(shí)候,我們是做一個(gè)統(tǒng)計(jì)分析的工具系統(tǒng)的,但是隨著產(chǎn)品慢慢迭代,功能越來越多,老板有一天跟產(chǎn)品說希望在系統(tǒng)中加入一個(gè)智能客服功能,本來用戶學(xué)習(xí)成本就高,如再加上去是不是整個(gè)產(chǎn)品有點(diǎn)累贅了?

有很多小公司沒有產(chǎn)品經(jīng)理,很多需求都是銷售說的,如果你在這樣的公司要么就換一家,要么就發(fā)揮出自己的積極解決問題的一面,去主動(dòng)和銷售溝通或者和老板溝通了解清楚產(chǎn)品背景定位,努力完成這一部分,雖然自己會(huì)辛苦累一點(diǎn),但是你作為一個(gè)交互設(shè)計(jì)師或者用戶體驗(yàn)設(shè)計(jì)不就是一個(gè)中間人的角色嗎,你做好了也是為團(tuán)隊(duì)成員后面的努力提供方向。

4.產(chǎn)品需求

產(chǎn)品需求列表記錄了產(chǎn)品需要做的功能點(diǎn),這些功能我們一般在產(chǎn)品經(jīng)理或者項(xiàng)目經(jīng)理文檔中收集獲得,我們這個(gè)需要和產(chǎn)品經(jīng)理溝通對需求的優(yōu)先級(jí)進(jìn)行排序分類。

我們這里的原則是按照前面提到北極星指標(biāo)來分加上KANO法則來分,P0-PN進(jìn)行排序,0是優(yōu)先級(jí)高的,也是產(chǎn)品非做不可的功能。

5.用戶畫像

通過用戶畫像來了解你的目標(biāo)用戶群體特征,可以對目標(biāo)用戶進(jìn)行分類、需求、動(dòng)機(jī)等分析,再根據(jù)不同的用戶進(jìn)行場景設(shè)計(jì)。

有了用戶畫像作為支撐,能避免一些設(shè)計(jì)過程的設(shè)計(jì)師自以為是的因素,比如我們目標(biāo)用戶是一群中年人,文化程度不是很高,這個(gè)時(shí)候字體是不是應(yīng)該設(shè)置大一點(diǎn),顏色飽和度稍微不要這么鮮艷,文案應(yīng)該更加簡潔明了等。

當(dāng)然,如果是小公司可沒這么多時(shí)間跟你做用戶畫像,用戶調(diào)研之類的。所以沒有更快的方法大致了解或者獲取用戶信息呢?這里我分享一個(gè)不錯(cuò)的免費(fèi)獲取行業(yè)數(shù)據(jù)的地方,艾瑞數(shù)據(jù),打開選擇自己領(lǐng)域的產(chǎn)品類型,可以看到一些免費(fèi)數(shù)據(jù),當(dāng)然也有收費(fèi)內(nèi)容。

6.競品分析

所謂知己知彼百戰(zhàn)百勝,對你的對手了解得越深可以更好的快速了解產(chǎn)品業(yè)務(wù)、行業(yè)的用戶使用習(xí)慣等,也是快速得到產(chǎn)品需求的方式之一,我們在做交互原型的時(shí)候也可以作為借鑒的素材。

7.信息架構(gòu)

信息架構(gòu)屬于用戶體驗(yàn)五要素的結(jié)構(gòu)層,信息架構(gòu)能夠很好的了解整個(gè)產(chǎn)品的脈絡(luò),也是對產(chǎn)品一次歸類設(shè)計(jì),可以發(fā)現(xiàn)產(chǎn)品功能點(diǎn)是否有遺漏,同時(shí)也可以通過產(chǎn)品大體信息架構(gòu)來觀察產(chǎn)品是否合理。

(這里個(gè)人吐槽一下有些產(chǎn)品的架構(gòu)層很深,比如支付寶取消免密支付,其目的就是故意刁難用戶讓用戶打退堂鼓,一個(gè)簡單的操作需要你進(jìn)入到N個(gè)頁面操作而且又是彈窗又是警告之類的。我相信產(chǎn)品經(jīng)理不是不知道,可能是為了KPI吧。)

8.數(shù)據(jù)分析

數(shù)據(jù)分析是交互設(shè)計(jì)必不可少的一項(xiàng)技能,也是檢驗(yàn)設(shè)計(jì)師成果的重要指標(biāo)。如果缺少數(shù)據(jù)分析單憑個(gè)人主觀因素,你很難說服別人這個(gè)設(shè)計(jì)的好壞,畢竟誰不會(huì)吹噓自己的作品呢。

一般數(shù)據(jù)分析可以通過數(shù)值進(jìn)行對比,前提是你產(chǎn)品進(jìn)行了埋點(diǎn)或者接入第三方統(tǒng)計(jì),這樣你可以進(jìn)入后臺(tái)是否上升、下降、還是持平等,改版是否有效果,對于初期的產(chǎn)品來說可以關(guān)注一下DAU(日活躍數(shù))、MAU(月活躍數(shù))、以及跳出率等,因?yàn)檫@些數(shù)據(jù)的增減影響到整個(gè)產(chǎn)品是否能活下去,所以要及時(shí)查看數(shù)據(jù)發(fā)現(xiàn)異常馬上和產(chǎn)品經(jīng)理反饋溝通,避免惡化下去。市面上第三方統(tǒng)計(jì)數(shù)據(jù)平臺(tái)有神策數(shù)據(jù)、Growing IO、百度統(tǒng)計(jì)等。

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

繪制業(yè)務(wù)流程圖目的就是梳理并分析優(yōu)化業(yè)務(wù)流程, 同時(shí)也是給開發(fā)和測試看的一個(gè)邏輯交互圖,如果不繪制開發(fā)可能在某個(gè)環(huán)節(jié)就會(huì)有遺漏,到時(shí)候測試檢查或者線上發(fā)現(xiàn)就問題大了。

比如我做的協(xié)會(huì)入會(huì)這個(gè):入會(huì)申請→選擇會(huì)員類型→填寫資料→注冊成功→管理員收到信息→查看內(nèi)容資料→審核通過,這一些流程。如果遺漏了其中一環(huán)就會(huì)特別麻煩。

如果你的產(chǎn)品經(jīng)理比較認(rèn)真,他會(huì)直接給你現(xiàn)場的業(yè)務(wù)流程圖,如果碰到公司沒有產(chǎn)品經(jīng)理的話,就需要自己去問用戶,或者問需求方的人。這里需要主要多去聽、多去問、做出來以后再去確認(rèn),這樣出現(xiàn)遺漏的點(diǎn)會(huì)降低很多。

10.交互原型圖

這是上面所有內(nèi)容的精華進(jìn)行總結(jié)提煉得到的一個(gè)原型圖,我相信大家平時(shí)工作都非常熟悉了,這里分享一下原型圖容易犯錯(cuò)的點(diǎn)。

1.像我剛從UI設(shè)計(jì)轉(zhuǎn)交互畫原型圖的時(shí)候喜歡畫的精致,這個(gè)是特別不好的習(xí)慣,容易干擾UI同學(xué)的設(shè)計(jì),而且對于UI同學(xué)來說你這是有點(diǎn)搶他們飯碗的意思啊 開個(gè)玩笑,這樣只會(huì)顯得不專業(yè),所以頁面盡量采用黑白灰配色,而且原型圖大概表達(dá)出產(chǎn)品功能點(diǎn)、頁面跳轉(zhuǎn)邏輯、交互內(nèi)容說明情況等,其他的交給UI設(shè)計(jì)發(fā)揮特長。

2.如果涉及到多平臺(tái)(iOS、Andriod、PC端),除非產(chǎn)品功能特別多,一般都放在一個(gè)設(shè)計(jì)文檔中,不需要來回切換查看,評(píng)審也會(huì)遺漏。

3.創(chuàng)建自己的組件庫,這個(gè)我作為UI設(shè)計(jì)就很明白,現(xiàn)在很多設(shè)計(jì)團(tuán)隊(duì)都會(huì)搭建產(chǎn)品的組件庫,組件庫的強(qiáng)大就是可以重復(fù)利用,提高工作效率。至于拿什么工具搭建根據(jù)公司協(xié)作來決定。

11.垃圾桶

垃圾桶的好處也是我慢慢才發(fā)現(xiàn)的,這是一個(gè)可以保留飛機(jī)稿的地方也是一個(gè)可以有后悔藥的地方,這個(gè)地方可以收藏你當(dāng)時(shí)的設(shè)計(jì)思想、也可以避免產(chǎn)品覺得還是以前某個(gè)方案比較合適的時(shí)候。

總結(jié)

說了這么多,每個(gè)部分的需要點(diǎn)都說到了有些是可以不做的,文檔也不是絕對的規(guī)范,每個(gè)公司交互職責(zé)都有各自的屬性,所以我這里總結(jié)了自己在公司的經(jīng)驗(yàn)。

總之我們回到設(shè)計(jì)的本質(zhì)是什么,是服務(wù)好你的用戶,(最近夢想改造家第八季就有一個(gè)設(shè)計(jì)師,沒有把客戶的需求放在第一位,完全按照自己的經(jīng)驗(yàn)?zāi)弥蛻舻腻X來完成自己的藝術(shù)品,所以這樣的人根本不符合設(shè)計(jì)師這樣稱呼。)是把復(fù)雜的事情做簡單,所以我希望有一天我能成為一名優(yōu)秀的交互設(shè)計(jì)師,把產(chǎn)品做好,把體驗(yàn)做好,希望看到這里的人一起共同進(jìn)步。