網(wǎng)頁(yè)設(shè)計(jì)中的動(dòng)畫簡(jiǎn)介

動(dòng)畫不再僅僅是漫畫。從全屏移動(dòng)圖像到小型懸停效果，動(dòng)畫的觸感隨處可見。動(dòng)畫是時(shí)尚，有趣和用戶友好的。
而使用動(dòng)畫的障礙已經(jīng)開始下降。隨著大多數(shù)用戶進(jìn)行高速連接以及創(chuàng)建簡(jiǎn)單動(dòng)作或傻瓜gif到幾分鐘動(dòng)作等任何操作，動(dòng)畫已成為實(shí)用且有用的網(wǎng)頁(yè)設(shè)計(jì)工具。
動(dòng)畫基礎(chǔ)
當(dāng)以靜止或二維形式創(chuàng)建的東西被“帶入生活”并且似乎以遵循物理定律的方式移動(dòng)時(shí)，動(dòng)畫就會(huì)發(fā)生。這是一個(gè)漫畫人物在屏幕上漫步的方式，或者是一個(gè)應(yīng)用程序圖標(biāo)在加載到Mac桌面時(shí)如何像球彈跳一樣。
其中一個(gè)幾乎與動(dòng)畫同義的詞是迪斯尼。在二十世紀(jì)八十年代早期，兩家公司的高級(jí)動(dòng)畫師寫了一本詳細(xì)描述動(dòng)畫原理的書。弗蘭克托馬斯和奧利約翰斯頓的“ 幻覺生活：迪士尼動(dòng)畫 ”仍然為今天的動(dòng)畫提供了框架。
擠壓和伸展
預(yù)期
分期
直行動(dòng)和姿勢(shì)構(gòu)成
遵循并重疊操作
慢進(jìn)和慢進(jìn)
弧
次要行動(dòng)
定時(shí)
夸張
純色繪圖
上訴

網(wǎng)頁(yè)動(dòng)畫通常保存為GIF，CSS，SVG，WebGL或視頻。它們可以是任何內(nèi)容，包括將鼠標(biāo)懸停在單詞上時(shí)出現(xiàn)的簡(jiǎn)單下劃線到全屏視頻或背景圖像。與其他任何設(shè)計(jì)技術(shù)一樣，動(dòng)畫可能很微妙，或者它們可能在你的臉上，很難避免。

2017年新興趨勢(shì)
網(wǎng)頁(yè)設(shè)計(jì)中的動(dòng)畫是我們每天都會(huì)看到更多的東西。動(dòng)畫作為設(shè)計(jì)趨勢(shì)的關(guān)鍵是適度。小而簡(jiǎn)單的動(dòng)畫引人入勝且有趣; 用戶可能甚至不會(huì)考慮他們是否是動(dòng)畫。大型動(dòng)畫可能是一種有趣的視覺效果，可將您引入設(shè)計(jì)中。但是如果你開始混合太多不同的移動(dòng)效果，它可能會(huì)導(dǎo)致完全混亂。
什么讓動(dòng)畫時(shí)髦是現(xiàn)實(shí)主義。在今天的設(shè)計(jì)風(fēng)格中，有這么多平面和最小風(fēng)格的設(shè)計(jì)，用戶需要更多線索來告訴他們?cè)撟鍪裁础?dòng)畫的簡(jiǎn)單部分可以引導(dǎo)用戶而不改變審美。它有助于添加指令和命令，設(shè)計(jì)可能過于簡(jiǎn)單的方案，以便為用戶提供足夠的方向。在這個(gè)例子中，動(dòng)畫創(chuàng)建了簡(jiǎn)潔和易用性之間的愉快媒介。

這一趨勢(shì)的另一個(gè)促成因素是在設(shè)計(jì)的后端和用戶端使用工具。您不再需要Flash來制作更復(fù)雜的動(dòng)畫。（如果你還在Flash中建設(shè)，現(xiàn)在該停下來了。）它可以通過許多其他方式來完成。今天的動(dòng)畫不會(huì)讓網(wǎng)站或網(wǎng)絡(luò)服務(wù)器停滯不前，使用戶能夠快速加載效果，并且高速互聯(lián)網(wǎng)訪問動(dòng)畫不會(huì)在活動(dòng)周期的中途停頓。

大型與小型動(dòng)畫
當(dāng)談到網(wǎng)頁(yè)的動(dòng)畫時(shí)，它可以分為兩大類：大和小。（你大概可以猜到它們的外觀。）
大型動(dòng)畫是對(duì)他們有一定規(guī)模的動(dòng)畫。通常以運(yùn)行時(shí)間的視頻的形式，大型動(dòng)畫填充屏幕的重要部分并且是短片的特征。這些動(dòng)畫是整體設(shè)計(jì)的焦點(diǎn)。用戶通常不必執(zhí)行任何操作即可看到運(yùn)動(dòng)中的動(dòng)畫。如果您仔細(xì)觀看Studio Meta網(wǎng)站，每個(gè)大圖像在閱讀副本時(shí)都會(huì)放大。
小動(dòng)畫是您在開始與網(wǎng)站互動(dòng)時(shí)發(fā)現(xiàn)的小小片段。這些divots可能是懸停狀態(tài)，微小的裝飾或可用性指南或工具。小動(dòng)畫是有助于整體美學(xué)的重音，但不太可能成為設(shè)計(jì)的重點(diǎn)。在亨利布朗的網(wǎng)站中，簡(jiǎn)單的動(dòng)畫是如果仔細(xì)觀察，圖中的眼睛實(shí)際上就會(huì)閃爍。
何時(shí)使用動(dòng)畫
每個(gè)趨勢(shì)的問題，包括這一個(gè)，都知道何時(shí)使用它。動(dòng)畫對(duì)于您的設(shè)計(jì)工具包來說可能是一個(gè)很好的小竅門，但并不適用于每個(gè)項(xiàng)目。動(dòng)畫應(yīng)該平滑無縫，而不是跳動(dòng)或機(jī)械。它需要為用戶服務(wù)，而不是妨礙內(nèi)容的發(fā)展。
使用動(dòng)畫的主要原因是增加可用性。簡(jiǎn)單的動(dòng)畫可以成為很好的指導(dǎo)工具，以幫助人們了解在網(wǎng)站地圖上點(diǎn)擊哪些按鈕或下一步去哪里。許多使用復(fù)雜滾動(dòng)效果的設(shè)計(jì)師將簡(jiǎn)單的動(dòng)畫與用戶工具配對(duì)，以便進(jìn)行滾動(dòng)或點(diǎn)擊。（這包括一個(gè)簡(jiǎn)單的彈跳圖標(biāo)或彈出說“向下滾動(dòng)”的單詞的所有內(nèi)容。）
可用性有幾種形式：
通訊功能或如何使用網(wǎng)站
顯示更改，例如正確填寫表單或突出顯示元素可點(diǎn)擊
創(chuàng)建流程或?qū)⒂脩粢龑?dǎo)至號(hào)召性用語
使用動(dòng)畫的第二個(gè)原因是美學(xué)。動(dòng)畫可以是一個(gè)很好的“裝飾”。有時(shí)動(dòng)畫元素的目標(biāo)是純粹的視覺效果，這是一個(gè)可以接受的用途。這種裝飾動(dòng)畫可以幫助講述故事或在界面和用戶之間建立情感聯(lián)系。動(dòng)畫的目的可以是引發(fā)視覺興趣，并讓用戶長(zhǎng)時(shí)間與您的網(wǎng)站互動(dòng)。
創(chuàng)建純視覺動(dòng)畫時(shí)，應(yīng)考慮它應(yīng)該做什么。想想你想讓用戶擁有的連接。它應(yīng)該是有趣還是令人驚訝？是否有一些獨(dú)特的內(nèi)容是專為共享而設(shè)計(jì)的？即使是純粹的視覺也應(yīng)該有一個(gè)目標(biāo)。
資源

準(zhǔn)備開始動(dòng)畫？以下是一些用于進(jìn)一步閱讀的資源和幫助您開始使用的工具。

在生活視頻幻覺顯示的方式，很容易理解各的12個(gè)原則。
” 工作中的網(wǎng)絡(luò)動(dòng)畫 ”從列表除了是什么使動(dòng)畫的創(chuàng)作有很大的資源。
“ 初學(xué)者對(duì)CSS動(dòng)畫的介紹 ”向您展示了如何使用CSS屬性將正方形變成圓形。
彈性動(dòng)畫SVG元素是關(guān)于如何整合和動(dòng)畫SVG組件的教程。
該UI動(dòng)畫演示的藝術(shù)由馬克·蓋爾使用動(dòng)畫來解釋概念。
如果您已經(jīng)理解了基本知識(shí)，“ 15個(gè)創(chuàng)建高級(jí)動(dòng)畫的頂級(jí)HTML5工具 ”是一個(gè)很好的下一步和工具列表。
動(dòng)畫師的生存工具包教導(dǎo)適用于所有形式的動(dòng)畫的基本原則。

結(jié)論

在動(dòng)畫方面，經(jīng)驗(yàn)法則是：良好的動(dòng)畫會(huì)讓用戶的體驗(yàn)更好。這可以通過情感聯(lián)系的形式 - 例如有趣的積極體驗(yàn) - 或者通過使網(wǎng)站更易于使用。

動(dòng)畫是一種有趣的技術(shù)，對(duì)于各種應(yīng)用程序來說，它變得更加標(biāo)準(zhǔn)。如果您正在尋找靈感，請(qǐng)務(wù)必回過頭來閱讀本文，然后點(diǎn)擊整個(gè)視覺示例的鏈接，訪問網(wǎng)站并使用其中的動(dòng)畫功能進(jìn)行播放。玩的開心！

本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽：公司網(wǎng)站制作，成都建設(shè)網(wǎng)站，官網(wǎng)建設(shè)，網(wǎng)頁(yè)制作公司，建網(wǎng)站公司，企業(yè)建站，重慶網(wǎng)站建設(shè)公司，成都網(wǎng)頁(yè)設(shè)計(jì)公司，成都網(wǎng)站設(shè)計(jì)公司，企業(yè)網(wǎng)站建設(shè)

網(wǎng)站題目：網(wǎng)頁(yè)設(shè)計(jì)中的動(dòng)畫簡(jiǎn)介
鏈接URL：http://bm7419.com/news/164242.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、外貿(mào)建站、搜索引擎優(yōu)化、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)