交互設(shè)計(jì)師必備的9種能力(上篇)
有好多交互新人或尚未跨進(jìn)交互設(shè)計(jì)大門的同學(xué),會(huì)經(jīng)常問的一個(gè)問題:交互設(shè)計(jì)師需要具備怎樣的技能和能力?本文將以“小餅”一個(gè)交互新人的成長(zhǎng)過程以及工作中遇到的問題,來跟大家分享交互設(shè)計(jì)師必備的9種能力。
1. 產(chǎn)品意識(shí)
設(shè)計(jì)師有時(shí)候會(huì)收到用戶的反饋,如:
哎?你們易信的顏色是不是太亮了,能不能調(diào)整一下?
這時(shí)候作為交互新人的小餅,他的第一反應(yīng)是:
哦,好吧,既然用戶有這樣的反饋,那么我們就去調(diào)整方案。
首先,要思考一下用戶的這些反饋或需求,是“真需求”還是“偽需求”?
福特曾經(jīng)說過:
如果我最初問消費(fèi)者他們想要什么,他們會(huì)告訴我:要一匹更快的馬!
每位設(shè)計(jì)師應(yīng)該都知道,當(dāng)用戶表示需要 “要一匹更快的馬”時(shí),他真實(shí)的想法其實(shí)要一個(gè)更快的交通工具。所以當(dāng)我們面對(duì)用戶的反饋時(shí),要去思考需求的真?zhèn)巍N覀儾豢赡芤晃稘M足用戶的需求而不顧產(chǎn)品目標(biāo),所以需要在用戶需求和產(chǎn)品目標(biāo)中找到平衡點(diǎn)。最近在設(shè)計(jì)某個(gè)產(chǎn)品支付系統(tǒng)的退款功能,從產(chǎn)品角度來說不希望過多用戶選擇退款。那么最終的設(shè)計(jì)方案是,將退款的入口做的很隱蔽,而且流程比較繁瑣(沒錯(cuò),就是故意的)。這樣就滿足雙方需求了,達(dá)到產(chǎn)品目標(biāo)和用戶需求的平衡。所以交互設(shè)計(jì)師要有產(chǎn)品意識(shí),不能只去滿足用戶,也要顧慮到產(chǎn)品和商業(yè)目標(biāo)。
2. 以用戶為中心
小餅同學(xué)的設(shè)計(jì)方案常常會(huì)受到用戶的一些質(zhì)疑:
“哎?這個(gè)APP到底怎么來用啊?怎么我完全看不懂該如何去操作?”
“這個(gè)提示為什么會(huì)在這里?”
“為啥分享結(jié)束后,不能自動(dòng)返回到之前的頁面?還傻傻地留在原來的頁面?”
這些是交互設(shè)計(jì)師經(jīng)常遇到的問題,沒有以用戶為中心去思考和設(shè)計(jì)。什么叫以用戶為中心的設(shè)計(jì)方法?具體講,就是我們從需求產(chǎn)出,到整個(gè)需求的細(xì)分,以及我們方案的產(chǎn)出和驗(yàn)證都是圍繞著以用戶為中心的。如果需要分析用戶,我們就會(huì)走到用戶的生活場(chǎng)景里去看他們?cè)趺词褂卯a(chǎn)品的。比如,站在用戶的身后,從他們的視角去觀察以及如何使用使用。同樣我們也會(huì)對(duì)用戶進(jìn)行一些細(xì)分,對(duì)人群進(jìn)行組合或抽離出某個(gè)具體概念,這叫“用戶畫像”。
當(dāng)設(shè)計(jì)師以用戶為中心的方法進(jìn)行設(shè)計(jì)時(shí),往往會(huì)要考慮三件事情:
- 用戶是誰?
- 他是在什么場(chǎng)景下去使用產(chǎn)品?
- 他希望通過產(chǎn)品去解決什么問題?
3. 邏輯思維能力
隨著小餅的不斷成長(zhǎng),他開始接受更多更復(fù)雜的任務(wù)。有一天,老大給他了一個(gè)大活:“哎?小餅啊,我們?cè)崎喿x的支付成功率很低,你研究下如何優(yōu)化?”“那怎么去優(yōu)化呢?”小餅一頭霧水。
作為一名交互設(shè)計(jì)師,當(dāng)我們的老板向我們提出“最近的支付率很低”或者“我們的用戶量很低,怎樣去優(yōu)化它?”這里就涉及到我們的邏輯分析能力。讓我們一起來看網(wǎng)易云閱讀的支付環(huán)節(jié)優(yōu)化的例子:它的整個(gè)流程(如下圖),我們稱之為“交互流程圖”,會(huì)把用戶在使用產(chǎn)品的每個(gè)接觸點(diǎn)都列舉出來,然后再去分析用戶在每個(gè)接觸點(diǎn)都會(huì)遇到怎樣的問題。
可以進(jìn)行如下三種處理:
- 刪除:刪除“web結(jié)算頁面”,之前的頁面已經(jīng)有了,再次出現(xiàn)屬于重復(fù)信息。
- 合并:“購買結(jié)算頁面”,將統(tǒng)一操作流程的頁面合并在一起,去除不必要的頁面。再看余額充值的環(huán)節(jié),“確認(rèn)充值”、“選擇充值方式”、“充值金額”這三個(gè)流程都可以放到一個(gè)頁面里,以減少用戶在頁面間的跳轉(zhuǎn),避免在此流程中造成用戶流失。
- 修改:“購買成功”頁面提供更好的反饋體驗(yàn)通過砍掉不必要、合并相同和修改體驗(yàn)不好的頁面,這樣整個(gè)流程的優(yōu)化完,支付比例有了非常顯著的提升。
關(guān)于邏輯分析能力,不僅體現(xiàn)在我們對(duì)于交互流程和業(yè)務(wù)流程上的梳理,同時(shí)也體現(xiàn)在我們對(duì)數(shù)據(jù)的解讀和分析上。上面的例子中,通過“數(shù)據(jù)漏斗模型”來分析每個(gè)環(huán)節(jié)用戶的流失情況,然后針對(duì)性地提出解決方案。
4. 頁面排版能力
作為交互新人難免會(huì)收到同事的反饋建議,比如:
- 產(chǎn)品同學(xué)會(huì)說: “哎?小餅同學(xué),你這塊的邏輯不太對(duì)啊,這些信息明明是一起的,為什么你設(shè)計(jì)方案里看起來不像是一起的呢?”;
- 視覺同學(xué)會(huì)說:“哎呀,交互設(shè)計(jì)師,為什么你們的交互一定要做得這么丑,難道就不能做得漂亮一點(diǎn)么?”
所以交互設(shè)計(jì)師需要怎樣的排版設(shè)計(jì)能力呢?線框圖是交互設(shè)計(jì)師的主要產(chǎn)出物,它包含了所有頁面流程和單頁面的信息布局。就像如下圖所示,如果欠缺思考的隨意布局可能給下游的同學(xué)造成很大的困擾。比如,沒有認(rèn)真對(duì)待信息間距而造成的誤導(dǎo),錯(cuò)誤的提示色也會(huì)給視覺同學(xué)造成干擾。所以建議交互設(shè)計(jì)師通過簡(jiǎn)單的黑白灰樣式來表達(dá)頁面優(yōu)先級(jí)以及重要程度的區(qū)分。如果覺得某個(gè)信息很重要,可以顏色重一點(diǎn),也可區(qū)域更大一些。這些格式塔心理學(xué)的知識(shí)對(duì)我們頁面排版能力的提升很重要。
設(shè)計(jì)師常用排版的原則:
- 隱藏:如果有很多信息,但是用戶又不太常見,那么可以把它隱藏起來,就“眾籌紅包”右上角這里的問號(hào),這里是關(guān)于眾籌紅包的解釋說明,對(duì)于用戶而言是不需要經(jīng)常去關(guān)注的,所以把它隱藏起來。
- 刪除:一些額外的信息對(duì)整個(gè)頁面是不太重要的,就可以把它刪除掉。
- 合并&組織:如果很多信息的邏輯關(guān)系是在一起的,我們可以把它們合并或者進(jìn)行重新組織,把它們放得近一點(diǎn),也可以把它們打亂再重新去整合。
5. 細(xì)節(jié)處理能力
小餅同學(xué)又遇到了問題。
boss:“哎?!你這個(gè)閱后即焚的方案,為什么細(xì)節(jié)漏掉那么多?!”
小餅一頭霧水:“哎?我并沒有覺得我遺漏任何細(xì)節(jié)啊,那不就是我單獨(dú)的一個(gè)發(fā)送方把頁面發(fā)給另一方,對(duì)方看完之后就消失掉了。就這么簡(jiǎn)單的一個(gè)方案?!?/p>
上圖是小餅同學(xué)做的交互方案。上面是發(fā)起方,有一個(gè)“閱后即焚”的功能,點(diǎn)擊之后發(fā)給另外一方,這時(shí)接受方就會(huì)看到這條信息,并點(diǎn)擊進(jìn)行去查看。仔細(xì)看一下,他到底遺漏了那些信息?
- 發(fā)送方如何選擇圖片,單張還是多張?
- 發(fā)送方發(fā)送后,自己是否能夠查看,可以看幾次
- 接收方查看消息時(shí),是否有時(shí)間和次數(shù)限制
- 接收方查看消息中,是否有防止截屏的機(jī)制?
以上這些細(xì)節(jié)你都想到了么?可以說設(shè)計(jì)不是憑空腦補(bǔ)YY,而是要以用戶為中心去觀察和思考,用戶在使用這些功能時(shí)都有產(chǎn)生哪些流程或行為。
特別感謝:
- 易信/云信/七魚/云閱讀提供相關(guān)設(shè)計(jì)素材
- 視覺設(shè)計(jì)大?!按箢^哥”友情提供插畫素材
后面還有更加精彩的內(nèi)容由大餅哥帶來~敬請(qǐng)期待《交互設(shè)計(jì)師必備的9種能力 -下篇》
本文由最愛小鮮肉的大餅哥洪荒巨獻(xiàn),指導(dǎo)大家如何打開交互設(shè)計(jì)的神奇大門。主要面向的是0~1歲的交互新人或?qū)换ピO(shè)計(jì)感興趣的非專業(yè)人士量身打造。老司機(jī)們可以繼續(xù)往前走,然后將此文分享給身邊的小鮮肉們。
作者:楊杰
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
感覺交互設(shè)計(jì)師的工作內(nèi)容與我理解的產(chǎn)品經(jīng)理的職能很多交叉的地方
學(xué)習(xí)了,感謝分享。就是圖片太模糊了!
不錯(cuò),學(xué)習(xí)了, 只是圖片看不清放大后模糊。
很棒
那個(gè)腦圖的清晰一點(diǎn)啊?。。。?!我暈了
圖片可以再清晰一點(diǎn)就好了
小餅很棒
小餅很棒
配圖有意思~
樓主,配圖出現(xiàn)了錯(cuò)亂! ??