動(dòng)效可以讓界面變得更加生動(dòng)和易于使用，盡管擁有很大的潛力，但動(dòng)效設(shè)計(jì)可能是在設(shè)計(jì)領(lǐng)域中最不被人熟練掌握的技能。所以，我們一起來(lái)看看谷歌動(dòng)效設(shè)計(jì)師經(jīng)驗(yàn)。

之前有篇比較類(lèi)似的文章，《譯文丨做好動(dòng)效你需要了解的細(xì)節(jié)》只是那篇文章跟偏重理論，而谷歌設(shè)計(jì)師寫(xiě)的這篇文章用到的案例會(huì)更加真實(shí)具體。本文也有很多實(shí)用的觀點(diǎn)，相信希望大家讀完會(huì)有不少收獲！

下面來(lái)看譯文：

動(dòng)效可以讓界面變得更加生動(dòng)和易于使用，盡管擁有很大的潛力，但動(dòng)效設(shè)計(jì)可能是在設(shè)計(jì)領(lǐng)域中最不被人熟練掌握的技能，這可能是因?yàn)閯?dòng)效算是在UI領(lǐng)域里的一個(gè)新成員。視覺(jué)和交互在早起的GUI中就已經(jīng)被應(yīng)用，但動(dòng)效只有在硬件設(shè)備都跟上來(lái)后才會(huì)比較流暢的被使用。

UI動(dòng)效和傳統(tǒng)動(dòng)畫(huà)之間的關(guān)系也很容易被混淆，傳統(tǒng)動(dòng)畫(huà)需要去掌握Disney的12個(gè)動(dòng)效基本原則，那是不是意味著UI動(dòng)效同樣很復(fù)雜，或者說(shuō)對(duì)于關(guān)鍵數(shù)值會(huì)拿捏不準(zhǔn)？

如果讓我來(lái)評(píng)價(jià)的話，在動(dòng)效應(yīng)用最廣泛的UI領(lǐng)域，設(shè)計(jì)上應(yīng)該是比較簡(jiǎn)單的。

從哪里開(kāi)始

動(dòng)效主要的作用通過(guò)動(dòng)態(tài)演示UI元素的變化來(lái)引導(dǎo)用戶操作，動(dòng)畫(huà)也有能力通過(guò)圖標(biāo)，Logo，插圖為一款應(yīng)用塑造性格，但不管怎樣，動(dòng)畫(huà)易用性的優(yōu)先級(jí)肯定是要高于增加設(shè)計(jì)創(chuàng)意形式。在展示你的動(dòng)畫(huà)能力之前，讓我們先回到最核心的UI動(dòng)效基礎(chǔ)上來(lái)，去關(guān)注UI中的導(dǎo)航和轉(zhuǎn)換。

轉(zhuǎn)換模式

當(dāng)設(shè)計(jì)一個(gè)導(dǎo)航轉(zhuǎn)換時(shí)，簡(jiǎn)單和統(tǒng)一就是2個(gè)最關(guān)鍵的點(diǎn)。為了實(shí)現(xiàn)這一點(diǎn)，我們選擇了2種類(lèi)型的動(dòng)效模式：

1. 基于容器的轉(zhuǎn)換
2. 沒(méi)有容器的轉(zhuǎn)換

1. 基于容器的轉(zhuǎn)換

像文本，圖標(biāo)和圖片這樣的元素都是被分組在容器中

如果界面中涉及到一個(gè)容器，比如按鈕、卡片或者列表，那么轉(zhuǎn)換就是基于容器的動(dòng)畫(huà)。容器通常很容易根據(jù)它們的可見(jiàn)邊識(shí)別出來(lái)，但是要記住，它們也可以是在轉(zhuǎn)換之前不可見(jiàn)，就是沒(méi)有分割線的列表一樣。這種模式過(guò)程分為三個(gè)步驟來(lái)做：

（1）先使用Material標(biāo)準(zhǔn)的緩動(dòng)動(dòng)畫(huà)讓容器動(dòng)起來(lái)（先快速開(kāi)始，然后緩慢結(jié)束）。在下面這個(gè)例子中，容器的大小和圓角半徑發(fā)生了改變，從一個(gè)圓形按鈕變化到一個(gè)填充屏幕的矩形。

（2）容器中的元素以適配容器寬度進(jìn)行縮放，元素被固定在頂部并隱藏在容器內(nèi)，這樣就在容器和內(nèi)部元素之間創(chuàng)建了清晰的聯(lián)系。

把動(dòng)畫(huà)進(jìn)行慢放，可以看清元素在容器內(nèi)是如何隱藏和縮放。

（3）在轉(zhuǎn)換過(guò)程中消失的內(nèi)容元素會(huì)隨著容器的加速而淡出，當(dāng)容器減速時(shí)，新的內(nèi)容元素會(huì)淡入。當(dāng)元素快速移動(dòng)時(shí)，通過(guò)淡入淡出元素來(lái)實(shí)現(xiàn)無(wú)縫的轉(zhuǎn)換效果。

把動(dòng)畫(huà)慢放，用來(lái)說(shuō)明如何使用淡入淡出效果

把這個(gè)設(shè)計(jì)模式應(yīng)用于所有容器轉(zhuǎn)換上，將會(huì)建立一致的效果。它還能明確開(kāi)始和結(jié)束之間的關(guān)系，因?yàn)槭怯萌萜鲃?dòng)畫(huà)進(jìn)行引導(dǎo)的。為了展示這種模式的靈活性，下面列舉了5種不同的組合形式：

把動(dòng)畫(huà)進(jìn)行慢放，以說(shuō)明容器動(dòng)畫(huà)是如何通過(guò)開(kāi)始和結(jié)束來(lái)引導(dǎo)用戶視線，建立連接的

有些容器只是使用Material動(dòng)畫(huà)的標(biāo)準(zhǔn)緩動(dòng)從屏幕外滑入， 它滑動(dòng)的方向取決于與之關(guān)聯(lián)的組件的位置。 例如：點(diǎn)擊左上角的抽屜導(dǎo)航圖標(biāo)，菜單將從左側(cè)滑入容器。

如果容器是從屏幕邊界進(jìn)入，則它會(huì)淡入并放大。 動(dòng)畫(huà)不是從0％的比例開(kāi)始出現(xiàn)，而是從95％開(kāi)始，以避免過(guò)度彈跳。 縮放動(dòng)畫(huà)使用 Material動(dòng)畫(huà)的減速規(guī)范，這意味著它以最大速度開(kāi)始并輕輕地減速并停止。當(dāng)元素要退出時(shí)，容器會(huì)在沒(méi)有縮放的情況下淡出， 退出動(dòng)畫(huà)設(shè)計(jì)會(huì)比進(jìn)入時(shí)更微妙，以便讓用戶將注意力集中在新內(nèi)容上。

把動(dòng)畫(huà)進(jìn)行慢放，以說(shuō)明容器是如何進(jìn)入并進(jìn)行緩動(dòng)和縮放的

2. 沒(méi)有容器的過(guò)渡

有些界面并不會(huì)基于容器進(jìn)行轉(zhuǎn)換，例如點(diǎn)擊底部導(dǎo)航中的圖標(biāo)，將用戶帶去一個(gè)新界面。 在這些情況下，使用兩步模式：

1. 開(kāi)始元素以淡出的方式消失，結(jié)束元素以淡入的方式進(jìn)入；
2. 隨著最終元素的淡入，它也會(huì)使用Material動(dòng)畫(huà)緩動(dòng)規(guī)律進(jìn)行細(xì)微的放大。

把動(dòng)畫(huà)放慢可以說(shuō)明沒(méi)有容器時(shí)是如何運(yùn)用緩動(dòng)和縮放的

如果在開(kāi)始和結(jié)束元素之間有一個(gè)很清晰的空間和層級(jí)關(guān)系，共享動(dòng)畫(huà)就可以強(qiáng)化這種關(guān)系。例如：在導(dǎo)航步驟上，開(kāi)始和結(jié)束組件共享一個(gè)垂直滑動(dòng)動(dòng)畫(huà)，這種方式加強(qiáng)了在垂直方向上的信息內(nèi)容。當(dāng)按下步驟中的下一個(gè)按鈕時(shí)，組件元素之間共享了一個(gè)水平滑動(dòng)動(dòng)畫(huà)，從左向右的滑動(dòng)強(qiáng)化了步驟進(jìn)行的概念。共享動(dòng)畫(huà)也是運(yùn)用了谷歌Material動(dòng)畫(huà)的標(biāo)準(zhǔn)緩動(dòng)。

把動(dòng)畫(huà)進(jìn)行慢放以說(shuō)明水平和垂直方向上的共享動(dòng)畫(huà)

最佳實(shí)踐

1. 保持簡(jiǎn)單

考慮到導(dǎo)航轉(zhuǎn)換的高頻率和易用性的特點(diǎn)，導(dǎo)航的切換更傾向于引導(dǎo)功能而不是炫酷的效果。這也并不是說(shuō)動(dòng)畫(huà)的形式永遠(yuǎn)都不要個(gè)性化，只是要確保動(dòng)畫(huà)是符合品牌風(fēng)格的。

能吸引用戶眼球的動(dòng)畫(huà)通常都在一些像小圖標(biāo)，logo，加載狀態(tài)或者空狀態(tài)等元素中。下面最左邊的簡(jiǎn)單動(dòng)畫(huà)可能不會(huì)在Dribbble上得到太多的點(diǎn)贊，但是它會(huì)使應(yīng)用變得更好用。

動(dòng)畫(huà)放慢后可以看到不同動(dòng)畫(huà)形式之間的區(qū)別

2. 選擇合適的持續(xù)時(shí)間和緩動(dòng)形式

導(dǎo)航的切換是需要優(yōu)先考慮功能實(shí)用性，所以需要優(yōu)化持續(xù)時(shí)間，速度上要快一些，但是也不要快到讓用戶完全注意不到，持續(xù)時(shí)間是根據(jù)動(dòng)畫(huà)在屏幕中所占的位置來(lái)決定的。由于導(dǎo)航切換通常會(huì)占據(jù)屏幕的大部分面積，所以根據(jù)經(jīng)驗(yàn)建議300ms會(huì)是一個(gè)不錯(cuò)的時(shí)間選擇。

相比之下，像開(kāi)關(guān)這樣的小控件使用的時(shí)間就會(huì)很短，只需要100ms。如果一個(gè)過(guò)渡動(dòng)畫(huà)你感覺(jué)太快或者太慢，建議以25ms的增量來(lái)調(diào)整它的持續(xù)時(shí)間，直到最終達(dá)到一個(gè)比較舒服的狀態(tài)。

Easing（緩動(dòng)）描述了動(dòng)畫(huà)的加速和減速速率，大多數(shù)導(dǎo)航的切換使用Material動(dòng)畫(huà)的標(biāo)準(zhǔn)緩動(dòng)，這是一種非對(duì)稱類(lèi)型的緩動(dòng)形式。這意味著元素在開(kāi)始階段以很大的加速度進(jìn)行加速運(yùn)動(dòng)，然后再以很小的加速度去減速，目的是將用戶注意力集中在過(guò)渡結(jié)束的位置。

這種類(lèi)型的緩動(dòng)使得動(dòng)畫(huà)看起來(lái)非常自然，因?yàn)楝F(xiàn)實(shí)世界中的物體是不會(huì)立即開(kāi)始或者停止運(yùn)動(dòng)的。如果過(guò)渡看起來(lái)很僵硬、不自然，很可能是因?yàn)殄e(cuò)誤的選擇了對(duì)稱性或者線性速率。

把動(dòng)畫(huà)進(jìn)行慢放，以說(shuō)明不同的緩動(dòng)類(lèi)型

本文中講到的運(yùn)動(dòng)模式和最佳實(shí)踐，目的在于建立一種實(shí)用且精致的動(dòng)畫(huà)風(fēng)格。這能適用于大多數(shù)的應(yīng)用，但對(duì)于不同品牌來(lái)說(shuō)可能需要一些更加強(qiáng)烈的風(fēng)格去表達(dá)。要想了解更多關(guān)于個(gè)性化的動(dòng)畫(huà)知識(shí)，可以去看看谷歌官方動(dòng)效規(guī)范（https://material.io/design/motion/customization.html）

一旦你開(kāi)始注意到諸如導(dǎo)航的細(xì)微動(dòng)效，就是你開(kāi)始給你的應(yīng)用提升亮點(diǎn)特色的開(kāi)始。簡(jiǎn)單的規(guī)范模式并不能完全滿足需求，動(dòng)畫(huà)的巧妙創(chuàng)意才是最亮眼的地方。

角色動(dòng)畫(huà)可以讓錯(cuò)誤變得不那么沮喪

如果你想了解更多關(guān)于東西方面的知識(shí)，可以去閱讀我們官方的動(dòng)效規(guī)范（https://material.io/design/motion/understanding-motion.html#principles）

作者：Jonas Naimark

原文鏈接：https://medium.com/google-design/motion-design-doesnt-have-to-be-hard-33089196e6c2

譯者：彩云Sky，公眾號(hào)：彩云譯設(shè)計(jì)

本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖作者提供