著名魔術(shù)師達里爾·菲茨基（Dariel Fitzkee）曾經(jīng)說過，“魔術(shù)既要有細節(jié)也要有表演。”交互設計就是這樣。設計師們想把頁面布局作好，如果細節(jié)處理不好，解決方案便會失敗。魔術(shù)就在于細節(jié)。這就是為什么精心設計的微交互會讓體驗大幅度提升。
顯示系統(tǒng)狀態(tài)
JakobNielsen的第一個啟發(fā)式用戶界面設計聲明：“系統(tǒng)應該始終在合理的時間內(nèi)做出適當?shù)姆答佔層脩袅私庹诎l(fā)生的事情。”這意味著用戶界面應該通過提供反饋讓用戶及時了解正在發(fā)生的事情。應用程序不應該讓用戶猜測——它應該告訴用戶發(fā)生了什么，微交互可以通過適當?shù)囊曈X反饋幫助用戶理解。
數(shù)據(jù)上傳和下載過程是應用微交互動畫的絕佳機會。
數(shù)據(jù)下載動畫 (Image: Nick Buturishvili)
另一個動畫是“下拉刷新”，它在移動設備上表示內(nèi)容更新過程。一個令人愉快的刷新動畫可以讓用戶咯咯地笑。
下拉刷新（圖片：Toma Reznichenko）
重點：動畫提供應用程序進程狀態(tài)的實時通知，使用戶能夠快速了解正在發(fā)生的事情。
使按鈕和操作可感知
用戶界面元素，如按鈕和控件，即使它們位于一層玻璃的后面，也應該是可感知的。按鈕可以模仿常見物理對象的交互。簡單的說，你可以通過對用戶輸入的視覺響應來增加清晰度。
（圖片來源：谷歌）
重點：視覺反饋之所以起作用，是因為它能滿足用戶對確認的自然需求。點擊一個應用程序感覺很好，因為你知道發(fā)生了什么。
創(chuàng)建有意義的過度
你可以在導航之間平滑的動畫向用戶傳遞信息，解釋屏幕上元素排列的變化或強化元素的層次結(jié)構(gòu)。
圖標可以從一種形狀變成列外一種形狀，在不同的時間提供雙重功能。
（圖片來源：谷歌）
動效設計可以有效的引導用戶的注意力，既可以提供信息，也可以給用戶帶來快樂。這對移動設備和智能手表幫助非常大，因為在這些屏幕上無法輸入大量的信息。
Apple的ios UI 的轉(zhuǎn)場就是一個很棒的例子。在下面的示例中，用戶選擇文件夾或應用程序并放大到其詳細視圖（或直接到應用程序的主屏幕），
（圖片來源：Rian Van Der Merwe）
另一個很好的例子是通過顏色和持久元素在兩個狀態(tài)之間創(chuàng)建視覺連接的動畫。這使得過渡平穩(wěn)而輕松。
重點：微交互能夠在頁面之間建立可視連接，并增加UI的清晰度。
幫助用戶開始使用
微交互在用戶入門期間是非常有用的。入門流程中完美的用戶體驗和動畫會對首次使用該應用程序的用戶產(chǎn)生巨大影響。他們通過突出顯示最重要的功能和控件，在應用程序啟動后指導和教育用戶。
圖片：Ramotion
重點：微交互可以展示信息并幫助用戶有效地實現(xiàn)目標。
突出顯示UI界面中的變化
微交互能夠引起用戶的注意。在很多情況下，動畫用于吸引他們注意重要的細節(jié)（例如消息通知）。但是，請確保動畫具有功能性，適用你的用戶。
通知（圖片來源：Arjun Kani）
重點：微交互可以為用戶提供良好的視覺提示。
添加令人愉快的細節(jié)
微交互動畫的最基本用途是過渡。但是，當動畫以超出標準操作范圍的方式使用時，應用程序能夠真正的取悅用戶。下面的按鈕能夠完美地改變狀態(tài)并提供雙重功能：通知用戶并創(chuàng)造一個奇跡。
社交媒體分享（圖片：Kei Sato）
重點：時刻關注用戶情感，這在交互中起著非常重要的作用。
設計微交互時應該考慮什么？
當你創(chuàng)建包含過多元素的視覺設計時，請記住以下幾點：
1、使微交互幾乎不可見且完全正常。
確保動畫符合功能目的，不會感到尷尬或惱人。對于頻繁和次要的操作，響應應該是適度的，而對于不常見和主要的操作，響應應該更加強烈。
2、保持持久
微交互必須能夠長期使用。在第一百次使用后，第一次看起來有趣的東西也可能會變得煩人。
3、遵循Kiss原則
過渡設計的微交互可能是致命的。微交互不應該使屏幕過載，導致長時間的加載過程。相反，他們應該通過即時傳遞有價值的信息來節(jié)省時間。
4、不要從零開始
你要時刻了解目標受眾及其背景。利用這些知識使你的微交互更加精確和有效。
5、與其他UI元素創(chuàng)建視覺和諧
微交互應該與應用程序的風格相匹配，幫助產(chǎn)品建立品質(zhì)感。
作者：Nick Babich
原文：www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/
譯者：Coldrain1
個人主頁：i.ui.cn/ucenter/310170.html
