2015-11-3 用心設(shè)計
藍藍設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
來源：莫貝網(wǎng)
這個時候，就需要微交互登場了。
那些真正讓人沉迷的優(yōu)秀應(yīng)用很大程度上是因為微交互的存在。微交互出現(xiàn)的瞬間，用戶會感受到更強烈的互動和參與感，這些微小而自然的變化會創(chuàng)造出不同凡響的愉悅感，不過通常這些微小的互動并不是那么顯眼。當(dāng)然，對于設(shè)計師而言并非如此。
如果你用心觀察，每天會遭遇數(shù)百次微交互。
早上關(guān)閉鬧鐘時的動效，看到新短信在界面上閃現(xiàn)，在播放器中切換歌曲的時候，結(jié)束游戲回合的時候的提示信息，甚至是用手機導(dǎo)航的時候交通信息的提 示，這些時刻都會有微交互出現(xiàn)。也許你不會知道到底是誰創(chuàng)造出這些，但是確實是這些愉悅的瞬間堆積起來讓你忍不住打開這些有趣的應(yīng)用。
那么什么是微交互呢？我們可以這么界定：微交互是同數(shù)碼設(shè)備進行的基于任務(wù)的單個交互。值得注意的是，絕大多數(shù)的的這類交互都是微小而不引人注意的，但是它會為你提供平滑、自然的感覺。
正如Dan Saffer在他的那本《微交互》中所說的，微交互微的出現(xiàn)填補了下面的三種功用：
·快速溝通時的狀態(tài)呈現(xiàn)和反饋
·將某個動作所產(chǎn)生的結(jié)果視覺化地呈現(xiàn)出來
·幫助用戶操作屏幕上的某些元素
Slack 的界面中，微交互的三個職能都有所體現(xiàn)。Slack 允許用戶在一個閉環(huán)中聊天溝通，共享文件、互相標(biāo)記。這個過程中程序會實時更新（比如郵件會在閱讀之后被標(biāo)記為已讀）。應(yīng)用中還不斷有各種系統(tǒng)提醒，和用戶保持信息的同步。
微交互對用戶和應(yīng)用的影響會體現(xiàn)在不同的方面：
·標(biāo)識打開或者關(guān)閉
·在各種媒體中進行評論
·布局或者流程的改變
·查看信息或者通知
·下拉更新
·和數(shù)據(jù)相關(guān)的元素進行交互，諸如查看天氣
·完成獨立的任務(wù)
·連接設(shè)備，諸如多人游戲連接，使用電腦連接打印機
·在網(wǎng)站上分享或者點贊
簡單地說，微交互是用戶的操作觸發(fā)設(shè)備而產(chǎn)生的動作。但是這些動作并非簡單的因果關(guān)系，它們的相互作用是以人為中心設(shè)計的，而設(shè)備和數(shù)字界面的反饋是參考自然和人的行為來做的。而這也是微交互所蘊含的秘密：以更“人性化”的方式，呈現(xiàn)出用戶預(yù)期中的操作。
上面的案例來自于UXPin，我們制作了一個網(wǎng)頁原型來探索時尚模特。每個卡片代表一個模特，當(dāng)鼠標(biāo)移動到卡片上的時候會顯示每個模特的信息和名片下載按鈕。懸停動作觸發(fā)微交互，讓信息顯示出來，加入的動效使得整個界面的變化如同有人操作一樣。
正如同你在上一個案例中所看到的，微交互并非承擔(dān)著單一的作用，它通常會擔(dān)任多個角色。有時候你無法準(zhǔn)確表述，但是它確實始終在增加著交互的參與感。
當(dāng)你考慮如何設(shè)計一個微交互的時候，不要將它視作為一個單獨的動作或者任務(wù)，你要思考的的是當(dāng)你要達到什么樣的用戶體驗，如果要實現(xiàn)它需要界面怎樣變化。
從本質(zhì)上來說，微交互應(yīng)該讓用戶有如下體驗或者引導(dǎo)出如下操作：
·觸摸屏幕
·愉悅，微笑
·學(xué)會或者理解什么
·感受到情感聯(lián)系
上面名為Elevate 的應(yīng)用在界面中采用了游戲式的交互組件，用戶必須通過觸摸屏幕回答問題或者修改答案通過這個環(huán)節(jié)，而在此過程中，漂亮的動效會讓他們會心一笑。另外，用戶可以借助這個應(yīng)用訓(xùn)練他們的大腦，并且可以彼此分享得分。
聽起來這個應(yīng)用很想是一個簡單的游戲，對吧？但是這種體驗幾乎是用戶對于每個應(yīng)用的期望。也正是這些不起眼的微交互設(shè)計，支撐起了2015年到2016年間最優(yōu)秀的應(yīng)用的體驗。正是這些微小的“數(shù)字化的時刻”讓用戶感受到了情感的聯(lián)系，它也讓用戶感受到另一個人或者對象的感受和體溫。
位于微交互領(lǐng)域前沿的就是我們前文所說的Dan Saffer。
如果你谷歌“微交互”，你搜到的幾乎都是他所提供的權(quán)威信息和話題，以及他的那本《微交互》。Saffer 認為微交互在結(jié)構(gòu)上是由四個部分構(gòu)成的，而這個定義也更加便于你來理解或者創(chuàng)造微交互。
·觸發(fā)：觸發(fā)啟動微交互。比如點擊心型圖標(biāo)表示喜歡
·規(guī)則：交互的行為規(guī)則。用戶無法“看到”規(guī)則，但是可以通過反饋（下一個環(huán)節(jié)）來理解規(guī)則。在這個案例中，點擊心型圖標(biāo)之后，系統(tǒng)會將這一偏好添加到用戶的訂閱列表中，并且為之提供相關(guān)的推薦。
·反饋：為用戶設(shè)計微交互發(fā)生的時候返回的信息的溝通機制。在這個案例中，用戶點擊了心型之后，圖標(biāo)會被填充上紅色，像真實的心臟一樣跳動起來，并且向用戶提示“已添加到閱讀列表！”告知用戶這個動作的含義。
·循環(huán)與模式：設(shè)定微交互的時長以及周期，并且設(shè)計它是否重復(fù)、隨著時間演變的過程。這個案例中，點擊一秒內(nèi)告知用戶信息被添加到閱讀列表，甚至在6個月之內(nèi)都可以提示用戶最初喜歡的頁面是哪個。
這幾個環(huán)節(jié)共同構(gòu)造出一個交互的周期和循環(huán)。按照Saffer 所說，絕大多數(shù)的用戶從來都沒注意到微交互的存在，直到這些微交互的循環(huán)或者機制被打破，才意識到它們的存在。
反饋是整個微交互機制中最重要的部分。反饋不僅是微交互中用戶和界面產(chǎn)生聯(lián)系的環(huán)節(jié)，也是反映出微交互運作機制的環(huán)節(jié)。
想想看，早上7點，手機鬧鐘響起來，然后你會怎么做？繼續(xù)打盹還是起來關(guān)閉？這個簡單的動作會造成兩種情況，關(guān)閉鬧鐘，或者等待9分鐘之后，鈴聲再次響起。這樣一來，用戶和系統(tǒng)之間的反饋回路就形成了。
如果沒有用戶的初始反饋，那么鈴聲就不會停止，也不會重置，如果默認的設(shè)置沒有次數(shù)限制的話，它會一遍又一遍一直響下去。
其實代辦事項列表也遵循著類似的循環(huán)，最典型的就是上方的Wunderlist。當(dāng)你點擊左側(cè)的復(fù)選框的時候，觸發(fā)微交互，有趣的動效出現(xiàn)，劃掉對 應(yīng)的選項。這個瞬間，你會知道哪些事情已經(jīng)搞定，哪些還有待完成。搞定了的任務(wù)逐步積累，會鼓勵你繼續(xù)完成更多的任務(wù)，催生進一步的交互。
雖然這個案例很簡單，但是你可以從中學(xué)到很多。它展示給我們用戶是如何在微交互的推動下產(chǎn)生參與感，并渴望進行下一步的。
處理好微交互的細節(jié)是能否成就一個項目的關(guān)鍵。交互是設(shè)計中無法忽視的重要組成部分。
那么你應(yīng)該如何設(shè)計細節(jié)呢？你需要考慮的問題有哪些？
·微交互必須在重復(fù)使用中存在。純粹為了漂亮或者噱頭的動效是取巧，不是微交互。你的微交互應(yīng)當(dāng)長期存在，細節(jié)設(shè)計應(yīng)當(dāng)貼心而不讓人煩惱。
·簡單直白是關(guān)鍵。直白的語言，清晰的字體，鮮艷的色彩，結(jié)構(gòu)化的設(shè)計，優(yōu)秀的執(zhí)行力，這些都比過度裝飾要強得多。
·微交互要人性化。文案應(yīng)當(dāng)設(shè)計得如同人在說話，在任何場合都應(yīng)該保持充滿情感的溝通形式。
·注意文案。文案和每個時刻、每個場合都要貼合，保持尊重，保證對的基調(diào)，和輕松的氛圍。
·有趣的動畫，但是要適度。想想經(jīng)典的Mac OSX Dock上跳動的圖標(biāo)。動效不能對程序的響應(yīng)造成負擔(dān)，然后你再考慮它的有趣、好玩和情懷。
·保持協(xié)調(diào)。對比度是你的朋友，但是要小心使用。在觸發(fā)微動效的瞬間，配色的重要性遠大于你的想象。確保每個時刻色彩的協(xié)調(diào)和一致。
·思考微交互的演進。微交互第一次出現(xiàn)和第一千次是完全一樣么？它隨著時間推移如何改變？它觸發(fā)的流程變化的時候會有什么區(qū)別？仔細想想這些細節(jié)吧。
·不要過度沉迷。過度設(shè)計是許多產(chǎn)品失敗的原因之一，平滑合理的設(shè)計才能造就對的產(chǎn)品。
原文地址：designmodo
譯文地址：優(yōu)設(shè)
優(yōu)設(shè)譯者：@陳子木
藍藍設(shè)計的小編 http://tweetduck.com