在用戶(hù)無(wú)意識(shí)的使用過(guò)程中，微交互得以達(dá)成用戶(hù)的心理預(yù)期，建立用戶(hù)的心智模型。

?一、微交互是什么？

二、交互設(shè)計(jì)和微交互的區(qū)別

交互設(shè)計(jì)（Interaction Densign，縮寫(xiě)為IXD）：是定義、設(shè)計(jì)人造系統(tǒng)行為的設(shè)計(jì)領(lǐng)域，它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達(dá)到某種目的，關(guān)注以人為本的用戶(hù)需求?！獊?lái)源：百度百科

簡(jiǎn)單來(lái)說(shuō)交互設(shè)計(jì)就是人與人、機(jī)器、系統(tǒng)和環(huán)境等交互行為的外在表現(xiàn)設(shè)計(jì)。交互設(shè)計(jì)師通過(guò)揣摩用戶(hù)心理和行為特征，設(shè)計(jì)出完整可用、易用、符合用戶(hù)認(rèn)知模型的用戶(hù)操作流程和使用界面，使用戶(hù)順利流暢地使用產(chǎn)品達(dá)到目的。

交互設(shè)計(jì)效果圖

微交互通常只針對(duì)單個(gè)任務(wù)的操作進(jìn)行設(shè)計(jì)，從小細(xì)節(jié)上提升用戶(hù)的體驗(yàn)，是產(chǎn)品的功能性細(xì)節(jié)。一般都簡(jiǎn)單明了，認(rèn)知上毫無(wú)壓力，目的是讓用戶(hù)情感上感到驚喜、愉悅、操作起來(lái)更加流暢，更人性化。

有的微交互可能因?yàn)轶w積小巧，操作簡(jiǎn)單，可以適用不同平臺(tái)（iOS、android、web）的展示，相比大型的功能，它能夠保持某種一致性，比如點(diǎn)贊。

點(diǎn)贊微交互效果

不管是交互還是微交互，它都不是功能，而是必須依附于某個(gè)功能或者場(chǎng)景下存在的，清晰地表達(dá)用戶(hù)的當(dāng)前狀態(tài)，遇到問(wèn)題、操作時(shí)或者操作后都能夠及時(shí)給出輕松愉悅及時(shí)的反饋，在用戶(hù)毫無(wú)察覺(jué)的情況下進(jìn)行交互行為完成功能的操作，達(dá)到用戶(hù)目標(biāo)。

比如登錄頁(yè)面，我需要輸入手機(jī)號(hào)才能登錄，手機(jī)號(hào)有正確/錯(cuò)誤的驗(yàn)證，那這個(gè)必須輸入手機(jī)號(hào)是一個(gè)功能，判斷對(duì)錯(cuò)的展現(xiàn)方式可以是彈窗可以是手機(jī)號(hào)輸入框附近有文案提示，這個(gè)是交互。

比如音樂(lè)類(lèi)app，音樂(lè)播放器是一個(gè)功能，而調(diào)節(jié)音量的大小就是交互。如下圖網(wǎng)易云音樂(lè)和QQ音樂(lè)的音量調(diào)節(jié)的交互。

再比如Facebook，用戶(hù)發(fā)的推文，若非默認(rèn)語(yǔ)言，會(huì)有一個(gè)“翻譯推文”。

支付寶的綁卡功能，會(huì)有一個(gè)掃描銀行卡的選擇，微信的語(yǔ)音轉(zhuǎn)文字等等，這些都是屬于微交互。

交互和微交互就如同下面點(diǎn)的鏈接示意圖，很多大小不一的點(diǎn)連接成一個(gè)信息流程，點(diǎn)可以是這個(gè)流程中的某一個(gè)小點(diǎn)，也可以是一些小點(diǎn)鏈接成的大點(diǎn)，這個(gè)小點(diǎn)就是微交互，大點(diǎn)就是幾個(gè)微交互的總和或者是宏觀層面的全局交互。

生活中的微交互也有很多，比如：自動(dòng)感應(yīng)洗手的水龍頭，當(dāng)把手放到水龍頭下面，自動(dòng)感應(yīng)到手的存在，水就會(huì)出來(lái)，不用做任何其他操作。

三、微交互的適用場(chǎng)景

微交互適用以下場(chǎng)景：

1. 只完成一項(xiàng)任務(wù)
2. 只影響一個(gè)數(shù)據(jù)
3. 打開(kāi)或關(guān)閉某個(gè)功能
4. 連接不同設(shè)備
5. 只影響一個(gè)數(shù)據(jù)；比如漲幅價(jià)格、天氣溫度
6. 控制正在進(jìn)行的過(guò)程，如切換電視頻道
7. 調(diào)整某項(xiàng)設(shè)置

四、微交互的實(shí)現(xiàn)和組成

要實(shí)現(xiàn)微交互，就要先學(xué)會(huì)觀察，搞清楚什么情況，理清邏輯順序，看別人如何互動(dòng)。

比如狀態(tài)顯示、提示信息等，一般會(huì)在這些信息中暗示下一步操作，為什么不在這一步展示的信息中就包含下一步需要做什么的按鈕呢？為什么有的提示彈窗是從頁(yè)面下方出現(xiàn)，有的直接顯示在頁(yè)面中部，有的顯示在手觸碰的附近？

還要了解產(chǎn)品的目標(biāo)用戶(hù)，包括他們使用產(chǎn)品或者進(jìn)行這一步功能的目的，前后邏輯步驟的串聯(lián)順序，不同情境下交互的操作環(huán)境。極強(qiáng)的觀察能力、清晰的邏輯、對(duì)用戶(hù)的同理心、對(duì)產(chǎn)品的了解等都至關(guān)重要。

把微交互集成到產(chǎn)品中有三種方式，分別是逐個(gè)設(shè)計(jì)微交互、把復(fù)雜的應(yīng)用程序簡(jiǎn)化為基本的微交互、把每個(gè)功能當(dāng)作一組相互聯(lián)系的微交互。

一個(gè)好的微交互由四個(gè)部分組成：觸發(fā)器、規(guī)則、反饋、循環(huán)和模式。

觸發(fā)器啟動(dòng)微交互，規(guī)則規(guī)定微交互如何起到作用和工作的過(guò)程，反饋向用戶(hù)傳達(dá)規(guī)則信息，循環(huán)和模式構(gòu)成微交互的元規(guī)則。

1. 觸發(fā)器

觸發(fā)器是啟動(dòng)任何微交互的前提條件，它可以是物理/數(shù)字控件。

微交互的觸發(fā)可以是用戶(hù)觸發(fā)啟動(dòng)的，也可以是設(shè)備或應(yīng)用監(jiān)測(cè)到某些條件被滿(mǎn)足了，由系統(tǒng)自動(dòng)啟動(dòng)的。

比如提交表單，你點(diǎn)擊了“提交”的按鈕，才能夠把表單信息提交給系統(tǒng)，這是用戶(hù)主動(dòng)觸發(fā)的，是來(lái)源用戶(hù)自身的期待和需求。

如果你提交的表單中有些信息不符合要求或者系統(tǒng)出錯(cuò)（突然沒(méi)有網(wǎng)絡(luò)），系統(tǒng)就會(huì)給予提示錯(cuò)誤原因或者錯(cuò)誤提示（無(wú)網(wǎng)絡(luò)的缺省頁(yè)）等。這是滿(mǎn)足一些條件，系統(tǒng)自動(dòng)觸發(fā)的，往往是在無(wú)意識(shí)中自動(dòng)完成的。不可見(jiàn)的觸發(fā)器通常離不開(kāi)傳感器，比如向右滑，攝像頭、麥克風(fēng)、搖一搖等等。

為了使界面簡(jiǎn)潔但又不舍棄這個(gè)功能，會(huì)采用不可見(jiàn)的觸發(fā)器，或者在用戶(hù)執(zhí)行其他動(dòng)作時(shí)，偶然發(fā)現(xiàn)這個(gè)微交互。但它一定不是這個(gè)應(yīng)用的直接目標(biāo)而是結(jié)合上下文和技術(shù)的副產(chǎn)品，比如列表頂部的重新加載。

系統(tǒng)觸發(fā)的規(guī)則至關(guān)重要，這個(gè)和整體的規(guī)則緊密相連，后面的“規(guī)則”中詳細(xì)說(shuō)明。

2. 手動(dòng)觸發(fā)的情況下設(shè)計(jì)者要遵循七個(gè)規(guī)則：

1. 必須清楚用戶(hù)想要什么、什么時(shí)候做、在什么情境下發(fā)生，讓觸發(fā)器的位置跟用戶(hù)的理想需求相吻合非常重要。
2. 保證觸發(fā)器每次都觸發(fā)相同的動(dòng)作，這樣才能保證用戶(hù)對(duì)微交互形成準(zhǔn)確的心智模型。
3. 提前展示數(shù)據(jù)，比如區(qū)塊鏈類(lèi)型的app，每種幣的列表上可以直接顯示幣的漲幅，如果想了解具體詳情，再點(diǎn)擊列表進(jìn)入查看詳細(xì)數(shù)據(jù)。再比如正在下載的應(yīng)用，可以在觸發(fā)器上顯示下載進(jìn)度，不一定非要點(diǎn)進(jìn)去查看。
4. 控件和視覺(jué)使用情景要一致，比如看著像按鈕，就一定是可以點(diǎn)擊的。用戶(hù)看到控件就一定會(huì)有一個(gè)預(yù)期，或者在其他主流app上養(yǎng)成了類(lèi)似控件的使用心理模型，要符合這個(gè)心理預(yù)判，把用戶(hù)對(duì)于觸發(fā)器的識(shí)別成本降到最低。
5. 使用地越頻繁或越重要的觸發(fā)器一定要引人注目，效果要凸顯。比如有聲音的、動(dòng)態(tài)的要比靜態(tài)無(wú)聲的吸引注意力，形狀大的、有色彩的肯定要比小的、常規(guī)色的更突出。
6. 僅在觸發(fā)器本身無(wú)法提供相應(yīng)信息的情況下使用標(biāo)簽，比如電商app首頁(yè)的金剛區(qū)按鈕，采用圖標(biāo)+文字的表現(xiàn)方式。

手動(dòng)觸發(fā)器包含三個(gè)部分：控件、控件狀態(tài)、文本/圖形標(biāo)簽。

控件：

例如視頻快進(jìn)，可以是向右滑動(dòng)的一個(gè)手勢(shì)動(dòng)作就足夠。對(duì)于有兩個(gè)狀態(tài)的，比如開(kāi)關(guān)，可以是按鈕，但前提按鈕的狀態(tài)必須清楚明了。對(duì)于多種狀態(tài)的動(dòng)作，比如手機(jī)的打字鍵盤(pán)，每個(gè)按鈕代表一個(gè)選項(xiàng)，還有收起推出的按鈕選項(xiàng)。對(duì)于一定范圍內(nèi)的連續(xù)進(jìn)行的動(dòng)作，例如音量的調(diào)整，可以使用滑動(dòng)條，也可以使用兩個(gè)按鈕來(lái)改變數(shù)值大小的方式，或者固定的手勢(shì)方向滑動(dòng)來(lái)調(diào)整。

有些觸發(fā)器有多個(gè)控件或者表單字段（復(fù)選框、文本輸入字段）之類(lèi)的元素組成，比如app登錄的手機(jī)號(hào)碼的填寫(xiě)，如果可以自動(dòng)填充就會(huì)方便很多。

控件的狀態(tài)也至關(guān)重要，默認(rèn)狀態(tài)、活動(dòng)狀態(tài)、懸停狀態(tài)、反轉(zhuǎn)狀態(tài)、鼠標(biāo)點(diǎn)擊/觸碰/進(jìn)行中的狀態(tài)、切換狀態(tài)等等，一般從視覺(jué)設(shè)計(jì)方面改變。

標(biāo)簽表達(dá)的意思一定要清晰明確，并且使用規(guī)范也要統(tǒng)一。不能類(lèi)似情況下，使用不同文本，比如警告/警示。

這篇文章就先寫(xiě)到這里，關(guān)于規(guī)則、反饋、循環(huán)和模式以及什么是內(nèi)容為王的輕量化設(shè)計(jì)，下篇文章在做詳細(xì)介紹。

本文由 @白白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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