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

?一、微交互是什么？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、微交互的適用場景

微交互適用以下場景：

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

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

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

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

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

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

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

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

1. 觸發(fā)器

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

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

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

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

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

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

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

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

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

控件：

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

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

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

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

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

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

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