動效可以讓界面變得更加生動和易于使用,盡管擁有很大的潛力,但動效設(shè)計可能是在設(shè)計領(lǐng)域中最不被人熟練掌握的技能。所以,我們一起來看看谷歌動效設(shè)計師經(jīng)驗。
動效可以讓界面變得更加生動和易于使用,盡管擁有很大的潛力,但動效設(shè)計可能是在設(shè)計領(lǐng)域中最不被人熟練掌握的技能,這可能是因為動效算是在UI領(lǐng)域里的一個新成員。視覺和交互在早起的GUI中就已經(jīng)被應(yīng)用,但動效只有在硬件設(shè)備都跟上來后才會比較流暢的被使用。
UI動效和傳統(tǒng)動畫之間的關(guān)系也很容易被混淆,傳統(tǒng)動畫需要去掌握Disney的12個動效基本原則,那是不是意味著UI動效同樣很復(fù)雜,或者說對于關(guān)鍵數(shù)值會拿捏不準(zhǔn)?
如果讓我來評價的話,在動效應(yīng)用最廣泛的UI領(lǐng)域,設(shè)計上應(yīng)該是比較簡單的。
從哪里開始
動效主要的作用通過動態(tài)演示UI元素的變化來引導(dǎo)用戶操作,動畫也有能力通過圖標(biāo),logo,插圖為一款應(yīng)用塑造性格,但不管怎樣,動畫易用性的優(yōu)先級肯定是要高于增加設(shè)計創(chuàng)意形式。在展示你的動畫能力之前,讓我們先回到最核心的UI動效基礎(chǔ)上來,去關(guān)注UI中的導(dǎo)航和轉(zhuǎn)換。
轉(zhuǎn)換模式
當(dāng)設(shè)計一個導(dǎo)航轉(zhuǎn)換時,簡單和統(tǒng)一就是2個最關(guān)鍵的點。為了實現(xiàn)這一點,我們選擇了2種類型的動效模式:
基于容器的轉(zhuǎn)換
沒有容器的轉(zhuǎn)換
1. 基于容器的轉(zhuǎn)換
像文本,圖標(biāo)和圖片這樣的元素都是被分組在容器中
如果界面中涉及到一個容器,比如按鈕、卡片或者列表,那么轉(zhuǎn)換就是基于容器的動畫。容器通常很容易根據(jù)它們的可見邊識別出來,但是要記住,它們也可以是在轉(zhuǎn)換之前不可見,就是沒有分割線的列表一樣。這種模式過程分為三個步驟來做:
(1)先使用Material標(biāo)準(zhǔn)的緩動動畫讓容器動起來(先快速開始,然后緩慢結(jié)束)。在下面這個例子中,容器的大小和圓角半徑發(fā)生了改變,從一個圓形按鈕變化到一個填充屏幕的矩形。
(2)容器中的元素以適配容器寬度進行縮放,元素被固定在頂部并隱藏在容器內(nèi),這樣就在容器和內(nèi)部元素之間創(chuàng)建了清晰的聯(lián)系。
把動畫進行慢放,可以看清元素在容器內(nèi)是如何隱藏和縮放。
(3)在轉(zhuǎn)換過程中消失的內(nèi)容元素會隨著容器的加速而淡出,當(dāng)容器減速時,新的內(nèi)容元素會淡入。當(dāng)元素快速移動時,通過淡入淡出元素來實現(xiàn)無縫的轉(zhuǎn)換效果。
把動畫慢放,用來說明如何使用淡入淡出效果
把這個設(shè)計模式應(yīng)用于所有容器轉(zhuǎn)換上,將會建立一致的效果。它還能明確開始和結(jié)束之間的關(guān)系,因為是用容器動畫進行引導(dǎo)的。為了展示這種模式的靈活性,下面列舉了5種不同的組合形式:
把動畫進行慢放,以說明容器動畫是如何通過開始和結(jié)束來引導(dǎo)用戶視線,建立連接的
有些容器只是使用Material動畫的標(biāo)準(zhǔn)緩動從屏幕外滑入, 它滑動的方向取決于與之關(guān)聯(lián)的組件的位置。 例如:點擊左上角的抽屜導(dǎo)航圖標(biāo),菜單將從左側(cè)滑入容器。
如果容器是從屏幕邊界進入,則它會淡入并放大。 動畫不是從0%的比例開始出現(xiàn),而是從95%開始,以避免過度彈跳。 縮放動畫使用 Material動畫的減速規(guī)范,這意味著它以最大速度開始并輕輕地減速并停止。當(dāng)元素要退出時,容器會在沒有縮放的情況下淡出, 退出動畫設(shè)計會比進入時更微妙,以便讓用戶將注意力集中在新內(nèi)容上。
把動畫進行慢放,以說明容器是如何進入并進行緩動和縮放的
2. 沒有容器的過渡
有些界面并不會基于容器進行轉(zhuǎn)換,例如點擊底部導(dǎo)航中的圖標(biāo),將用戶帶去一個新界面。 在這些情況下,使用兩步模式:
開始元素以淡出的方式消失,結(jié)束元素以淡入的方式進入;
隨著最終元素的淡入,它也會使用Material動畫緩動規(guī)律進行細微的放大。
把動畫放慢可以說明沒有容器時是如何運用緩動和縮放的
如果在開始和結(jié)束元素之間有一個很清晰的空間和層級關(guān)系,共享動畫就可以強化這種關(guān)系。例如:在導(dǎo)航步驟上,開始和結(jié)束組件共享一個垂直滑動動畫,這種方式加強了在垂直方向上的信息內(nèi)容。當(dāng)按下步驟中的下一個按鈕時,組件元素之間共享了一個水平滑動動畫,從左向右的滑動強化了步驟進行的概念。共享動畫也是運用了谷歌Material動畫的標(biāo)準(zhǔn)緩動。
把動畫進行慢放以說明水平和垂直方向上的共享動畫
最佳實踐
1. 保持簡單
考慮到導(dǎo)航轉(zhuǎn)換的高頻率和易用性的特點,導(dǎo)航的切換更傾向于引導(dǎo)功能而不是炫酷的效果。這也并不是說動畫的形式永遠都不要個性化,只是要確保動畫是符合品牌風(fēng)格的。
能吸引用戶眼球的動畫通常都在一些像小圖標(biāo),logo,加載狀態(tài)或者空狀態(tài)等元素中。下面最左邊的簡單動畫可能不會在Dribbble上得到太多的點贊,但是它會使應(yīng)用變得更好用。
動畫放慢后可以看到不同動畫形式之間的區(qū)別
2. 選擇合適的持續(xù)時間和緩動形式
導(dǎo)航的切換是需要優(yōu)先考慮功能實用性,所以需要優(yōu)化持續(xù)時間,速度上要快一些,但是也不要快到讓用戶完全注意不到,持續(xù)時間是根據(jù)動畫在屏幕中所占的位置來決定的。由于導(dǎo)航切換通常會占據(jù)屏幕的大部分面積,所以根據(jù)經(jīng)驗建議300ms會是一個不錯的時間選擇。
相比之下,像開關(guān)這樣的小控件使用的時間就會很短,只需要100ms。如果一個過渡動畫你感覺太快或者太慢,建議以25ms的增量來調(diào)整它的持續(xù)時間,直到最終達到一個比較舒服的狀態(tài)。
Easing(緩動)描述了動畫的加速和減速速率,大多數(shù)導(dǎo)航的切換使用Material動畫的標(biāo)準(zhǔn)緩動,這是一種非對稱類型的緩動形式。這意味著元素在開始階段以很大的加速度進行加速運動,然后再以很小的加速度去減速,目的是將用戶注意力集中在過渡結(jié)束的位置。
這種類型的緩動使得動畫看起來非常自然,因為現(xiàn)實世界中的物體是不會立即開始或者停止運動的。如果過渡看起來很僵硬、不自然,很可能是因為錯誤的選擇了對稱性或者線性速率。
把動畫進行慢放,以說明不同的緩動類型
本文中講到的運動模式和最佳實踐,目的在于建立一種實用且精致的動畫風(fēng)格。這能適用于大多數(shù)的應(yīng)用,但對于不同品牌來說可能需要一些更加強烈的風(fēng)格去表達。要想了解更多關(guān)于個性化的動畫知識,可以去看看谷歌官方動效規(guī)范
一旦你開始注意到諸如導(dǎo)航的細微動效,就是你開始給你的應(yīng)用提升亮點特色的開始。簡單的規(guī)范模式并不能完全滿足需求,動畫的巧妙創(chuàng)意才是最亮眼的地方。
作者:Jonas Naimark
譯者:彩云Sky,公眾號:彩云譯設(shè)計
全部評論