動畫早就不是早期人們印象中的低齡向玩物了,從早年的盧卡斯影業(yè)到今天的工業(yè)光魔,動畫技術(shù)證明了它可以實(shí)現(xiàn)無限的可能性;從70年代的高達(dá)、EVA到之后的宮崎駿、皮克斯,動畫的深度和內(nèi)涵也早已不弱于電影和文學(xué)作品。而隨著技術(shù)的積累,網(wǎng)頁中的動畫也已經(jīng)是遍地開花,它時(shí)尚,有趣,也人性化。不斷涌現(xiàn)的新技術(shù)和新工具令網(wǎng)頁動畫設(shè)計(jì)的門檻逐年降低,高速網(wǎng)絡(luò)也使得漂亮的動效和純萌的GIF幾乎是無縫地加載到網(wǎng)頁中。今天,我們可以斬釘截鐵地說,動畫已經(jīng)是最常見也是最實(shí)用的網(wǎng)頁設(shè)計(jì)工具之一了。
基礎(chǔ)知識
將靜止或者二維平面上的物體賦予生機(jī)與活力,讓它們以符合或者貼近物理定律的方式來運(yùn)動,這就是我們所熟知的動畫。Mac 桌面上那個(gè)著名的圖標(biāo)跳動動畫就是最典型的例子之一,那種模擬皮球在地上彈跳的效果顯得真實(shí)而有質(zhì)感,這種動畫設(shè)計(jì)是遵循著名的動畫設(shè)計(jì)12原則的。
對動效或者說動畫最熟悉的,無疑是迪士尼。Frank Thomas 的《生命的錯(cuò)覺:迪士尼動畫》中,就詳細(xì)總結(jié)了創(chuàng)造今天動畫的12個(gè)原則:
·擠壓和拉伸
·預(yù)期
·登臺
·連續(xù)動作和姿態(tài)對應(yīng)
·緩進(jìn)緩出
·弧形運(yùn)動
·次要動作
·時(shí)序
·夸張
·立體刻畫
·吸引力
網(wǎng)頁動畫的實(shí)現(xiàn)方式很多,最常見的是使用Gif圖,CSS,SVG,WebGL 以及視頻。但是和動漫不同,網(wǎng)頁中的動畫可以是任何元素,小到下劃線,大到背景和整個(gè)頁面,它可以隨著頁面加載而出現(xiàn),也可能是鼠標(biāo)移動到某個(gè)位置上之后被觸發(fā)。和其他的設(shè)計(jì)手法相似,動畫可以是非常微妙、觸動人心的,也可以是開門見山、清晰直觀的。所以,最重要的是看你怎么運(yùn)用動效,是在合適的時(shí)候給人會心一擊,還是擺在顯眼的位置,令人不會錯(cuò)過。
新興的趨勢
當(dāng)我們談及網(wǎng)頁動效的時(shí)候,它和動漫、CG、電影、游戲中的動畫,是截然不同的。當(dāng)我們在網(wǎng)頁的語境之下提及動畫和動效的時(shí)候,它作為一個(gè)典型的設(shè)計(jì)趨勢和設(shè)計(jì)手法,節(jié)制是是最關(guān)鍵的因素。小巧簡單的動效在網(wǎng)頁中會更具吸引力,也更加有趣,那些真正“隱形”的動效會讓用戶難以察覺,卻更好地讓他們有更好的體驗(yàn)。但是顯著而抓人眼球的復(fù)雜動效也很重要,它們會強(qiáng)化設(shè)計(jì)感。不過在動畫和動效的設(shè)計(jì)上,一致性很重要,過于復(fù)雜的規(guī)劃可能會讓整體效果混亂。
讓動畫成為設(shè)計(jì)趨勢,其實(shí)是整個(gè)設(shè)計(jì)圈的走向造成的。扁平化和極簡風(fēng)的流行開來,網(wǎng)頁設(shè)計(jì)確實(shí)簡約了很多,但是用戶需要更多的信息來告訴他們應(yīng)該怎么做,而動畫就是最好的方案——無需影響整體美感就可以給用戶以足夠的引導(dǎo)。即使是最簡單的設(shè)計(jì),動畫的存在都能給予用戶以說明和指引,這樣前提下誕生的動效,在簡單和易用性之間達(dá)成了平衡。
動畫其實(shí)在后端和用戶端和有很多不錯(cuò)的影響。首先是大家再也不需要用Flash來事先復(fù)雜的動畫了,它的實(shí)現(xiàn)方式也相當(dāng)?shù)淖杂珊投鄻?,今天的動畫不會像曾?jīng)的Flash等技術(shù)那樣拖慢網(wǎng)站的呈現(xiàn)速度甚至影響服務(wù)器,加載速度飛快,體驗(yàn)優(yōu)異。
大小動畫的對抗
大和小的競爭無處不在,即使是動畫的領(lǐng)域也同樣是如此。
規(guī)模較大的動畫常常是以視頻的形式存在的,它們通常會占滿整屏或者一個(gè)比較關(guān)鍵的部位,循環(huán)、簡練是它們的特色。這些動畫為整個(gè)設(shè)計(jì)創(chuàng)造了焦點(diǎn),用戶即使沒有執(zhí)行任何操作,也能看到它們。以Studio Meta的網(wǎng)站為例,當(dāng)你閱讀文案的時(shí)候,沒一張大圖都會逐步縮放。
小動效會出現(xiàn)在網(wǎng)站的各個(gè)角落,當(dāng)你同網(wǎng)站進(jìn)行交互的時(shí)候,會發(fā)現(xiàn)它們的存在。這些動效可能會在光標(biāo)懸停的時(shí)候觸發(fā),可能是一個(gè)指引性的標(biāo)識,也可能以更加微妙的方式呈現(xiàn)。這些微小的動效會對整體的美感產(chǎn)生影響,在 Henry Brown 的這個(gè)案例中,動畫就非常的小而微妙,仔細(xì)觀察,你會發(fā)現(xiàn)人物的眼睛在閃爍。
什么時(shí)候使用動畫
當(dāng)我們談及每一種設(shè)計(jì)趨勢的時(shí)候,都需要探討一個(gè)重要的問題:什么時(shí)候才能使用它們。動畫可能是一種非常討巧的設(shè)計(jì)手段,它有用,但是并非適用于每一個(gè)設(shè)計(jì)項(xiàng)目。動畫應(yīng)該是平滑無縫的,而非滯塞機(jī)械的,它的服務(wù)對象是用戶,并且和其他內(nèi)容的呈現(xiàn)形式不一樣。
使用動畫和動效的首要目的是提高網(wǎng)頁的可用性。簡單的動效可以有效的引導(dǎo)用戶,幫助他們了解點(diǎn)擊之后會去怎么樣,即使是需要使用復(fù)雜的視差滾動動效,設(shè)計(jì)師也會搭配一些簡單的動畫來作為引導(dǎo)和輔助之用。
可用性的呈現(xiàn)形式:
·解釋功能,展示網(wǎng)站的運(yùn)作
·呈現(xiàn)變化,比如展示可點(diǎn)擊的元素,或者表單那的正確填寫方式
·創(chuàng)建流程,或者引導(dǎo)用戶執(zhí)行動作召喚類的操作
使用動效的第二個(gè)理由是出自美學(xué)需求。動畫和動效無疑是擁有強(qiáng)裝飾性的元素,如果某個(gè)動效是出于視覺裝飾的作用而進(jìn)行設(shè)計(jì)的話,無疑是可以接受的。這種裝飾性的動畫不僅有助于講述故事,而且可以建立用戶界面之間的情感聯(lián)系,它可以通過視覺上的變化引發(fā)用戶的興趣,在不斷的交互中讓用戶停留更長的時(shí)間,不斷回來。
如果你要創(chuàng)建純粹的動畫,那么你楈枒仔細(xì)思考它能做什么,會帶來什么。你希望用戶有什么樣的反饋?想分享一些獨(dú)特的內(nèi)容,還是用動效給用戶帶來愉悅的體驗(yàn)?這很重要。
結(jié)語
評判動畫和動效其實(shí)并不難,只要看它是否為用戶帶來更好的體驗(yàn),就知道了:它能否產(chǎn)生情感聯(lián)系,能不能讓人會心一笑,能不能讓網(wǎng)站更好使用。
動畫是一種有趣的技術(shù),它的運(yùn)用范疇會越來越廣,如果你對它有興趣,就持續(xù)研究下去,它就是未來。
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!
標(biāo)題名稱:給設(shè)計(jì)師的網(wǎng)頁動畫設(shè)計(jì)基礎(chǔ)指南
轉(zhuǎn)載來源:http://m.rwnh.cn/news20/314670.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、App開發(fā)、靜態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、網(wǎng)頁設(shè)計(jì)公司
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)