A 君導讀：相信不少人都有發現 app 里面有各種小動畫，例如刷新朋友圈，會有一個彩虹圓環在旋轉。為什么會有這樣的設計？看完 AppSo 分享的這篇譯文，你就明白了。

 

最優秀的產品往往會做好兩點：特點和細節。

 

特點能夠吸引眼球，細節則是留住用戶和脫穎而出的關鍵。

 

設計，歸根結底還是要以人為本，用戶就是首要的考量因素。雖然微交互往往被認為是輔助或次要的功能，但用戶只要發現那些小「彩蛋」，就會得到良好的使用感受。作為設計師，不僅要設計出微交互，同樣重要的是認識到微交互的潤物細無聲，才能讓設計人性化且有意義。

 

什么是微交互？

 

那么問題來了，到底什么是微交互？

 

微交互就是在產品中設計一個時刻，讓用戶完成某個微小的任務。

 

Dan Saffer 的《微交互》（Microinteractions）一書中寫道，那些微小的細節往往能夠達成以下的重要功能：

 

• 跟用戶交流反饋意見或某一動作的結果
• 完成一個獨立的任務
• 強化直接操控的感受
• 幫助用戶看到動作的后果并防止誤操作

一些典型的微交互例子包括：

 

把 iPhone 調到靜音模式后，手機在震動的同時屏幕上出現一個靜音模式的圖標：

 

 

微交互為何有效？

 

因為微交互能夠滿足用戶希望獲得認可的天性。用戶希望立刻知道自己的行為得到認可，希望得到視覺上的愉悅反饋。此外，微交互也能知道用戶正確使用系統。

 

微交互的用武之地

 

微交互有意思的地方在于，很多地方都可以用得上，幾乎每個潛在的動作都有用武之地。不過總的來說，微交互一般會出現在這些地方。

 

1. 顯示系統狀態

 

著名交互設計人 Jakob Nielsen 的十大可用性原則里，第一條就是要讓用戶知道發生了什么。用戶總是希望立刻得到反饋，但有些時候 app 需要時間來完成某個動作。

 

因此，界面就應該出馬，通過微交互讓用戶知道現在正在工作，安心等待即可。

 

上傳和下載的進度條。圖片來源：Dribbble。

 

或是告訴用戶進行到哪里了：

 

 

滾動瀏覽條

 

總結：別讓用戶覺得煩——要讓他們時刻知道并看到進度（例子：進度條能夠抓住用戶注意力，避免產生疑惑）。

 

2. 強調變化

 

有時候，我們得確保用戶看到通知，小動畫就是很好的展示方式，能夠吸引注意力，防止用戶忽略重要信息。

 

 

收到新信息啦。圖片來源：Dribbble。

 

總結：在很多情況下，動畫元素是用來吸引用戶關注重要細節的。這里要注意遵守 KISS 原則 ——微交互應該輕小且簡單（small and simple）。

 

3. 情景切換

 

用動作效果來在場景轉換之間平滑過渡，向用戶闡明一屏上的信息元素變化。這對于移動設備和智能手表來說尤其重要，因為一屏沒法容納太多的信息。

 

總結：在不同頁面之間做好清晰的導航，讓用戶知道自己從哪里跳到哪里。兩種視覺狀態的切換應該清晰、平滑、不費勁。記得統一主題，從而讓所有互動成為一體。

 

4. 視覺化輸入

 

數據輸入是任何一個 app 最重要的功能之一，微交互能夠把這個乏味無聊的過程變得更有意思。你可以直接采用現有的元素向用戶做出反饋。

 

 

來源：Dribbble。

總結：微交互能夠幫助呈現信息，讓用戶實現目標。

 

5. 鼓勵用戶動起來

 

微交互能夠誘導用戶跟 app 互動起來，從而在用戶體驗里制造共鳴。不過要確保，設下的視覺線索和動畫適合自己的用戶群。

還有，牢記壽命原則——你設計的微交互會不會在第一百次出現時讓用戶生厭？或者說，你的設計能不能在任何情景下保持意義清晰且不突兀？

 

 

總結：用戶的情感狀態對其互動起著重要影響。從情景、用戶調研出發，讓設計經得起重復使用。

重點！（敲黑板）

 

• 微交互扮演的是促進互動的角色，一般用在跟反饋、通知、發出指令的情景中。
• 微交互的目標是以不會讓用戶無聊或分心的方式即時傳遞信息、節約時間，就像平時做的鬼眼。
• 了解用戶，理解微交互背后的情景，能夠讓微交互更精準有效。
• 微交互要經得起時間的考驗。第一次覺得好玩的東西可能會在多次重復后變得煩人。
• 微交互要人性化，要注重視覺平衡。使用的動態效果要足夠流暢，微交互才能栩栩如生。

 

結論

以關懷用戶為出發點開始微交互的設計，思考人們如何使用產品、如何利用它來工作，在設計細節時以普通用戶的思維模式為基礎。

 

每一處細節都要足夠關注，才能讓你的人機交互設計易用好用。好設計是全面發展的「三好學生」，得從功能到微互動層面都無可挑剔。

 

沈陽App定制開發，請信賴唯思科技！