2015-8-26 用心設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服
來源:莫貝網(wǎng)
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,請點(diǎn)這里
你認(rèn)為這兩個(gè)球在做什么
綠球彈跳很明顯,但是紅球在怎樣運(yùn)動(dòng)?當(dāng)然,它像綠球一樣上下運(yùn)動(dòng),落下和彈起所用的時(shí)間和綠球一樣。然而,紅球感覺很機(jī)械,而綠球讓人感覺它確實(shí)在彈跳。為什么我們會(huì)有這種感受上的差異呢?
答案是變速過渡效果(Easing)。
這篇文章就是關(guān)于變速過渡效果的,貌似這是顯而易見的,但要了解真正發(fā)生的事情,還需要深入了解動(dòng)畫的基本原理。文章中,我們將會(huì)逐步學(xué)習(xí):基本概念、探討加速減速,拆解緩沖曲線,最終學(xué)習(xí)到這一切是如何應(yīng)用于UI設(shè)計(jì)的。
1時(shí)間和空間位移(Timing and Spacing)
首先,我們需要理解兩個(gè)重要的概念——時(shí)間和空間,二者是緊密相關(guān)、密不可分的。為了使動(dòng)畫更有可讀性,他們至關(guān)重要。
注:“可讀性”是說動(dòng)畫繪制者如何定義動(dòng)畫的精準(zhǔn)度,用來清晰而容易地理解正在發(fā)生的事情。例如:不可讀=不清楚發(fā)生的事情很易讀=它非常清楚,立刻能懂 |
時(shí)間
在案例中,兩個(gè)球在同一頂端同時(shí)落下,0.5秒到達(dá)地面, 1秒回到原位。這是球的時(shí)間?-?完成一個(gè)動(dòng)作所用的時(shí)間耗時(shí)。兩個(gè)球耗時(shí)相同,但是,等等……兩個(gè)球都是1秒的動(dòng)畫,為什么感覺如此不同呢?
空間位移
這是使兩個(gè)動(dòng)畫完全不同的關(guān)鍵區(qū)別。讓我們把第一個(gè)0.5秒的動(dòng)畫分解為較小的時(shí)間單位,這樣我們可以更清楚地觀察發(fā)生了什么。如果我們把每0.1秒球的位置進(jìn)行標(biāo)記,我們可以得到這張圖:
看到兩個(gè)時(shí)間單元之間的距離了嘛?這就是空間位移。很容易的東西,對嗎?時(shí)間是耗時(shí),空間是位移!
讓我們來看紅球的間距?,非常均勻。每經(jīng)過0.1秒,它就移動(dòng)完全相同的距離。在運(yùn)動(dòng)中完全沒有任何變化。然而,綠球每0.1秒都有不同的間隔。在第一個(gè)
0.1s,它只移動(dòng)非常小的間距,當(dāng)它掉下來,間距變得越來越大,直到它終于打到地面。事實(shí)上,它耗費(fèi)了0.4秒來完成前半程,僅用了0.1秒完成后半
程!
所以,問題來了,為什么要用這樣的方式加長每秒的間距呢?
觀察顯示世界
觀察彈跳一個(gè)球時(shí)會(huì)發(fā)生什么。自己嘗試一下或者觀察一些YouTube上的相關(guān)視頻。我發(fā)現(xiàn)兩個(gè)問題:慢放的彈跳球和網(wǎng)球彈跳球
彈跳背后的物理理論:球剛開始被放開的時(shí)候,它有一個(gè)相對緩慢的速度。在重力的作用 下,球的速度持續(xù)增長,直到接觸地面的那一刻速度達(dá)到最大。地面給球反作用力,使它以幾乎相同的速度反彈回去。當(dāng)球移動(dòng)時(shí),兩種力量作用正在球上?-?反 彈的力、想把它拉下來的重力。反彈的力量正在慢慢釋放,這使得球隨著升高逐漸減低速度,直到它耗費(fèi)掉所有的反作用力,最終到達(dá)反彈的最高點(diǎn)。它在頂部停留 一微秒,直到重力把它拉下來,使它像之前一樣加速下降。我用言語來描述這句話是有原因的。我們試著將一種自然行為分解為具體的步驟,這樣我們就可以重新創(chuàng) 造它。 |
有些關(guān)鍵的注意事項(xiàng):
1、當(dāng)球在頂部,它是緩慢的。隨著下降,它的速度隨之增加。
2、在彈回來的時(shí)候,開始時(shí)球的速度很快。到達(dá)頂點(diǎn)時(shí),速度就慢下來了。
3、在同一時(shí)間內(nèi),當(dāng)球速很快時(shí),位移會(huì)很長,當(dāng)球速變慢時(shí),位移就少得多。
最后那句話聽起來多余,但這正是我們感興趣的:一個(gè)速度快的物體在一個(gè)單位時(shí)間內(nèi)移動(dòng)了很長的距離,而慢的物體在相同時(shí)間內(nèi)覆蓋較短的距離。
應(yīng)用我們觀察到的結(jié)論
讓我們把這個(gè)概念應(yīng)用到動(dòng)畫中。再看一下位移圖。在頂部間距小,每0.1s逐漸增加間距,最后,在底部達(dá)到最大間距。這正是我們在之前的研究中所看到的。我們簡單地把這一原則“復(fù)制”到綠球,返回的時(shí)候進(jìn)行逆向應(yīng)用,瞧?,這是個(gè)?彈跳的球!
注:不要羞于“照搬”大自然。你的觀眾會(huì)更快地與動(dòng)畫關(guān)聯(lián)起來,從而更容易讀懂動(dòng)畫。 |
讓我們再看一次紅球,為什么一點(diǎn)兒不覺得紅球在彈跳?在理解了一個(gè)彈跳球的物理原理后,這個(gè)問題就變得很清楚。每0.1秒內(nèi)紅球移動(dòng)了相同的距離,但是從研究中我們知道:一個(gè)跳躍的球不會(huì)像那樣移動(dòng)。因?yàn)?,它沒有像彈跳球一樣運(yùn)動(dòng),看上去也感覺不像彈跳球。
那么,能有什么會(huì)像紅球以同樣如此精準(zhǔn)的時(shí)間、的間距進(jìn)行運(yùn)動(dòng)呢?當(dāng)然,機(jī)械機(jī)器人!紅球在“復(fù)制”機(jī)械機(jī)器人的間距。換句話說,因?yàn)樗駲C(jī)器人一樣運(yùn)動(dòng),它就讓人感覺很機(jī)械。道理真的很簡單!
小結(jié)
聽眾會(huì)不自覺地把動(dòng)畫和他們已知的東西關(guān)聯(lián)起來。如果動(dòng)畫讓人聯(lián)想到周圍的世界,它會(huì)看上去很自然。如果它讓人聯(lián)想到機(jī)器人,它會(huì)感覺很機(jī)械。如果它讓人聯(lián)想不到任何東西,就意味著動(dòng)畫看上去“很奇怪”。
2漸快與漸慢(Ease-in and Ease-out)
現(xiàn)在你知道我們?yōu)槭裁礊樘S的球設(shè)置不均勻的間距了。這種不均勻間距的技術(shù)術(shù)語叫做變速過渡效果。根據(jù)你將它用于動(dòng)畫開始還是結(jié)束,它被稱為漸快或漸慢。
漸快
當(dāng)球以慢速開始并積累速度時(shí),這一過程被稱為漸快。
漸慢
當(dāng)球以快速開始并降低速度時(shí),這一過程被稱為漸慢。
為了理解緩沖這一詞的定義,我們已經(jīng)查找了大量理論!
注意:這一術(shù)語有可能與其它術(shù)語混淆。如果你正在閱讀傳統(tǒng)的卡通書,例如迪斯尼的 《生命的幻象》或《動(dòng)畫師的生存工具》,那么這些書會(huì)告訴你,當(dāng)一個(gè)物體開始減速然后加速時(shí),這一過程被稱為漸慢(ease-out),因?yàn)樗淖藨B(tài)在 “緩慢輸出”。但是,在軟件產(chǎn)業(yè)(CSS動(dòng)畫,Adobe Edge等),這一過程被稱為漸快(ease in)!我不確定這一不同之處是怎么來的,但是不幸的是,這就是它的形成過程。所以,當(dāng)你在閱讀一篇文章時(shí),而這篇文章把它們把“漸快”稱為“漸慢”,那 么不要覺得困惑。看一眼你所在的網(wǎng)站你就懂了:D。 |
閱讀變速過渡的曲線圖
你會(huì)注意到,當(dāng)你打開軟件包的時(shí)候,漸進(jìn)的功能不會(huì)為你展示像上圖那樣線性的層次。相反,你會(huì)得到這樣的曲線:
那么,這一曲線與我們到目前為止談?wù)摰囊磺惺虑橛惺裁搓P(guān)系呢?讓我們將曲線畫在圖表上,然后看看我們最終畫出了什么。這只是基礎(chǔ)數(shù)學(xué)而已——我們(應(yīng)該)在學(xué)校里已經(jīng)學(xué)過了。
這是我們的圖表——我們將要沿著x軸繪制時(shí)間,y軸繪制球的位置。為了方便起見,我們選擇了4個(gè)單位x軸,表示0.1秒,選擇1個(gè)單位y軸表示球在垂直運(yùn)動(dòng)中的10個(gè)像素。(圖6)
我測量了紅球的運(yùn)動(dòng),并記錄了每經(jīng)過0.1秒時(shí)y的位置。這里是記錄的值:
時(shí)間 Y軸的位置(秒) : (像素)—————-0.0 : 00.1 : 34 0.2 : 68 0.3 : 102 0.4 : 136 0.5 : 170 |
我們注意到,每經(jīng)過0.1秒,紅球正好移動(dòng)了34個(gè)像素。如果我們把這一過程繪制在圖表上,并連點(diǎn)成線,我們就會(huì)得到一條直線。我們突然發(fā)現(xiàn),這就是你在大多數(shù)軟件中看到的線性漸變圖形。
現(xiàn)在,讓我們對綠球做相同處理。
時(shí)間 Y軸的位置(秒) : (像素)—————-0.0 : 00.1 : 2 0.2 : 10 0.3 : 36 0.4 : 87 0.5 : 170 |
我得到的值是:每0.1秒,球在垂直位置的變化量都會(huì)不同。開始時(shí),它的變化很?。ㄖ挥?個(gè)像素),然后緩慢增加。在最后0.1秒,它增加了高達(dá)83個(gè)像素。在圖表上繪制這些點(diǎn),我們得到了這條曲線。
現(xiàn)在這幅圖看起來熟悉嗎?這就是那些圖標(biāo)的由來。它們表示變化率,或者我們現(xiàn)在已經(jīng)了解的間隔。
注意:你會(huì)在軟件中看到更多用于設(shè)置緩沖的選項(xiàng),例如二次的、三次的、四次的等等。它們只是緩和程度更高的選擇,但是概念是相同的。只需記住——緩和的程度越高,你就會(huì)得到更多的緩和度。 |
3變速過渡效果應(yīng)用在UI設(shè)計(jì)中
最后,讓我們看看這些怎么用在UI設(shè)計(jì)中。
并不是規(guī)則,只是工具(There are no rules. Only tools)- Glenn Vilppu
我并不十分建議在你的app設(shè)計(jì)中應(yīng)用漸慢、漸快的很多規(guī)則。但我可以提供一些它是如何被應(yīng)用在當(dāng)下時(shí)髦App里的常見的例子。
在移動(dòng)App中,你能看到的最常見的運(yùn)用是菜單滑動(dòng)。如果App沒有運(yùn)用這些變速過渡的效果,就會(huì)像是一下的例子:
有些乏味,難道不是嗎?讓我們應(yīng)用一些變速過渡的效果,看一看會(huì)發(fā)生什么?
恩~好多了!屏幕向外滑動(dòng)時(shí)我們應(yīng)用了漸快效果,當(dāng)向內(nèi)滑動(dòng)時(shí)我們應(yīng)用了漸慢的效果。
但是,為什么不能在屏幕向外滑動(dòng)時(shí)應(yīng)用漸慢的效果呢?
從技術(shù)上說你是可以的,但這樣你會(huì)發(fā)現(xiàn):當(dāng)用戶點(diǎn)擊一個(gè)按鈕時(shí),固定的屏幕就會(huì)移動(dòng)。
當(dāng)畫面回滾的時(shí)候,屏幕就像一輛從制動(dòng)到停止前進(jìn)的汽車。它開始時(shí)很快,然后減速到停止——這是一個(gè)漸慢過程。所以,如果你在解決一個(gè)特殊元素活動(dòng)方面存在問題,可以嘗試將其與物理行為關(guān)聯(lián)。這樣,對于如何使用戶界面元素活動(dòng)的問題就會(huì)迎刃而解。
更新:
我獲得了一些關(guān)于使用漸慢菜單滑動(dòng)的反饋。與菜單不同,它們用于屏幕互換、顯示郵件附件、顯示動(dòng)作表和其它更多東西。在iPhone上解鎖屏幕時(shí)、打開/
關(guān)閉一個(gè)應(yīng)用程序時(shí)、滑動(dòng)通知時(shí)……幾乎在很多操作中,你都可以看見漸慢菜單。你可以注意一下,在使用手機(jī)導(dǎo)航時(shí),這些行為是多么自然啊。
現(xiàn)在你知道了這些動(dòng)態(tài)效果為什么會(huì)感覺很自然,你可以在App中去達(dá)到同樣的感覺效果。很高興看到你把這些觀念應(yīng)用到你的設(shè)計(jì)中。
這篇文章比我最初打算的要長一些,希望它能幫助你更好的理解變速過渡效果。很樂意聽到你們的意見—可以在這里給我留言或者找我。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com