8
| 本文作者： 百度MUX | 2016-01-09 11:43 |
【編者按】文章來(lái)自百度MUX翻譯小組，應(yīng)作者要求，如文章已獲雷鋒網(wǎng)授權(quán)轉(zhuǎn)載，也請(qǐng)保留原標(biāo)題。
譯者注：本文譯自UXPin出品的電子書(shū)Mobile Design Book of Trends 2015&2016中第五章Delightful Microinteraction。這本電子書(shū)結(jié)合豐富案例講述了2015-2016年間重要的移動(dòng)設(shè)計(jì)趨勢(shì)，共有6個(gè)章節(jié)：靈巧的手勢(shì)操作、層級(jí)化的移動(dòng)界面、雋永的字體排印、扁平化設(shè)計(jì)、愉悅的微交互、小卡片。
如果你理解和創(chuàng)造一個(gè)令人感到驚艷的應(yīng)用，那么它需要有一個(gè)很酷的故事和令人印象深刻的視覺(jué)設(shè)計(jì)。但其實(shí)還不夠，它需要更多——能夠與用戶建立起聯(lián)系和讓用戶覺(jué)得這應(yīng)用是有生命的。
這就是為什么微交互存在的原因。
微交互是創(chuàng)造一個(gè)驚艷應(yīng)用的神秘配方。用戶接觸到這些微交互的瞬間，會(huì)出現(xiàn)意想不到的喜悅，然而除了設(shè)計(jì)師，使用的人幾乎感受不到這些瞬間的存在。
你每天都會(huì)體驗(yàn)到上百次微交互——
例如每當(dāng)你關(guān)掉鬧鐘；看到消息閃現(xiàn)在屏幕；提示你在玩游戲；跳過(guò)一首歌的播放甚至在你早上上班時(shí)根據(jù)交通警報(bào)改變你的路線。
每一個(gè)微小的瞬間形成了不同的微交互。雖然你不會(huì)去思考這些細(xì)節(jié)，但每一個(gè)微交互都會(huì)影響著你是否以后繼續(xù)使用這些應(yīng)用。
微交互可以是用戶任何一次基于任務(wù)與設(shè)備發(fā)生的接觸，用戶很少意識(shí)到大部分正常工作的微交互出現(xiàn)在什么時(shí)候，是怎么發(fā)生的，或者長(zhǎng)什么樣子。
正如Dan Saffer’s寫(xiě)的書(shū)（高度推薦）描述，微交互幫助實(shí)現(xiàn)了三個(gè)特定功能：
? 快速溝通或反饋
? 操作結(jié)果可視化?
? 幫助用戶操作屏幕上的元素
（例子：Slack）
Slack是一款集以上三個(gè)功能于一身的優(yōu)秀應(yīng)用。Slack讓用戶在一個(gè)封閉對(duì)話流里進(jìn)行溝通，可以添加附件，單個(gè)標(biāo)記。Slack會(huì)給用戶實(shí)時(shí)更新?tīng)顟B(tài)（例如標(biāo)記信息已讀狀態(tài)），還幫助用戶瀏覽周圍，使用推送消息提醒和其他形式使用戶同步共同內(nèi)容。
微交互在不同方面影響著用戶和應(yīng)用功能：
? 關(guān)掉或打開(kāi)某元素
? 在任何數(shù)字媒介中進(jìn)行評(píng)論
? 改變一項(xiàng)設(shè)置和進(jìn)程
? 查看通知或消息
? 下拉屏幕來(lái)刷新內(nèi)容?
? 與數(shù)據(jù)元素進(jìn)行交互，如查看天氣
? 完成任何單一任務(wù)
? 連接設(shè)備，例如多玩家游戲或使用你的筆記本電腦連接打印機(jī)
? 在網(wǎng)站上對(duì)圖片或視頻進(jìn)行分享或點(diǎn)贊?
簡(jiǎn)單來(lái)說(shuō)微交互就是用戶的一個(gè)動(dòng)作觸發(fā)了設(shè)備的另外一個(gè)動(dòng)作。每個(gè)交互設(shè)計(jì)動(dòng)作是建立在以用戶為中心的設(shè)計(jì)理念，數(shù)字工具的工作和功能反映用戶的實(shí)際操作。這也是讓交互設(shè)計(jì)可以符合人類操作習(xí)慣的秘訣。
正如你從上面的列表所看到，其實(shí)沒(méi)有很好的結(jié)論能總結(jié)所有的微交互。微交互服務(wù)于多規(guī)則，但具體地說(shuō)，它們應(yīng)該創(chuàng)造更多互動(dòng)。
當(dāng)你考慮如何設(shè)計(jì)一個(gè)微交互時(shí)，不僅要思考這個(gè)具體的動(dòng)作或者任務(wù)，還要清楚這個(gè)作為用戶的操作流程中一部分的微交互的作用是什么。
（例子：Elevate）
從本質(zhì)上來(lái)說(shuō)，微交互應(yīng)該是讓用戶的身體感覺(jué)或者做一些事情?：
? 觸摸屏幕
? 高興地笑
? 學(xué)習(xí)或理解事物
? 連接其他用戶
Elevate應(yīng)用使用這些操作事件來(lái)搭建游戲形式的學(xué)習(xí)界面，用戶必須觸摸屏幕才能回到問(wèn)題和修改答案，頁(yè)面上漂亮的動(dòng)畫(huà)可以取悅用戶。這應(yīng)用的目的是為了幫助用戶訓(xùn)練大腦。（設(shè)計(jì)這個(gè)圖片型游戲是為了更好地幫助你去理解和使用語(yǔ)法）用戶可以分享他們的分?jǐn)?shù)和結(jié)果給他們的朋友和其他用戶。這聽(tīng)起來(lái)像一個(gè)很簡(jiǎn)單的游戲，對(duì)吧？但這些其實(shí)都是用戶期望從幾乎每一個(gè)應(yīng)用看到的東西。
這些行為都是為什么需要微交互的核心。這些小而輕的“數(shù)字時(shí)刻”被視為一種情感聯(lián)系。微交互允許用戶感覺(jué)或接觸另外一個(gè)用戶或?qū)ο蟆?nbsp;
最早研究微交互的是Dan Saffer。
只需google一下“微交互”，每條結(jié)果里的相關(guān)信息基本都會(huì)出現(xiàn)Dan Saffer這名字。 他寫(xiě)了一本全關(guān)于微交互的書(shū)。Saffer聚焦在微交互的四個(gè)結(jié)構(gòu)——這是最好的方法去理解并創(chuàng)造它們。
? 觸發(fā)器：?jiǎn)?dòng)微交互。舉個(gè)例子，我點(diǎn)擊了一個(gè)心型圖標(biāo)去點(diǎn)贊一個(gè)頁(yè)面。
? 規(guī)則：在交互里發(fā)生了什么。用戶不能“看見(jiàn)”這些規(guī)則，但可以通過(guò)反饋（下一個(gè)頁(yè)面）明白這些規(guī)則。在這案例，點(diǎn)擊心型圖標(biāo)會(huì)增加這個(gè)頁(yè)面的內(nèi)容到用戶的信息流里。
? 反饋：讓你明白在微交互里發(fā)生了什么。心型圖標(biāo)用顏色填充以及會(huì)跳動(dòng)，伴隨著動(dòng)效漸變消失的“安全地加入信息流”消息通知用戶發(fā)生了什么。
? 循環(huán)和模式：決定微交互動(dòng)作的時(shí)長(zhǎng)和以及隨著時(shí)間如何重復(fù)和發(fā)展的。舉個(gè)例子，我們現(xiàn)在所描述的微交互，甚至可以提醒我們6個(gè)月前第一次點(diǎn)贊的頁(yè)面。
每一個(gè)交互的細(xì)節(jié)都應(yīng)該告知用戶，作用是什么。正如Saffer所說(shuō)的，大多數(shù)人甚至不知道微交互有什么用，除非在使用中出了問(wèn)題。
反饋是微交互循環(huán)中的最重要的部分。這是微交互連接用戶和接口的階段。反饋決定了微交互將究竟是如何工作的。
試想一下，你需要7點(diǎn)起床所以需要在你手機(jī)上設(shè)置一個(gè)鬧鐘。當(dāng)鬧鐘響起來(lái)時(shí)你會(huì)做什么？你是起床來(lái)關(guān)掉這鬧鐘嗎還是繼續(xù)再睡一會(huì)兒？
這個(gè)細(xì)小的動(dòng)作告訴你應(yīng)用需要什么微交互——重新設(shè)置鬧鐘的下一次鈴響或者自動(dòng)延后9分鐘再響鈴。這個(gè)在用戶和系統(tǒng)之間的反饋循環(huán)是完整的。沒(méi)有用戶的操作，它沒(méi)有被重新設(shè)置，鬧鐘的聲音永遠(yuǎn)不會(huì)停止。
（例子：Wunderlist）
這同樣適用于核對(duì)代辦事項(xiàng)列表事項(xiàng)時(shí)，就像上面的Wunderlist應(yīng)用。
當(dāng)你在一項(xiàng)時(shí)間上打勾時(shí)就意味著這個(gè)應(yīng)用應(yīng)該用微交互反饋你剛剛打勾的行為。你瞬間明白哪些事項(xiàng)是完成的，哪些是還沒(méi)做的。
雖然這是個(gè)簡(jiǎn)單的例子，但我們可以從中學(xué)到很多。
至少，它告訴我們，用戶想要通過(guò)應(yīng)用中的微交互清楚的制定下一步，并且希望它可以隨著時(shí)間和操作很直觀地演變。
設(shè)計(jì)微交互以及怎么處理細(xì)節(jié)將成就或破壞你的項(xiàng)目，交互是一個(gè)你不能忽略的重要設(shè)計(jì)元素。
但是你應(yīng)該怎么去使用它？什么是你需要思考的？
? 微交互必須能通過(guò)重復(fù)使用才能驗(yàn)證它的價(jià)值。有一些微交互第一次使用可能感覺(jué)新奇有趣但往后的100次使用可能會(huì)成為煩人的微交互。對(duì)于噱頭和古怪的設(shè)計(jì)一定要慎重小心。
? 簡(jiǎn)單的規(guī)則。簡(jiǎn)單的樣式，簡(jiǎn)單的語(yǔ)言，簡(jiǎn)單的顏色以及簡(jiǎn)單的設(shè)計(jì)。不要設(shè)計(jì)出比功能還復(fù)雜的微交互。
（例子：Dark Sky）
? 賦予微交互人類的聲音。文案讀起來(lái)就應(yīng)該像人說(shuō)的話，不應(yīng)該像一臺(tái)機(jī)器。
? 在復(fù)制上要多留心。你使用的文字和語(yǔ)言必須與此時(shí)的情景匹配。如果只使用文字，那么需要保持文字是簡(jiǎn)單，健談和有用的。
? 增加有趣但不要太瘋狂的動(dòng)效。MacBook的Dock上一個(gè)彈跳的圖標(biāo)可以認(rèn)為是一個(gè)程序在加載，它能讓你知道這個(gè)程序正在響應(yīng)但又不會(huì)妨礙到你現(xiàn)在的任務(wù)。
? 你現(xiàn)在設(shè)計(jì)的東西必須與其他元素保持視覺(jué)和諧。如果你的應(yīng)用使用藍(lán)色為主調(diào)，那么你設(shè)計(jì)的微交互就應(yīng)該使用相同的色調(diào)，這樣才能在視覺(jué)上與你的主設(shè)計(jì)保持一致。盡管對(duì)比是很好的設(shè)計(jì)方法，但還是要謹(jǐn)慎地使用它。
? 請(qǐng)不要過(guò)分思考微交互。過(guò)分設(shè)計(jì)是致命的，例如簡(jiǎn)單的文字消息通知，只需要在屏幕上簡(jiǎn)單地展示足夠的信息已經(jīng)很有效了，例如展現(xiàn)這消息的發(fā)送者，內(nèi)容以及如何去回復(fù)它。
? 仔細(xì)地考慮每一個(gè)細(xì)節(jié)。因?yàn)槲⒔换ナ侨绱说奈⑿?，每個(gè)設(shè)計(jì)的元素都很重要。確保每一個(gè)細(xì)節(jié)，在發(fā)布應(yīng)用前確保最后一像素也是完美的。
? 請(qǐng)考慮微交互的拓展性。它對(duì)于每個(gè)用戶每一時(shí)刻是否都是完全一樣的或者可以改變的？（考慮上面提到過(guò)的鬧鐘例子，每一次點(diǎn)了“再睡一會(huì)”按鈕，鬧鐘聲音會(huì)變得更大）。更細(xì)微智能的細(xì)節(jié)會(huì)產(chǎn)出最棒的微交互。
這里有好多方法去思考如何將微交互融入到設(shè)計(jì)中。沒(méi)準(zhǔn)你實(shí)際上已經(jīng)設(shè)計(jì)了一段時(shí)間，但沒(méi)在微交互設(shè)計(jì)投入時(shí)間。
每一個(gè)微交互的支柱都是由精心設(shè)計(jì)過(guò)的動(dòng)效組成的。（你可以從免費(fèi)的電子書(shū)《交互設(shè)計(jì)和動(dòng)效》中學(xué)習(xí)更多關(guān)于動(dòng)效設(shè)計(jì)的知識(shí)）
（例子：Apple）
舉一個(gè)近些年最好的微交互之一的例子。
（例子：Apple）
在iOS9中的拍照應(yīng)用中，增加了一個(gè)叫“生動(dòng)” （live photo）的功能，當(dāng)一張照片是“生動(dòng)的”，它其實(shí)更像Gif一樣被記錄，有趣微交互的竅門(mén)是如何讓?xiě)?yīng)用保持瞬間的痕跡。
當(dāng)你拍了一張你的小狗的照片，它在照片里伸出它的舌頭。在相冊(cè)里照片是完全靜態(tài)的。但當(dāng)你輕按照片，屏幕模糊的一剎那，它變成“活”的照片，展示你幾秒鐘狗的呆萌（甚至聲音）。Gif和視頻都不是新的技術(shù)，但在這里的混合卻使照片變得非常獨(dú)特。事實(shí)上，如果你在照片間切換，部分照片在過(guò)渡時(shí)也會(huì)有動(dòng)畫(huà)。
創(chuàng)建一個(gè)微交互比拍一個(gè)視頻要簡(jiǎn)單（只需要堅(jiān)持循環(huán)按播放鍵），也比Gif更具有沉浸感。生動(dòng)照片（live photo）讓用戶回到過(guò)去再次體驗(yàn)當(dāng)時(shí)完整的瞬間。相冊(cè)不僅僅是個(gè)旋轉(zhuǎn)木馬，也是一個(gè)可移動(dòng)的裝載人們的記憶和感覺(jué)的地方。為了重建標(biāo)準(zhǔn)相冊(cè)應(yīng)用的微交互，蘋(píng)果實(shí)際上引發(fā)了改變相當(dāng)大的體驗(yàn)。蘋(píng)果實(shí)際引發(fā)了一次相當(dāng)大的變革。
當(dāng)然，這里還有很多事情你可以在你的應(yīng)用里體現(xiàn)你的微交互。有兩個(gè)最常用的體現(xiàn)：使用通知以及點(diǎn)擊按鈕或鏈接的動(dòng)效。每一個(gè)方法都會(huì)促進(jìn)使用率和可用性。
當(dāng)你決定如何設(shè)計(jì)微交互時(shí)，你需要考慮用戶第一。背后的關(guān)鍵概念是微交互的可用性：
? 一觸碰＝一個(gè)動(dòng)作（例如一個(gè)分享，或者在我們前一個(gè)例子里的觸發(fā)一個(gè)照片動(dòng)效）
? 預(yù)測(cè)用戶下一步的操作。在生動(dòng)照片的例子中，動(dòng)態(tài)的照片過(guò)渡延續(xù)了用戶滑動(dòng)照片產(chǎn)生的微交互。蘋(píng)果知道，人們當(dāng)觸發(fā)了第一張照片時(shí)會(huì)繼續(xù)瀏覽后面的圖片，所以它保持一致性的體驗(yàn)。
一旦你有了這一發(fā)現(xiàn)，你必須讓這個(gè)微交互幾乎看不見(jiàn)。我們不能反復(fù)強(qiáng)調(diào)，微交互必須是感知很弱的。就像一段好的魔術(shù)，觀眾不需要看到觸發(fā)，規(guī)則，反饋和緩解的整個(gè)過(guò)程，觀眾只需要知道應(yīng)用完成他們想要做的。如果你可以達(dá)到想變魔術(shù)一樣的感覺(jué)，你將會(huì)有更多機(jī)會(huì)讓用戶使用這個(gè)微交互。
我們只是剛開(kāi)始接觸微交互設(shè)計(jì)，它將會(huì)在重要性和范圍不斷增長(zhǎng)。雖然有好多關(guān)于手機(jī)應(yīng)用很好的例子，但微交互也會(huì)在穿戴式設(shè)備或用在家庭里的智能設(shè)備等小型應(yīng)用里成為最為突出的設(shè)計(jì)元素。
在小屏幕上也同樣重要，可以說(shuō)在穿戴式設(shè)備上微交互更重要，因?yàn)槠聊粚?shí)在太小所以每一個(gè)交互都必須是一個(gè)單步過(guò)程。
（例子：Nike Running）
思考一下耐克跑步這個(gè)應(yīng)用。不僅因?yàn)樗c你手機(jī)上的其它應(yīng)用進(jìn)行跨界整合（例如Health和Spotify），它也在Apple Watch上提供一個(gè)完整的微交互體驗(yàn)。從現(xiàn)場(chǎng)紀(jì)錄你的里程到從你的朋友那得到贊，微交互使穿戴式平臺(tái)的應(yīng)用變得更加可用。
機(jī)器人將集成微交互規(guī)則。從家庭安全設(shè)備到舒適控制清潔設(shè)備，可交互的機(jī)器人與連接的應(yīng)用程序會(huì)創(chuàng)造一個(gè)與迄今為止我們所看到完全幾乎不一樣的體驗(yàn)，并將基于微交互而“工作”。
（例子：Cox Homelife）
家庭安全設(shè)備和電視電纜提供商Cox是目前嘗試家庭安全系統(tǒng)的眾多公司之一。當(dāng)你的家整合了智能家庭安全設(shè)備，你在看視頻時(shí)燈會(huì)自動(dòng)關(guān)掉。（這套系統(tǒng)也可以告知你的寵物正在你的家里搗亂）
恒溫器設(shè)備Nest也使用微交互當(dāng)作工具去學(xué)習(xí)設(shè)置你習(xí)慣的溫度，使你的家變得更舒適。每一個(gè)智能型工具都會(huì)連接你手機(jī)上的應(yīng)用去提供反饋和使用它時(shí)提供更好的互動(dòng)。
（例子：Google Material Design）
微交互會(huì)繼續(xù)進(jìn)化并相互影響。在Google的Material Design文檔里你可以找到一些關(guān)于微交互的很好的實(shí)用建議。微交互這概念將超越功能，也會(huì)去闡述每一種元素，例如觸摸，手勢(shì)甚至美學(xué)。
“響應(yīng)式交互讓用戶的操作有及時(shí)的，有邏輯的，令人愉悅的屏幕反應(yīng)，這有利于用戶對(duì)應(yīng)用的深入探索。每一個(gè)交互都需要通過(guò)深思熟慮，也許它是異想天開(kāi)的，但絕不能使人分心。我觸摸了屏幕會(huì)發(fā)生什么？那我觸摸了這個(gè)圖標(biāo)呢？”
微交互能更好地促進(jìn)應(yīng)用更好地連接物理世界。通過(guò)Beacons與用戶連接，微交互變得更普遍。
（例子：Target Cartwheel）
回想一下2002年的“少數(shù)派任務(wù)”這部電影，湯姆克魯斯辦演的角色在購(gòu)物商城里行走，廣告牌會(huì)根據(jù)他想要的直接推送廣告給他。這個(gè)也能在應(yīng)用里實(shí)現(xiàn)，在一些地方例如Target，當(dāng)你到達(dá)特定位置，Target會(huì)通過(guò)定位工具來(lái)嘗試推送一些交易，優(yōu)惠券或降價(jià)信息到你的手機(jī)上。
微交互是一個(gè)應(yīng)用設(shè)計(jì)里的核心成分，它影響你的用戶是否愿意使用這應(yīng)用，提高使用度，以及愉悅用戶。把這些放在一起，你需要設(shè)計(jì)一些瞬間那是用戶不知道，但是需要的，或用戶希望你的應(yīng)用是他們?nèi)粘Ｉ钪械闹匾M成部分。
另外，對(duì)設(shè)計(jì)有興趣的童鞋，部分資源和工具可進(jìn)入原文查看。
Via：Mobile Design Book of Trends 2015&2016
譯文僅作學(xué)習(xí)用途，如有其它用途請(qǐng)聯(lián)系原作者。譯文轉(zhuǎn)載請(qǐng)注明：本文來(lái)自MUX原創(chuàng)翻譯，雷鋒網(wǎng)發(fā)布，譯文作者：MUX翻譯小組
keep calm and be awesome.
推薦閱讀：
1、2015-2016年最流行的APP設(shè)計(jì)是什么？比如，F(xiàn)acebook那樣的
2、2015-2016年最有影響力的移動(dòng)界面設(shè)計(jì)是什么？看看Google就知道了
雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見(jiàn)轉(zhuǎn)載須知。
