動畫早就不是早期人們印象中(zhōng)的低齡向玩物(wù)了，從早年的盧卡斯影業到今天的工(gōng)業光魔，動畫技(jì )術證明了它可(kě)以實現無限的可(kě)能(néng)性；從70年代的高達、EVA到之後的宮崎駿、皮克斯，動畫的深度和内涵也早已不弱于電(diàn)影和文(wén)學(xué)作(zuò)品。而随着技(jì )術的積累，網頁(yè)中(zhōng)的動畫也已經是遍地開花(huā)，它時尚，有(yǒu)趣，也人性化。不斷湧現的新(xīn)技(jì )術和新(xīn)工(gōng)具(jù)令網頁(yè)動畫設計的門檻逐年降低，高速網絡也使得漂亮的動效和純萌的GIF幾乎是無縫地加載到網頁(yè)中(zhōng)。今天，我們可(kě)以斬釘截鐵地說，動畫已經是最常見也是最實用(yòng)的網頁(yè)設計工(gōng)具(jù)之一了。
将靜止或者二維平面上的物(wù)體(tǐ)賦予生機與活力，讓它們以符合或者貼近物(wù)理(lǐ)定律的方式來運動，這就是我們所熟知的動畫。Mac桌面上那個著名(míng)的圖标跳動動畫就是最典型的例子之一，那種模拟皮球在地上彈跳的效果顯得真實而有(yǒu)質(zhì)感，這種動畫設計是遵循著名(míng)的動畫設計12原則的。
對動效或者說動畫最熟悉的，無疑是迪士尼。Frank Thomas 的《生命的錯覺：迪士尼動畫》中(zhōng)，就詳細總結了創造今天動畫的12個原則：
·擠壓和拉伸、預期、登台、連續動作(zuò)和姿态對應、緩進緩出、弧形運動、次要動作(zuò)、時序、誇張、立體(tǐ)刻畫、吸引力
UI設計中(zhōng)動畫的實現方式很(hěn)多(duō)，最常見的是使用(yòng)Gif圖，CSS，SVG，WebGL以及視頻。但是和動漫不同，網頁(yè)中(zhōng)的動畫可(kě)以是任何元素，小(xiǎo)到下劃線(xiàn)，大到背景和整個頁(yè)面，它可(kě)以随着頁(yè)面加載而出現，也可(kě)能(néng)是鼠标移動到某個位置上之後被觸發。和其他(tā)的設計手法相似，動畫可(kě)以是非常微妙、觸動人心的，也可(kě)以是開門見山(shān)、清晰直觀的。所以，最重要的是看你怎麽運用(yòng)動效，是在合适的時候給人會心一擊，還是擺在顯眼的位置，令人不會錯過。

當我們談及網頁(yè)動效的時候，它和動漫、CG、電(diàn)影、遊戲中(zhōng)的動畫，是截然不同的。當我們在網頁(yè)的語境之下提及動畫和動效的時候，它作(zuò)為(wèi)一個典型的設計趨勢和設計手法，節制是是最關鍵的因素。小(xiǎo)巧簡單的動效在網頁(yè)中(zhōng)會更具(jù)吸引力，也更加有(yǒu)趣，那些真正“隐形”的動效會讓用(yòng)戶難以察覺，卻更好地讓他(tā)們有(yǒu)更好的體(tǐ)驗。但是顯著而抓人眼球的複雜動效也很(hěn)重要，它們會強化設計感。不過在動畫和動效的設計上，一緻性很(hěn)重要，過于複雜的規劃可(kě)能(néng)會讓整體(tǐ)效果混亂。
讓動畫成為(wèi)設計趨勢，其實是整個設計圈的走向造成的。扁平化和極簡風的流行開來，網頁(yè)設計确實簡約了很(hěn)多(duō)，但是用(yòng)戶需要更多(duō)的信息來告訴他(tā)們應該怎麽做，而動畫就是最好的方案—無需影響整體(tǐ)美感就可(kě)以給用(yòng)戶以足夠的引導。即使是最簡單的設計，動畫的存在都能(néng)給予用(yòng)戶以說明和指引，這樣前提下誕生的動效，在簡單和易用(yòng)性之間達成了平衡。
動畫其實在後端和用(yòng)戶端和有(yǒu)很(hěn)多(duō)不錯的影響。首先是大家再也不需要用(yòng)Flash來事先複雜的動畫了，它的實現方式也相當的自由和多(duō)樣，今天的動畫不會像曾經的Flash等技(jì )術那樣拖慢網站的呈現速度甚至影響服務(wù)器，加載速度飛快，體(tǐ)驗優異。

大和小(xiǎo)的競争無處不在，即使是動畫的領域也同樣是如此。
規模較大的動畫常常是以視頻的形式存在的，它們通常會占滿整屏或者一個比較關鍵的部位，循環、簡練是它們的特色。這些動畫為(wèi)整個設計創造了焦點，用(yòng)戶即使沒有(yǒu)執行任何操作(zuò)，也能(néng)看到它們。以StudioMeta的網站為(wèi)例，當你閱讀文(wén)案的時候，沒一張大圖都會逐步縮放。小(xiǎo)動效會出現在網站的各個角落，當你同網站進行交互的時候，會發現它們的存在。這些動效可(kě)能(néng)會在光标懸停的時候觸發，可(kě)能(néng)是一個指引性的标識，也可(kě)能(néng)以更加微妙的方式呈現。這些微小(xiǎo)的動效會對整體(tǐ)的美感産(chǎn)生影響，在 Henry Brown 的這個案例中(zhōng)，動畫就非常的小(xiǎo)而微妙，仔細觀察，你會發現人物(wù)的眼睛在閃爍。

當我們談及每一種設計趨勢的時候，都需要探讨一個重要的問題：什麽時候才能(néng)使用(yòng)它們。動畫可(kě)能(néng)是一種非常讨巧的設計手段，它有(yǒu)用(yòng)，但是并非适用(yòng)于每一個設計項目。動畫應該是平滑無縫的，而非滞塞機械的，它的服務(wù)對象是用(yòng)戶，并且和其他(tā)内容的呈現形式不一樣。
使用(yòng)動畫和動效的首要目的是提高網頁(yè)的可(kě)用(yòng)性。簡單的動效可(kě)以有(yǒu)效的引導用(yòng)戶，幫助他(tā)們了解點擊之後會去怎麽樣，即使是需要使用(yòng)複雜的視差滾動動效，設計師也會搭配一些簡單的動畫來作(zuò)為(wèi)引導和輔助之用(yòng)。
可(kě)用(yòng)性的呈現形式：
·解釋功能(néng)，展示網站的運作(zuò)·呈現變化，比如展示可(kě)點擊的元素，或者表單那的正确填寫方式·創建流程，或者引導用(yòng)戶執行動作(zuò)召喚類的操作(zuò)
使用(yòng)動效的第二個理(lǐ)由是出自美學(xué)需求。動畫和動效無疑是擁有(yǒu)強裝(zhuāng)飾性的元素，如果某個動效是出于視覺裝(zhuāng)飾的作(zuò)用(yòng)而進行設計的話，無疑是可(kě)以接受的。這種裝(zhuāng)飾性的動畫不僅有(yǒu)助于講述故事，而且可(kě)以建立用(yòng)戶界面之間的情感聯系，它可(kě)以通過視覺上的變化引發用(yòng)戶的興趣，在不斷的交互中(zhōng)讓用(yòng)戶停留更長(cháng)的時間，不斷回來。
如果你要創建純粹的動畫，那麽你楈枒仔細思考它能(néng)做什麽，會帶來什麽。你希望用(yòng)戶有(yǒu)什麽樣的反饋？想分(fēn)享一些獨特的内容，還是用(yòng)動效給用(yòng)戶帶來愉悅的體(tǐ)驗？這很(hěn)重要。

·《生命的錯覺》會告訴你一些關于動畫的12個基本原則·《網頁(yè)動畫的運作(zuò)》是一個列表，其中(zhōng)的資源會告訴你網頁(yè)動畫是如何運作(zuò)的·《CSS動效新(xīn)手指南》是告訴你如何運用(yòng)CSS屬性來制作(zuò)動畫的·《彈性SVG元素》是教你如何使用(yòng)SVG組件的教程·《UI動畫的藝術》是Mark Geyer 的文(wén)章·《創建優秀動畫的15個HTML5工(gōng)具(jù)》，如果你掌握了基礎知識，這個工(gōng)具(jù)列表會非常有(yǒu)用(yòng)·《動畫師的急救包》這篇文(wén)章也是介紹各種形式動畫的基本原理(lǐ)的
結語
評判動畫和動效其實并不難，隻要看它是否為(wèi)用(yòng)戶帶來更好的體(tǐ)驗，就知道了：它能(néng)否産(chǎn)生情感聯系，能(néng)不能(néng)讓人會心一笑，能(néng)不能(néng)讓網站更好使用(yòng)。
動畫是一種有(yǒu)趣的技(jì )術，它的運用(yòng)範疇會越來越廣，如果你對它有(yǒu)興趣，就持續研究下去，它就是未來。
我們學(xué)習UI設計在以後的工(gōng)作(zuò)中(zhōng)很(hěn)可(kě)能(néng)會參與公(gōng)司網站的設計，并且設計很(hěn)多(duō)的方法都是相通的，這麽多(duō)的知識理(lǐ)論設計方法，我們需要有(yǒu)一個系統的集結過程，目前國(guó)内類似CGWANG這樣的一些專業的人才培養基地，針對市場針對就業的職業培訓往往能(néng)夠讓我們最直接掌握參與UI設計工(gōng)作(zuò)所需的技(jì )能(néng)知識。

• 上一篇：UI頁(yè)面設計配色方案之小(xiǎo)白進階 2017/8/14
• 下一篇：優秀的網頁(yè)設計和網站建設技(jì )巧整理(lǐ) 2017/8/14

本文(wén)系本網編輯轉載，轉載目的在于傳遞更多(duō)信息，并不代表本網贊同其觀點和對其真實性負責。如涉及作(zuò)品内容、版權和其它問題，請在30日内與本網聯系，我們将在第一時間删除内容！
[聲明]本站文(wén)章版權歸原作(zuò)者所有(yǒu) 内容為(wèi)作(zuò)者個人觀點 本站隻提供參考并不構成任何投資及應用(yòng)建議。