微交互:超實(shí)用的提高產(chǎn)品魅力值神器

2 評(píng)論 3352 瀏覽 25 收藏 12 分鐘

微交互可以說是吸引用戶、提升產(chǎn)品體驗(yàn)感的一個(gè)極好的方式,如何利用好這點(diǎn)呢?

什么是微交互?

微交互是指具有一項(xiàng)主要任務(wù)或者說一個(gè)目標(biāo)的事件。在你的設(shè)備和App里,你到處都可以找到它的身影。微交互的目的是取悅用戶,創(chuàng)造吸引人的、熱情的甚至人性化的體驗(yàn)。

例如,看看下面的交互:

點(diǎn)贊——Facebook Messenger

這個(gè)動(dòng)畫就是微交互的一個(gè)很好的例子,因?yàn)樗瓿闪巳齻€(gè)重要的功能:

  • 傳達(dá)狀態(tài)并提供反饋
  • 增強(qiáng)直接操控感
  • 讓人們看到操作的結(jié)果

分解微交互

微交互有四個(gè)部分:

超實(shí)用!提高產(chǎn)品魅力值的神器------微交互

觸發(fā)

微交互通過觸發(fā)來啟動(dòng),既可以是用戶啟動(dòng)也可以是系統(tǒng)啟動(dòng)。在用戶啟動(dòng)的觸發(fā)中,用戶必須啟動(dòng)某個(gè)操作。在系統(tǒng)啟動(dòng)的觸發(fā)中,當(dāng)軟件檢測(cè)到某些條件被滿足,就會(huì)啟動(dòng)操作。

規(guī)則

規(guī)則決定微交互觸發(fā)后會(huì)發(fā)生什么。

反饋

反饋讓人們知道正在發(fā)生什么。在微交互過程中,用戶看到、聽到或感受到的任何東西都屬于反饋。

循環(huán)和模式

循環(huán)和模式決定了微交互的元規(guī)則。如果條件變化了,微交互該如何做出反應(yīng)?

微交互的重要性

為什么微交互很重要?它是表達(dá)情緒的動(dòng)作。

超實(shí)用!提高產(chǎn)品魅力值的神器------微交互

如果微交互只是一種微小的設(shè)計(jì)元素,我們?yōu)槭裁匆P(guān)注它呢?

不幸的是,許多網(wǎng)站開發(fā)人員和設(shè)計(jì)人員至今仍會(huì)提出這樣的疑問。他們還沒有意識(shí)到,忽視微交互可能會(huì)給客戶帶來很多麻煩。對(duì)細(xì)節(jié)的重視是那些優(yōu)秀的網(wǎng)站區(qū)別于普通網(wǎng)站的地方。

以下是微交互的一些好處:

  • 『微交互』能改進(jìn)網(wǎng)站的導(dǎo)航;
  • 『微交互』使用戶與網(wǎng)站的互動(dòng)更容易;
  • 『微交互』即時(shí)地向用戶提供已完成操作的有關(guān)反饋;
  • 『微交互』會(huì)給用戶提供提示;
  • 『微交互』傳達(dá)有關(guān)某些元素的信息,例如這個(gè)元素是不是可互動(dòng)的;
  • 『微交互』使用戶體驗(yàn)更有價(jià)值;
  • 『微交互』鼓勵(lì)用戶分享、點(diǎn)贊和評(píng)論;
  • 『微交互』引導(dǎo)用戶的注意力;
  • 最后一點(diǎn),『微交互』能讓你的網(wǎng)站更富有人的情感。

精心設(shè)計(jì)的微交互能清楚展示出你對(duì)用戶的關(guān)注,因此它才受到了如此多的重視。用戶需要知道要做什么、他們的操作是否正確并被系統(tǒng)接受——App或者網(wǎng)站應(yīng)提供即時(shí)的視覺反饋,教用戶使用它們的系統(tǒng)。正確使用微交互可以讓用戶對(duì)品牌產(chǎn)生積極的情感,并在不知不覺中影響他們的行為。

你喜歡一個(gè)產(chǎn)品的某個(gè)方面會(huì)讓你對(duì)產(chǎn)品整體有積極的情感傾向,反之如果你不喜歡產(chǎn)品的某個(gè)方面,也會(huì)讓你對(duì)產(chǎn)品整體有消極的情感傾向。這被稱為暈輪效應(yīng)。

它是一把雙刃劍。聰明的人會(huì)利用這個(gè)效應(yīng)來改善用戶對(duì)你的網(wǎng)站的反饋——通過適當(dāng)?shù)仃P(guān)注細(xì)節(jié)讓你的用戶滿意。

何時(shí)使用微交互

在UX/UI的世界中,一談到用戶溝通,微交互就被當(dāng)成是一個(gè)強(qiáng)有力的工具,盡管它只是一個(gè)很小的細(xì)節(jié)。以下是最熱門的七種微交互和它們對(duì)用戶體驗(yàn)的影響:

1. 滑動(dòng)

超實(shí)用!提高產(chǎn)品魅力值的神器------微交互

滑動(dòng)減少了點(diǎn)擊,是一種更具互動(dòng)性和流暢性的方式。滑動(dòng)可以幫助用戶快速在選項(xiàng)卡之間切換,獲取更多的產(chǎn)品信息。并且,滑動(dòng)是一種非常常見的手勢(shì),它能在潛意識(shí)里引導(dǎo)用戶,不需要讓他們思考;就像我們一直被灌輸“不要讓你的用戶思考”一樣。此外,滑動(dòng)手勢(shì)有趣到令人上癮。

2. 數(shù)據(jù)輸入

超實(shí)用!提高產(chǎn)品魅力值的神器------微交互
我們都知道設(shè)置密碼或創(chuàng)建賬戶會(huì)令人煩躁。這步操作很容易惹惱用戶。

除了提前給出密碼長度和格式的建議以幫助用戶輕松進(jìn)入下一步,輸入數(shù)據(jù)時(shí)的一些互動(dòng)性的交互設(shè)計(jì)也能幫助用戶順利完成該過程、實(shí)現(xiàn)目標(biāo)。

3. 動(dòng)畫

超實(shí)用!提高產(chǎn)品魅力值的神器------微交互

動(dòng)畫是微交互的構(gòu)成部分,它能提升微交互的效果。動(dòng)畫使好的設(shè)計(jì)更加人性化。

動(dòng)畫的存在可能不引人注意,但缺少動(dòng)畫則會(huì)影響每一個(gè)人。它們就像強(qiáng)力膠,幫助設(shè)計(jì)師讓最簡單的流程也能變得有趣、令人上癮。

不過你要小心,動(dòng)畫是為了吸引用戶的參與而不是干擾或阻礙他們。拖延處理過程或者給網(wǎng)站引入新的風(fēng)格可能會(huì)引起混亂。

4. 當(dāng)前系統(tǒng)狀態(tài)

超實(shí)用!提高產(chǎn)品魅力值的神器------微交互

讓用戶對(duì)網(wǎng)站或App上發(fā)生的當(dāng)前狀態(tài)保持了解是很重要的。如果用戶不清楚現(xiàn)在的情況,他們有可能會(huì)因此惱火而關(guān)閉網(wǎng)站或App。

微交互讓用戶可以準(zhǔn)確地知道正在發(fā)生什么、完成該過程需要多久等等。哪怕是完成失敗的消息你也可以做得幽默而實(shí)用,這樣可以維持用戶的信任。

5. 讓教程變得有趣

超實(shí)用!提高產(chǎn)品魅力值的神器------微交互

我們每個(gè)人都在不斷地尋求信息。在教程中使用微交互,可以通過簡化和突出App的基本功能和重要控件幫助用戶理解,指導(dǎo)他們?nèi)绾问褂肁pp。

6. 行為召喚(Call to Action, CTA)

超實(shí)用!提高產(chǎn)品魅力值的神器------微交互

微交互本質(zhì)上是在促使用戶與App或網(wǎng)站進(jìn)行互動(dòng)。行為召喚能潛移默化地為用戶行為創(chuàng)造成就感和同理心。并且,讓用戶與CTA互動(dòng)的最佳方式就是制作出有吸引力的CTA勾起他們的興趣。

7. 動(dòng)畫按鈕

超實(shí)用!提高產(chǎn)品魅力值的神器------微交互

動(dòng)畫按鈕允許用戶了解如何使用你的App或網(wǎng)站,它從中扮演了信息管理員的角色。我們需要注意按鈕的顏色、形狀特效、動(dòng)畫、位置和紋理,以創(chuàng)造流暢的用戶體驗(yàn)。人們一直致力于尋求即時(shí)滿足。

從大局來看微交互很容易被我們忽視,但它在吸引用戶上起到了非常重要的作用。

正所謂細(xì)節(jié)決定成敗,微小的體驗(yàn)和設(shè)計(jì)功能,比如屏幕間切換、突出功能或彈出新通知,可能會(huì)在改進(jìn)用戶體驗(yàn)方面產(chǎn)生巨大的差異。

怎樣設(shè)計(jì)微交互

對(duì)于設(shè)計(jì)師來說,設(shè)計(jì)微交互是令人興奮的,因?yàn)樗麄兛梢詮闹袊L試新的設(shè)計(jì)解決方案、尋找新的方式給用戶制造驚喜。要做到這一點(diǎn),你必須牢記以下幾條:

  1. 從用戶的角度考慮問題,盡你所能地去了解他們是如何使用你的App的。
  2. 制作具有功能的動(dòng)畫效果。動(dòng)畫不僅要具有美感,還能改進(jìn)用戶體驗(yàn)。
  3. 讓用戶享受到樂趣。使用時(shí)的愉快感受是用戶持續(xù)選擇該App背后的原因。如果你的產(chǎn)品給用戶帶來了愉快的體驗(yàn),那他們就會(huì)繼續(xù)使用。
  4. 過猶不及。太多的動(dòng)畫反而會(huì)對(duì)用戶產(chǎn)生相反的影響。用戶如果因此感到厭煩,他們會(huì)放棄使用你的App。
  5. 使用日常的語言,避免太技術(shù)化。在App中出現(xiàn)空白頁面時(shí),一個(gè)有趣或者諷刺的文案可以讓用戶忘記這份煩躁。

設(shè)計(jì)微交互的工具

那么,哪些原型設(shè)計(jì)工具是設(shè)計(jì)師應(yīng)該熟悉了解的呢?市面上有非常多的工具,但不是每個(gè)人都知道怎樣的工具適合怎樣的微交互任務(wù)。根據(jù)我個(gè)人的設(shè)計(jì)經(jīng)驗(yàn),我的推薦如下。

如果你很熟悉編程:

  • 手機(jī):Xcode,Android studio;
  • 手機(jī)或網(wǎng)絡(luò):Framer;
  • 網(wǎng)絡(luò):CSS animation;

如果要設(shè)計(jì)一個(gè)屏幕推送與模塊之間的交互:Invision和Marvel;

如果要制作更細(xì)致的交互:Principle,Adobe CC,origami Studio和Protopie;

如果要制作詳細(xì)的交互+動(dòng)畫:After Effects。

這里有一些我制作的交互

超實(shí)用!提高產(chǎn)品魅力值的神器------微交互

超實(shí)用!提高產(chǎn)品魅力值的神器------微交互

超實(shí)用!提高產(chǎn)品魅力值的神器------微交互

超實(shí)用!提高產(chǎn)品魅力值的神器------微交互

超實(shí)用!提高產(chǎn)品魅力值的神器------微交互

要使你的微交互運(yùn)行成功,請(qǐng)確保你的團(tuán)隊(duì)做到了以上提到的要點(diǎn),并與UX流程協(xié)調(diào)順利。祝你在做微交互的過程中一切順利!

 

原作者:Vamsi Batchu

原文鏈接:https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0

翻譯者:『即能小程序』團(tuán)隊(duì),公眾號(hào):『即能學(xué)習(xí)』

本文由 @即能小程序 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 別說設(shè)計(jì)了,看了 都很興奮

    回復(fù)
  2. 內(nèi)容不錯(cuò),希望即能多提供產(chǎn)品設(shè)計(jì)方面的知識(shí)

    來自廣東 回復(fù)