Heyu：在上一篇文章《動(dòng)效設(shè)計(jì)基礎(chǔ)（一）：緩動(dòng)與運(yùn)動(dòng)曲線》中，我們討論了動(dòng)效的幾種常見形式以及緩動(dòng)的重要性。那么，我們?yōu)槭裁匆脛?dòng)效呢？除了酷炫好玩以外，動(dòng)效在用戶體驗(yàn)設(shè)計(jì)中其實(shí)發(fā)揮著很重要的作用。在本文中，我們就來(lái)看看動(dòng)效設(shè)計(jì)在用戶界面設(shè)計(jì)中的應(yīng)用。

一、吸引注意力

人類天生就對(duì)運(yùn)動(dòng)的物體格外注意，因此UI動(dòng)效自然是吸引用戶注意力的一種很有效的方法。在iOS鎖屏上，唯一的動(dòng)效就是“滑動(dòng)并解鎖”幾個(gè)字上從左向右運(yùn)動(dòng)的高光。這種動(dòng)效盡管細(xì)微，但還是能引起用戶注意。同時(shí)也在引導(dǎo)用戶滑動(dòng)的方向：

當(dāng)用戶輕觸Safari的地址欄時(shí)，界面發(fā)生了3個(gè)變化：

（1）地址欄寬度變窄，出現(xiàn)取消按鈕

（2）出現(xiàn)書簽

（3）鍵盤彈出

在這幾個(gè)動(dòng)畫中，幅度最大的動(dòng)作是鍵盤彈出。這樣把用戶的注意力吸引到鍵盤上，有利于接下來(lái)要進(jìn)行的輸入操作。

通過(guò)動(dòng)效來(lái)提示用戶操作比傳統(tǒng)的“點(diǎn)擊此處開始 ”這樣的提示往往更直接，也更美觀。在Hitman Go，這款游戲的開始界面上，標(biāo)題中的“Go”同時(shí)也是開始游戲的按鈕。游戲的設(shè)計(jì)者讓這個(gè)按鈕有規(guī)律性地跳動(dòng)來(lái)提示用戶點(diǎn)擊。

二、提供反饋

在觸摸屏上點(diǎn)按虛擬元素，不像按下實(shí)體按鈕一樣能夠感覺到明確的觸覺反饋。此時(shí)，動(dòng)效就成為了一種很重要的反饋途徑。比如在Android Material Design設(shè)計(jì)語(yǔ)言中，界面元素會(huì)伴隨著用戶輕觸呈現(xiàn)圓形波紋：

以及在iOS輸入解鎖密碼出錯(cuò)時(shí)，小圓點(diǎn)會(huì)來(lái)回晃動(dòng)，模仿?lián)u頭的動(dòng)作來(lái)提示用戶重新輸入：

有些動(dòng)效反饋非常細(xì)微，但是組合起來(lái)卻能傳達(dá)很復(fù)雜的信息。例如我們天天都見到但很少去思考的一個(gè)動(dòng)效，iOS的相機(jī)對(duì)焦：

這個(gè)對(duì)焦反饋其實(shí)依次提供了相機(jī)三個(gè)狀態(tài)的信息： 首先，對(duì)焦框由外向內(nèi)出現(xiàn)。這種瞄準(zhǔn)式的動(dòng)作是在告訴用戶，相機(jī)正在努力聚焦中：

然后，聚焦框閃爍，表明鎖定聚焦和曝光：

最后，聚焦框消失，提示用戶可以拍攝了：

在這短短不到三秒的時(shí)間里，通過(guò)三個(gè)動(dòng)畫就向用戶展示了相機(jī)的對(duì)焦過(guò)程。

三、加強(qiáng)方向感

當(dāng)我們?yōu)橐苿?dòng)界面設(shè)計(jì)頁(yè)面間的切換效果時(shí)，例如查看照片、進(jìn)入聊天等，合理的動(dòng)效能幫助用戶建立很好的方向感，就像設(shè)計(jì)合理的公路和路標(biāo)能夠幫助人們認(rèn)路一樣。一個(gè)優(yōu)秀的案例就是iOS相冊(cè)的設(shè)計(jì)：

用戶輕觸照片后，照片是從列表中的位置上放大。這樣就建立了放大的照片與列表中縮略圖的聯(lián)系，用戶能很確信現(xiàn)在打開的照片就是自己點(diǎn)擊的那張。相應(yīng)地，點(diǎn)擊返回，照片就縮小到列表上的位置，指引用戶找到瀏覽的位置：

如果不采用這樣的縮放動(dòng)畫，而是從右側(cè)進(jìn)出，就建立不了照片和列表之間的聯(lián)系了：

這種保持內(nèi)容上下文關(guān)系的縮放動(dòng)效在iOS的很多界面中都能見到，例如主屏幕的文件夾、日歷和App切換界面：

四、傳遞深度信息

動(dòng)效除了表現(xiàn)元素在界面上的位置、大小變化，還可以用來(lái)表現(xiàn)元素之間的層級(jí)關(guān)系。借助陀螺儀和加速度傳感器，讓界面元素之間產(chǎn)生微小的位移從而產(chǎn)生視差效果，這樣可以將不同層級(jí)的元素區(qū)分開來(lái)。例如iOS主屏幕的視差效果：

這樣的效果是如何產(chǎn)生的呢？元素“距離”屏幕“越遠(yuǎn)”，由運(yùn)動(dòng)帶來(lái)的位移就越大，當(dāng)多層元素同時(shí)運(yùn)動(dòng)時(shí)，就可以產(chǎn)生視差的錯(cuò)覺了。這種手法在動(dòng)畫片和橫向滾動(dòng)的游戲（如超級(jí)瑪琍）中經(jīng)常用到。

我們?cè)谥谱饕粋€(gè)新聞H5專題時(shí)，也運(yùn)用了類似的手法，讓用戶就像看立體全景圖片一樣來(lái)瀏覽新聞圖片：

五、小結(jié)

在本文中，我們討論了動(dòng)效的四個(gè)重要的應(yīng)用場(chǎng)景：

（1）吸引注意力

（2）提供反饋

（3）加強(qiáng)方向感

（4）傳達(dá)深度信息

通過(guò)以上的案例和討論，我們不難意識(shí)到，不能把動(dòng)效作為讓產(chǎn)品酷炫的手段，也不能把它當(dāng)作產(chǎn)品的某種功能或者亮點(diǎn)。動(dòng)效是為用戶使用產(chǎn)品的核心體驗(yàn)服務(wù)的，只有設(shè)計(jì)好產(chǎn)品的核心體驗(yàn)，并合理使用動(dòng)效才能最大程度地發(fā)揮動(dòng)效的優(yōu)勢(shì)。

【動(dòng)效設(shè)計(jì)好文】

告訴你為什么要做動(dòng)效設(shè)計(jì)：
《設(shè)計(jì)師的經(jīng)驗(yàn)總結(jié)！我們?yōu)槭裁葱枰獎(jiǎng)有гO(shè)計(jì)？》

改善動(dòng)效實(shí)戰(zhàn)：
《點(diǎn)睛還是敗筆？手把手教你改善界面交互動(dòng)畫（附案例）》

Windows用戶動(dòng)效設(shè)計(jì)工具：
《WINDOW黨福利！這才是適合設(shè)計(jì)師的免費(fèi)動(dòng)效神器PIXATE》

原文地址：ued.qq

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量130萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com