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