UI設計中引導設計怎麼做

生活中，機場、醫院等公共場所會設定導向指引牌，幫助人們辨別方位、找到目標位置。APP中，也需要在使用者的行為旅程中，給出操作引導，以輔助使用者完成操作目標，或者吸引、引導使用者按照設計者的想法參與使用APP、提升轉化率。今天我就針對UI設計中引導設計怎麼做進行簡單的說明。

為什麼要進行引導設計？

引導提示存在的本質原因，是由於大多數APP內的資訊層級、視覺元素都很多，且受限於手機裝置的頁面空間，資訊與功能入口還會被摺疊壓縮，讓使用者只根據頁面佈局、資訊架構去尋找目標內容的話，學習成本與認知負荷會很高。

引導提示的設計，就可以讓原有的內容架構更靈活，可以突出引導使用者當前最需要的內容、或是最想讓使用者關注的內容。恰當的引導設計可以起到「點睛」作用。從心理學角度來說，引導提示很好地應用了「行為設計學」中的Fogg’s Behavior Model這一理論模型。該模型揭示了怎樣可以促成一個人的行為產生，即在合適的時機，用合適的動機來說服、觸發使用者，做他力所能及的事情。

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

Fogg行為模型與引導設計

下面將展開來說，引導設計與Fogg行為模型每個因素的具體聯絡。

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

第一部分，動機

動機在心理學中是指激發個體朝著一定目標活動，並且維持這種活動的內在心理活動或內部動力。動機關乎著行為的發生、方向、強度和持續性。

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

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

引導設計通常都抓住了使用者當前頁面場景下，可能促成行為的動機，如引導提示”關注領取優惠券“、”紅包即將失效“等機制，就戳中了使用者價廉購買的動機。

第二部分，能力成本

能力成本比較好理解，就是完成某件事的難易程度、需要呼叫的能力資源。

產品設計中的一大重要原則就是提升產品的易用性，降低操作門檻，降低對使用者能力成本的要求與消耗。

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

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

最後一點是指一些打破使用者習慣的行為是有很高成本的，UI設計中引導設計怎麼做如將公司的紙質化報賬、申請的流程全部遷移到線上，光想想就有原資料錄入、構建線上系統、規則調整、工作流程調整等一系列問題。在APP設計中，目前比較成熟的電商、新聞等型別的APP都有比較固定的產品架構與互動方式，使用者在長期使用的過程中已經建立了較深的習慣基礎。設計同類型產品時應儘量保持使用者習慣的模式，不要做翻天覆地的創新設計，否則會給使用者帶來很高的打破習慣、重新學習的成本。再說回引導設計，它可以傳遞給使用者「APP此處的功能可以降低某種能力成本」的資訊，從而吸引使用者使用。如下圖中：

以網易嚴選為例，提示某產品入選網易員工精選好物是對迎合社會偏好的體現；而攜程中，引導提示有福利可享、並可透過點選引導元件滑至福利版塊，透過引導元件體現了APP可以降低金錢成本、操作的體力成本。除了降低能力成本的方式，還可以透過「提升使用者能力」的方式促成行為。如引導提示中可以教給使用者這個icon代表什麼功能、要怎麼操作、某功能遷移到這兒了，都是在讓使用者學習提升。換個角度說，也是在降低使用者認知學習的體力成本。

第三部分，觸發因素

觸發因素是促使行為發生的第三個要素。當用戶有充足的動機、又有能力的時候，需要的只是臨門一腳——在適當的時機給使用者一個提醒。比如大促前的促銷簡訊發放、促銷活動的倒計時、廣告投放等，都是常見的觸發因素。

這三個因素的關係如下圖：

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

1。 當用戶行為動機不足時，引導提示的形式、文案內容，要充分刺激使用者產生動機。如使用大字號、動效吸引使用者產生好奇的動機，標明活動滿減、贈品等優惠資訊刺激使用者產生購買動機。

2。 當用戶有足夠的動機、想要進行行為操作，但受限於頁面流程的複雜、個人能力，不知道要怎麼操作時，要適時適地給出操作引導提示，輔助使用者學會使用，從而完成轉化。如功能入口的摺疊、位置變化，特殊互動方式的說明。

在此基礎上，還可以將操作與引導提示結合起來，讓使用者透過引導元件直接完成操作。如快捷滑動頁面內容、快捷錄入常用資訊、收藏內容後快捷進入收藏夾等。

3。 當用戶既有行動的動機，又知道怎麼行動時，就需要適時地給使用者一個適當的提醒。這時不需過度引導誘惑，免得適得其反。簡單的彈窗提示或者氣泡提示就可以達到效果。

劃重點

今天分享了設計引導提示時如何深入思考，挖掘設計方案背後的行為設計學原理。Fogg行為模型中指出B=MAT，行為的產生需要足夠的動機、一定的能力和觸發條件。而引導提示就是可以提示使用者產生或強化動機、幫助使用者提升能力、提醒觸發使用者現在就行動起來的方式。因此，您現在已經瞭解了與UI設計師的工作相關的主要技能。如果您想了解更多資訊，請給我點個關注，我之後還會發包含有關在該領域工作的更多相關文章。

越努力越幸運：UI設計中大屏視覺化設計尺寸指南越努力越幸運：UI設計中取消與關閉的差異總結越努力越幸運：UI設計中AI黑科技外掛合集越努力越幸運：UI設計中開屏頁如何設計越努力越幸運：你知道UI設計和3D是如何結合的嗎