動效知識總結!給設計師的網頁動畫設計基礎指南 - 優設網 - UISDC

動效知識總結!給設計師的網頁動畫設計基礎指南

2016/02/22 15634評論區

introduction-to-webdesign-animation-1

云南体彩网動畫早就不是早期人們印象中的低齡向玩物了,從早年的盧卡斯影業到今天的工業光魔,動畫技術證明了它可以實現無限的可能性;從70年代的高達、EVA到之后的宮崎駿、皮克斯,動畫的深度和內涵也早已不弱于片子和文學作品。而隨著技術的積累,網頁中的動畫也已經是遍地開花,它時尚,有趣,也人性化。賡續涌現的新技術和新工具令網頁動畫設計的門檻逐年降低,高速網絡也使得漂亮的動效和純萌的GIF幾乎是無縫地加載到網頁中。今天,我們可以斬釘截鐵地說,動畫已經是最常見也是最實用的網頁設計工具之一了。

基礎知識

watches

psd

bubble-jump

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

云南体彩网對動效或者說動畫最熟悉的,無疑是迪士尼。Frank Thomas 的《生命的錯覺:迪士尼動畫》中,就詳細總結了發明今天動畫的12個原則:

·擠壓和拉伸
·預期
·登臺
·連續動作和姿態對應
·緩進緩出
·弧形運動
·次要動作
·時序
·夸張
·立體刻畫
·吸引力

文末相關鏈接中,會附上關于這12原則的相關文獻。

云南体彩网網頁動畫的實現方式很多,最常見的是使用Gif圖,CSS,SVG,WebGL 以及視頻。但是和動漫分歧,網頁中的動畫可以是任何元素,小到下劃線,大到配景和整個頁面,它可以隨著頁面加載而涌現,也可能是鼠標移動到某個位置上之后被觸發。和其他的設計手法相似,動畫可以是非常微妙、觸動人心的,也可以是開門見山、清晰直觀的。所以,最重要的是看你怎么運用動效,是在合適的時候給人會心一擊,還是擺在顯眼的位置,令人不會錯過。

新興的趨勢

djeco

wonderland

ingenio

云南体彩网當我們談及網頁動效的時候,它和動漫、CG、片子、游戲中的動畫,是截然分歧的。當我們在網頁的語境之下提及動畫和動效的時候,它作為一個范例的設計趨勢和設計手法,節制是是最關鍵的因素。小巧簡單的動效在網頁中會更具吸引力,也更加有趣,那些真正“隱形”的動效會讓用戶難以察覺,卻更好地讓他們有更好的體驗。但是顯著而抓人眼球的復雜動效也很重要,它們會強化設計感。不過在動畫和動效的設計上,一致性很重要,過于復雜的規劃可能會讓整體效果混亂。

云南体彩网讓動畫成為設計趨勢,其實是整個設計圈的走向造成的。扁平化和極簡風的流行開來,網頁設計確實簡約了很多,但是用戶需要更多的信息來告訴他們應該怎么做,而動畫就是最好的方案——無需影響整體美感就可以給用戶以足夠的引導。即使是最簡單的設計,動畫的存在都能給予用戶以說明和指引,這樣前提下出身的動效,在簡單和易用性之間殺青了平衡。

動畫其實在后端和用戶端和有很多不錯的影響。首先是人人再也不需要用Flash來事先復雜的動畫了,它的實現方式也相當的自由和多樣,今天的動畫不會像曾經的Flash等技術那樣拖慢網站的涌現速度甚至影響服務器,加載速度飛快,體驗優異。

巨細動畫的對抗

rose

henry-brown

云南体彩网大和小的競爭無處不在,即使是動畫的領域也同樣是如此。

規模較大的動畫經常是以視頻的形式存在的,它們通常會占滿整屏或者一個比較關鍵的部位,循環、簡練是它們的特色。這些動畫為整個設計發明了焦點,用戶即使沒有執行任何操作,也能看到它們。以Studio Meta的網站為例,當你閱讀文案的時候,沒一張大圖都邑逐步縮放。

云南体彩网小動效會涌現在網站的各個角落,當你同網站進行交互的時候,會發現它們的存在。這些動效可能會在光標懸停的時候觸發,可能是一個指引性的標識,也可能以更加微妙的方式涌現。這些微小的動效會對整體的美感發生影響,在 Henry Brown 的這個案例中,動畫就非常的小而微妙,仔細觀察,你會發現人物的眼睛在閃爍。

什么時候使用動畫

species-pieces

gara

poker

當我們談及每一種設計趨勢的時候,都需要探討一個重要的問題:什么時候能力使用它們。動畫可能是一種非常討巧的設計手段,它有用,但是并非適用于每一個設計項目。動畫應該是平滑無縫的,而非滯塞機械的,它的服務對象是用戶,而且和其他內容的涌現形式紛歧樣。

使用動畫和動效的首要目的是提高網頁的可用性。簡單的動效可以有效的引導用戶,贊助他們了解點擊之后會去怎么樣,即使是需要使用復雜的視差滾動動效,設計師也會搭配一些簡單的動畫來作為引導和輔助之用。

云南体彩网可用性的涌現形式:

·解釋功能,展示網站的運作
·涌現變更,好比展示可點擊的元素,或者表單那的正確填寫方式
云南体彩网 ·創建流程,或者引導用戶執行動作召喚類的操作

云南体彩网使用動效的第二個理由是出自美學需求。動畫和動效無疑是擁有強裝飾性的元素,如果某個動效是出于視覺裝飾的作用而進行設計的話,無疑是可以接受的。這種裝飾性的動畫不僅有助于講述故事,而且可以建立用戶界面之間的情感聯系,它可以通過視覺上的變更引發用戶的興趣,在賡續的交互中讓用戶停留更長的時間,賡續回來。

云南体彩网如果你要創建純粹的動畫,那么你楈枒仔細思考它能做什么,會帶來什么。你希望用戶有什么樣的反饋?想分享一些奇特的內容,還是用動效給用戶帶來愉悅的體驗?這很重要。

一些資源

準備為網站加入動畫和動效么?接下來的一些文章或者網站可能會給你一些贊助。(這些文章都是英文的,恩)

·會告訴你一些關于動畫的12個基來源根基則
·是一個列表,其中的資源會告訴你網頁動畫是如何運作的
·是告訴你如何運用CSS屬性來制作動畫的
·是教你如何使用SVG組件的教程
·是Mark Geyer 的文章
·,如果你掌握了基礎知識,這個工具列表會非常有用
·這篇文章也是介紹各種形式動畫的基來源根基理的

結語

評判動畫和動效其實并不難,只要看它是否為用戶帶來更好的體驗,就知道了:它能否發生情感聯系,能不克不及讓人會心一笑,能不克不及讓網站更好使用。

云南体彩网動畫是一種有趣的技術,它的運用范疇會越來越廣,如果你對它有興趣,就連續研究下去,它就是未來。

【少年來學動效設計吧】

工欲善其事,必先利其器:
《上手即用好干貨!2016年九大前端必備動畫庫》

掌握常見的跳轉動效:
《交互小技巧!淺聊四個主流的頁面間跳轉動效》

粒子動效是新趨勢:
《一遇風云便成龍!值得你關注的動感粒子動效設計趨勢》

原文地址:
原文作者:
優設譯文:

uisdc-hao

本文由優設網原創翻譯,請尊重版權和譯者結果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網7daer.cn“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.7daer.cn/book/
設計微博:擁有粉絲量104萬的人氣微博 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.7daer.cn

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.7daer.cn/introduction-to-webdesign-animation

發表評論 加載中....

評論加載中....

uisdc

云南体彩网評論區都快餓癟了,看看我期盼的小眼神...

您還沒有登錄

優設啟用更平安省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里