用一篇文章,讓你掌握「微交互」的基礎知識! - 優設網 - UISDC

用一篇文章,讓你掌握「微交互」的基礎知識!

2018/11/27 12218評論區

編者按:本文總結了微交互的基礎知識和三鴻文用,作者用大量優秀的微交互案例演示讓你直觀感受到微交互的強大,適合對微交互不熟悉的新人學習。

:微交互可以反映系統狀態、支持防錯設計以及轉達品牌。它們由觸發啟動,還能讓體驗變得更加迷人。

一、什么是微交互?

我們每天與電腦進行的交互都邑涉及到大量的微交互。微交互以反映系統狀態或者贊助用戶防錯的方式給予用戶反饋。此外,微交互還能用作品牌推廣的媒介。

云南体彩网界說:微交互指的是成對的「觸發」和「反饋」。其中「觸發」可以是用戶行為,也可以是系統狀態的變革;「反饋」是針對觸發的回應,通過用戶界面微小的、高度相關的變更(通常為視覺變更)轉達出來。

用戶啟動的觸發可以是 GUI 命令、手勢或者語音形式,而系統啟動的觸發則需要滿足一系列預先確定的條件。若微交互由 GUI 命令觸發,視覺反饋元素通常會顯示在它的鄰近。

云南体彩网△ 微交互的流程——豈論是用戶觸發還是系統觸發,都邑通過用戶界面的微小變更反饋給用戶

微交互包含了大量的數字元素,但并非每個元素都是微交互的一部分。一直顯示的靜態元素不克不及算是微交互,因為它們沒有被明確地觸發。此外,由多個行為構成的流程也不是微交互。下表列出了微交互的一些例子。

Dan Saffer 在2014年出版的《微交互》一書中界說了這個概念,并簡略描述了界說微交互的模型。

在這篇文章中,我們將聚焦于為何微交互對于用戶體驗是至關重要的,并會提供一些來自用戶視角的范例案例。

二、微交互為何重要?

使用科技產品的最大樂趣之一來自授權用戶和用戶介入。令人愉快的體驗指的不只是能用而已,它還需要引人入勝,而這恰恰是微交互較為擅長的地方,它能積極地影響到產品或服務的外觀和給人的感覺。

微交互可以通過下列方式提升產品的用戶體驗:

  • 鼓勵介入
  • 顯示系統狀態
  • 提供防錯設計
  • 轉達品牌

比起下拉刷新之類的現代元素,滾動條這種標準的微交互通常不太可能會設計得很差。主要是這些新興的交互方式要求我們必須付出更多的努力和思考能力發明出充斥意義、設計優良的用戶體驗。

云南体彩网我們來看一個微交互的優秀案例吧。

為了管理日常任務,我使用了任務管理工具 Asana。該工具的某些方面是我尤為喜歡的,好比它的標簽和視覺設計。但是到目前為止,我最喜歡 Asana 的地方還是在于每當我完成某項任務時偶爾會有獨角獸飛過瀏覽器這一點。這其實是微交互的一個例子。

當用戶將任務標記為完成時,會有一個較小的對話框涌現在頁面的左下角。該對話框提供了系統的反饋——任務已經被標記為完成,同時還有一個防錯選項用于撤銷之前的行為,以防那是一個誤操作。對話框涌現后的大約一秒,會有一只獨角獸穿過瀏覽器的左下角區域,用以祝賀用戶精彩地完成了相應任務。在這個案例中,共有2個微交互:實用的對話框和受游戲化設計所啟發的獨角獸動畫。

云南体彩网△ 在 Asana 網站,當用戶將任務標記為完成時,會顯示一個包含確認信息和撤銷之前操作的按鈕的對話框。另外,偶爾還會有獨角獸飛過屏幕

如果你使用過任務管理工具,你應該知道可以選擇的工具其實很多,好比 Asana、Jira、Trello 或者 Wrike,這些產品有很多共通之處。他們有相同的功能,好比將任務指派給團隊成員、創建看板或者跟其他產品進行整合。然而,如果仔細分析這些產品的微交互的話,它們之間的差別就相當明顯了。好比在 Trello 中 ,將任務移動到已完成列表并不會發生額外的特別明顯的特效。對很多人來說,這已經足夠契合他們的期望。然而我渴望在完成任務時還能看到獨角獸,對我個人來說這算是一種正面強化。

當然了,微交互不只是讓用戶感覺舒服而已。微交互能做的事情包含顯示系統狀態、支持防錯以及轉達品牌。在這些場景中對微交互的應用能夠帶來巨大的價值,因此這也使得微交互成為了讓你的產品區別于競爭對手的關鍵方式。微交互通過反饋來告知用戶信息,并担保用戶可以繼續使用當前的產品,沒有它們,你的用戶的體驗將會相當糟糕。

三、顯示系統狀態

通過讓產品變得易于理解并實時顯示系統的當前狀態,能讓用戶體會到掌控感和介入感。任何系統狀態的顯示都是微交互,因為它們天然具備了觸發(不管是用戶行為還是系統狀態的變更)和反饋。

1. 顯示進度

進度指示器是微交互的一個子集,它能讓用戶知道系統仍在運行,可以隨時回應他們的行為。進度指示器大多為線性的或圓形的組件,它們能夠顯示明確的或不確定的期待時間。在用戶期待操作的結果反饋時,這種元素能夠鼓勵他們繼續停留在當前的產品。

用戶下拉刷新信息流的場景中 LinkedIn 使用的是圓形進度條。該組件可以明確表示系統仍在運行,因此用戶不必反復猜測它是否還能識別他們的行為。多虧了這樣的微交互,用戶愿意期待更多的帖子進行加載,從而連續停留在 LinkdIn 中。

△ 用戶在 LinkedIn 中下拉刷新信息流時,會有進度條顯示系統正在響應請求

2. 待命

有時候系統需要注解它們在期待用戶進一步的輸入。在開始的觸發之后,微交互會提示用戶系統已經待命,并需要更多的信息輸入。這一類的微交互鼓勵用戶繼續跟當前的產品進行交互。

例如,當你在 iOS 的桌面屏幕上長按某個 app 的圖標,系統會通過輕微發抖所有 app 的方式來予以回應。該活動注解系統已在期待進一步的行為(也就是說,不管是輕點 app 左上角的「X」來刪除應用還是將圖標拖放到另一個位置)。

△ 用戶長按 app 時,iOS 使用微交互(發抖圖標)來表示系統在期待進一步的輸入

云南体彩网微交互并不局限于網站。Google Home 之類的語音助手在期待用戶的命令時,也使用了微交互來顯示待命模式。在用戶說完「Hey Google」之后,該設備會顯示一個包含四個圓點的動畫。這些圓點接著又會立即構成一個帶有微妙閃爍動效的方塊。通過這樣的視覺反饋,用戶就能立馬知道設備已經在期待命令,因此可以開始問它「天氣如何?」之類的問題了。

△ Google Home 在聽到觸發詞「Hey Google」后會亮起來,這表示它已經在期待用戶的語音命令

四、防錯

云南体彩网防錯聚焦于避免容易失足的情況,還可以提供確認操作。

云南体彩网微交互將這些情況轉達給用戶,并通過支持撤銷操作和避免重復工作來提升令人滿意的用戶體驗。

1. 支持撤銷操作

云南体彩网人人都邑犯錯,這在數字世界里指的是有時候我們會不小心點擊了某處。因此系統應該要確保撤銷操作可以變得容易一些,以免用戶不得不歷經重重障礙能力逆轉他們的無心之失。微交互可以顯示 UI 組件的當前狀態,還能夠提示用戶他們可以進行進一步的交互了。

云南体彩网微交互可以說是對撤銷操作最完美的支持方式,因為它們能夠明確提示用戶系統狀態已經發生變更。

云南体彩网?允許你收藏喜歡的商品,只要點擊圖片右上角的心形圖標就行。這個微交互使用了跳動的心形動畫來表達你已經收藏了某件商品。你可以很容易的通過再次點擊心形圖標撤銷收藏的行為,然后它就會恢復為原來的灰色狀態。

云南体彩网這種跳動的心形動效是利用動畫吸引用戶注意的恰當方式,因為:

  • 它足夠微妙,沒有粗暴的將用戶的注意力從主要任務中猛然拉開(相反的,過于明顯的動畫會對用戶造成極大的干擾)。
  • 只在很短的時間內顯示該動畫,因此它仍然可以算作微交互,跟不達時宜地久長顯示截然分歧。
  • 跳動的心形動效跟慣例的點亮顏色的心形圖標的區別在于它更有助于轉達系統狀態的變更,并能夠引導用戶留意因意外操作而發生的潛在影響(這在觸摸驅動的用戶界面中經常發生)。

△ Gap.com 使用微交互來表示用戶收藏了某件商品

2. 避免重做

云南体彩网在賬號創建的流程中,比起在點擊最后的提交按鈕然后收到毛病提示說你的密碼不符合要求(之前并未說明這些要求),還有不少事情是更加令人瓦解的。但是使用微交互的話就可以用來提示用戶所輸入的密碼是否符合要求,這可以大大避免重復的輸入操作(好比重新填寫表單)。如果沒有這些微交互,用戶會在注冊的過程中隨時感到抓狂,而且如果注冊并不是必須操作的話,他們便會立馬離開。

eBay 的注冊表單使用了微交互來有效避免驗證時的毛病發生。例如,密碼輸入框被激活后,會涌現一個列表顯示對應的密碼設置的要求。在輸入的過程中,每當密碼滿足其中任一要求,該列表都邑自動更新。如果輸入的內容都不符合要求,它的下方則會涌現紅色的毛病提示。這一系列的微交互組合起來担保了用戶可以獲得一致的反饋和流暢的體驗。

△ eBay 在其注冊表單中使用微交互來反饋密碼是否符合要求

五、轉達品牌

微交互不該該是空洞無物的,而是要服務于某個目的,因此我們也可以用它來進行品牌轉達。如果你的品牌形象充斥樂趣而且色彩斑斕,那么讓它體現在微交互中是相當合適的。相反地,若你的品牌需要轉達出專業和可靠的感覺,那么在下拉刷新的微交互中使用搞笑的方式(好比甜甜圈)就相當欠缺考慮了。就像你的文案擁有某種口吻一樣,你的微交互也有它自己的口吻。

在使用蘋果的信息App 發送生日快樂的消息時,屏幕中會涌現滿滿的氣球動畫。蘋果將自己定位為一個富含創意同時以人為本的品牌,而這個生日的微交互以發明情感化的感官體驗的方式完美契合了自身的品牌特性。

△ 用戶向某人發送「生日快樂」的信息時,信息App 會通過微交互來表達祝福

Snapchat 利用了微交互來表示兩位 Bitmoji 用戶處在同一個聊天窗口中。如果對方正在輸入,他的 Bitmoji 上會顯示表示正在思考的氣泡。而如果他在閱讀消息,對應的 Bitmoji 則會顯示為正在偷偷查看消息輸入框。在這個案例中,微交互所提供的反饋會鼓勵用戶繼續進行對話并連續使用這個 app 。

△ Snapchat 使用微交互來顯示有兩個用戶處于相同的對話窗口中。對方閱讀消息時,他的 Bitmoji 會在左下角偷看(左圖)。如果對方正在輸入,他的 Bitmoji 上則會顯示表示對方正在思考的氣泡(右圖)

云南体彩网許多品牌嚴重依賴視覺來進行轉達,其實聲音也擁有相當水平的感染力。假設有人要求你畫出某個保險公司的 Logo 或者唱出他們的廣告歌曲,你認為哪一個會更容易呢?如果你經常看電視,那么你首先想起來的很有可能是它的廣告歌曲。其實微交互也會用到聽覺反饋。例如,在用戶啟動 Xbox One 時系統會給予聽覺和視覺的反饋:Xbox 按鈕亮起來,系統發出簡短但特別的旋律。Xbox One 的用戶是很有可能將這個聲音跟關機時的聲音,以及跟其他游戲平臺的聲音區分開來的。因此這個微交互既成為了與系統交互的簽名元素,也是 Xbox 品牌的一個明顯特征。

△ 觀看視頻

云南体彩网用戶打開電源時,Xbox One 會通過聽覺和視覺方式進行反饋。對用戶來說,聽覺反饋是一個可以被立即識別的系統特點。

結論

云南体彩网設計優秀的微交互可以顯著影響到用戶體驗。它們可以作為與用戶進行交流的媒介發生其相應的價值。微交互能提供系統狀態的視覺反饋或者贊助用戶避免毛病。此外,微交互還能以轉達品牌的方式豐富你的產品,這能夠極大的鼓勵用戶選擇你的產品而不是競爭對手。總而言之,這些微小的細節可以讓好的產品蛻釀成優秀的產品,從而讓用戶陷溺其中。

云南体彩网原文鏈接:??Alita Joyce

圖片素材來源:undraw.co

「深入了解微交互」

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.7daer.cn/basic-knowledge-of-micro-interaction

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

您還沒有登錄

優設啟用更平安省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里