微交互可用於哪些地方,有何作用?

最好的產品會把兩件事做好:功能和細節。功能可以吸引人們使用你的產品。細節可以讓他們留下來,細節可以使我們的應用在競爭中脱穎而出,而微交互就是讓產品設計脱穎而出的亮點。

微交互可用於哪些地方,有何作用?

微交互是一種能給用户愉快反饋的細節。

所有交互設計方法都指向「以人為本」的設計原則——用户是焦點。微交互通常被認為是輔助的或次要的,但是一旦用户感知到,微交互能創造一種很好的體驗。作為設計師或者產品經理,認識到微交互的隱形作用與設計它們一樣重要。

微交互是什麼?

微交互是完成一項小任務的產品瞬間。

正如Dan Saffer的書《微交互》中首次描述的那樣,這些微小的細節通常具有以下基本功能:

  • 溝通反饋或呈現採取行動的結果。
  • 完成一項個人任務。
  • 增強直接操縱感。
  • 幫助用户可視化其操作,並防止用户犯錯。

特定的微交互的一些示例:

當您將iPhone切換為靜音時,手機會有震動,且屏幕上有靜音模式圖標晃動的動畫效果。

微交互可用於哪些地方,有何作用?

界面動畫可以顯示點擊後的效果(將鼠標懸停時按鈕的顏色也會變化)。

微交互可用於哪些地方,有何作用?

資料來源:Dribbble

為什麼微交互有效

微交互之所以起作用,是因為它們順應了用户對「確認」的自然渴望。用户想要立即知道系統已經立即接受他們的動作,希望系統會給予一種視覺反饋。微交互還可以指導用户如何操作。

微交互的作用

微交互的優點之一是可以將它們插入任何潛在動作周圍的不同位置。通常,它們通常在以下幾個方面出現:

1. 顯示系統狀態

akob Nielsen的「第一個可用性啓發式原則」指出:讓您的用户瞭解正在發生的事情。用户希望立即得到響應。但是在某些情況下,應用程序需要一些時間才能完成操作。

因此,界面應使用户對正在發生的事情有所瞭解。

微交互可用於哪些地方,有何作用?

進度條,用於上傳和下載。資料來源:Dribbble

要點:不要讓您的用户感到無聊——讓用户瞭解情況並向他們顯示進度(例如加載進度吸引了用户的注意力,同時也讓用户不至於迷惑)。

2. 突出顯示變化

有時我們必須顯示通知以確保用户看到它。動畫可以提供幫助。它會引起用户的注意,不讓他們忽略重要的內容。

微交互可用於哪些地方,有何作用?

新的消息。資料來源:Dribbble

要點:在許多情況下,動畫效果吸引用户關注重要細節。您應該使用KISS原理——微交互應該很小且很簡單。

3. 保持過渡

使用動畫在上下頁面之間平穩地過渡,呈現屏幕上元素排列的變化。移動設備和智能手錶尤其如此,因為根本不可能在一個屏幕上容納很多信息。

微交互可用於哪些地方,有何作用?

資料來源:Dribbble

總結:在不同頁面之間保持清晰的導航,讓用户瞭解內容從哪裏出現。兩種視覺狀態之間的過渡應該清晰,流暢且毫不費力。主題統一——創建統一主題以將所有交互聯繫在一起。

4. 可視化輸入

數據輸入是任何應用程序中最重要的元素之一。微交互使這一過程變得特別。您可以使用微交互來提供反饋。

微交互可用於哪些地方,有何作用?

資料來源:Dribbble

總結:微交互有助於展示信息並幫助用户完成操作。

5. 呼籲行動

微交互可以鼓勵用户進行操作。這就是用户體驗中的同理心。但是,請確保視覺提示和動畫適合您的用户。牢記——微交互使用100次會變得煩人或者變得不清楚不矚目。

微交互可用於哪些地方,有何作用?

重點:關注用户情緒——它們在用户交互中起着重要作用。從場景和用户研究中汲取經驗,以供重複使用。

要記住的事情
  • 微交互可以幫助提供反饋,通知和説明。
  • 微交互應該通過不打擾或分散用户注意力的方式,即時交流信息節省時間。
  • 瞭解您的用户和使用場景將使微交互更加精確和有效。
  • 微交互雖然能長期使用。但第100次使用後,第一次看起來很有趣的事情可能會變得令人討厭。
  • 微交互應該人性化,並專注於視覺和諧。微交互應該流暢自然。
結論
  1. 微交互應該精心設計。在設計這些小片段時,請思考人們如何使用和使用他們的場景是什麼,並遵循常見的思維模式。
  2. 注意每一個細節都是您成功實現人機交互易於使用的關鍵。
  3. 從功能部件到微交互,出色的設計必須“全棧式”進行。

作者 :Nick Babich

原文鏈接:https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf

編譯作者:熊不知;公眾號:產品經理熊不知(ID:xiongbuzhia),人人都是產品經理專欄作家。5年產品經理經驗,專注海外社交APP和編輯工具類APP的產品設計。

本文由@熊不知 翻譯發佈於人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基於CC0協議

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 1774 字。

轉載請註明: 微交互可用於哪些地方,有何作用? - 楠木軒