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

生活中,機(jī)場(chǎng)宣肚、醫(yī)院等公共場(chǎng)所會(huì)設(shè)置導(dǎo)向指引牌想罕,幫助人們辨別方位、找到目標(biāo)位置。APP中按价,也需要在用戶的行為旅程中惭适,給出操作引導(dǎo),以輔助用戶完成操作目標(biāo)楼镐,或者吸引癞志、引導(dǎo)用戶按照設(shè)計(jì)者的想法參與使用APP、提升轉(zhuǎn)化率框产。今天我就針對(duì)UI設(shè)計(jì)中引導(dǎo)設(shè)計(jì)怎么做進(jìn)行簡(jiǎn)單的說明凄杯。

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

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

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

用一個(gè)簡(jiǎn)單的公式來表示就是B=MAT,其中B是Behavior行為摆霉,M是Motivation 動(dòng)機(jī)豪椿,A是Ability能力,T是Triggers觸發(fā)携栋。引導(dǎo)提示就是一個(gè)展示動(dòng)機(jī)和能力成本的觸發(fā)因素搭盾。

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

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

以下兩段是略顯枯燥的理論知識(shí)鸯隅,但它是進(jìn)行引導(dǎo)提示的文案撰寫、交互設(shè)計(jì)、視覺表達(dá)的重要支撐蝌以,請(qǐng)堅(jiān)持讀下去~

第一部分炕舵,動(dòng)機(jī)

動(dòng)機(jī)在心理學(xué)中是指激發(fā)個(gè)體朝著一定目標(biāo)活動(dòng),并且維持這種活動(dòng)的內(nèi)在心理活動(dòng)或內(nèi)部動(dòng)力跟畅。動(dòng)機(jī)關(guān)乎著行為的發(fā)生咽筋、方向、強(qiáng)度和持續(xù)性徊件。

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

用戶使用APP甚至沉迷其中就是由動(dòng)機(jī)促使的略就,如某用戶在電商平臺(tái)挑選瀏覽的動(dòng)機(jī)捎迫,可以是想要物美價(jià)廉地購買某件商品。

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

第二部分,能力成本

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

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

能力成本有以下6個(gè)維度:

前四點(diǎn)總結(jié)來說秆剪,就是省時(shí)赊淑、省錢、省事仅讽、省力陶缺。第五點(diǎn),社會(huì)偏好指的是借助人們「從眾」的心理本能洁灵,用大眾的選擇饱岸、觀點(diǎn)作為背書。如商品的描述與價(jià)格都相同,我們一般都會(huì)選銷量高的那個(gè)伶贰,因?yàn)橛X得大家都選的應(yīng)該沒什么大問題蛛砰。

  最后一點(diǎn)是指一些打破用戶習(xí)慣的行為是有很高成本的,UI設(shè)計(jì)中引導(dǎo)設(shè)計(jì)怎么做https://www.aaa-cg.com.cn/ui/2792.html如將公司的紙質(zhì)化報(bào)賬黍衙、申請(qǐng)的流程全部遷移到線上泥畅,光想想就有原資料錄入、構(gòu)建線上系統(tǒng)琅翻、規(guī)則調(diào)整位仁、工作流程調(diào)整等一系列問題。在APP設(shè)計(jì)中方椎,目前比較成熟的電商聂抢、新聞等類型的APP都有比較固定的產(chǎn)品架構(gòu)與交互方式,用戶在長(zhǎng)期使用的過程中已經(jīng)建立了較深的習(xí)慣基礎(chǔ)棠众。設(shè)計(jì)同類型產(chǎn)品時(shí)應(yīng)盡量保持用戶習(xí)慣的模式琳疏,不要做翻天覆地的創(chuàng)新設(shè)計(jì)脑奠,否則會(huì)給用戶帶來很高的打破習(xí)慣频蛔、重新學(xué)習(xí)的成本。再說回引導(dǎo)設(shè)計(jì)匙监,它可以傳遞給用戶「APP此處的功能可以降低某種能力成本」的信息新荤,從而吸引用戶使用揽趾。如下圖中:

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

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

觸發(fā)因素是促使行為發(fā)生的第三個(gè)要素劣坊。當(dāng)用戶有充足的動(dòng)機(jī)嘀倒、又有能力的時(shí)候,需要的只是臨門一腳——在適當(dāng)?shù)臅r(shí)機(jī)給用戶一個(gè)提醒。比如大促前的促銷短信發(fā)放测蘑、促銷活動(dòng)的倒計(jì)時(shí)灌危、廣告投放等,都是常見的觸發(fā)因素碳胳。

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

行為需要的能力成本勇蝙、人的動(dòng)機(jī)分別為橫縱坐標(biāo),上方的曲線為行動(dòng)成功曲線挨约,它之上是成功觸發(fā)行為的區(qū)域味混,下方是失敗區(qū)域。簡(jiǎn)單來說诫惭,在動(dòng)機(jī)程度一定的情況下翁锡,行為越簡(jiǎn)單越容易觸發(fā);在行為難易程度一定的情況下,動(dòng)機(jī)越強(qiáng)越容易觸發(fā)行為夕土。注意不要出現(xiàn)動(dòng)機(jī)要求高馆衔、操作又很難的設(shè)計(jì),轉(zhuǎn)化結(jié)果會(huì)很低怨绣。我們?cè)谠O(shè)計(jì)行為流程中的引導(dǎo)提示時(shí)角溃,要注意在這幾種情境下的發(fā)力點(diǎn):

1. 當(dāng)用戶行為動(dòng)機(jī)不足時(shí),引導(dǎo)提示的形式梨熙、文案內(nèi)容开镣,要充分刺激用戶產(chǎn)生動(dòng)機(jī)。如使用大字號(hào)咽扇、動(dòng)效吸引用戶產(chǎn)生好奇的動(dòng)機(jī)邪财,標(biāo)明活動(dòng)滿減、贈(zèng)品等優(yōu)惠信息刺激用戶產(chǎn)生購買動(dòng)機(jī)质欲。

2. 當(dāng)用戶有足夠的動(dòng)機(jī)树埠、想要進(jìn)行行為操作,但受限于頁面流程的復(fù)雜嘶伟、個(gè)人能力怎憋,不知道要怎么操作時(shí),要適時(shí)適地給出操作引導(dǎo)提示九昧,輔助用戶學(xué)會(huì)使用绊袋,從而完成轉(zhuǎn)化。如功能入口的折疊铸鹰、位置變化癌别,特殊交互方式的說明。

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

3. 當(dāng)用戶既有行動(dòng)的動(dòng)機(jī),又知道怎么行動(dòng)時(shí)擂达,就需要適時(shí)地給用戶一個(gè)適當(dāng)?shù)奶嵝淹疗獭_@時(shí)不需過度引導(dǎo)誘惑,免得適得其反谍婉。簡(jiǎn)單的彈窗提示或者氣泡提示就可以達(dá)到效果舒憾。

劃重點(diǎn)

  今天分享了設(shè)計(jì)引導(dǎo)提示時(shí)如何深入思考,挖掘設(shè)計(jì)方案背后的行為設(shè)計(jì)學(xué)原理穗熬。Fogg行為模型中指出B=MAT镀迂,行為的產(chǎn)生需要足夠的動(dòng)機(jī)、一定的能力和觸發(fā)條件唤蔗。而引導(dǎo)提示就是可以提示用戶產(chǎn)生或強(qiáng)化動(dòng)機(jī)探遵、幫助用戶提升能力、提醒觸發(fā)用戶現(xiàn)在就行動(dòng)起來的方式妓柜。因此箱季,您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息棍掐,請(qǐng)給我點(diǎn)個(gè)關(guān)注藏雏,我之后還會(huì)發(fā)包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末作煌,一起剝皮案震驚了整個(gè)濱河市掘殴,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌粟誓,老刑警劉巖奏寨,帶你破解...
    沈念sama閱讀 218,204評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異鹰服,居然都是意外死亡病瞳,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門悲酷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來套菜,“玉大人,你說我怎么就攤上這事设易×龋” “怎么了?”我有些...
    開封第一講書人閱讀 164,548評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵亡嫌,是天一觀的道長(zhǎng)嚎于。 經(jīng)常有香客問我,道長(zhǎng)挟冠,這世上最難降的妖魔是什么于购? 我笑而不...
    開封第一講書人閱讀 58,657評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮知染,結(jié)果婚禮上肋僧,老公的妹妹穿的比我還像新娘。我一直安慰自己控淡,他們只是感情好嫌吠,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著掺炭,像睡著了一般辫诅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上涧狮,一...
    開封第一講書人閱讀 51,554評(píng)論 1 305
  • 那天炕矮,我揣著相機(jī)與錄音,去河邊找鬼者冤。 笑死肤视,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的涉枫。 我是一名探鬼主播邢滑,決...
    沈念sama閱讀 40,302評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼愿汰!你這毒婦竟也來了困后?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,216評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤尼桶,失蹤者是張志新(化名)和其女友劉穎操灿,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體泵督,經(jīng)...
    沈念sama閱讀 45,661評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡趾盐,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了小腊。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片救鲤。...
    茶點(diǎn)故事閱讀 39,977評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖秩冈,靈堂內(nèi)的尸體忽然破棺而出本缠,到底是詐尸還是另有隱情,我是刑警寧澤入问,帶...
    沈念sama閱讀 35,697評(píng)論 5 347
  • 正文 年R本政府宣布丹锹,位于F島的核電站稀颁,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏楣黍。R本人自食惡果不足惜匾灶,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望租漂。 院中可真熱鬧阶女,春花似錦、人聲如沸哩治。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽业筏。三九已至憔杨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間驾孔,已是汗流浹背芍秆。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評(píng)論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留翠勉,地道東北人妖啥。 一個(gè)月前我還...
    沈念sama閱讀 48,138評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像对碌,于是被迫代替她去往敵國和親荆虱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評(píng)論 2 355