如何快速掌握交互設(shè)計基礎(chǔ)

本文不打算講Axure、xmind怎么用，因為軟件完全可以自學(xué)，也不打算科普交互設(shè)計是什么，就好像解釋籃球是什么并不能教會他們打籃球。我希望能教給大家一些東西，能馬上運(yùn)用起來真正解決問題。交互設(shè)計畫布正是這樣的好工具，它能幫助設(shè)計師從全局看待一個需求，找到真正的問題，綜合所有因素提出可行的解決方案。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),贊皇企業(yè)網(wǎng)站建設(shè),贊皇品牌網(wǎng)站建設(shè),網(wǎng)站定制,贊皇網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,贊皇網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

一、交互設(shè)計核心要素

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

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

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

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

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

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

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

現(xiàn)在我們一個一個步驟來分析和設(shè)計，首先是手機(jī)啟動App，有個啟動界面，我們可以放一些宣傳語，安撫一下小明因為迷路產(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è)計的時候應(yīng)該用反差比較大的顏色，還要自動把手機(jī)的亮度調(diào)高。第三是用戶的行為，稍微觀察就會發(fā)現(xiàn)，用戶在使用地圖導(dǎo)航的時候，是先看會兒地圖，再走，然后觀察地圖確認(rèn)自己是否走得對，以此往復(fù)。有可能小明走過頭了才看地圖，所以遇到關(guān)鍵的路線變化，比如轉(zhuǎn)彎的時刻，我們可以設(shè)置一個震動或者語音，提醒用戶及時打開手機(jī)查看線路，及時改變行走方向。此外我們最好設(shè)計一個剩余時間和路程，降低小明的焦慮，否則他不知道什么時候才能到，心理會比較急躁。

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

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

△導(dǎo)航完成界面

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

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

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

△交互設(shè)計五要素

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

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

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

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

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

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

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

△交互設(shè)計畫布1.0

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

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

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

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

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

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

四、用戶行為受何影響

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

這里介紹一個新模型，動機(jī)、擔(dān)憂、障礙。

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

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

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

比如：有的用戶可能是為了節(jié)省手機(jī)空間容量，所以希望把多余的圖片備份。也有可能是剛旅游回來，準(zhǔn)備備份一批旅游拍攝的照片。還有可能是因為外部誘惑，比如打開自動備份送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é)教授BJFogg認(rèn)為行為（Behavior）由動機(jī)（Motivation）、能力（Ability）、觸發(fā)器（Trigger）三位一體產(chǎn)生的，用戶有意愿，能力足夠并且由一個事件觸發(fā)，才會產(chǎn)生行為。

△B=MAT

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

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

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

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

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

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

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

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

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

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

本文題目：如何快速掌握交互設(shè)計基礎(chǔ)
URL標(biāo)題：http://muchs.cn/article44/cjjsee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站收錄、服務(wù)器托管、微信公眾號、關(guān)鍵詞優(yōu)化、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)