UI設(shè)計中引導(dǎo)設(shè)計怎么做

　　生活中，機場、醫(yī)院等公共場所會設(shè)置導(dǎo)向指引牌，幫助人們辨別方位、找到目標位置。APP中，也需要在用戶的行為旅程中，給出操作引導(dǎo)，以輔助用戶完成操作目標，或者吸引、引導(dǎo)用戶按照設(shè)計者的想法參與使用APP、提升轉(zhuǎn)化率。今天AAA教育郭老師就針對UI設(shè)計中引導(dǎo)設(shè)計怎么做進行簡單的說明。

 

　　為什么要進行引導(dǎo)設(shè)計?
 

　　引導(dǎo)提示存在的本質(zhì)原因，是由于大多數(shù)APP內(nèi)的信息層級、視覺元素都很多，且受限于手機設(shè)備的頁面空間，信息與功能入口還會被折疊壓縮，讓用戶只根據(jù)頁面布局、信息架構(gòu)去尋找目標內(nèi)容的話，學(xué)習(xí)成本與認知負荷會很高。
 

　　引導(dǎo)提示的設(shè)計，就可以讓原有的內(nèi)容架構(gòu)更靈活，可以突出引導(dǎo)用戶當(dāng)前最需要的內(nèi)容、或是最想讓用戶關(guān)注的內(nèi)容。恰當(dāng)?shù)囊龑?dǎo)設(shè)計可以起到「點睛」作用。從心理學(xué)角度來說，引導(dǎo)提示很好地應(yīng)用了「行為設(shè)計學(xué)」中的Fogg’s Behavior Model這一理論模型。該模型揭示了怎樣可以促成一個人的行為產(chǎn)生，即在合適的時機，用合適的動機來說服、觸發(fā)用戶，做他力所能及的事情。

 

　　用一個簡單的公式來表示就是B=MAT，其中B是Behavior行為，M是Motivation 動機，A是Ability能力，T是Triggers觸發(fā)。引導(dǎo)提示就是一個展示動機和能力成本的觸發(fā)因素。
 

　　Fogg行為模型與引導(dǎo)設(shè)計
 

　　下面將展開來說，引導(dǎo)設(shè)計與Fogg行為模型每個因素的具體聯(lián)系。

 

　　以下兩段是略顯枯燥的理論知識，但它是進行引導(dǎo)提示的文案撰寫、交互設(shè)計、視覺表達的重要支撐，請堅持讀下去~
 

　　第一部分，動機
 

　　動機在心理學(xué)中是指激發(fā)個體朝著一定目標活動，并且維持這種活動的內(nèi)在心理活動或內(nèi)部動力。動機關(guān)乎著行為的發(fā)生、方向、強度和持續(xù)性。
 

　　動機產(chǎn)生的基礎(chǔ)是需要。馬斯洛需要層次理論中，由低到高，從生理層面到社會層面，對需要進行了拆解。由需要的分層可以體會動機的分類與層次。再深入說的話，這篇文的學(xué)術(shù)氣息就太濃厚了，感興趣的小伙伴可以繼續(xù)深挖或者戳我交流~
 

　　用戶使用APP甚至沉迷其中就是由動機促使的，如某用戶在電商平臺挑選瀏覽的動機，可以是想要物美價廉地購買某件商品。
 

　　引導(dǎo)設(shè)計通常都抓住了用戶當(dāng)前頁面場景下，可能促成行為的動機，如引導(dǎo)提示”關(guān)注領(lǐng)取優(yōu)惠券“、”紅包即將失效“等機制，就戳中了用戶價廉購買的動機。

 

　　第二部分，能力成本
 

　　能力成本比較好理解，就是完成某件事的難易程度、需要調(diào)用的能力資源。
 

　　產(chǎn)品設(shè)計中的一大重要原則就是提升產(chǎn)品的易用性，降低操作門檻，降低對用戶能力成本的要求與消耗。
 

　　能力成本有以下6個維度：

 

　　前四點總結(jié)來說，就是省時、省錢、省事、省力。第五點，社會偏好指的是借助人們「從眾」的心理本能，用大眾的選擇、觀點作為背書。如商品的描述與價格都相同，我們一般都會選銷量高的那個，因為覺得大家都選的應(yīng)該沒什么大問題。

 

　　最后一點是指一些打破用戶習(xí)慣的行為是有很高成本的，如將公司的紙質(zhì)化報賬、申請的流程全部遷移到線上，光想想就有原資料錄入、構(gòu)建線上系統(tǒng)、規(guī)則調(diào)整、工作流程調(diào)整等一系列問題。在APP設(shè)計中，目前比較成熟的電商、新聞等類型的APP都有比較固定的產(chǎn)品架構(gòu)與交互方式，用戶在長期使用的過程中已經(jīng)建立了較深的習(xí)慣基礎(chǔ)。設(shè)計同類型產(chǎn)品時應(yīng)盡量保持用戶習(xí)慣的模式，不要做翻天覆地的創(chuàng)新設(shè)計，否則會給用戶帶來很高的打破習(xí)慣、重新學(xué)習(xí)的成本。再說回引導(dǎo)設(shè)計，它可以傳遞給用戶「APP此處的功能可以降低某種能力成本」的信息，從而吸引用戶使用。如下圖中：

 

　　以網(wǎng)易嚴選為例，提示某產(chǎn)品入選網(wǎng)易員工精選好物是對迎合社會偏好的體現(xiàn);而攜程中，引導(dǎo)提示有福利可享、并可通過點擊引導(dǎo)組件滑至福利版塊，通過引導(dǎo)組件體現(xiàn)了APP可以降低金錢成本、操作的體力成本。除了降低能力成本的方式，還可以通過「提升用戶能力」的方式促成行為。如引導(dǎo)提示中可以教給用戶這個icon代表什么功能、要怎么操作、某功能遷移到這兒了，都是在讓用戶學(xué)習(xí)提升。換個角度說，也是在降低用戶認知學(xué)習(xí)的體力成本。
 

　　第三部分，觸發(fā)因素
 

　　觸發(fā)因素是促使行為發(fā)生的第三個要素。當(dāng)用戶有充足的動機、又有能力的時候，需要的只是臨門一腳——在適當(dāng)?shù)臅r機給用戶一個提醒。比如大促前的促銷短信發(fā)放、促銷活動的倒計時、廣告投放等，都是常見的觸發(fā)因素。
 

　　這三個因素的關(guān)系如下圖：

 

　　行為需要的能力成本、人的動機分別為橫縱坐標，上方的曲線為行動成功曲線，它之上是成功觸發(fā)行為的區(qū)域，下方是失敗區(qū)域。簡單來說，在動機程度一定的情況下，行為越簡單越容易觸發(fā);在行為難易程度一定的情況下，動機越強越容易觸發(fā)行為。注意不要出現(xiàn)動機要求高、操作又很難的設(shè)計，轉(zhuǎn)化結(jié)果會很低。我們在設(shè)計行為流程中的引導(dǎo)提示時，要注意在這幾種情境下的發(fā)力點：
 

　　1. 當(dāng)用戶行為動機不足時，引導(dǎo)提示的形式、文案內(nèi)容，要充分刺激用戶產(chǎn)生動機。如使用大字號、動效吸引用戶產(chǎn)生好奇的動機，標明活動滿減、贈品等優(yōu)惠信息刺激用戶產(chǎn)生購買動機。

 

　　2. 當(dāng)用戶有足夠的動機、想要進行行為操作，但受限于頁面流程的復(fù)雜、個人能力，不知道要怎么操作時，要適時適地給出操作引導(dǎo)提示，輔助用戶學(xué)會使用，從而完成轉(zhuǎn)化。如功能入口的折疊、位置變化，特殊交互方式的說明。

 

　　在此基礎(chǔ)上，還可以將操作與引導(dǎo)提示結(jié)合起來，讓用戶通過引導(dǎo)組件直接完成操作。如快捷滑動頁面內(nèi)容、快捷錄入常用信息、收藏內(nèi)容后快捷進入收藏夾等。

 

　　3. 當(dāng)用戶既有行動的動機，又知道怎么行動時，就需要適時地給用戶一個適當(dāng)?shù)奶嵝?。這時不需過度引導(dǎo)誘惑，免得適得其反。簡單的彈窗提示或者氣泡提示就可以達到效果。
 

　　劃重點
 

　　今天分享了設(shè)計引導(dǎo)提示時如何深入思考，挖掘設(shè)計方案背后的行為設(shè)計學(xué)原理。Fogg行為模型中指出B=MAT，行為的產(chǎn)生需要足夠的動機、一定的能力和觸發(fā)條件。而引導(dǎo)提示就是可以提示用戶產(chǎn)生或強化動機、幫助用戶提升能力、提醒觸發(fā)用戶現(xiàn)在就行動起來的方式。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。