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