編輯導(dǎo)語：交互設(shè)計(jì)努力去創(chuàng)造和建立的是人與產(chǎn)品及服務(wù)之間有意義的關(guān)系，從屬于設(shè)計(jì)領(lǐng)域的交互設(shè)計(jì)，主要關(guān)注的是如何讓人與系統(tǒng)更好地進(jìn)行“對(duì)話”本文作者詳細(xì)介紹了交互設(shè)計(jì)的詳細(xì)知識(shí)體系，我們一起來學(xué)習(xí)一下。

“交互設(shè)計(jì)師技能總覽！”

首先需要說明的是，今天這篇文章純粹是一種知識(shí)總結(jié)和探討，并不是標(biāo)準(zhǔn)答案，所以也歡迎大家互相交流。

近幾年交互設(shè)計(jì)的職業(yè)從大火到現(xiàn)在的漸漸趨于理性，筆者也正好經(jīng)歷了期間大部分的時(shí)間段（暴露了年齡-_-||），來說說現(xiàn)階段市面上普遍的交互設(shè)計(jì)工作需要哪些知識(shí)。

一、交互設(shè)計(jì)師的定義

一提到交互設(shè)計(jì)師，大家腦海中就想到，嗯，畫線框圖的！

如果不是？那你倒是告訴我交互設(shè)計(jì)師是干嘛的呀。

先來看看百度百科的解釋：

是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域，它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達(dá)成某種目的；交互設(shè)計(jì)努力去創(chuàng)造和建立的是人與產(chǎn)品及服務(wù)之間有意義的關(guān)系，以“在充滿社會(huì)復(fù)雜性的物質(zhì)世界中嵌入信息技術(shù)”為中心；交互系統(tǒng)設(shè)計(jì)的目標(biāo)可以從“可用性”和”用戶體驗(yàn)“兩個(gè)層面上進(jìn)行分析，關(guān)注以人為本的用戶需求。

說的很對(duì)，但是看不懂，請(qǐng)說人話！

通俗一點(diǎn)的解釋是，交互設(shè)計(jì)師的工作就是處理，現(xiàn)實(shí)生活中，人與外界之間的操作連鎖反應(yīng)。

外界可以是需要常設(shè)計(jì)的設(shè)備，如手機(jī)、電腦、平板電腦、智能手表，以及平時(shí)能見到但只有特定領(lǐng)域的設(shè)計(jì)師能進(jìn)行的VR眼鏡、汽車智能顯示屏、無人車、自助快遞機(jī)等等；如果范圍再說的大一點(diǎn)，就是所有人類都需要打交道的外界物體，都是我們可以設(shè)計(jì)的對(duì)象。

所以承載物可以是這樣：

也可以是這樣：

最常見的交互設(shè)計(jì)內(nèi)容就是，跟手機(jī)和電腦相關(guān)的應(yīng)用，包括APP、小程序、H5，再就是PC的web頁面了。

像這樣：

二、交互設(shè)計(jì)的工作流程

主要流程如下圖，一共分為8大步驟，如下圖：

PRD評(píng)審-交互評(píng)審-視覺評(píng)審-開發(fā)-測試-上線-分析結(jié)果-改版。

當(dāng)然，并不是每個(gè)公司都是這樣的流程，有的是產(chǎn)品經(jīng)理連同交互設(shè)計(jì)一起做了。

三、負(fù)責(zé)的具體內(nèi)容

看了流程圖，終于可以來說說交互設(shè)計(jì)落實(shí)到實(shí)處工作內(nèi)容了（撒花撒花~~~）。

1. 交互設(shè)計(jì)啟動(dòng)之后，設(shè)計(jì)師要做的就是定目標(biāo)

我們在面試的時(shí)候經(jīng)常會(huì)遇到這樣的問題：“你在項(xiàng)目中是處于什么角色？你的貢獻(xiàn)是什么？”

如果想要回答這個(gè)問題，就必須從項(xiàng)目起初想好自己能在項(xiàng)目中起到什么作用？怎樣體現(xiàn)價(jià)值？

思維方式可以是“產(chǎn)品目標(biāo)-設(shè)計(jì)目標(biāo)-體驗(yàn)?zāi)繕?biāo)”。

• 產(chǎn)品目標(biāo)：通過需求或者功能的設(shè)計(jì)，達(dá)到某些業(yè)務(wù)的目的，一般是拉新、促活、留存等等目的，一般是產(chǎn)品經(jīng)理來定；
• 設(shè)計(jì)目標(biāo)：在產(chǎn)品目標(biāo)的基礎(chǔ)上，按照用戶現(xiàn)階段的經(jīng)歷，能夠接受的產(chǎn)品形式；
• 體驗(yàn)?zāi)繕?biāo)：在設(shè)計(jì)目標(biāo)的基礎(chǔ)上，用戶通過使用設(shè)產(chǎn)品，最終想得到的成果；

舉個(gè)例子：

• 產(chǎn)品目標(biāo)：直播口紅帶貨；
• 設(shè)計(jì)目標(biāo)：買到適合自己的口紅色號(hào)；
• 體驗(yàn)?zāi)繕?biāo)：讓自己變得更美，讓男朋友更愛自己/有利于自己職業(yè)發(fā)展等等；

2. 用戶研究，去了解用戶真正需要的是什么

大家之前所見到的用戶體驗(yàn)地圖、用戶畫像、用戶調(diào)研（用戶調(diào)研又分為線上調(diào)研、線下調(diào)研、電話調(diào)研等多種形式）等等，都是了解用戶的方法。

按照筆者的經(jīng)驗(yàn)來看，最了解用戶的方法就是走近用戶，真正跟用戶相處在一起一段時(shí)間；然后根據(jù)大數(shù)據(jù)，去統(tǒng)計(jì)出規(guī)律，減少因主觀判斷而產(chǎn)生的誤差，但市面上能做到的確實(shí)很少。

3. 得出設(shè)計(jì)策略

通過你的調(diào)研，需要解決以下幾個(gè)問題：

• 你的目標(biāo)用戶是誰？即你的設(shè)計(jì)是為誰而設(shè)計(jì)的？
• 你可以為用戶解決什么問題？
• 有哪些策略可以幫用戶解決這些問題？

策略有很多種，比方說如下幾種：

比如騰訊PUPU讀書改版的如下策略：

某游戲的視覺設(shè)計(jì)策略：

相信大家在網(wǎng)上都看到不少這樣的策略圖。

當(dāng)然，我們在工作中不是每個(gè)項(xiàng)目都會(huì)做得這樣聲勢浩大，在小的項(xiàng)目中可以摳細(xì)節(jié)，在設(shè)計(jì)中做一點(diǎn)點(diǎn)小的改變。

像上圖中右邊加上一個(gè)icon，可以更快速地讓用戶進(jìn)行識(shí)別。

以上這些大大小小的策略積累多了之后，再回過頭來進(jìn)行總結(jié)，就比較容易形成自己的方法論了。

4. 畫交互稿

好，經(jīng)過這么多的鋪墊，終于可以進(jìn)入畫交互稿的階段；很多人已經(jīng)迫不及待了，但真正能體現(xiàn)價(jià)值的，卻是上面所介紹的畫交互稿之前的思考。

就算是畫交互稿，也會(huì)經(jīng)過草稿、初稿、成稿三個(gè)階段。

草稿階段就是，將界面的布局通過筆或者其它工具進(jìn)行確定，筆者本人最喜歡用的還是筆和紙張；打好草稿之后，可以先和leader或者產(chǎn)品經(jīng)理對(duì)一下，以免大方向出錯(cuò)，然后走了很多彎路。

比方說像這樣：

還有像這樣：

確定好了之后再進(jìn)行初稿設(shè)計(jì)，初稿就可以上軟件了；軟件可以選擇Sketch/Axure/Balsamiq Mockups/Visio等等，這就是大家討論最多的工具部分。

大家會(huì)奇怪為什么不用Photoshop？Photoshop難道不好用嗎？

Photoshop更適合運(yùn)營設(shè)計(jì)師做各種圖片的效果渲染，針對(duì)純UI有點(diǎn)大材小用，功能不夠簡單、運(yùn)行不夠高效，但它的圖片處理能力是其它軟件無法替代的。

一般來看Sketch/Axure使用的最多，兩者各有優(yōu)勢，Sketch插件多，軟件運(yùn)行快，可以直接與其它的動(dòng)效軟件進(jìn)行制作高保真原型，這樣就可以作為最小可行性產(chǎn)品（mvp）；在正式開發(fā)前就進(jìn)行用戶調(diào)查、可用性測試，稍后再詳細(xì)來說這一塊。

Axure有最大的好處就是，立馬能做頁面的跳轉(zhuǎn)關(guān)系，更多的是產(chǎn)品經(jīng)理做原型圖比較合適；現(xiàn)在市面上的趨勢是，使用sketch的人越來越多。

等初稿出來之后，大概是這樣。

初稿的標(biāo)準(zhǔn)是，用戶在這個(gè)頁面整條流程都跑得通，產(chǎn)品經(jīng)理需要的元素，頁面上都有。

但大家也會(huì)發(fā)現(xiàn)，初稿精細(xì)程度是不高的，還有很大的優(yōu)化空間，比方說信息的強(qiáng)弱關(guān)系還沒有表達(dá)出來，對(duì)于界面空間的利用度可以再變得再高一點(diǎn)。

來看看初稿和成稿的對(duì)比圖：

5. 做高保真原型

等所有靜態(tài)截面圖都做完之后，則可以進(jìn)入到制作高保真原型；高保真原型，是用戶可以上手操作的demo，工具可以是Flinto、Principle、Protopie等等。展示效果如下圖：

不是所有的項(xiàng)目都要制作高保真原型。只有項(xiàng)目從0到1初啟動(dòng)，或者是大改版、增加重大的功能的時(shí)候才會(huì)做高保真原型。一般小項(xiàng)目，幾個(gè)頁面就搞定的則不是這樣。

為什么要做MVP，靜態(tài)畫的頁面跟動(dòng)態(tài)demo比起來，還是缺少很多細(xì)節(jié)表達(dá)的，不要太自信；這樣一方面幫助設(shè)計(jì)師去檢查自己方案的完整度，另一方面可以拿著MVP去進(jìn)行可用性測試；對(duì)，這個(gè)時(shí)候又會(huì)進(jìn)行一輪用戶調(diào)查，但這個(gè)調(diào)查會(huì)針對(duì)的是目標(biāo)用戶，檢驗(yàn)我們產(chǎn)品做的是否完善，功能是否真的是用戶所需的，。

關(guān)于交互規(guī)范，是很重要的一環(huán)。如果團(tuán)隊(duì)有，則可以在畫頁面的過程中一起進(jìn)行運(yùn)用，如果沒有，C端產(chǎn)品則先采用市面上的蘋果的iOS界面交互規(guī)范或者谷歌的material design進(jìn)行參考，前期影響也不大；B端可以采用ant design的設(shè)計(jì)規(guī)范，不會(huì)出太大的錯(cuò)。

等項(xiàng)目做完之后，再來進(jìn)行復(fù)盤，哪些是規(guī)范里面沒有，進(jìn)行整理，形成自己產(chǎn)品線的規(guī)范。

6. 做效果驗(yàn)證

這個(gè)問題也是面試官喜歡問，但平時(shí)又很容易忽略的一個(gè)環(huán)節(jié)。就是你所采用的法子，最終實(shí)現(xiàn)的效果怎樣。

是不是一臉懵逼，設(shè)計(jì)師還要管這個(gè)？嗯，市場所需，現(xiàn)在每個(gè)崗位都要為項(xiàng)目的結(jié)果買單，至少越來越有這樣的趨勢所在；比方說設(shè)計(jì)賦能、設(shè)計(jì)驅(qū)動(dòng)產(chǎn)品、設(shè)計(jì)改變行業(yè)等等這樣字眼的出現(xiàn)。

現(xiàn)實(shí)是，我們做完項(xiàng)目之后，很容易被拋到腦后面再也不管了，原因有很多種，可能是一個(gè)個(gè)項(xiàng)目接踵而至沒有時(shí)間做思考，也有可能是缺少這方面的意識(shí)。

做效果驗(yàn)證有兩大方法：線上數(shù)據(jù)追蹤、線下找運(yùn)營了解。

線上數(shù)據(jù)追蹤可以采用數(shù)據(jù)埋點(diǎn)的方式，數(shù)據(jù)埋點(diǎn)可以分為前端用戶行為數(shù)據(jù)埋點(diǎn)和后端業(yè)務(wù)數(shù)據(jù)埋點(diǎn)。

設(shè)計(jì)師一般需要關(guān)注前端用戶行為數(shù)據(jù)埋點(diǎn)，有能力的話也建議一起關(guān)注下業(yè)務(wù)數(shù)據(jù)，這樣你會(huì)更懂業(yè)務(wù)；用戶行為數(shù)據(jù)的方法，市面上也不少，例如Google推出的GSM量化方法。

GSM是Google提出的一種量化方法，主要思路是通過對(duì)目標(biāo)的拆解，一步步推導(dǎo)得出最應(yīng)該關(guān)注的關(guān)鍵數(shù)據(jù)指標(biāo)（KPIs，Key Performance，Indicators）；這種目標(biāo)導(dǎo)向的推導(dǎo)過程，能更科學(xué)、系統(tǒng)化的搭建指標(biāo)體系，經(jīng)過推導(dǎo)得到的數(shù)據(jù)指標(biāo)與設(shè)計(jì)工作關(guān)系更緊密，能更好的評(píng)估設(shè)計(jì)目標(biāo)完成情況。

它分為三項(xiàng)數(shù)據(jù)，針對(duì)設(shè)計(jì)師而言它的解釋如下：

• 識(shí)別目標(biāo)（Goal）：設(shè)計(jì)目標(biāo)是什么？
• 推導(dǎo)表現(xiàn)（Signal）：根據(jù)設(shè)計(jì)目標(biāo)，用戶在達(dá)到這個(gè)目標(biāo)過程中，在APP中的表現(xiàn)有哪些？
• 選取指標(biāo)（Metric）：根據(jù)用戶的表現(xiàn)，這些表現(xiàn)會(huì)導(dǎo)致哪些數(shù)據(jù)會(huì)有所改變？

舉個(gè)例子，如下圖表格：

在表格中，因?yàn)閽咭粧唑?yàn)獎(jiǎng)是產(chǎn)品新開發(fā)的一個(gè)功能，但沒有人確定它是否是受歡迎的；那么像這樣的新功能，目標(biāo)就是驗(yàn)證功能是否受歡迎以及提高用戶對(duì)它受歡迎的程度。

前者屬于產(chǎn)品經(jīng)理的職責(zé)，而設(shè)計(jì)師可以著重聚焦于后者；那么針對(duì)于后者，大伙可以著重研究下表格上的內(nèi)容，看是否是正確的，以及它改善的空間。

數(shù)據(jù)指標(biāo)Metric是獨(dú)立的，單個(gè)去看并沒有什么意義，重要的還是要要看項(xiàng)目在某個(gè)階段想要解決一個(gè)什么樣的問題，聯(lián)系各個(gè)數(shù)據(jù)去反應(yīng)這個(gè)問題！

除了GSM還有螞蟻金服的TECH 模型、天貓的TES等等，有的還以NPS（凈推薦值）為度量標(biāo)準(zhǔn)，在這里我們會(huì)見到各種各樣的聽起來很厲害的名詞（確實(shí)也是很厲害）；如果不懂可以找產(chǎn)品經(jīng)理一起先討論，以及筆者以后再更新。

差點(diǎn)忘說了，就是還要找運(yùn)營去了解，看運(yùn)營的反饋，運(yùn)營是最了解市場反饋的崗位，他們會(huì)給出更多的對(duì)數(shù)據(jù)的解析，以及一些無法從數(shù)據(jù)分析中得到經(jīng)驗(yàn)建議。

四、關(guān)于方法論沉淀

如果說世界觀主要解決世界“是什么”的問題，方法論主要解決“怎么辦”的問題，通俗地講就是“套路”。

方法論其實(shí)我們已經(jīng)接觸過比較多了，比方說熟知的5W2H，這是效果驗(yàn)證的方法論；那作為交互設(shè)計(jì)師，那我們可參考的方法論有哪些？

介紹一個(gè)筆者常用的方法論，用戶思維：

解釋一下就是：我們拿到產(chǎn)品的需求，解決問題的時(shí)候，如果無從下手，則可以先分析下——用戶是誰（即用戶），他們想通過這樣的功能達(dá)到什么目的（即需求），如果想達(dá)到這些目的是在哪些場景下做哪些事情（即場景和任務(wù)），這個(gè)任務(wù)再對(duì)應(yīng)到收集界面上，又可以拆分為哪些子任務(wù)。

方法論就是這樣，能批量應(yīng)對(duì)事情的辦法，快速找到解決問題的入口。

五、更高的設(shè)計(jì)要求

2017年開始，有個(gè)詞開始火起來，叫設(shè)計(jì)賦能，其實(shí)也就是說要通過設(shè)計(jì)師的能力幫助業(yè)務(wù)解決問題，產(chǎn)生價(jià)（cai）值（fu）。

那對(duì)設(shè)計(jì)師的要求就是除了是交互設(shè)計(jì)師，還需要有產(chǎn)品經(jīng)理的角色，會(huì)挖掘需求，同時(shí)還要讓團(tuán)隊(duì)里面的人相信你，推動(dòng)需求落地實(shí)施。嗯，是很有挑戰(zhàn)性的！

那再高于這個(gè)要求就是整合資源，或者在行業(yè)有突出貢獻(xiàn)了，不在本篇討論范圍之內(nèi)。

六、給各位同學(xué)的建議

1. 給0~1年交互經(jīng)驗(yàn)小白同學(xué)的建議：

先去盡可能嘗試一切機(jī)會(huì)做項(xiàng)目，主動(dòng)點(diǎn)，哪怕是跟著做做助理設(shè)計(jì)師也是很值得的，這個(gè)時(shí)期，別管別的，先積累量，確實(shí)只有我們的誠心和努力才能得到更多的項(xiàng)目。

目標(biāo)是積累項(xiàng)目經(jīng)驗(yàn)，行為上也要打扎實(shí)基礎(chǔ)，將iOS和Android設(shè)計(jì)規(guī)范進(jìn)行熟悉，能背下來最好。

2. 給1~3年交互經(jīng)驗(yàn)進(jìn)階同學(xué)的建議：

打磨細(xì)節(jié)、積累自己解決問題的方法論，像網(wǎng)上《X種彈窗的使用方式》、《按鈕的X種狀態(tài)》、還有類似筆者的文章《B端設(shè)計(jì)之導(dǎo)航》都是對(duì)細(xì)節(jié)的打磨；像這樣的細(xì)節(jié)琢磨，會(huì)將你從入門漢帶入到沉靜的階段，理解排版布局背后的原因，對(duì)用戶心理的研究也會(huì)更上一層樓。

對(duì)，這個(gè)時(shí)候得開始積累自己的方法論了，至少得開始培養(yǎng)這樣的意識(shí)，不是短時(shí)間就可以做好的，慢慢來。

3. 給3年以上交互經(jīng)驗(yàn)高階同學(xué)的建議：

這個(gè)時(shí)候應(yīng)該已經(jīng)可以挑戰(zhàn)創(chuàng)造業(yè)務(wù)相關(guān)需求的事情，想的是現(xiàn)在做的事情有什么價(jià)值。

如果有興趣，也可以嘗試往管理崗進(jìn)行探索，但在設(shè)計(jì)行業(yè)，管理崗也是一線，只是換了個(gè)平臺(tái)解決更大局的設(shè)計(jì)問題。

還有一個(gè)經(jīng)驗(yàn)就是，想突破瓶頸，最近發(fā)現(xiàn)，看書是個(gè)不錯(cuò)的idea，加強(qiáng)自身底蘊(yùn)的建設(shè)也能達(dá)到不錯(cuò)的效果。

七、常見問題

1. 要不要報(bào)培訓(xùn)班？

從2012年至今，可以明顯看到設(shè)計(jì)師招聘的要求，逐漸從熟練使用 xx 工具的描述，轉(zhuǎn)變?yōu)橐恍╆P(guān)鍵詞出來，比如：圖形排版、設(shè)計(jì)理論、邏輯思維、歸納總結(jié)、趨勢洞察、項(xiàng)目推動(dòng)… 而這其中，早已預(yù)示著互聯(lián)網(wǎng)發(fā)展到今天，數(shù)字產(chǎn)品設(shè)計(jì)師早已經(jīng)過了技法的時(shí)代，企業(yè)真正需要的是解決問題的能力，而這也就對(duì)設(shè)計(jì)師提出了更多的要求。

簡單點(diǎn)說就是企業(yè)不需要設(shè)計(jì)師來畫圖，而是需要設(shè)計(jì)師用設(shè)計(jì)的方法解決企業(yè)經(jīng)營過程中遇到的問題；顯然這些，大部分培訓(xùn)班是達(dá)不到這樣的要求的，是一個(gè)不錯(cuò)的入門方法，但不要抱太大的希望，還得找好培訓(xùn)機(jī)構(gòu)。

2. 如何轉(zhuǎn)行到交互？

UI設(shè)計(jì)和產(chǎn)品經(jīng)理最好轉(zhuǎn)行到交互，設(shè)計(jì)領(lǐng)域的同學(xué)想轉(zhuǎn)行到交互其實(shí)門檻都不高，要的是找項(xiàng)目經(jīng)驗(yàn)；如果手上沒有項(xiàng)目，就從手上的UI工作或者產(chǎn)品的工作，去慢慢分析交互策略、流程圖、頁面的布局，自己畫交互；多跟相關(guān)同事交流，再者還是沒有，則上網(wǎng)接活進(jìn)行練手。

八、推薦

《用戶力：需求驅(qū)動(dòng)的產(chǎn)品、運(yùn)營和商業(yè)模式》、《寫給大家看的設(shè)計(jì)書》、《曾國藩家書》，這些書是筆者自己能看進(jìn)去的，實(shí)操比較有用的。

• 《用戶力》這本書在筆者工作3~5年之間，給了些啟發(fā)，算是一個(gè)轉(zhuǎn)折點(diǎn)。
• 《寫給大家看的設(shè)計(jì)書》說的是最常見的設(shè)計(jì)法則，也是最實(shí)用的法則，重點(diǎn)看原理，UI和交互都適用。
• 《曾國藩家書》是修身、齊家、治國三個(gè)階段的修煉，到最后拼的就是自己的底蘊(yùn)，為30歲之后的日子打好基礎(chǔ)。

九、總結(jié)梳理全部知識(shí)點(diǎn)

按照上面羅列的，check一下看看。

以上就是對(duì)交互設(shè)計(jì)知識(shí)體系的一些總結(jié)了，給出一個(gè)輪廓，然后大家可以針對(duì)自己現(xiàn)階段的情況，該學(xué)軟件學(xué)軟件，該做項(xiàng)目做項(xiàng)目，該復(fù)盤的復(fù)盤自己的方法論。

進(jìn)步最快的法子，還是實(shí)踐，多做項(xiàng)目，在項(xiàng)目中成長。

日拱一卒，都會(huì)一點(diǎn)點(diǎn)往前進(jìn)步的，加油~

大家有什么建議的可以在留言區(qū)進(jìn)行留言，筆者會(huì)一一答復(fù)。

#專欄作家#

Sophiallg，微信公眾號(hào)：Sophia的玲瓏閣，大廠體驗(yàn)設(shè)計(jì)師，人人都是產(chǎn)品經(jīng)理專欄作家、簡書互聯(lián)網(wǎng)優(yōu)秀作者，分享實(shí)用的互聯(lián)網(wǎng)設(shè)計(jì)技巧和職場經(jīng)驗(yàn)。

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

題圖來自 Unsplash，基于 CC0 協(xié)議