編輯導(dǎo)語：在一個(gè)產(chǎn)品中，微交互雖然不是特別搶眼，但也是非常重要的，微交互對(duì)于用戶的產(chǎn)品體驗(yàn)有很大的影響；在用戶使用產(chǎn)品時(shí)，一些細(xì)節(jié)的設(shè)計(jì)和體驗(yàn)會(huì)讓用戶對(duì)產(chǎn)品產(chǎn)生更多的好感；本文作者分享了關(guān)于怎么使用微交互來促進(jìn)你的產(chǎn)品用戶體驗(yàn)，我們一起來了解一下。

本文將敘述微觀交互的基礎(chǔ)知識(shí)，以及如何利用它們來增強(qiáng)產(chǎn)品的UX設(shè)計(jì)。

在我們使用的產(chǎn)品中，多多少少都會(huì)有一些微交互的穿插，但由于微交互性能的不搶眼也不明顯的條件下，所以往往會(huì)被很多設(shè)計(jì)和開發(fā)人員所忽略。

一、微交互的轉(zhuǎn)型

但在一個(gè)優(yōu)秀的產(chǎn)品中，微交互卻是必不可少的重要關(guān)口，它直接承載著用戶在使用產(chǎn)品時(shí)對(duì)產(chǎn)品細(xì)節(jié)的細(xì)微體驗(yàn)，雖然在互聯(lián)網(wǎng)產(chǎn)品早期，微交互曾被人稱之為是“很炫酷的特性象征”；但時(shí)隔今日，在這百花齊放的產(chǎn)品大環(huán)境中，其實(shí)微交互已經(jīng)慢慢從膚淺的炫酷轉(zhuǎn)型為附有內(nèi)涵的用戶體驗(yàn)關(guān)鍵要素了。

作為產(chǎn)品細(xì)節(jié)體驗(yàn)的重要承載，微交互的價(jià)值與地位逐漸提升，在用戶使用產(chǎn)品過程中，它不僅僅能促進(jìn)產(chǎn)品與用戶的互動(dòng)性，而且還能激發(fā)用戶對(duì)產(chǎn)品的積極感覺，并且最終影響用戶的整體行為。

二、什么是微交互

微交互的基本概念就是指：關(guān)注一項(xiàng)主要任務(wù)、一個(gè)目的得事件過程。

通常情況下，微交互需要關(guān)注得是這個(gè)事件的整體交互過程，并且它存在的目的也是為了讓用戶在使用產(chǎn)品時(shí)能感覺到順暢性、一致性，并產(chǎn)生心理的愉悅感，從而讓用戶喜歡產(chǎn)品，愛上產(chǎn)品，從而留住用戶。

如果籠統(tǒng)概括的話，可以說微交互幾乎會(huì)遍布任何設(shè)備、任何應(yīng)用程序中，并且他們存在的價(jià)值就是讓用戶高興；就單純從產(chǎn)品說起，如果說在產(chǎn)品設(shè)計(jì)中，在大多數(shù)用戶與產(chǎn)品接觸時(shí)都能發(fā)現(xiàn)微交互的存在與應(yīng)用。

1. 舉例

你在Web看一段話時(shí)結(jié)尾展示是“…”時(shí)，那么通過你的心智程序，你就會(huì)下意識(shí)的將光標(biāo)停留在這段話上；在這樣的情況下，微交互就會(huì)出現(xiàn)了，則在這段話的周圍就會(huì)出現(xiàn)這句話完整的展示從而被你瀏覽。

還有一種常見的就是在你輸入錯(cuò)誤的信息時(shí)系統(tǒng)會(huì)自動(dòng)識(shí)別，并在末尾彈出消息提示，提示你需要從新輸入，更有優(yōu)秀的系統(tǒng)會(huì)從你開始輸入時(shí)就跟進(jìn)你的輸入狀態(tài)，時(shí)刻提醒你輸入的結(jié)果是否正確。

其實(shí)這些小的視覺暗示和微妙的指示就是所謂的為微交互，也有人稱之為“圍觀互動(dòng)”；雖然這些微交互平日不太容易能被用戶所直觀的發(fā)現(xiàn)，但也就是這些微小的交互，才能提升一個(gè)產(chǎn)品的整體用戶體驗(yàn)。

所以說，無論他們是多么的微妙，你都需要重視起來，并嘗試著將一般的設(shè)計(jì)方案和這些結(jié)合起來使用，并提供一些有效的信息，這樣才能讓你的用戶在瀏覽產(chǎn)品界面和執(zhí)行操作時(shí)有基本的保障。

知道了什么是微交互后，你還需要吃透微交互它到底是怎么工作的，只有這樣才能確保你靈活的使用微交互。

三、微交互是如何工作的

微交互的工作一般要分為四個(gè)基本要素：觸發(fā)、規(guī)則、反饋、循環(huán)。

1. 觸發(fā)

觸發(fā)簡(jiǎn)單講就是“啟動(dòng)微交互”，例如：點(diǎn)擊按鈕或點(diǎn)擊鼠標(biāo)。

這里需要注意的是，觸發(fā)并不單純是人為操作的開始，它也同樣包含系統(tǒng)自動(dòng)啟動(dòng)的操作；比如說在你設(shè)備上收到一份郵件或短信時(shí)，這時(shí)的你其實(shí)并沒有任何操作，但系統(tǒng)就會(huì)有一個(gè)微交互啟動(dòng)為你提示，這時(shí)的微交互就是被動(dòng)的。

這些所謂的啟動(dòng)微交互，需要注意的是必須與一組已經(jīng)擬定好的操作規(guī)則一起工作，這些規(guī)則里包含了什么能做，什么不能做的內(nèi)容。

2. 規(guī)則

微交互的規(guī)則就是表明用戶在操作后產(chǎn)品該如何按照用戶正確的心智程序進(jìn)行微交互，它決定了觸發(fā)之后會(huì)發(fā)生什么事情；因此，當(dāng)你在拉下界面時(shí)，產(chǎn)品的規(guī)則就應(yīng)該包含下滑的規(guī)則，這同時(shí)也能表明用戶當(dāng)時(shí)的心理是希望看到界面以上的結(jié)果或者下拉刷新看到更多新的結(jié)果。

同樣，規(guī)則就是規(guī)則，在你沒有進(jìn)行操作時(shí)，規(guī)則時(shí)而也在生效，例如：微信里對(duì)方并未添加你為好友，但依然和你說了句話，規(guī)則就是生效的，這里的規(guī)則就是阻止了信息的傳入。

3. 反饋

顧名思義反饋在現(xiàn)實(shí)中就是你與人對(duì)話交流，對(duì)方饋贈(zèng)你的信息，在產(chǎn)品中這個(gè)環(huán)節(jié)也同樣必不可少；它的存在可以讓用戶明確知道在用戶操作后產(chǎn)品發(fā)生了什么，出現(xiàn)什么結(jié)果的回饋信息。

在微交互中，用戶看到的、聽到的、操作的、甚至包含感覺到的，都是可以反饋的。

例如：

• 看到的：希望打車，看到的反饋就是地圖和輸入起始地/目的地的界面，這就符合了用戶心理；
• 聽到的：在與人聊天時(shí)，其他人也和你說了句話，就聽到手機(jī)“蜂”一聲，這樣的反饋就是提醒用戶聽到有新消息；
• 操作的：在任何產(chǎn)品中都需要用戶操作，那么然后反饋用戶操作結(jié)果；
• 感覺到的：這包含界面樣式、產(chǎn)品交互是否符合用戶心理預(yù)期，并通過預(yù)期實(shí)現(xiàn)操作后得到想要結(jié)果，這里面就包含感覺到的反饋；

4. 循環(huán)

循環(huán)在微交互里屬于次數(shù)的說明，在我們手機(jī)設(shè)置鬧鈴時(shí)就經(jīng)?？吹接刑嵝岩淮?、一周提醒等說明，這就是循環(huán)的微交互，循環(huán)的微交互基本上定義了交互的某種性質(zhì)，它會(huì)告訴你隨著時(shí)間的推移發(fā)生了幾次，發(fā)生了多少。

例如：在你去銀行自動(dòng)取款機(jī)取錢時(shí)輸入的密碼，如果輸入錯(cuò)誤，就會(huì)提示你還有幾次輸入，這樣的就是循環(huán)的過程，等于是在原地打轉(zhuǎn)，但當(dāng)你成功進(jìn)入后就會(huì)從這個(gè)環(huán)節(jié)進(jìn)入到下一個(gè)環(huán)節(jié)繼續(xù)循環(huán)。

說了這么多，我想你應(yīng)該知道了微交互的工作方式以及流程，那么接下來要說的就是微交互需要在何時(shí)、何地以及如何才能正確使用了。

四、何時(shí)、何地以及如何使用微交互

1. 界面滑動(dòng)

現(xiàn)如今產(chǎn)品幾乎都帶有滑動(dòng)的交互，之所以滑動(dòng)越來越多，是因?yàn)榛瑒?dòng)交互可以清楚的展示給用戶行為操作路徑，而點(diǎn)擊確實(shí)短期記憶性的，當(dāng)用戶想要開始滑動(dòng)時(shí)，這是用戶操作前的準(zhǔn)備；而當(dāng)用戶正在滑動(dòng)時(shí)，這是操作中的節(jié)點(diǎn)，這時(shí)滑動(dòng)的界面就會(huì)隨著手勢(shì)的方向進(jìn)行移動(dòng)并告訴用戶界面即將去往哪里，下次想要找到該從哪里找的路徑；在操作結(jié)束后，微交互完成，這時(shí)操作后的結(jié)果。

這一整套流程下來，通過短小的微交互，就能很清晰的告知用戶他在做什么以及他做了什么。

2. 下拉/側(cè)拉菜單

下拉/側(cè)拉菜單就像產(chǎn)品某個(gè)界面內(nèi)的一個(gè)抽屜，它里面包含了當(dāng)前界面賦予的更多選擇，并且還能占據(jù)極小的空間；根據(jù)用戶的心智程序來講，竟然是抽屜就應(yīng)該拉取，這才符合環(huán)境映射的條件。

當(dāng)前在產(chǎn)品設(shè)計(jì)內(nèi)，幾何都包含了下拉/側(cè)拉菜單的微交互，例如淘寶的側(cè)拉菜單、美團(tuán)的下拉菜單都是微交互的展示；在輕松點(diǎn)擊后，界面tab則下拉或側(cè)拉出一個(gè)抽屜，里面就包含了N多個(gè)附加選擇或者篩選器。

3. 引導(dǎo)頁

對(duì)于產(chǎn)品的不斷迭代與改版，其界面一定會(huì)發(fā)生一些細(xì)微的變化，更有時(shí)功能會(huì)作為轉(zhuǎn)移，那么為了能更好的引導(dǎo)用戶的操作路徑，就需要用到一些引導(dǎo)頁；我這里說的引導(dǎo)頁并不是啟動(dòng)頁后的大篇章引導(dǎo)，而是在半黑透明遮罩的同時(shí)，流出需要用戶操作的功能引導(dǎo)，在聚焦了操作功能上，賦予一些微交互，會(huì)加大用戶對(duì)產(chǎn)品的認(rèn)可，包括喜歡新產(chǎn)品。

4. 操作反饋

在用戶正在輸入一個(gè)列表菜單時(shí)，最需要的微交互就是即使反饋；作為產(chǎn)品首先應(yīng)該賦予用戶的就是安全與人性，安全是指產(chǎn)品在用戶心理的懷疑指數(shù)多少，指數(shù)越低安全度越高，而人性就需要操作的了路徑與展示是符合用戶的心理預(yù)期的。

安全與人性都可以通過微交互來實(shí)現(xiàn)，例如在建設(shè)銀行APP登陸前會(huì)出現(xiàn)安全掃描，在支付寶輸入了支付密碼后出現(xiàn)的結(jié)果符合了人性思維。

5. 卡片旋轉(zhuǎn)/淡化

有些app會(huì)出現(xiàn)卡片類樣式的界面，并通過用戶的操作實(shí)現(xiàn)卡片淡化和卡片丟棄等微交互，這樣的微交互則更加具象了用戶的真實(shí)空間感受；通過與真實(shí)環(huán)境的結(jié)合，將用戶帶入產(chǎn)品，使用戶在使用產(chǎn)品時(shí)會(huì)有現(xiàn)實(shí)版的感覺；例如：陌陌的附近人卡片丟棄，網(wǎng)易音樂的音樂專輯封面淡化。

五、總結(jié)

微交互在產(chǎn)品內(nèi)可以說是無處不在，雖然這些都是一些很小的細(xì)節(jié)，如果只是靜態(tài)展示可能并沒有太大作用；但通過產(chǎn)品與用戶的這種互動(dòng)，變相交流，微交互在產(chǎn)品的整體體驗(yàn)上就可以增加巨大的價(jià)值，這也可能是所謂的“宜家效應(yīng)”吧；用戶在自己親手制作或行動(dòng)時(shí)，才能賦予產(chǎn)品更大的價(jià)值感。

好的產(chǎn)品必須擁有這種精心設(shè)計(jì)的標(biāo)志，它不僅包含了對(duì)用戶的心智理解，更多的，是對(duì)用戶的一種尊重與情感抒發(fā)。

作者：西瓜，公眾號(hào)：西瓜的設(shè)計(jì)

本文由 @西瓜的設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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