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

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

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

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

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

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

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

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

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

說的很對，但是看不懂，請說人話！

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

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

所以承載物可以是這樣：

也可以是這樣：

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

像這樣：

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

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

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

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

三、負責的具體內(nèi)容

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

1. 交互設(shè)計啟動之后，設(shè)計師要做的就是定目標

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

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

思維方式可以是“產(chǎn)品目標-設(shè)計目標-體驗?zāi)繕恕薄?/p>

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

舉個例子：

• 產(chǎn)品目標：直播口紅帶貨；
• 設(shè)計目標：買到適合自己的口紅色號；
• 體驗?zāi)繕耍鹤屪约鹤兊酶溃屇信笥迅鼝圩约?有利于自己職業(yè)發(fā)展等等；

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

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

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

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

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

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

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

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

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

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

當然，我們在工作中不是每個項目都會做得這樣聲勢浩大，在小的項目中可以摳細節(jié)，在設(shè)計中做一點點小的改變。

像上圖中右邊加上一個icon，可以更快速地讓用戶進行識別。

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

4. 畫交互稿

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

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

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

比方說像這樣：

還有像這樣：

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

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

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

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

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

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

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

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

來看看初稿和成稿的對比圖：

5. 做高保真原型

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

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

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

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

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

6. 做效果驗證

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

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

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

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

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

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

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

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

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

舉個例子，如下圖表格：

在表格中，因為掃一掃驗獎是產(chǎn)品新開發(fā)的一個功能，但沒有人確定它是否是受歡迎的；那么像這樣的新功能，目標就是驗證功能是否受歡迎以及提高用戶對它受歡迎的程度。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

六、給各位同學的建議

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

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

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

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

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

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

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

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

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

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

七、常見問題

1. 要不要報培訓班？

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

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

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

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

八、推薦

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

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

九、總結(jié)梳理全部知識點

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

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

進步最快的法子，還是實踐，多做項目，在項目中成長。

日拱一卒，都會一點點往前進步的，加油~

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

#專欄作家#

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

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

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