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

1. 產(chǎn)品意識

設(shè)計師有時候會收到用戶的反饋，如：

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

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

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

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

福特曾經(jīng)說過：

如果我最初問消費者他們想要什么，他們會告訴我：要一匹更快的馬！

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

2. 以用戶為中心

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

“哎？這個APP到底怎么來用??？怎么我完全看不懂該如何去操作？”

“這個提示為什么會在這里？”

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

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

當設(shè)計師以用戶為中心的方法進行設(shè)計時，往往會要考慮三件事情：

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

3. 邏輯思維能力

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

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

可以進行如下三種處理：

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

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

4. 頁面排版能力

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

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

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

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

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

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

小餅同學又遇到了問題。

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

小餅一頭霧水：“哎？我并沒有覺得我遺漏任何細節(jié)啊，那不就是我單獨的一個發(fā)送方把頁面發(fā)給另一方，對方看完之后就消失掉了。就這么簡單的一個方案。”

上圖是小餅同學做的交互方案。上面是發(fā)起方，有一個“閱后即焚”的功能，點擊之后發(fā)給另外一方，這時接受方就會看到這條信息，并點擊進行去查看。仔細看一下，他到底遺漏了那些信息？

• 發(fā)送方如何選擇圖片，單張還是多張？
• 發(fā)送方發(fā)送后，自己是否能夠查看，可以看幾次
• 接收方查看消息時，是否有時間和次數(shù)限制
• 接收方查看消息中，是否有防止截屏的機制？

以上這些細節(jié)你都想到了么？可以說設(shè)計不是憑空腦補YY，而是要以用戶為中心去觀察和思考，用戶在使用這些功能時都有產(chǎn)生哪些流程或行為。

特別感謝：

• 易信／云信／七魚／云閱讀提供相關(guān)設(shè)計素材
• 視覺設(shè)計大?！按箢^哥”友情提供插畫素材

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

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

作者：楊杰

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