幫你梳理微交互的五個(gè)基本要素

0 評論 9347 瀏覽 45 收藏 8 分鐘

微交互應(yīng)該火熱了相當(dāng)一段時(shí)間了。它成為話題中心很大程度是因?yàn)槲⒔换ニ鶐淼牧钊藙尤莸捏w驗(yàn)。如果說要界定微交互,那么它應(yīng)該是圍繞著用戶完成單個(gè)任務(wù)前后而存在的微妙的交互和效果。

微交互可以存在于APP和網(wǎng)頁的各個(gè)環(huán)節(jié),舉幾個(gè)常見的例子:

  • 確認(rèn)已經(jīng)添加到購物車的項(xiàng)目
  • 使用下拉刷新更新內(nèi)容
  • 確認(rèn)某個(gè)操作的界面動效

這些微妙的動效和交互給用戶帶來微妙的瞬間,它們出現(xiàn)在APP和網(wǎng)頁的各個(gè)角落。這些微小的瞬間雖然不明顯,但是用戶可以輕松地感知到,這些為交互一點(diǎn)一滴地讓整個(gè)APP的用戶體驗(yàn)得到了極大的提升。

今天的文章中,我們將探討5種常見的微交互技術(shù),并且提供相應(yīng)的實(shí)戰(zhàn)案例。

1、培養(yǎng)用戶習(xí)慣

微交互能夠鼓勵(lì)用戶進(jìn)行更多的交互,這也使得它們能夠有效地培養(yǎng)用戶習(xí)慣,構(gòu)成習(xí)慣循環(huán)。培養(yǎng)用戶習(xí)慣通常需要三個(gè)步驟:

  • 提示:觸發(fā)用戶操作的提示
  • 執(zhí)行:響應(yīng)提示,執(zhí)行相應(yīng)的操作
  • 獎勵(lì):完成操作給予用戶以好處

1-OaohC5581iHvREKgIA9xzg

Facebook 培養(yǎng)用戶習(xí)慣的方式就是一個(gè)很好的案例:當(dāng)白色的圖標(biāo)上出現(xiàn)紅色的標(biāo)識的時(shí)候(提示),用戶會知道有新 消息了,用戶就可以點(diǎn)擊圖標(biāo)(執(zhí)行)的時(shí)候,就可以同好友進(jìn)行聊天了(獎勵(lì))。當(dāng)用戶在看到紅色的標(biāo)識之時(shí),隨后會主動點(diǎn)擊并查看。

1-KmTQoQ3swQfd4-y1AuVQyw

雖然這個(gè)案例看起來很簡單,但是基本所有的微交互都遵循這個(gè)規(guī)則。

小貼士:獎勵(lì)機(jī)制是驅(qū)動用戶的核心,獎勵(lì)越強(qiáng),產(chǎn)生的習(xí)慣效果也就越明顯。

2、結(jié)合主題

微交互應(yīng)當(dāng)是你的設(shè)計(jì)的自然組成部分,換句話來說,你應(yīng)當(dāng)創(chuàng)建一個(gè)統(tǒng)一的主題,宏觀上的交互和微交互應(yīng)當(dāng)在設(shè)計(jì)上保持一致。結(jié)合主題的微交互應(yīng)當(dāng)結(jié)合兩個(gè)簡單的原則:

1-60ixJOklRPZL6iyOhV0pkg

  • 連續(xù)性:動效和UI控件不同狀態(tài)之間的轉(zhuǎn)變應(yīng)該是平滑自然的,而非不連續(xù)的。
  • 可預(yù)測性:良好的微交互應(yīng)當(dāng)給用戶以一定的預(yù)期,幫助用戶理解界面的含義,獲取正確的信息。

1-Z5GvQVa6pXZ7lo51Zzf4Wg1-rhRgTV0UnxguZqwXo_BeDA

3、用動效給予反饋

如果正確地將動效和微交互結(jié)合起來,它能夠極大的提升用戶體驗(yàn)。但是并非所有動效都能達(dá)成好的效果,只有同時(shí)具備良好的功能性,還能夠令人產(chǎn)生愉悅感的動效才適合在微交互中給用戶以反饋:

功能性良好的動效能夠降低用戶的認(rèn)知符合,防止用戶在使用過程中產(chǎn)生迷惑,便于用戶在使用過程中同界面產(chǎn)生正向的聯(lián)系。

1-ItT2vE8LykICjyxGcyzprw

令人愉悅的動效讓微交互更加有趣,并且能夠吸引用戶的注意力,讓界面更加富有生命力。

1-mnLzkXGoZBgK4FnXQvT0eg

小貼士:動效應(yīng)當(dāng)具有足夠持久的生命力,所以設(shè)計(jì)的時(shí)候,應(yīng)當(dāng)思考它是否會在看過100次之后讓人覺得厭煩?它是否清晰可見,或者完全無法引人注意?

4、保持幽默

無論是哪種程度的幽默,融入到交互中,都能給用戶帶來充滿情緒、富有感情的用戶體驗(yàn)。比如著名的電子郵件服務(wù) MailChimp 就會在用戶加入之后,使用各種意想不到的幽默和積極的情緒來引導(dǎo)用戶使用產(chǎn)品,協(xié)助他們發(fā)出他們的第一封電子郵件。用戶在使用的過程中,會不斷地收獲小而令人愉悅的驚喜,MailChimp 讓發(fā)送郵件的過程令人難忘。

1-61ejJZRDppg724UNQ6UuJg

MailChimp 用幽默的交互緩解了緊張的局面和氛圍。

小貼士:用充滿情感和人的姿態(tài)來同用戶交流,這是讓你的UI和交互變得更加溫暖的最快的方式。

5、規(guī)避不必要的交互

微交互最大的特色是恰到好處,所以正確的的微交互應(yīng)當(dāng)為用戶提供合適的視覺線索和動效。復(fù)雜的交互和繁復(fù)的UI是最常見的錯(cuò)誤。實(shí)際上你在Dribbble 上能夠看到許多實(shí)驗(yàn)性的UI、交互和動效設(shè)計(jì),其中不少看起來極為漂亮,但是在實(shí)際的交互中缺乏可用性,難于使用,或者完全不具備實(shí)現(xiàn)的價(jià)值。

1-19rJgamWYeIPqTz9p8ZjqA

以這個(gè)動效為例,用戶每翻一下頁面,小球都會來回亂飛,用幾次誰都受不了。

在微交互中,少即是多。將無用的功能和UI控件移除,能夠讓一個(gè)UI更加清晰直觀,在進(jìn)行微交互的設(shè)計(jì)過程中,應(yīng)當(dāng)關(guān)注它的實(shí)際功能,確保它能為用戶提供實(shí)際的功能。

小貼士:應(yīng)當(dāng)在你的設(shè)計(jì)中保持KISS原則(KISS 原則是用戶體驗(yàn)的高層境界,簡單地理解這句話,就是要把一個(gè)產(chǎn)品做得連白癡都會用,因而也被稱為“懶人原則”),不要讓那個(gè)你的微交互成為一個(gè)宏交互。

結(jié)語

在用戶體驗(yàn)設(shè)計(jì)過程中,最重要的應(yīng)該是處理好用戶使用產(chǎn)品時(shí)候的感受,即使是最細(xì)微的細(xì)節(jié)都值得密切關(guān)注,因?yàn)槊恳粋€(gè)細(xì)節(jié)都和你的產(chǎn)品成功與否密切相關(guān)。

 

原文作者:Nick Babich

原文地址:Medium

譯者:@陳子木

譯文地址:http://www.uisdc.com/best-practices-for-microinteractions

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!