給UI設計師的網頁動畫設計基礎指南(nán)

來源:            2017-8-14 15:02:01            浏覽量:

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

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

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

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

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

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

四川聚之潤網絡科技有限公司 Copyright© 2016-2020 http://www.tingson.cn 您身邊的網絡營銷服務專家

西安網絡公司西安網站建設西安網絡營銷公司鹹陽網絡公司