公司決定讓視覺設(shè)計(jì)師兼任部分交互設(shè)計(jì)工作，相關(guān)同事問我能不能做一些培訓(xùn)。第一節(jié)課我不打算講Axure、xmind怎么用，因?yàn)檐浖耆梢宰詫W(xué)，也不打算科普交互設(shè)計(jì)是什么，就好像解釋籃球是什么并不能教會他們打籃球。我希望能教給大家一些東西，能馬上運(yùn)用起來真正解決問題。交互設(shè)計(jì)畫布正是這樣的好工具，它能幫助設(shè)計(jì)師從全局看待一個需求，找到真正的問題，綜合所有因素提出可行的解決方案。下面開始我的表演！

一. 交互設(shè)計(jì)核心要素

首先從一個實(shí)際的問題開始。

小明是外地人，28歲，能熟練使用智能手機(jī)，第一次來北京，他想去得實(shí)大廈見一個朋友，但上午10:00到西二旗地鐵站后不知道怎么走，如果你是一個地圖App的設(shè)計(jì)師，請?jiān)O(shè)計(jì)一個步行導(dǎo)航功能幫助他順利的到達(dá)得實(shí)大廈。

小明如何才能到達(dá)得實(shí)大廈

我們可以這么思考，小明的起點(diǎn)是西二旗地鐵站，他現(xiàn)在目標(biāo)是去得實(shí)大廈，其實(shí)這個目標(biāo)隱含了3個前提：

1. 準(zhǔn)確，是到了得實(shí)大廈，不是到了其他地方。
2. 安全，不能在路上走著走著出車禍了。
3. 比較有效率，得實(shí)大廈本來不遠(yuǎn)，用戶肯定不希望繞遠(yuǎn)路，能快點(diǎn)更好。

從起點(diǎn)到目標(biāo)，肯定會經(jīng)過一些步驟，我們把關(guān)鍵步驟列出來如下圖所示。

需求、目標(biāo)和關(guān)鍵步驟

現(xiàn)在我們一個一個步驟來分析和設(shè)計(jì)，首先是手機(jī)啟動App，有個啟動界面，我們可以放一些宣傳語，安撫一下小明因?yàn)槊月樊a(chǎn)生的焦躁心情，比如：“步行導(dǎo)航，找方向不再難”。

啟動界面

接下來輸入起點(diǎn)，利用手機(jī)的GPS定位功能把當(dāng)前所處的位置自動顯示在地圖上，為了預(yù)防定位不準(zhǔn)，把起點(diǎn)做到輸入框內(nèi)保證隨時可以修改。下一個步驟是輸入終點(diǎn)，顯然這里也需要一個輸入框。之后開始導(dǎo)航這個步驟肯定需要一個按鈕來觸發(fā)，這三步聯(lián)系非常緊密，因此做到了一個界面里。

導(dǎo)航設(shè)置界面

小明跟著導(dǎo)航路線行走是最為關(guān)鍵的步驟，除了在地圖上顯示當(dāng)前位置、線路以及得實(shí)大廈的位置，還有其他因素可能影響這次導(dǎo)航的成敗。

比如天氣，一下雨地鐵站附近的路不太好走，所以我們需要根據(jù)天氣給予用戶不同的路徑；

第二是光線，小明是白天去得實(shí)大廈，不是晚上，白天光線很強(qiáng)，顏色太淺的界面可能會有點(diǎn)看不清，所以設(shè)計(jì)的時候應(yīng)該用反差比較大的顏色，還要自動把手機(jī)的亮度調(diào)高。

第三是用戶的行為，稍微觀察就會發(fā)現(xiàn)，用戶在使用地圖導(dǎo)航的時候，是先看會兒地圖，再走，然后觀察地圖確認(rèn)自己是否走得對，以此往復(fù)。有可能小明走過頭了才看地圖，所以遇到關(guān)鍵的路線變化，比如轉(zhuǎn)彎的時刻，我們可以設(shè)置一個震動或者語音，提醒用戶及時打開手機(jī)查看線路，及時改變行走方向。

此外，我們最好設(shè)計(jì)一個剩余時間和路程，降低小明的焦慮，否則他不知道啥時候才能到，心理會比較急躁。

導(dǎo)航界面的設(shè)計(jì)

最后是到達(dá)了得實(shí)大廈。這里大家可以回憶一下，你到了一個預(yù)定地點(diǎn)，你是怎么確定自己到了呢？一種辦法是問附近的人“這里是得實(shí)大廈嗎？”還有觀察樓房上有沒有很大的文字招牌。很可惜，得實(shí)大廈貌似沒有。所以我們在界面上可以把得實(shí)大廈的圖片放在上面，方便用戶與現(xiàn)實(shí)環(huán)境識別比對，再提示用戶導(dǎo)航完成，給個退出按鈕，整個步行導(dǎo)航的初步設(shè)計(jì)就完成了。

導(dǎo)航完成界面

以上就是一個交互設(shè)計(jì)大概的過程。

辛向陽（卡內(nèi)基梅隴大學(xué)設(shè)計(jì)哲學(xué)博士，香港理工大學(xué)人機(jī)交互專業(yè)開創(chuàng)人，江南大學(xué)設(shè)計(jì)學(xué)院前院長，反正是個特別牛逼的人）將交互設(shè)計(jì)總結(jié)為五個核心要素：人、目標(biāo)、場景、行為、工具（媒介）。

• 人是指用戶，這是交互的主體，在這里案例中是指小明。
• 目標(biāo)是指用戶期望的結(jié)果，在這個案例中小明期望的結(jié)果是準(zhǔn)確、安全、高效的到達(dá)得實(shí)大廈。
• 場景，這個詞比較抽象，可以理解為用戶所處的環(huán)境，比如天氣、光照、旁邊有沒有其他人等等可能對用戶行為產(chǎn)生影響的因素。
• 工具（媒介）是指用戶交互的對象，這里是手機(jī)上的地圖App。
• 最后是行為，用戶通過做出行為，包括對媒介的行為（點(diǎn)擊、縮放）和其他行為（走路），通過這些行為到達(dá)目標(biāo)。

交互設(shè)計(jì)五要素

因此，交互設(shè)計(jì)可以理解為：充分考慮用戶、場景、媒介對目標(biāo)的影響，通過設(shè)計(jì)媒介的使用方式，改變用戶的行為，促使用戶達(dá)到目標(biāo)。

交互設(shè)計(jì)五要素圖解

不同的用戶年齡、是否熟練能使用手機(jī)、職業(yè)、性別和心情，都對用戶達(dá)成目標(biāo)有很大的影響，比如上圖不是小明，是老明，50歲，從來沒用過地圖APP、眼睛和耳朵都不太好使，設(shè)計(jì)的時候就要特別注意，比如把文字和圖要放的特別大，最好能語音播放聲音。場景：比如天氣、光照、下雨了就得換條路，哪里發(fā)生了車禍提醒用戶注意等等。工具，本案例的智能手機(jī)，如果GPS沒打開還得提醒用戶打開，快沒電了得提醒用戶充電等等。有非常多的因素影響著用戶達(dá)成目標(biāo)。

交互設(shè)計(jì)師的職責(zé)就是權(quán)衡這些影響因素，設(shè)計(jì)更好的方案，幫助用戶更好的達(dá)成目標(biāo)。有經(jīng)驗(yàn)的設(shè)計(jì)師和沒經(jīng)驗(yàn)的設(shè)計(jì)師的區(qū)別之一是能在眾多因素中快速找到影響用戶達(dá)成目標(biāo)的主要因素。

二、交互設(shè)計(jì)畫布1.0

現(xiàn)在我們把這些要素整合成一張表格，形成交互設(shè)計(jì)畫布1.0版。然后把前面的例子稍加變化，假如小明從通州開車到得實(shí)大廈，而你設(shè)計(jì)的是駕駛導(dǎo)航功能。目標(biāo)、場景、媒介又有什么變化，你該如何設(shè)計(jì)媒介的使用方式改變用戶的行為呢？

比如目標(biāo)，想想看，這個目標(biāo)和步行的目標(biāo)的區(qū)別是——他首先得在得實(shí)大廈附近停好車，再步行到得實(shí)大廈里，所以這里的第一目標(biāo)應(yīng)該是，準(zhǔn)確、安全、快速的在得實(shí)大廈附近停好車。其他因素對目標(biāo)的影響和初步解決方案我列了幾個在畫布中，歡迎補(bǔ)充。

交互設(shè)計(jì)畫布1.0

有了交互設(shè)計(jì)畫布，在分析需求時就能找準(zhǔn)方向，全盤統(tǒng)籌的去考慮問題，設(shè)計(jì)方案時不會走偏。

三、用戶需求和商業(yè)需求

僅僅考慮用戶的需求是不夠的。很多時候一個需求并不是用戶提出來的，而是公司下達(dá)的命令。假如你是百度網(wǎng)盤的設(shè)計(jì)師，老板希望提高自動備份功能的打開率。你讓設(shè)計(jì)一個方案，你該如何應(yīng)對？

我們可以把公司下達(dá)的這個命令叫業(yè)務(wù)需求或者業(yè)務(wù)目標(biāo)，提高自動備份的打開率，讓更多的用戶開啟照片自動備份很好理解，如果備份的照片越多，用戶偶爾來查看照片，就越離不開百度網(wǎng)盤，產(chǎn)品黏性就會提高，而且照片占用的空間越多就需要付費(fèi)，這些付費(fèi)將給公司帶來不錯的盈利。

我們之前提到的交互設(shè)計(jì)五要素中的目標(biāo)其實(shí)是用戶體驗(yàn)?zāi)繕?biāo)，因?yàn)檫@是用戶希望達(dá)到的。業(yè)務(wù)目標(biāo)和用戶體驗(yàn)?zāi)繕?biāo)之間有關(guān)聯(lián)，業(yè)務(wù)目標(biāo)是：提高自動備份的打開率。為了達(dá)成業(yè)務(wù)目標(biāo)，我們必須讓用戶打開自動備份開關(guān)。也就是說這里的用戶體驗(yàn)?zāi)繕?biāo)是：更多的用戶打開自動備份開關(guān)。只有先達(dá)成用戶體驗(yàn)?zāi)繕?biāo)，業(yè)務(wù)目標(biāo)才有可能完成。

用戶體驗(yàn)?zāi)繕?biāo)和業(yè)務(wù)目標(biāo)

四、用戶行為受何影響

接下來的就是我們設(shè)計(jì)師該分析——如何讓用戶打開自動備份開關(guān)？

這里介紹一個新模型。動機(jī)、擔(dān)憂、障礙。動機(jī)是指用戶進(jìn)行某行動的一個推動力，如果這個推動力不夠強(qiáng)，用戶就不會產(chǎn)生行動。擔(dān)憂和動機(jī)剛好相反，擔(dān)憂是用戶在行動前的一個疑慮，如果疑慮越少，用戶行動的可能性越大。障礙是用戶在行動過程中遇到的阻礙因素，阻礙越小，做出行動肯定會更順利。我們的用戶體驗(yàn)?zāi)繕?biāo)是更多的用戶打開自動備份開關(guān)。

動機(jī)、擔(dān)憂和障礙

現(xiàn)在我們想想我們能給用戶創(chuàng)造什么動機(jī)讓他產(chǎn)生打開開關(guān)的行動？

比如：有的用戶可能是為了節(jié)省手機(jī)空間容量，所以希望把多余的圖片備份。也有可能是剛旅游回來，準(zhǔn)備備份一批旅游拍攝的照片。還有可能是因?yàn)橥獠空T惑，比如打開自動備份送10塊錢。

那在用戶打開自動備份之前，又會有什么擔(dān)憂呢，比如擔(dān)心網(wǎng)盤不安全，隱私會不會泄露?；蛘哂X得我們的提供的空間不夠大，備份到一半空間就不夠了。還有網(wǎng)盤會不會不穩(wěn)定，哪天數(shù)據(jù)丟了就找不回來了。

動機(jī)和擔(dān)憂是用戶做出行動之前的，障礙則是用戶在行動過程中的。假如打開的步驟非常多，路徑很長，或者界面內(nèi)容很復(fù)雜，用戶就可能會中途放棄打開自動備份了。

創(chuàng)造動機(jī)、排除擔(dān)憂、解決障礙

現(xiàn)在我們來看下圖，了解競品是如何創(chuàng)造動機(jī)、排除擔(dān)憂、解決障礙的。

競品是如何創(chuàng)造動機(jī)、排除擔(dān)憂、解決障礙

解釋行為如何發(fā)生的模型還有很多，例如斯坦福大學(xué)教授BJ Fogg認(rèn)為行為(Behavior) 由 動機(jī)(Motivation)、能力(Ability)、觸發(fā)器(Trigger) 三位一體產(chǎn)生的，用戶有意愿能力足夠并且由一個事件觸發(fā)，才會產(chǎn)生行為。

B=MAT

總的來說，人的行為受到主觀因素（人本身的情緒、思考、經(jīng)驗(yàn)等）和客觀因素（物理環(huán)境、社會環(huán)境、工具等）的復(fù)合影響，這其中某些因素可能對用戶產(chǎn)生行為有益，那么我們在做設(shè)計(jì)時就應(yīng)該放大這些因素的影響從而激勵用戶產(chǎn)生行為。對于產(chǎn)生行為有害的因素，我們應(yīng)當(dāng)進(jìn)行引導(dǎo)和安撫。

主觀因素和客觀因素影響用戶行為

五、交互設(shè)計(jì)畫布2.0

根據(jù)以上的梳理，交互設(shè)計(jì)畫布2.0的成型了。每次接到新需求的時候，在進(jìn)行基本的梳理和競品分析后，我們可以把這張畫布打印一張進(jìn)行填寫（也可以使用Axure元件庫電子版填寫）。新增的需求這欄，用于填寫需求方給的背景信息、資源和限制。最后一欄機(jī)會/挑戰(zhàn)是填寫綜合前面的因素發(fā)現(xiàn)的難點(diǎn)以及靈感、初步解決方案等。

在項(xiàng)目的進(jìn)行中，把填寫好的畫布貼到明顯的位置，提醒自己把握全局，不要走偏，如果發(fā)現(xiàn)新的靈感和漏掉的限制條件，也可以隨時補(bǔ)充到畫布中。

人的思維和記憶能力是有限的，在思考一個局部時往往會陷入其中鉆牛角尖，甚至遺漏一些重要條件。畫布的意義在于提供一個思考框架，并不是一定要把畫布填寫的滿滿的，才是好的，按需填寫甚至對畫布依據(jù)自己的思維習(xí)慣進(jìn)行二次改造。

交互設(shè)計(jì)畫布Axure電子版

交互設(shè)計(jì)畫布正面

交互設(shè)計(jì)畫布反面

無論是自己思考還是團(tuán)隊(duì)協(xié)作畫布是一項(xiàng)非常好用的工具，除了我整理的這張交互設(shè)計(jì)畫布，市面上還有其他類型的畫布，例如商業(yè)模式畫布和用戶同理心畫布。

Airbnb的商業(yè)模式畫布

用戶同理心移情畫布

下載地址

上圖是下載后包含的5個文件，下載地址：https://pan.baidu.com/s/1o4Zw7f-GJEcAnjsV2C3cEw（提取密碼：cfju）

作者：龍爪槐守望者，微信公眾號：龍爪槐守望者

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

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