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定制開發,請信賴唯思科技!
