- 相關(guān)推薦
給設(shè)計(jì)師的網(wǎng)頁(yè)動(dòng)畫設(shè)計(jì)基礎(chǔ)指南
動(dòng)畫早就不是早期人們印象中的低齡向玩物了，從早年的盧卡斯影業(yè)到今天的工業(yè)光魔，動(dòng)畫技術(shù)證明了它可以實(shí)現(xiàn)無(wú)限的可能性；從70年代的高達(dá)、EVA到之后的宮崎駿、皮克斯，動(dòng)畫的深度和內(nèi)涵也早已不弱于電影和文學(xué)作品。而隨著技術(shù)的積累，網(wǎng)頁(yè)中的動(dòng)畫也已經(jīng)是遍地開花，它時(shí)尚，有趣，也人性化。不斷涌現(xiàn)的新技術(shù)和新工具令網(wǎng)頁(yè)動(dòng)畫設(shè)計(jì)的門檻逐年降低，高速網(wǎng)絡(luò)也使得漂亮的動(dòng)效和純萌的GIF幾乎是無(wú)縫地加載到網(wǎng)頁(yè)中。今天，我們可以斬釘截鐵地說(shuō)，動(dòng)畫已經(jīng)是最常見(jiàn)也是最實(shí)用的網(wǎng)頁(yè)設(shè)計(jì)工具之一了。
基礎(chǔ)知識(shí)
將靜止或者二維平面上的物體賦予生機(jī)與活力，讓它們以符合或者貼近物理定律的方式來(lái)運(yùn)動(dòng)，這就是我們所熟知的動(dòng)畫。Mac 桌面上那個(gè)著名的圖標(biāo)跳動(dòng)動(dòng)畫就是最典型的例子之一，那種模擬皮球在地上彈跳的效果顯得真實(shí)而有質(zhì)感，這種動(dòng)畫設(shè)計(jì)是遵循著名的動(dòng)畫設(shè)計(jì)12原則的。
對(duì)動(dòng)效或者說(shuō)動(dòng)畫最熟悉的，無(wú)疑是迪士尼。Frank Thomas 的《生命的錯(cuò)覺(jué)：迪士尼動(dòng)畫》中，就詳細(xì)總結(jié)了創(chuàng)造今天動(dòng)畫的12個(gè)原則：
擠壓和拉伸
預(yù)期
登臺(tái)
連續(xù)動(dòng)作和姿態(tài)對(duì)應(yīng)
緩進(jìn)緩出
弧形運(yùn)動(dòng)
次要?jiǎng)幼?/p>
時(shí)序
夸張
立體刻畫
吸引力
(文末相關(guān)鏈接中，會(huì)附上關(guān)于這12原則的相關(guān)文獻(xiàn)。)
網(wǎng)頁(yè)動(dòng)畫的實(shí)現(xiàn)方式很多，最常見(jiàn)的是使用Gif圖，CSS，SVG，WebGL以及視頻。但是和動(dòng)漫不同，網(wǎng)頁(yè)中的動(dòng)畫可以是任何元素，小到下劃線，大到背景和整個(gè)頁(yè)面，它可以隨著頁(yè)面加載而出現(xiàn)，也可能是鼠標(biāo)移動(dòng)到某個(gè)位置上之后被觸發(fā)。和其他的設(shè)計(jì)手法相似，動(dòng)畫可以是非常微妙、觸動(dòng)人心的，也可以是開門見(jiàn)山、清晰直觀的。所以，最重要的是看你怎么運(yùn)用動(dòng)效，是在合適的時(shí)候給人會(huì)心一擊，還是擺在顯眼的位置，令人不會(huì)錯(cuò)過(guò)。
新興的趨勢(shì)
當(dāng)我們談及網(wǎng)頁(yè)動(dòng)效的時(shí)候，它和動(dòng)漫、CG、電影、游戲中的動(dòng)畫，是截然不同的。當(dāng)我們?cè)诰W(wǎng)頁(yè)的語(yǔ)境之下提及動(dòng)畫和動(dòng)效的時(shí)候，它作為一個(gè)典型的設(shè)計(jì)趨勢(shì)和設(shè)計(jì)手法，節(jié)制是是最關(guān)鍵的因素。小巧簡(jiǎn)單的動(dòng)效在網(wǎng)頁(yè)中會(huì)更具吸引力，也更加有趣，那些真正“隱形”的動(dòng)效會(huì)讓用戶難以察覺(jué)，卻更好地讓他們有更好的體驗(yàn)。但是顯著而抓人眼球的復(fù)雜動(dòng)效也很重要，它們會(huì)強(qiáng)化設(shè)計(jì)感。不過(guò)在動(dòng)畫和動(dòng)效的設(shè)計(jì)上，一致性很重要，過(guò)于復(fù)雜的規(guī)劃可能會(huì)讓整體效果混亂。
讓動(dòng)畫成為設(shè)計(jì)趨勢(shì)，其實(shí)是整個(gè)設(shè)計(jì)圈的走向造成的。扁平化和極簡(jiǎn)風(fēng)的流行開來(lái)，網(wǎng)頁(yè)設(shè)計(jì)確實(shí)簡(jiǎn)約了很多，但是用戶需要更多的信息來(lái)告訴他們應(yīng)該怎么做，而動(dòng)畫就是最好的方案——無(wú)需影響整體美感就可以給用戶以足夠的引導(dǎo)。即使是最簡(jiǎn)單的設(shè)計(jì)，動(dòng)畫的存在都能給予用戶以說(shuō)明和指引，這樣前提下誕生的動(dòng)效，在簡(jiǎn)單和易用性之間達(dá)成了平衡。
動(dòng)畫其實(shí)在后端和用戶端和有很多不錯(cuò)的影響。首先是大家再也不需要用Flash來(lái)事先復(fù)雜的動(dòng)畫了，它的實(shí)現(xiàn)方式也相當(dāng)?shù)淖杂珊投鄻樱裉斓膭?dòng)畫不會(huì)像曾經(jīng)的Flash等技術(shù)那樣拖慢網(wǎng)站的呈現(xiàn)速度甚至影響服務(wù)器，加載速度飛快，體驗(yàn)優(yōu)異。
大小動(dòng)畫的對(duì)抗
大和小的競(jìng)爭(zhēng)無(wú)處不在，即使是動(dòng)畫的領(lǐng)域也同樣是如此。
規(guī)模較大的動(dòng)畫常常是以視頻的形式存在的，它們通常會(huì)占滿整屏或者一個(gè)比較關(guān)鍵的部位，循環(huán)、簡(jiǎn)練是它們的特色。這些動(dòng)畫為整個(gè)設(shè)計(jì)創(chuàng)造了焦點(diǎn)，用戶即使沒(méi)有執(zhí)行任何操作，也能看到它們。以Studio Meta的網(wǎng)站為例，當(dāng)你閱讀文案的時(shí)候，沒(méi)一張大圖都會(huì)逐步縮放。
小動(dòng)效會(huì)出現(xiàn)在網(wǎng)站的各個(gè)角落，當(dāng)你同網(wǎng)站進(jìn)行交互的時(shí)候，會(huì)發(fā)現(xiàn)它們的存在。這些動(dòng)效可能會(huì)在光標(biāo)懸停的時(shí)候觸發(fā)，可能是一個(gè)指引性的標(biāo)識(shí)，也可能以更加微妙的方式呈現(xiàn)。這些微小的動(dòng)效會(huì)對(duì)整體的美感產(chǎn)生影響，在 Henry Brown的這個(gè)案例中，動(dòng)畫就非常的小而微妙，仔細(xì)觀察，你會(huì)發(fā)現(xiàn)人物的眼睛在閃爍。
大和小的競(jìng)爭(zhēng)無(wú)處不在，即使是動(dòng)畫的領(lǐng)域也同樣是如此。
規(guī)模較大的動(dòng)畫常常是以視頻的形式存在的，它們通常會(huì)占滿整屏或者一個(gè)比較關(guān)鍵的部位，循環(huán)、簡(jiǎn)練是它們的特色。這些動(dòng)畫為整個(gè)設(shè)計(jì)創(chuàng)造了焦點(diǎn)，用戶即使沒(méi)有執(zhí)行任何操作，也能看到它們。以Studio Meta的網(wǎng)站為例，當(dāng)你閱讀文案的時(shí)候，沒(méi)一張大圖都會(huì)逐步縮放。
小動(dòng)效會(huì)出現(xiàn)在網(wǎng)站的各個(gè)角落，當(dāng)你同網(wǎng)站進(jìn)行交互的時(shí)候，會(huì)發(fā)現(xiàn)它們的存在。這些動(dòng)效可能會(huì)在光標(biāo)懸停的時(shí)候觸發(fā)，可能是一個(gè)指引性的標(biāo)識(shí)，也可能以更加微妙的方式呈現(xiàn)。這些微小的動(dòng)效會(huì)對(duì)整體的美感產(chǎn)生影響，在 Henry Brown的這個(gè)案例中，動(dòng)畫就非常的小而微妙，仔細(xì)觀察，你會(huì)發(fā)現(xiàn)人物的眼睛在閃爍。
【給設(shè)計(jì)師的網(wǎng)頁(yè)動(dòng)畫設(shè)計(jì)基礎(chǔ)指南】相關(guān)文章：
網(wǎng)頁(yè)動(dòng)畫設(shè)計(jì)小技巧03-06
網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)03-08
三維動(dòng)畫設(shè)計(jì)基礎(chǔ)03-18
三維動(dòng)畫設(shè)計(jì)基礎(chǔ)知識(shí)03-18
個(gè)人名片設(shè)計(jì)的基礎(chǔ)指南03-06
平面設(shè)計(jì)師入行網(wǎng)頁(yè)設(shè)計(jì)師的要點(diǎn)03-18
平面設(shè)計(jì)師入行網(wǎng)頁(yè)設(shè)計(jì)師要點(diǎn)12-06