Micro Interactions 微互動


Smart Thinking: Microinteractions Animation from Smart Design on Vimeo.


一個設計良好的產品包含:特色跟細節。特色吸引人,細節則留住人。MicroInteractions 就屬於細節。這裏的細節是指傳遞情緒系統:感官的部分,他們看起來如何、感覺如何、用起來?


微互動包含四個部分


  1. 觸發( Trigger ): 怎麼開始,是手動控制;點擊按鈕,或是透過系統;條件具足時觸發啟動: 另一種示範。
  2. 規則 (Rules): 藉由定義好的事件流程,決定微互動的流程。互動時,什麼要做,什麼不行。
  3. 回饋 ( Feedback): 使用者看不到 Rules,透過 Feedback 來了解 Rules。
  4. 循環&模式 ( Loops and Modes: Mode ):只有在非必要且不常出現的動作中被使用,否則容易破壞整體的流程。Loops 決定微互動的時間有多長、動作有多久;如果重複觸動,怎麼再出現。
手動觸發

規則:決定什麼可以,什麼不行。當手機與電腦同步登入 Line 後,手機的微互動機制會提示我資訊。

回饋機制,讓使用者明白Rules 是什麼。
模式的設計,要簡單直白,讓使用者一路到底,不能因為其他行為破壞整個微互動機制。

週期可以是告訴使用者目前的作業階段,並了知整個微互動的長度,或是有多久。


規劃準則

  • 預先呈現資料:決定何種產品資訊使用者會感興趣,如何在畫面上露出。
  • 防止人為錯誤:不要讓使用者的行為破壞整個互動機制。
  • 直接了當:直接傳遞標靶訊息
  • 較長的循環:如果使用者回來第二次、第十次、一百次,這個互動該怎麼呈現!

參考範例:










Unknown

Instagram