交互設(shè)計(jì)師必備的9種能力(上篇)

10 評(píng)論 41151 瀏覽 190 收藏 12 分鐘

有好多交互新人或尚未跨進(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)整方案。

1

首先,要思考一下用戶的這些反饋或需求,是“真需求”還是“偽需求”?

福特曾經(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)返回到之前的頁面?還傻傻地留在原來的頁面?”

2

這些是交互設(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ì)要考慮三件事情:

  1. 用戶是誰?
  2. 他是在什么場(chǎng)景下去使用產(chǎn)品?
  3. 他希望通過產(chǎn)品去解決什么問題?

3. 邏輯思維能力

隨著小餅的不斷成長(zhǎng),他開始接受更多更復(fù)雜的任務(wù)。有一天,老大給他了一個(gè)大活:“哎?小餅啊,我們?cè)崎喿x的支付成功率很低,你研究下如何優(yōu)化?”“那怎么去優(yōu)化呢?”小餅一頭霧水。

3

作為一名交互設(shè)計(jì)師,當(dāng)我們的老板向我們提出“最近的支付率很低”或者“我們的用戶量很低,怎樣去優(yōu)化它?”這里就涉及到我們的邏輯分析能力。讓我們一起來看網(wǎng)易云閱讀的支付環(huán)節(jié)優(yōu)化的例子:它的整個(gè)流程(如下圖),我們稱之為“交互流程圖”,會(huì)把用戶在使用產(chǎn)品的每個(gè)接觸點(diǎn)都列舉出來,然后再去分析用戶在每個(gè)接觸點(diǎn)都會(huì)遇到怎樣的問題。

4

可以進(jìn)行如下三種處理:

  1. 刪除:刪除“web結(jié)算頁面”,之前的頁面已經(jīng)有了,再次出現(xiàn)屬于重復(fù)信息。
  2. 合并:“購買結(jié)算頁面”,將統(tǒng)一操作流程的頁面合并在一起,去除不必要的頁面。再看余額充值的環(huán)節(jié),“確認(rèn)充值”、“選擇充值方式”、“充值金額”這三個(gè)流程都可以放到一個(gè)頁面里,以減少用戶在頁面間的跳轉(zhuǎn),避免在此流程中造成用戶流失。
  3. 修改:“購買成功”頁面提供更好的反饋體驗(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)么?”

5

所以交互設(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ì)我們頁面排版能力的提升很重要。

6

設(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>

7

8

9

上圖是小餅同學(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)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 感覺交互設(shè)計(jì)師的工作內(nèi)容與我理解的產(chǎn)品經(jīng)理的職能很多交叉的地方

    來自浙江 回復(fù)
  2. 學(xué)習(xí)了,感謝分享。就是圖片太模糊了!

    來自廣東 回復(fù)
  3. 不錯(cuò),學(xué)習(xí)了, 只是圖片看不清放大后模糊。

    回復(fù)
  4. 很棒

    來自北京 回復(fù)
  5. 那個(gè)腦圖的清晰一點(diǎn)啊?。。。?!我暈了

    來自山東 回復(fù)
  6. 圖片可以再清晰一點(diǎn)就好了

    來自北京 回復(fù)
  7. 小餅很棒

    來自廣東 回復(fù)
  8. 小餅很棒

    來自廣東 回復(fù)
  9. 配圖有意思~

    來自福建 回復(fù)
  10. 樓主,配圖出現(xiàn)了錯(cuò)亂! ??

    來自北京 回復(fù)