2016年設計師必須掌握的微互動知識

發表於2015-11-15

如何打造一款看起來非常驚豔的應用,我想大家應該有所瞭解,藉助有趣的故事、流暢的流程和令人難忘的視覺設計就好。但是僅有這些並不夠,你需要拿出一些真正能打動使用者心靈,產生情感聯絡的東西,讓他們感受到應用真正鮮活的一面。

這個時候,就需要微互動登場了。

那些真正讓人沉迷的優秀應用很大程度上是因為微互動的存在。微互動出現的瞬間,使用者會感受到更強烈的互動和參與感,這些微小而自然的變化會創造出不同凡響的愉悅感,不過通常這些微小的互動並不是那麼顯眼。當然,對於設計師而言並非如此。

如果你用心觀察,每天會遭遇數百次微互動。

早上關閉鬧鐘時的動效,看到新簡訊在介面上閃現,在播放器中切換歌曲的時候,結束遊戲回合的時候的提示資訊,甚至是用手機導航的時候交通訊息的提示,這些時刻都會有微互動出現。也許你不會知道到底是誰創造出這些,但是確實是這些愉悅的瞬間堆積起來讓你忍不住開啟這些有趣的應用。

什麼是微互動

那麼什麼是微互動呢?我們可以這麼界定:微互動是同數碼裝置進行的基於任務的單個互動。值得注意的是,絕大多數的的這類互動都是微小而不引人注意的,但是它會為你提供平滑、自然的感覺。

正如Dan Saffer在他的那本《微互動》中所說的,微互動微的出現填補了下面的三種功用:

  • 快速溝通時的狀態呈現和反饋
  • 將某個動作所產生的結果視覺化地呈現出來
  • 幫助使用者操作螢幕上的某些元素

image012

Slack 的介面中,微互動的三個職能都有所體現。Slack 允許使用者在一個閉環中聊天溝通,共享檔案、互相標記。這個過程中程式會實時更新(比如郵件會在閱讀之後被標記為已讀)。應用中還不斷有各種系統提醒,和使用者保持資訊的同步。

微互動對使用者和應用的影響會體現在不同的方面:

  • 標識開啟或者關閉
  • 在各種媒體中進行評論
  • 佈局或者流程的改變
  • 檢視資訊或者通知
  • 下拉更新
  • 和資料相關的元素進行互動,諸如檢視天氣
  • 完成獨立的任務
  • 連線裝置,諸如多人遊戲連線,使用電腦連線印表機
  • 在網站上分享或者點贊

簡單地說,微互動是使用者的操作觸發裝置而產生的動作。但是這些動作並非簡單的因果關係,它們的相互作用是以人為中心設計的,而裝置和數字介面的反饋是參考自然和人的行為來做的。而這也是微互動所蘊含的祕密:以更“人性化”的方式,呈現出使用者預期中的操作。

image021

上面的案例來自於UXPin,我們製作了一個網頁原型來探索時尚模特。每個卡片代表一個模特,當滑鼠移動到卡片上的時候會顯示每個模特的資訊和名片下載按鈕。懸停動作觸發微互動,讓資訊顯示出來,加入的動效使得整個介面的變化如同有人操作一樣。

微互動到底做了什麼

正如同你在上一個案例中所看到的,微互動並非承擔著單一的作用,它通常會擔任多個角色。有時候你無法準確表述,但是它確實始終在增加著互動的參與感。

當你考慮如何設計一個微互動的時候,不要將它視作為一個單獨的動作或者任務,你要思考的的是當你要達到什麼樣的使用者體驗,如果要實現它需要介面怎樣變化。

從本質上來說,微互動應該讓使用者有如下體驗或者引匯出如下操作:

  • 觸控螢幕
  • 愉悅,微笑
  • 學會或者理解什麼
  • 感受到情感聯絡

image032

上面名為Elevate 的應用在介面中採用了遊戲式的互動元件,使用者必須通過觸控螢幕回答問題或者修改答案通過這個環節,而在此過程中,漂亮的動效會讓他們會心一笑。另外,使用者可以藉助這個應用訓練他們的大腦,並且可以彼此分享得分。

聽起來這個應用很想是一個簡單的遊戲,對吧?但是這種體驗幾乎是使用者對於每個應用的期望。也正是這些不起眼的微互動設計,支撐起了2015年到2016年間最優秀的應用的體驗。正是這些微小的“數字化的時刻”讓使用者感受到了情感的聯絡,它也讓使用者感受到另一個人或者物件的感受和體溫。

微互動的四大元素

位於微互動領域前沿的就是我們前文所說的Dan Saffer。

如果你谷歌“微互動”,你搜到的幾乎都是他所提供的權威資訊和話題,以及他的那本《微互動》。Saffer 認為微互動在結構上是由四個部分構成的,而這個定義也更加便於你來理解或者創造微互動。

  • 觸發:觸發啟動微互動。比如點選心型圖示表示喜歡
  • 規則:互動的行為規則。使用者無法“看到”規則,但是可以通過反饋(下一個環節)來理解規則。在這個案例中,點選心型圖示之後,系統會將這一偏好新增到使用者的訂閱列表中,並且為之提供相關的推薦。
  • 反饋:為使用者設計微互動發生的時候返回的資訊的溝通機制。在這個案例中,使用者點選了心型之後,圖示會被填充上紅色,像真實的心臟一樣跳動起來,並且向使用者提示“已新增到閱讀列表!”告知使用者這個動作的含義。
  • 迴圈與模式:設定微互動的時長以及週期,並且設計它是否重複、隨著時間演變的過程。這個案例中,點選一秒內告知使用者資訊被新增到閱讀列表,甚至在6個月之內都可以提示使用者最初喜歡的頁面是哪個。

這幾個環節共同構造出一個互動的週期和迴圈。按照Saffer 所說,絕大多數的使用者從來都沒注意到微互動的存在,直到這些微互動的迴圈或者機制被打破,才意識到它們的存在。

你是否思考過反饋機制?

反饋是整個微互動機制中最重要的部分。反饋不僅是微互動中使用者和介面產生聯絡的環節,也是反映出微互動運作機制的環節。

想想看,早上7點,手機鬧鐘響起來,然後你會怎麼做?繼續打盹還是起來關閉?這個簡單的動作會造成兩種情況,關閉鬧鐘,或者等待9分鐘之後,鈴聲再次響起。這樣一來,使用者和系統之間的反饋迴路就形成了。

如果沒有使用者的初始反饋,那麼鈴聲就不會停止,也不會重置,如果預設的設定沒有次數限制的話,它會一遍又一遍一直響下去。

image051

其實代辦事項列表也遵循著類似的迴圈,最典型的就是上方的Wunderlist。當你點選左側的核取方塊的時候,觸發微互動,有趣的動效出現,劃掉對應的選項。這個瞬間,你會知道哪些事情已經搞定,哪些還有待完成。搞定了的任務逐步積累,會鼓勵你繼續完成更多的任務,催生進一步的互動。

雖然這個案例很簡單,但是你可以從中學到很多。它展示給我們使用者是如何在微互動的推動下產生參與感,並渴望進行下一步的。

細節設計是微互動的靈魂

處理好微互動的細節是能否成就一個專案的關鍵。互動是設計中無法忽視的重要組成部分。

image042

那麼你應該如何設計細節呢?你需要考慮的問題有哪些?

  • 微互動必須在重複使用中存在。純粹為了漂亮或者噱頭的動效是取巧,不是微互動。你的微互動應當長期存在,細節設計應當貼心而不讓人煩惱。
  • 簡單直白是關鍵。直白的語言,清晰的字型,鮮豔的色彩,結構化的設計,優秀的執行力,這些都比過度裝飾要強得多。
  • 微互動要人性化。文案應當設計得如同人在說話,在任何場合都應該保持充滿情感的溝通形式。
  • 注意文案。文案和每個時刻、每個場合都要貼合,保持尊重,保證對的基調,和輕鬆的氛圍。
  • 有趣的動畫,但是要適度。想想經典的Mac OSX Dock上跳動的圖示。動效不能對程式的響應造成負擔,然後你再考慮它的有趣、好玩和情懷。
  • 保持協調。對比度是你的朋友,但是要小心使用。在觸發微動效的瞬間,配色的重要性遠大於你的想象。確保每個時刻色彩的協調和一致。
  • 思考微互動的演進。微互動第一次出現和第一千次是完全一樣麼?它隨著時間推移如何改變?它觸發的流程變化的時候會有什麼區別?仔細想想這些細節吧。
  • 不要過度沉迷。過度設計是許多產品失敗的原因之一,平滑合理的設計才能造就對的產品。

相關文章