我們可以看到，大多數(shù)成功的交互設計都是以一種簡便、直接了當?shù)姆绞絹韰f(xié)助用戶完成產(chǎn)品體驗。微交互就是這樣，通過一些微小的交互操作就能實現(xiàn)功能，好的微交互設計將會給用戶帶來良好的產(chǎn)品體驗。

很多人把微交互簡單的理解為做個動效，實質(zhì)上，我們通常見到的那些動效只是微交互構成中的一部分，屬于反饋層面的視覺表達。

微交互既不是一個酷炫動效也不是一個龐大產(chǎn)品功能，他是產(chǎn)品功能中通過一些微小的交互操作實現(xiàn)功能的細節(jié)，這些細節(jié)帶給用戶的是方便和便捷，能更好的提升用戶體驗。

總的來說，微交互給用戶帶來好的用戶體驗主要是這幾方面：

• 在用戶操作時清晰表達當前狀態(tài)。
• 給用戶提供愉悅輕松的反饋。
• 用戶毫無察覺的情況下進行了交互動作完成了功能操作，實現(xiàn)了用戶目標。
• 操作結束后看到自己的操作結果。

接下來，介紹構成一個完整的微交互4個部分，以及如何在微交互4個構成里，設計好的用戶體驗方案。

一、微交互的4個構成部分

觸發(fā)器、規(guī)則、反饋、循環(huán)與模式這四個部分是設計和分解微交互的一種方式。

觸發(fā)器啟動微交互、規(guī)則規(guī)定微交互的工作過程、反饋向用戶說明規(guī)則、循環(huán)與模式是影響微交互的元規(guī)則。

1. 什么是觸發(fā)器

觸發(fā)器是啟動微交互的物理控件，當觸發(fā)控件后可以啟動下一步交互操作。

我們常見的觸發(fā)器是由用戶主動去觸發(fā)的物理控件，比如：控件、按鈕、任務欄、圖標等。

要讓人知道功能如何操作，微交互的觸發(fā)器就要設計得吸引人、讓人明白這個操作功能。在設計中也要理解用戶要干什么，讓觸發(fā)器的位置跟用戶需求相吻合。

除了用戶主動觸發(fā)的物理控件外，還有一些是系統(tǒng)觸發(fā)的，無需用戶接入，只需要滿足條件就會自動觸發(fā)。比如系統(tǒng)錯誤、收到數(shù)據(jù)觸等。

2. 什么是微交互規(guī)則

每款游戲背后就是一套游戲玩法，同樣每個微交互也是一組被設計的規(guī)則。

微交互中的規(guī)則是：在任務過程中規(guī)定“用戶什么可以做？”“什么可以不做？”“按照什么順序做？”

這個規(guī)則反映的是：業(yè)務邏輯、用戶使用邏輯。

舉個電商購物例子：把一件商品加入購物車的微交互，最初規(guī)則就是單擊“購物車”圖標，商品就被添加到“購物車”中，購物車tabbar圖標也相應出現(xiàn)數(shù)字。但在設計規(guī)則中，要考慮用戶是否購買過，如果購買過商品旁邊購物車圖標改為了“數(shù)字加減”，當再次加入則業(yè)務邏輯限制出現(xiàn)提示。

3. 什么是微交互反饋

以最簡單的按鈕常見兩種反饋為例：

1. 按鈕狀態(tài)變化—表明用戶干了什么（按了按鈕）
2. 按了后發(fā)生什么（跳轉(zhuǎn)下一頁或者結果發(fā)生等等）

反饋的目的是：幫助用戶理解微交互的操作，通過一些反饋的狀態(tài)告訴用戶“剛才做了什么？”，“到了什么階段？”，“可以干什么？”
，“結束時，什么不能干”。

反饋的方式也取決于微交互的規(guī)則設計、硬件設備、數(shù)據(jù)接收等。

例如，下載文件：下載過程中有進度條的顯示，顯示文件多大，當前下載速度（數(shù)據(jù)顯示），剩余多久時間完成。

4. 什么是循環(huán)與模式

以iphone鬧鐘為例：用戶目標是指定時間鬧鈴，鬧鈴什么時候會響，提示用戶設置鬧鈴是模式。循環(huán)就是多久再響一次，長循環(huán)就是用戶重復設置鬧鈴的提示。

模式是規(guī)則的一個分支，最主要目的就是執(zhí)行一種不常見的動作。

常見的模式就是：設置，用戶可以在其中指定一些有關微交互的選項。

循環(huán)的核心就是：確定微交互的持續(xù)時間，也是擴展微交互的生命周期，循環(huán)的參數(shù)是用戶體驗的最佳方式，循環(huán)由規(guī)則指明。

二、如何設計微交互創(chuàng)建出色用戶體驗方案

1. 設計微交互之前的思考

明確用戶操作微交互的目標：

設計一個優(yōu)秀的微交互體驗方案，首先要了解用戶，知道用戶要達到什么目的，經(jīng)歷哪些步驟，不同情況下的操作環(huán)境。

比如：用戶要給朋友轉(zhuǎn)賬，這是用戶的目標。轉(zhuǎn)賬數(shù)額是否充足、朋友賬號的顯示是否正確、轉(zhuǎn)賬成功與否屬于操作中的微交互的步驟與不同情況。

設計清晰的規(guī)則—微交互邏輯圖：

在了解完用戶的目標后，接下來就要分析：用戶經(jīng)過多少步驟從初始達到目標？會有多少種情況？

還是以微交互主要構成部分拆分：

1. 觸發(fā)器如何被觸發(fā)？
2. 操作期間用戶可以進行什么行為？
3. 交互發(fā)生的順序和時間？
4. 使用數(shù)據(jù)及來源？
5. 簡潔的配置及參數(shù)？
6. 什么反饋？
7. 處于什么模式？
8. 是否重復，多久重復？
9. 微交互結束發(fā)生什么？

約束條件：設計微交互規(guī)則中考慮業(yè)務、環(huán)境、技術的約束——例如：電商中秒殺、滿減業(yè)務的邏輯，會導致微交互的狀態(tài)不一樣。

設計規(guī)則：規(guī)則隨著條件的的增加，操作越復雜，運用邏輯關系圖會更清晰。

——舉個例子：

設想一個音頻播放器的例子，我們需要一個清晰可完成的目標——成功播放音頻內(nèi)容。

在構思中，做一個規(guī)則判斷：用戶來到頁面是否要繼續(xù)上次的音頻？

然后，針對規(guī)則做出方案，最后的目標是：用戶成功播放音頻內(nèi)容。

在下圖中的細化設計，隨著規(guī)則增加，邏輯圖越復雜，但最終設計規(guī)則會讓用戶越來越接近最終的目標。

2. 微交互其他構成部分的設計

觸發(fā)器的設計：

觸發(fā)器的設計需要引人注目、放在明顯的位置、以較少的信息傳達觸發(fā)器是干什么的，同時有清晰狀態(tài)展示。

• 用戶心智：符合大多數(shù)用戶的操作習慣，降低用戶的理解成本，比如：一個購物車圖標，一個標簽能讓用戶直接明白意圖。
• 展示數(shù)據(jù)：在激活觸發(fā)器前，思考什么信息展示對用戶最有價值，比如：未讀信息的數(shù)字展示、進展數(shù)據(jù)等。

反饋的設計：

A. 制造情感化的個性氛圍：在一些app中會賦予擬人化語氣，比如“又忘記密碼啦，真衰”；根據(jù)產(chǎn)品特性建立一套有性格特征的反饋個性——冷酷、蘿莉可愛、溫柔等

B. 利用視覺、聽覺、觸覺或者它們的組合提升吸引力。

視覺方法：利用趣味動畫來吸引注意，有利于激發(fā)用戶交互的興趣。

增加手勢、聲音、觸覺方法：強化用戶動作，比如按壓、聲音、觸摸、震動等。

知乎APP“贊”功能點擊后手機震動

C. 操作中反饋提升用戶掌控感：讓用戶看到自己的操作結果、用戶預防錯誤、讓用戶看到交互進程，以及，減少反饋信息復雜度。

讓用戶看到自己的操作結果：給予用戶的信息輸入進行視覺化呈現(xiàn)，并提供反饋。

用戶預防錯誤：例如錯誤情況、限制數(shù)量等，幫助用戶將操作錯誤率降到最低。

讓用戶看到交互進程：用戶使用產(chǎn)品時，能看到進程，及時獲得信息。

Less is more，減少反饋信息復雜度，直接傳達操作：減少動畫形式過度、信息的復雜度、重復性。

設計規(guī)則解決復雜性——化繁為簡：

微交互的目標正是幫助用戶從繁瑣的任務流中解脫出來，減少額外步驟，用最少步驟完成用戶目標。

• 解決最核心的復雜性：找到復雜性出現(xiàn)在什么地方，用戶在什么地方最容易出錯，用戶可以控制哪些內(nèi)容，用戶在什么時候可以去修改這些內(nèi)容。
• 快速計算、數(shù)據(jù)記憶等幫用戶節(jié)省操作：比如：登錄中最容易出錯的地方是密碼忘記，用戶掌握著密碼的輸入權限修改權限，利用記錄密碼則是簡化登錄密碼的操作。
• 較少的選項和默認項：給用戶選擇越多，規(guī)則就越多，規(guī)則少微交互就越容易理解，因此給用戶少的選擇，幫用戶提供一些默認項是一個化繁為簡的辦法。

模式、循環(huán)的算法設計：

• 順序：各個步驟的先后順序，哪個在前，哪個在后，有沒有條件。
• 決定：通常都是“如果……就……”的形式。
• 重復：循環(huán)步驟，例如：搜索字段輸入時，每輸入一個新字段就更新一次結果。
• 變量：變量是容器，是算法的巨大威力來源。搜索結果、經(jīng)過步驟都是變量，變量可以是數(shù)值字符或邏輯值。

小結：細節(jié)成就卓越

總的來說，微交互雖然在操作過程中感知很微小，但在用戶體驗過程中，微交互卻是不可缺少的重要環(huán)節(jié)，這也是我經(jīng)常提到的細節(jié)成就卓越。

微交互中最終還是為了幫助用戶輔助實現(xiàn)某些功能，以產(chǎn)品任務為單位，進行的多個交互的組合，會涉及不同使用場景、規(guī)則、模式、數(shù)據(jù)算法等，最終只為讓用戶在毫無知覺的情況下完成交互操作，實現(xiàn)功能操作，完成用戶目標。

寫在最后：不可被忽略的技術發(fā)展與更新

我們發(fā)現(xiàn)：現(xiàn)在習以為常的交互方式，都曾經(jīng)歷過一次次的迭代更新。隨著新技術的快速發(fā)展，不斷推進微交互的創(chuàng)新，帶來的是更簡單便捷的操作，比如：手機鎖屏解鎖操作：隨著手機觸屏技術、指紋、人臉識別先進科技，解鎖屏幕越來越快捷，甚至沒有感覺就通過人臉識別解開了。

隨著觸摸屏、傳感器、語音和手勢技術不斷成熟，這些新技術與新的交互手段進一步促進微交互的發(fā)展。

如今，隨著5G網(wǎng)絡的到來，將會推動更多的創(chuàng)新微交互，而這些微交互創(chuàng)新體驗涉及的控制、規(guī)則、模式、算法等遠比開關燈抽象得多。

參考文獻：

《微交互：細節(jié)成就卓越》 作者：Dan Saffer

#專欄作家#

Hellen，微信公眾號：詠舍，人人都是產(chǎn)品經(jīng)理專欄作家。八年設計經(jīng)驗，藝術設計學碩士畢業(yè)，專注互聯(lián)網(wǎng)金融用戶體驗設計、及自我管理與提升。

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

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