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

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

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

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

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

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

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

結(jié)論

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

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

本文來(lái)自創(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è)

當(dāng)前名稱：網(wǎng)頁(yè)設(shè)計(jì)中的動(dòng)畫(huà)簡(jiǎn)介
網(wǎng)頁(yè)URL：http://jinyejixie.com/news42/164242.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、App開(kāi)發(fā)、網(wǎng)站改版、企業(yè)網(wǎng)站制作、微信公眾號(hào)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)