微交互：APP設計的秘密

前言

可能作為前端大家有時候會關注功能的時候，但移動端上如果交互沒看到響應的話會讓用戶一臉茫然，不知道自己剛才的操作是否有用，所以可以補充點這方面的。今日早讀由@厲嗣傲翻譯授權分享。

正文從這開始～

我們日常生活中一個微交互的例子。

好的產品都做兩件事：功能和細節。功能是吸引用戶，細節是讓他們留在這裡。正是細節使我們的產品從其他竟品中脫穎而出。

微交互是一個很好的反饋。

所有的設計方法都是以用戶為中心、用戶作為主要焦點。微交互通常被認為是輔助的或第二級的，它實際上對於用戶來說是創造一種幸福的感覺。作為一個設計師，認識到微交互是和設計一樣重要的，你必須創造一些人性的東西。

什麼是微交互呢？

微交互是產品所包含的一個個小細節。

作為第一個設計微交互的人，Dan Saffer在書中描述，這些微小的細節通常輔助基本功能：

交互反饋或觸發的結果。

完成個人任務。

加強直接操縱的感覺。

幫助用戶理解他們的行為，防止出錯。

一些微交互的例子：

切換iPhone為靜音時，振動和靜音模式圖標一起觸發。

點擊界面動效，顯示點擊效果（上空盤旋時改變顏色的按鈕）。

GIF/24K

為什麼微交互有用呢？

因為它對用戶的反饋吸引著用戶。用戶的行為立即得到視覺反饋，這是他們很希望得到的。微交互也可以引導用戶如何使用系統。

確認機會

微交互的好處是可以插入在各種地方。一般來說，他們多出現在以下地方：

顯示系統狀態

Jakob Nielsen - 第一個使用可用性啟發式原則的人：讓用戶一直了解產品的進度，用戶得到期望得到的反饋。但是有些情況一個應用需要一段時間來完成一個操作。

所以界面應該一直讓用戶知道正在發生著什麼。

GIF/689K

上傳和下載進度條。

或者用戶所在的位置：

GIF/1.1M

項目滾動條

注意：不要讓你的用戶感到厭煩——讓用戶了解並且展示進度給他們（例如進度條是為了吸引用戶）。

變化高亮

有時我們必須顯示通知確保用戶看到。動畫就可以幫助我們。它會吸引用戶的注意力，不會讓他們漏掉重要的東西。

GIF/23K

新消息通知

注意：在許多情況下使用動效來吸引用戶注意到重要細節。應該使用KISS原則——微交互應該是小而簡單的。

保持環境

用戶使用動效在導航之間平滑的轉換，當屏幕上元素變化時進行解釋。特別是移動設備和智能手錶上，因為它不可能在一個小的屏幕上顯示大量的信息。

Material Design

注意：在不同的頁面之間維持清晰的導航，讓用戶了解每個頁面的內容。兩個視覺狀態之間的過渡應該清楚、光滑、毫不費力。統一主題——將所有交互聯繫在一起創建一個主題。

可視化輸入

輸入數據是任何應用最重要的一個元素。微交互把這個過程轉化為某種特殊的東西。你可以使用現有元素提供反饋。

注意：微交互幫助顯示信息，幫助用戶完成目標。

CTA按鈕

微交互實際上激勵用戶進行交互的作用。他們在用戶體驗中產生共鳴。但是確保視覺和動效是適合你的用戶。並記住——當使用100次之後將變得令人厭倦了呢還是仍是清楚不唐突的呢？

GIF/161K

注意：關注用戶的情緒，因為他們在用戶交互中發揮巨大的作用。在環境、用戶研究和設計重複使用。

需要記住的

微交互是輔助用戶交互的，進行反饋、通知和指令。

微交互是節省時間的，這種立刻反饋的方式不會分散用戶的注意力。像狡猾的眼睛一樣抓住用戶的注意力。

了解你的用戶和產品背景會讓微交互更精確和有效。

微交互必須禁得住長期的使用。有的第一次看起來有趣的可能100次使用後變得惱人了。

在微交互中添加人性，專註於視覺上的和諧。運動應該是流暢的微交互來源於生活。

總結

用心的設計。考慮人們如何使用以及他們常使用的設備。注意每一個細節是成功的關鍵。偉大的設計會是從部分的微交互到「完整的全棧」。

關於本文

譯者：@厲嗣傲

譯文：http://www.ui.cn/detail/276813.html

作者：@Nick Babich

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

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！