2016年設計師必須掌握的微交互知識

 　　如何打造一款看起來非常驚艷的應用，我想大家應該有所了解，借助有趣的故事、流暢的流程和令人難忘的視覺設計就好。但是僅有這些並不夠，你需要拿出一些真正能打動用戶心靈，產生情感聯系的東西，讓他們感受到應用真正鮮活的一面。

　　這個時候，就需要微交互登場了。

　　那些真正讓人沉迷的優秀應用很大程度上是因為微交互的存在。微交互出現的瞬間，用戶會感受到更強烈的互動和參與感，這些微小而自然的變化會創造出不同凡響的愉悅感，不過通常這些微小的互動並不是那麼顯眼。當然，對於設計師而言並非如此。

　　如果你用心觀察，每天會遭遇數百次微交互。

　　早上關閉鬧鐘時的動效，看到新短信在界面上閃現，在播放器中切換歌曲的時候，結束游戲回合的時候的提示信息，甚至是用手機導航的時候交通信息的提示，這些時刻都會有微交互出現。也許你不會知道到底是誰創造出這些，但是確實是這些愉悅的瞬間堆積起來讓你忍不住打開這些有趣的應用。

　　什麼是微交互

　　那麼什麼是微交互呢?我們可以這麼界定：微交互是同數碼設備進行的基於任務的單個交互。值得注意的是，絕大多數的的這類交互都是微小而不引人注意的，但是它會為你提供平滑、自然的感覺。

　　正如Dan Saffer在他的那本《微交互》中所說的，微交互微的出現填補了下面的三種功用：

　　·快速溝通時的狀態呈現和反饋

　　·將某個動作所產生的結果視覺化地呈現出來

　　·幫助用戶操作屏幕上的某些元素

　　Slack 的界面中，微交互的三個職能都有所體現。Slack 允許用戶在一個閉環中聊天溝通，共享文件、互相標記。這個過程中程序會實時更新(比如郵件會在閱讀之後被標記為已讀)。應用中還不斷有各種系統提醒，和用戶保持信息的同步。

　　微交互對用戶和應用的影響會體現在不同的方面：

　　·標識打開或者關閉

　　·在各種媒體中進行評論

　　·布局或者流程的改變

　　·查看信息或者通知

　　·下拉更新

　　·和數據相關的元素進行交互，諸如查看天氣

　　·完成獨立的任務

　　·連接設備，諸如多人游戲連接，使用電腦連接打印機

　　·在網站上分享或者點贊

　　簡單地說，微交互是用戶的操作觸發設備而產生的動作。但是這些動作並非簡單的因果關系，它們的相互作用是以人為中心設計的，而設備和數字界面的反饋是參考自然和人的行為來做的。而這也是微交互所蘊含的秘密：以更“人性化”的方式，呈現出用戶預期中的操作。

　　上面的案例來自於UXPin，我們制作了一個網頁原型來探索時尚模特。每個卡片代表一個模特，當鼠標移動到卡片上的時候會顯示每個模特的信息和名片下載按鈕。懸停動作觸發微交互，讓信息顯示出來，加入的動效使得整個界面的變化如同有人操作一樣。

　　微交互到底做了什麼

　　正如同你在上一個案例中所看到的，微交互並非承擔著單一的作用，它通常會擔任多個角色。有時候你無法准確表述，但是它確實始終在增加著交互的參與感。

　　當你考慮如何設計一個微交互的時候，不要將它視作為一個單獨的動作或者任務，你要思考的的是當你要達到什麼樣的用戶體驗，如果要實現它需要界面怎樣變化。

　　從本質上來說，微交互應該讓用戶有如下體驗或者引導出如下操作：

　　·觸摸屏幕

　　·愉悅，微笑

　　·學會或者理解什麼

　　·感受到情感聯系

　　上面名為Elevate 的應用在界面中采用了游戲式的交互組件，用戶必須通過觸摸屏幕回答問題或者修改答案通過這個環節，而在此過程中，漂亮的動效會讓他們會心一笑。另外，用戶可以借助這個應用訓練他們的大腦，並且可以彼此分享得分。

　　聽起來這個應用很想是一個簡單的游戲，對吧?但是這種體驗幾乎是用戶對於每個應用的期望。也正是這些不起眼的微交互設計，支撐起了2015年到2016年間最優秀的應用的體驗。正是這些微小的“數字化的時刻”讓用戶感受到了情感的聯系，它也讓用戶感受到另一個人或者對象的感受和體溫。

　　微交互的四大元素

　　位於微交互領域前沿的就是我們前文所說的Dan Saffer。

　　如果你谷歌“微交互”，你搜到的幾乎都是他所提供的權威信息和話題，以及他的那本《微交互》。Saffer 認為微交互在結構上是由四個部分構成的，而這個定義也更加便於你來理解或者創造微交互。

　　·觸發：觸發啟動微交互。比如點擊心型圖標表示喜歡

　　·規則：交互的行為規則。用戶無法“看到”規則，但是可以通過反饋(下一個環節)來理解規則。在這個案例中，點擊心型圖標之後，系統會將這一偏好添加到用戶的訂閱列表中，並且為之提供相關的推薦。

　　·反饋：為用戶設計微交互發生的時候返回的信息的溝通機制。在這個案例中，用戶點擊了心型之後，圖標會被填充上紅色，像真實的心髒一樣跳動起來，並且向用戶提示“已添加到閱讀列表!”告知用戶這個動作的含義。

　　·循環與模式：設定微交互的時長以及周期，並且設計它是否重復、隨著時間演變的過程。這個案例中，點擊一秒內告知用戶信息被添加到閱讀列表，甚至在6個月之內都可以提示用戶最初喜歡的頁面是哪個。

　　這幾個環節共同構造出一個交互的周期和循環。按照Saffer 所說，絕大多數的用戶從來都沒注意到微交互的存在，直到這些微交互的循環或者機制被打破，才意識到它們的存在。

　　你是否思考過反饋機制?

　　反饋是整個微交互機制中最重要的部分。反饋不僅是微交互中用戶和界面產生聯系的環節，也是反映出微交互運作機制的環節。

　　想想看，早上7點，手機鬧鐘響起來，然後你會怎麼做?繼續打盹還是起來關閉?這個簡單的動作會造成兩種情況，關閉鬧鐘，或者等待9分鐘之後，鈴聲再次響起。這樣一來，用戶和系統之間的反饋回路就形成了。

　　如果沒有用戶的初始反饋，那麼鈴聲就不會停止，也不會重置，如果默認的設置沒有次數限制的話，它會一遍又一遍一直響下去。

　　其實代辦事項列表也遵循著類似的循環，最典型的就是上方的Wunderlist。當你點擊左側的復選框的時候，觸發微交互，有趣的動效出現，劃掉對應的選項。這個瞬間，你會知道哪些事情已經搞定，哪些還有待完成。搞定了的任務逐步積累，會鼓勵你繼續完成更多的任務，催生進一步的交互。

　　雖然這個案例很簡單，但是你可以從中學到很多。它展示給我們用戶是如何在微交互的推動下產生參與感，並渴望進行下一步的。

　　細節設計是微交互的靈魂

　　處理好微交互的細節是能否成就一個項目的關鍵。交互是設計中無法忽視的重要組成部分。

　　那麼你應該如何設計細節呢?你需要考慮的問題有哪些?

　　·微交互必須在重復使用中存在。純粹為了漂亮或者噱頭的動效是取巧，不是微交互。你的微交互應當長期存在，細節設計應當貼心而不讓人煩惱。

　　·簡單直白是關鍵。直白的語言，清晰的字體，鮮艷的色彩，結構化的設計，優秀的執行力，這些都比過度裝飾要強得多。

　　·微交互要人性化。文案應當設計得如同人在說話，在任何場合都應該保持充滿情感的溝通形式。

　　·注意文案。文案和每個時刻、每個場合都要貼合，保持尊重，保證對的基調，和輕松的氛圍。

　　·有趣的動畫，但是要適度。想想經典的Mac OSX Dock上跳動的圖標。動效不能對程序的響應造成負擔，然後你再考慮它的有趣、好玩和情懷。

　　·保持協調。對比度是你的朋友，但是要小心使用。在觸發微動效的瞬間，配色的重要性遠大於你的想象。確保每個時刻色彩的協調和一致。

　　·思考微交互的演進。微交互第一次出現和第一千次是完全一樣麼?它隨著時間推移如何改變?它觸發的流程變化的時候會有什麼區別?仔細想想這些細節吧。

　　·不要過度沉迷。過度設計是許多產品失敗的原因之一，平滑合理的設計才能造就對的產品。