動畫效果是用戶體驗設計中繞不開的環(huán)節(jié)迄薄，而在移動端交互當中琅关，動效是作為轉(zhuǎn)場的潤滑劑，承上啟下的重要環(huán)節(jié)而存在讥蔽。無論是發(fā)送信息涣易，打開設置，選中元素冶伞，導航到下一個頁面新症，這些變化發(fā)生的時候，動效讓這一切不那么突兀响禽，自然地過渡徒爹，呈現(xiàn)狀態(tài)變化荚醒，幫助用戶更清晰的明白當前的狀態(tài)，這是絕佳的方式隆嗅。
在今天的文章當中界阁，我們盡可能系統(tǒng)地呈現(xiàn)動畫和動效在視覺和交互上的常見功能和作用。
呈現(xiàn)系統(tǒng)狀態(tài)
當用戶通過交互觸發(fā)界面行為的時候胖喳，他們希望能夠看到視覺上的響應——整個交互系統(tǒng)應該明確地表示它已經(jīng)收到了請求并且進行處理泡躯。以下是動效反饋讓用戶受益的幾種常見的情況：
確認用戶行為。系統(tǒng)收到用戶的反饋之后丽焊，通過動效告知用戶它已經(jīng)收到反饋了较剃。視覺反饋防止了用戶再進行更多的操作。
通知用戶他們交互的結(jié)果技健。
下拉刷新更新內(nèi)容写穴。以加載指示器為代表的視覺反饋告知用戶，系統(tǒng)已經(jīng)開始處理之前的請求了雌贱。
微妙的動畫能夠幫助用戶理解正在發(fā)生的事情啊送。
等待內(nèi)容加載時的動畫。加載不一定是無聊的⌒拦拢現(xiàn)在幾乎所有的 APP 當中都會在加載的時候借助微妙的動畫來組織用戶離開删掀。加載動畫給予用戶「信息正在逐步加載」的視覺反饋，因此用戶會在這個過程中感覺時間沒有實際上那么快导街。
用動效連接多步驟中不同的步驟
有的時候披泪，用戶需要通過一系列的步驟來完成操作，步驟和步驟之間是需要連接起來的搬瑰，借助動畫款票，幫助用戶將流程串聯(lián)起來，順暢地完成整個歷程泽论。
下面的案例當中艾少，展示了動畫是如何將線性的事件串聯(lián)起來的。
設計師能夠使用動畫創(chuàng)建漸進式的展現(xiàn)形式翼悴。漸進式的展現(xiàn)能夠減少一次展現(xiàn)出來的信息量缚够，使得界面更加順暢，易于學習鹦赎。下面是漸進式展現(xiàn)信息的案例：
引入新元素
當我們要在頁面上引入新的元素或者控件的時候谍椅，我們會嘗試引導用戶的注意力到特定的對象上，并且告訴他們「為什么會有一個新東西進來」的原因古话。在引入新元素的時候雏吭，動效能夠幫你界定這個元素和其他元素的關(guān)系，以及層次結(jié)構(gòu)陪踩。
給用戶以定位感
動畫效果可以幫助用戶構(gòu)建更好的空間感杖们。對于移動端用戶而言尤其重要悉抵，因為小屏幕上用戶的交互是非常敏感的，沒有空間感是很容易迷失的摘完。
我們可以使用動效來引導用戶姥饰，動效有助于闡釋界面的「空間變化」，也可以更好的解釋界面之間的切換或者變化孝治，通過為用戶提供相關(guān)的信息媳否，防止用戶迷失。
在下面的案例當中荆秦，浮動操作按鈕（FAB）會變化為一個頁頭，中間是動效則展示了這個變化過程力图，也說明了兩者之間的關(guān)系步绸。
動畫能夠幫你建立元素之間的關(guān)系。
減少認知負荷
當用戶需要花費心力去盡力理解某個事物的時候吃媒，這個認知負荷就很重了瓤介。一般而言，越省心的產(chǎn)品赘那，認知負荷就越低刑桑。如果一個產(chǎn)品認知負荷重，用戶不花精力就很難理解募舟。
作為設計師祠斧，我們的目標應該是創(chuàng)建易用的界面，如果設計得當拱礁，動畫能夠幫助用戶減少認知負荷琢锋。
在幾乎任何 APP 當中，用戶都需要填寫一些表單呢灶，許多表單的占位符常常會作為標簽而存在吴超。當用戶點擊的時候，這個占位符會消失鸯乃。如果之前用戶沒看清楚鲸阻，這會兒就沒法看了，自然就很難弄清楚這個字段是什么缨睡。如果這個字段能夠在點擊填寫的時候鸟悴，能浮動上去，用戶就不會迷惑了奖年。
當用戶需要輸入信息的時候遣臼，不要指望用戶的記憶，關(guān)鍵信息要可見拾并。
幫助用戶理解功能變化
當元素在交互之后功能發(fā)生改變之后揍堰，動效能夠幫助用戶理解功能上的變化鹏浅。例如，當用戶點擊按鈕之后屏歹，這個按鈕將會帶來什么樣的改變隐砸。通過動效，用戶可以獲得「這個東西的功能是什么」的答案蝙眶。
最常見的案例是管理狀態(tài)改變的開關(guān)季希，當點擊按鈕開關(guān)的時候，狀態(tài)發(fā)生變化幽纷。
在某些情況下式塌，單個元素的變化將會引起整個視圖的變化，比如漢堡按鈕友浸，點擊之后菜單彈出峰尝，而漢堡按鈕變成 X 關(guān)閉按鈕。
結(jié)語
動畫收恢，或者說動效的功能是非常強大的武学，它解決了界面中許多問題，強化了交互和用戶互動伦意，讓產(chǎn)品更加自然直觀火窒，甚至可以闡述故事。
翻譯：陳子木
