2016年設(shè)計(jì)師必須掌握的微交互知識

2015-11-06

2426

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

這個(gè)時(shí)候，就需要微交互登場了。

那些真正讓人沉迷的優(yōu)秀應(yīng)用很大程度上是因?yàn)?span id="xtnjqst" class="wp_keywordlink_affiliate" style="margin:0px;padding:0px;">微交互的存在。微交互出現(xiàn)的瞬間，用戶會感受到更強(qiáng)烈的互動和參與感，這些微小而自然的變化會創(chuàng)造出不同凡響的愉悅感，不過通常這些微小的互動并不是那么顯眼。當(dāng)然，對于設(shè)計(jì)師而言并非如此。

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

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

什么是微交互

那么什么是微交互呢？我們可以這么界定：微交互是同數(shù)碼設(shè)備進(jìn)行的基于任務(wù)的單個(gè)交互。值得注意的是，絕大多數(shù)的的這類交互都是微小而不引人注意的，但是它會為你提供平滑、自然的感覺。

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

快速溝通時(shí)的狀態(tài)呈現(xiàn)和反饋
將某個(gè)動作所產(chǎn)生的結(jié)果視覺化地呈現(xiàn)出來
幫助用戶操作屏幕上的某些元素

Slack 的界面中，微交互的三個(gè)職能都有所體現(xiàn)。Slack 允許用戶在一個(gè)閉環(huán)中聊天溝通，共享文件、互相標(biāo)記。這個(gè)過程中程序會實(shí)時(shí)更新（比如郵件會在閱讀之后被標(biāo)記為已讀）。應(yīng)用中還不斷有各種系統(tǒng)提醒，和用戶保持信息的同步。

微交互對用戶和應(yīng)用的影響會體現(xiàn)在不同的方面：

標(biāo)識打開或者關(guān)閉
在各種媒體中進(jìn)行評論
布局或者流程的改變
查看信息或者通知
下拉更新
和數(shù)據(jù)相關(guān)的元素進(jìn)行交互，諸如查看天氣
完成獨(dú)立的任務(wù)
連接設(shè)備，諸如多人游戲連接，使用電腦連接打印機(jī)
在網(wǎng)站上分享或者點(diǎn)贊

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

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

微交互到底做了什么

正如同你在上一個(gè)案例中所看到的，微交互并非承擔(dān)著單一的作用，它通常會擔(dān)任多個(gè)角色。有時(shí)候你無法準(zhǔn)確表述，但是它確實(shí)始終在增加著交互的參與感。

當(dāng)你考慮如何設(shè)計(jì)一個(gè)微交互的時(shí)候，不要將它視作為一個(gè)單獨(dú)的動作或者任務(wù)，你要思考的的是當(dāng)你要達(dá)到什么樣的用戶體驗(yàn)，如果要實(shí)現(xiàn)它需要界面怎樣變化。

從本質(zhì)上來說，微交互應(yīng)該讓用戶有如下體驗(yàn)或者引導(dǎo)出如下操作：

觸摸屏幕
愉悅，微笑
學(xué)會或者理解什么
感受到情感聯(lián)系

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

聽起來這個(gè)應(yīng)用很想是一個(gè)簡單的游戲，對吧？但是這種體驗(yàn)幾乎是用戶對于每個(gè)應(yīng)用的期望。也正是這些不起眼的微交互設(shè)計(jì)，支撐起了2015年到2016年間最優(yōu)秀的應(yīng)用的體驗(yàn)。正是這些微小的“數(shù)字化的時(shí)刻”讓用戶感受到了情感的聯(lián)系，它也讓用戶感受到另一個(gè)人或者對象的感受和體溫。

微交互的四大元素

位于微交互領(lǐng)域前沿的就是我們前文所說的Dan Saffer。

如果你谷歌“微交互”，你搜到的幾乎都是他所提供的權(quán)威信息和話題，以及他的那本《微交互》。Saffer 認(rèn)為微交互在結(jié)構(gòu)上是由四個(gè)部分構(gòu)成的，而這個(gè)定義也更加便于你來理解或者創(chuàng)造微交互。

觸發(fā)：觸發(fā)啟動微交互。比如點(diǎn)擊心型圖標(biāo)表示喜歡
規(guī)則：交互的行為規(guī)則。用戶無法“看到”規(guī)則，但是可以通過反饋（下一個(gè)環(huán)節(jié)）來理解規(guī)則。在這個(gè)案例中，點(diǎn)擊心型圖標(biāo)之后，系統(tǒng)會將這一偏好添加到用戶的訂閱列表中，并且為之提供相關(guān)的推薦
反饋：為用戶設(shè)計(jì)微交互發(fā)生的時(shí)候返回的信息的溝通機(jī)制。在這個(gè)案例中，用戶點(diǎn)擊了心型之后，圖標(biāo)會被填充上紅色，像真實(shí)的心臟一樣跳動起來，并且向用戶提示“已添加到閱讀列表！”告知用戶這個(gè)動作的含義。
循環(huán)與模式：設(shè)定微交互的時(shí)長以及周期，并且設(shè)計(jì)它是否重復(fù)、隨著時(shí)間演變的過程。這個(gè)案例中，點(diǎn)擊一秒內(nèi)告知用戶信息被添加到閱讀列表，甚至在6個(gè)月之內(nèi)都可以提示用戶最初喜歡的頁面是哪個(gè)。

這幾個(gè)環(huán)節(jié)共同構(gòu)造出一個(gè)交互的周期和循環(huán)。按照Saffer 所說，絕大多數(shù)的用戶從來都沒注意到微交互的存在，直到這些微交互的循環(huán)或者機(jī)制被打破，才意識到它們的存在。

你是否思考過反饋機(jī)制？

反饋是整個(gè)微交互機(jī)制中最重要的部分。反饋不僅是微交互中用戶和界面產(chǎn)生聯(lián)系的環(huán)節(jié)，也是反映出微交互運(yùn)作機(jī)制的環(huán)節(jié)。

想想看，早上7點(diǎn)，手機(jī)鬧鐘響起來，然后你會怎么做？繼續(xù)打盹還是起來關(guān)閉？這個(gè)簡單的動作會造成兩種情況，關(guān)閉鬧鐘，或者等待9分鐘之后，鈴聲再次響起。這樣一來，用戶和系統(tǒng)之間的反饋回路就形成了。

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

其實(shí)代辦事項(xiàng)列表也遵循著類似的循環(huán)，最典型的就是上方的Wunderlist。當(dāng)你點(diǎn)擊左側(cè)的復(fù)選框的時(shí)候，觸發(fā)微交互，有趣的動效出現(xiàn)，劃掉對應(yīng)的選項(xiàng)。這個(gè)瞬間，你會知道哪些事情已經(jīng)搞定，哪些還有待完成。搞定了的任務(wù)逐步積累，會鼓勵你繼續(xù)完成更多的任務(wù)，催生進(jìn)一步的交互。

雖然這個(gè)案例很簡單，但是你可以從中學(xué)到很多。它展示給我們用戶是如何在微交互的推動下產(chǎn)生參與感，并渴望進(jìn)行下一步的。

細(xì)節(jié)設(shè)計(jì)是微交互的靈魂

處理好微交互的細(xì)節(jié)是能否成就一個(gè)項(xiàng)目的關(guān)鍵。交互是設(shè)計(jì)中無法忽視的重要組成部分。

那么你應(yīng)該如何設(shè)計(jì)細(xì)節(jié)呢？你需要考慮的問題有哪些？

微交互必須在重復(fù)使用中存在。純粹為了漂亮或者噱頭的動效是取巧，不是微交互。你的微交互應(yīng)當(dāng)長期存在，細(xì)節(jié)設(shè)計(jì)應(yīng)當(dāng)貼心而不讓人煩惱。
簡單直白是關(guān)鍵。直白的語言，清晰的字體，鮮艷的色彩，結(jié)構(gòu)化的設(shè)計(jì)，優(yōu)秀的執(zhí)行力，這些都比過度裝飾要強(qiáng)得多。
微交互要人性化。文案應(yīng)當(dāng)設(shè)計(jì)得如同人在說話，在任何場合都應(yīng)該保持充滿情感的溝通形式。
注意文案。文案和每個(gè)時(shí)刻、每個(gè)場合都要貼合，保持尊重，保證對的基調(diào)，和輕松的氛圍。
有趣的動畫，但是要適度。想想經(jīng)典的Mac OSX Dock上跳動的圖標(biāo)。動效不能對程序的響應(yīng)造成負(fù)擔(dān)，然后你再考慮它的有趣、好玩和情懷。
保持協(xié)調(diào)。對比度是你的朋友，但是要小心使用。在觸發(fā)微動效的瞬間，配色的重要性遠(yuǎn)大于你的想象。確保每個(gè)時(shí)刻色彩的協(xié)調(diào)和一致。
思考微交互的演進(jìn)。微交互第一次出現(xiàn)和第一千次是完全一樣么？它隨著時(shí)間推移如何改變？它觸發(fā)的流程變化的時(shí)候會有什么區(qū)別？仔細(xì)想想這些細(xì)節(jié)吧。
不要過度沉迷。過度設(shè)計(jì)是許多產(chǎn)品失敗的原因之一，平滑合理的設(shè)計(jì)才能造就對的產(chǎn)品。

關(guān)注我們：在查找公眾號中搜索：zomsky1688，或者掃描下方二維碼快速關(guān)注。
廣州市縱天信息科技有限公司公眾號
關(guān)鍵詞：廣州網(wǎng)頁設(shè)計(jì)公司,廣州網(wǎng)站設(shè)計(jì)公司,廣州響應(yīng)式網(wǎng)站