動畫早就不是早期人們印象中的低齡向(xiàng)玩物了，從早年的盧卡斯影業到今天的工業光魔，動畫技術證明了它可以實現無限的可能(néng)性；從70年代的高達、EVA到之後(hòu)的宮崎駿、皮克斯，動畫的深度和内涵也早已不弱于電影和文學(xué)作品。而随著(zhe)技術的積累，網頁中的動畫也已經(jīng)是遍地開(kāi)花，它時尚，有趣，也人性化。不斷湧現的新技術和新工具令網頁動畫設計的門檻逐年降低，高速網絡也使得漂亮的動效和純萌的GIF幾乎是無縫地加載到網頁中。今天，我們可以斬釘截鐵地說，動畫已經(jīng)是最常見也是最實用的網頁設計工具之一了。

將(jiāng)靜止或者二維平面(miàn)上的物體賦予生機與活力，讓它們以符合或者貼近物理定律的方式來運動，這(zhè)就是我們所熟知的動畫。Mac 桌面(miàn)上那個著名的圖标跳動動畫就是最典型的例子之一，那種(zhǒng)模拟皮球在地上彈跳的效果顯得真實而有質感，這(zhè)種(zhǒng)動畫設計是遵循著名的動畫設計12原則的。

天貓&京東,内蒙古電商品牌策劃,内蒙古微信營銷,内蒙古微網站,呼和浩特電商品牌策劃,呼和浩特微信營銷,呼和浩特微網站,内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

對(duì)動效或者說動畫最熟悉的，無疑是迪士尼。Frank Thomas 的《生命的錯覺：迪士尼動畫》中，就詳細總結了創造今天動畫的12個原則：

·擠壓和拉伸

·預期

·登台

·連續動作和姿态對(duì)應

·緩進(jìn)緩出

·弧形運動

·次要動作

·時序

·誇張

·立體刻畫

·吸引力

文末相關鏈接中，會附上關于這(zhè)12原則的相關文獻。

網頁動畫的實現方式很多，最常見的是使用Gif圖，CSS，SVG，WebGL 以及視頻。但是和動漫不同，網頁中的動畫可以是任何元素，小到下劃線，大到背景和整個頁面(miàn)，它可以随著(zhe)頁面(miàn)加載而出現，也可能(néng)是鼠标移動到某個位置上之後(hòu)被(bèi)觸發(fā)。和其他的設計手法相似，動畫可以是非常微妙、觸動人心的，也可以是開(kāi)門見山、清晰直觀的。所以，最重要的是看你怎麼(me)運用動效，是在合适的時候給人會心一擊，還(hái)是擺在顯眼的位置，令人不會錯過(guò)。

當我們談及網頁動效的時候，它和動漫、CG、電影、遊戲中的動畫，是截然不同的。當我們在網頁的語境之下提及動畫和動效的時候，它作爲一個典型的設計趨勢和設計手法，節制是是最關鍵的因素。小巧簡單的動效在網頁中會更具吸引力，也更加有趣，那些真正“隐形”的動效會讓用戶難以察覺，卻更好(hǎo)地讓他們有更好(hǎo)的體驗。但是顯著而抓人眼球的複雜動效也很重要，它們會強化設計感。不過(guò)在動畫和動效的設計上，一緻性很重要，過(guò)于複雜的規劃可能(néng)會讓整體效果混亂。

讓動畫成(chéng)爲設計趨勢，其實是整個設計圈的走向(xiàng)造成(chéng)的。扁平化和極簡風的流行開(kāi)來，網頁設計确實簡約了很多，但是用戶需要更多的信息來告訴他們應該怎麼(me)做，而動畫就是最好(hǎo)的方案——無需影響整體美感就可以給用戶以足夠的引導。即使是最簡單的設計，動畫的存在都(dōu)能(néng)給予用戶以說明和指引，這(zhè)樣(yàng)前提下誕生的動效，在簡單和易用性之間達成(chéng)了平衡。

動畫其實在後(hòu)端和用戶端和有很多不錯的影響。首先是大家再也不需要用Flash來事(shì)先複雜的動畫了，它的實現方式也相當的自由和多樣(yàng)，今天的動畫不會像曾經(jīng)的Flash等技術那樣(yàng)拖慢網站的呈現速度甚至影響服務器，加載速度飛快，體驗優異。

大和小的競争無處不在，即使是動畫的領域也同樣(yàng)是如此。

規模較大的動畫常常是以視頻的形式存在的，它們通常會占滿整屏或者一個比較關鍵的部位，循環、簡練是它們的特色。這(zhè)些動畫爲整個設計創造了焦點，用戶即使沒(méi)有執行任何操作，也能(néng)看到它們。以Studio Meta的網站爲例，當你閱讀文案的時候，沒(méi)一張大圖都(dōu)會逐步縮放。

小動效會出現在網站的各個角落，當你同網站進(jìn)行交互的時候，會發(fā)現它們的存在。這(zhè)些動效可能(néng)會在光标懸停的時候觸發(fā)，可能(néng)是一個指引性的标識，也可能(néng)以更加微妙的方式呈現。這(zhè)些微小的動效會對(duì)整體的美感産生影響，在 Henry Brown 的這(zhè)個案例中，動畫就非常的小而微妙，仔細觀察，你會發(fā)現人物的眼睛在閃爍。

當我們談及每一種(zhǒng)設計趨勢的時候，都(dōu)需要探讨一個重要的問題：什麼(me)時候才能(néng)使用它們。動畫可能(néng)是一種(zhǒng)非常讨巧的設計手段，它有用，但是并非适用于每一個設計項目。動畫應該是平滑無縫的，而非滞塞機械的，它的服務對(duì)象是用戶，并且和其他内容的呈現形式不一樣(yàng)。

使用動畫和動效的首要目的是提高網頁的可用性。簡單的動效可以有效的引導用戶，幫助他們了解點擊之後(hòu)會去怎麼(me)樣(yàng)，即使是需要使用複雜的視差滾動動效，設計師也會搭配一些簡單的動畫來作爲引導和輔助之用。

可用性的呈現形式：

·解釋功能(néng)，展示網站的運作

·呈現變化，比如展示可點擊的元素，或者表單那的正确填寫方式

·創建流程，或者引導用戶執行動作召喚類的操作

使用動效的第二個理由是出自美學(xué)需求。動畫和動效無疑是擁有強裝飾性的元素，如果某個動效是出于視覺裝飾的作用而進(jìn)行設計的話，無疑是可以接受的。這(zhè)種(zhǒng)裝飾性的動畫不僅有助于講述故事(shì)，而且可以建立用戶界面(miàn)之間的情感聯系，它可以通過(guò)視覺上的變化引發(fā)用戶的興趣，在不斷的交互中讓用戶停留更長(cháng)的時間，不斷回來。

如果你要創建純粹的動畫，那麼(me)你楈枒仔細思考它能(néng)做什麼(me)，會帶來什麼(me)。你希望用戶有什麼(me)樣(yàng)的反饋？想分享一些獨特的内容，還(hái)是用動效給用戶帶來愉悅的體驗？這(zhè)很重要。

一些資源

準備爲網站加入動畫和動效麼(me)？接下來的一些文章或者網站可能(néng)會給你一些幫助。(這(zhè)些文章都(dōu)是英文的，恩)

·《生命的錯覺》會告訴你一些關于動畫的12個基本原則

·《網頁動畫的運作》是一個列表，其中的資源會告訴你網頁動畫是如何運作的

·《CSS動效新手指南》是告訴你如何運用CSS屬性來制作動畫的

·《彈性SVG元素》是教你如何使用SVG組件的教程

·《UI動畫的藝術》是Mark Geyer 的文章

·《創建優秀動畫的15個HTML5工具》，如果你掌握了基礎知識，這(zhè)個工具列表會非常有用

·《動畫師的急救包》這(zhè)篇文章也是介紹各種(zhǒng)形式動畫的基本原理的

結語

評判動畫和動效其實并不難，隻要看它是否爲用戶帶來更好(hǎo)的體驗，就知道(dào)了：它能(néng)否産生情感聯系，能(néng)不能(néng)讓人會心一笑，能(néng)不能(néng)讓網站更好(hǎo)使用。

動畫是一種(zhǒng)有趣的技術，它的運用範疇會越來越廣，如果你對(duì)它有興趣，就持續研究下去，它就是未來。

原文地址：designshack

原文作者： CARRIE COUSINS 

優設譯文：http://www.uisdc.com/introduction-to-webdesign-animation

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。