有好多交互新人或尚未跨進(jìn)交互設(shè)計(jì)大門(mén)的同學(xué)，會(huì)經(jīng)常問(wèn)的一個(gè)問(wèn)題：交互設(shè)計(jì)師需要具備怎樣的技能和能力？本文將以“小餅”一個(gè)交互新人的成長(zhǎng)過(guò)程以及工作中遇到的問(wèn)題，來(lái)跟大家分享交互設(shè)計(jì)師必備的9種能力。

1. 產(chǎn)品意識(shí)

設(shè)計(jì)師有時(shí)候會(huì)收到用戶(hù)的反饋，如：

哎？你們易信的顏色是不是太亮了，能不能調(diào)整一下？

這時(shí)候作為交互新人的小餅，他的第一反應(yīng)是：

哦，好吧，既然用戶(hù)有這樣的反饋，那么我們就去調(diào)整方案。

首先，要思考一下用戶(hù)的這些反饋或需求，是“真需求”還是“偽需求”？

福特曾經(jīng)說(shuō)過(guò)：

如果我最初問(wèn)消費(fèi)者他們想要什么，他們會(huì)告訴我：要一匹更快的馬！

每位設(shè)計(jì)師應(yīng)該都知道，當(dāng)用戶(hù)表示需要 “要一匹更快的馬”時(shí)，他真實(shí)的想法其實(shí)要一個(gè)更快的交通工具。所以當(dāng)我們面對(duì)用戶(hù)的反饋時(shí)，要去思考需求的真?zhèn)?。我們不可能一味滿(mǎn)足用戶(hù)的需求而不顧產(chǎn)品目標(biāo)，所以需要在用戶(hù)需求和產(chǎn)品目標(biāo)中找到平衡點(diǎn)。最近在設(shè)計(jì)某個(gè)產(chǎn)品支付系統(tǒng)的退款功能，從產(chǎn)品角度來(lái)說(shuō)不希望過(guò)多用戶(hù)選擇退款。那么最終的設(shè)計(jì)方案是，將退款的入口做的很隱蔽，而且流程比較繁瑣（沒(méi)錯(cuò)，就是故意的）。這樣就滿(mǎn)足雙方需求了，達(dá)到產(chǎn)品目標(biāo)和用戶(hù)需求的平衡。所以交互設(shè)計(jì)師要有產(chǎn)品意識(shí)，不能只去滿(mǎn)足用戶(hù)，也要顧慮到產(chǎn)品和商業(yè)目標(biāo)。

2. 以用戶(hù)為中心

小餅同學(xué)的設(shè)計(jì)方案常常會(huì)受到用戶(hù)的一些質(zhì)疑：

“哎？這個(gè)APP到底怎么來(lái)用?。吭趺次彝耆床欢撊绾稳ゲ僮?？”

“這個(gè)提示為什么會(huì)在這里？”

“為啥分享結(jié)束后，不能自動(dòng)返回到之前的頁(yè)面？還傻傻地留在原來(lái)的頁(yè)面？”

這些是交互設(shè)計(jì)師經(jīng)常遇到的問(wèn)題，沒(méi)有以用戶(hù)為中心去思考和設(shè)計(jì)。什么叫以用戶(hù)為中心的設(shè)計(jì)方法？具體講，就是我們從需求產(chǎn)出，到整個(gè)需求的細(xì)分，以及我們方案的產(chǎn)出和驗(yàn)證都是圍繞著以用戶(hù)為中心的。如果需要分析用戶(hù)，我們就會(huì)走到用戶(hù)的生活場(chǎng)景里去看他們?cè)趺词褂卯a(chǎn)品的。比如，站在用戶(hù)的身后，從他們的視角去觀察以及如何使用使用。同樣我們也會(huì)對(duì)用戶(hù)進(jìn)行一些細(xì)分，對(duì)人群進(jìn)行組合或抽離出某個(gè)具體概念，這叫“用戶(hù)畫(huà)像”。

當(dāng)設(shè)計(jì)師以用戶(hù)為中心的方法進(jìn)行設(shè)計(jì)時(shí)，往往會(huì)要考慮三件事情：

1. 用戶(hù)是誰(shuí)？
2. 他是在什么場(chǎng)景下去使用產(chǎn)品？
3. 他希望通過(guò)產(chǎn)品去解決什么問(wèn)題？

3. 邏輯思維能力

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

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

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

1. 刪除：刪除“web結(jié)算頁(yè)面”，之前的頁(yè)面已經(jīng)有了，再次出現(xiàn)屬于重復(fù)信息。
2. 合并：“購(gòu)買(mǎi)結(jié)算頁(yè)面”，將統(tǒng)一操作流程的頁(yè)面合并在一起，去除不必要的頁(yè)面。再看余額充值的環(huán)節(jié)，“確認(rèn)充值”、“選擇充值方式”、“充值金額”這三個(gè)流程都可以放到一個(gè)頁(yè)面里，以減少用戶(hù)在頁(yè)面間的跳轉(zhuǎn)，避免在此流程中造成用戶(hù)流失。
3. 修改：“購(gòu)買(mǎi)成功”頁(yè)面提供更好的反饋體驗(yàn)通過(guò)砍掉不必要、合并相同和修改體驗(yàn)不好的頁(yè)面，這樣整個(gè)流程的優(yōu)化完，支付比例有了非常顯著的提升。

關(guān)于邏輯分析能力，不僅體現(xiàn)在我們對(duì)于交互流程和業(yè)務(wù)流程上的梳理，同時(shí)也體現(xiàn)在我們對(duì)數(shù)據(jù)的解讀和分析上。上面的例子中，通過(guò)“數(shù)據(jù)漏斗模型”來(lái)分析每個(gè)環(huán)節(jié)用戶(hù)的流失情況，然后針對(duì)性地提出解決方案。

4. 頁(yè)面排版能力

作為交互新人難免會(huì)收到同事的反饋建議，比如：

• 產(chǎn)品同學(xué)會(huì)說(shuō)： “哎？小餅同學(xué)，你這塊的邏輯不太對(duì)啊，這些信息明明是一起的，為什么你設(shè)計(jì)方案里看起來(lái)不像是一起的呢？”；
• 視覺(jué)同學(xué)會(huì)說(shuō)：“哎呀，交互設(shè)計(jì)師，為什么你們的交互一定要做得這么丑，難道就不能做得漂亮一點(diǎn)么？”

所以交互設(shè)計(jì)師需要怎樣的排版設(shè)計(jì)能力呢？線(xiàn)框圖是交互設(shè)計(jì)師的主要產(chǎn)出物，它包含了所有頁(yè)面流程和單頁(yè)面的信息布局。就像如下圖所示，如果欠缺思考的隨意布局可能給下游的同學(xué)造成很大的困擾。比如，沒(méi)有認(rèn)真對(duì)待信息間距而造成的誤導(dǎo)，錯(cuò)誤的提示色也會(huì)給視覺(jué)同學(xué)造成干擾。所以建議交互設(shè)計(jì)師通過(guò)簡(jiǎn)單的黑白灰樣式來(lái)表達(dá)頁(yè)面優(yōu)先級(jí)以及重要程度的區(qū)分。如果覺(jué)得某個(gè)信息很重要，可以顏色重一點(diǎn)，也可區(qū)域更大一些。這些格式塔心理學(xué)的知識(shí)對(duì)我們頁(yè)面排版能力的提升很重要。

設(shè)計(jì)師常用排版的原則：

• 隱藏：如果有很多信息，但是用戶(hù)又不太常見(jiàn)，那么可以把它隱藏起來(lái)，就“眾籌紅包”右上角這里的問(wèn)號(hào)，這里是關(guān)于眾籌紅包的解釋說(shuō)明，對(duì)于用戶(hù)而言是不需要經(jīng)常去關(guān)注的，所以把它隱藏起來(lái)。
• 刪除：一些額外的信息對(duì)整個(gè)頁(yè)面是不太重要的，就可以把它刪除掉。
• 合并&組織：如果很多信息的邏輯關(guān)系是在一起的，我們可以把它們合并或者進(jìn)行重新組織，把它們放得近一點(diǎn)，也可以把它們打亂再重新去整合。

5. 細(xì)節(jié)處理能力

小餅同學(xué)又遇到了問(wèn)題。

boss：“哎？！你這個(gè)閱后即焚的方案，為什么細(xì)節(jié)漏掉那么多？！”

小餅一頭霧水：“哎？我并沒(méi)有覺(jué)得我遺漏任何細(xì)節(jié)啊，那不就是我單獨(dú)的一個(gè)發(fā)送方把頁(yè)面發(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é)你都想到了么？可以說(shuō)設(shè)計(jì)不是憑空腦補(bǔ)YY，而是要以用戶(hù)為中心去觀察和思考，用戶(hù)在使用這些功能時(shí)都有產(chǎn)生哪些流程或行為。

特別感謝：

• 易信／云信／七魚(yú)／云閱讀提供相關(guān)設(shè)計(jì)素材
• 視覺(jué)設(shè)計(jì)大牛“大頭哥”友情提供插畫(huà)素材

后面還有更加精彩的內(nèi)容由大餅哥帶來(lái)~敬請(qǐng)期待《交互設(shè)計(jì)師必備的9種能力 -下篇》

本文由最?lèi)?ài)小鮮肉的大餅哥洪荒巨獻(xiàn)，指導(dǎo)大家如何打開(kāi)交互設(shè)計(jì)的神奇大門(mén)。主要面向的是0~1歲的交互新人或?qū)换ピO(shè)計(jì)感興趣的非專(zhuān)業(yè)人士量身打造。老司機(jī)們可以繼續(xù)往前走，然后將此文分享給身邊的小鮮肉們。

作者：楊杰

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