人人都是產(chǎn)品經(jīng)理【起點(diǎn)學(xué)院】，BAT實(shí)戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學(xué)產(chǎn)品、學(xué)運(yùn)營(yíng)。

動(dòng)畫早就不是早期人們印象中的低齡向玩物了，從早年的盧卡斯影業(yè)到今天的工業(yè)光魔，動(dòng)畫技術(shù)證明了它可以實(shí)現(xiàn)無限的可能性；從70年代的高達(dá)、 EVA到之后的宮崎駿、皮克斯，動(dòng)畫的深度和內(nèi)涵也早已不弱于電影和文學(xué)作品。而隨著技術(shù)的積累，網(wǎng)頁中的動(dòng)畫也已經(jīng)是遍地開花，它時(shí)尚，有趣，也人性 化。不斷涌現(xiàn)的新技術(shù)和新工具令網(wǎng)頁動(dòng)畫設(shè)計(jì)的門檻逐年降低，高速網(wǎng)絡(luò)也使得漂亮的動(dòng)效和純萌的GIF幾乎是無縫地加載到網(wǎng)頁中。今天，我們可以斬釘截鐵 地說，動(dòng)畫已經(jīng)是最常見也是最實(shí)用的網(wǎng)頁設(shè)計(jì)工具之一了。

基礎(chǔ)知識(shí)

將靜止或者二維平面上的物體賦予生機(jī)與活力，讓它們以符合或者貼近物理定律的方式來運(yùn)動(dòng)，這就是我們所熟知的動(dòng)畫。Mac 桌面上那個(gè)著名的圖標(biāo)跳動(dòng)動(dòng)畫就是最典型的例子之一，那種模擬皮球在地上彈跳的效果顯得真實(shí)而有質(zhì)感，這種動(dòng)畫設(shè)計(jì)是遵循著名的動(dòng)畫設(shè)計(jì)12原則的。

對(duì)動(dòng)效或者說動(dòng)畫最熟悉的，無疑是迪士尼。Frank Thomas 的《生命的錯(cuò)覺：迪士尼動(dòng)畫》中，就詳細(xì)總結(jié)了創(chuàng)造今天動(dòng)畫的12個(gè)原則：

• 擠壓和拉伸
• 預(yù)期
• 登臺(tái)
• 連續(xù)動(dòng)作和姿態(tài)對(duì)應(yīng)
• 緩進(jìn)緩出
• 弧形運(yùn)動(dòng)
• 次要?jiǎng)幼?/li>
• 時(shí)序
• 夸張
• 立體刻畫
• 吸引力

文末相關(guān)鏈接中，會(huì)附上關(guān)于這12原則的相關(guān)文獻(xiàn)。

網(wǎng)頁動(dòng)畫的實(shí)現(xiàn)方式很多，最常見的是使用Gif圖，CSS，SVG，WebGL 以及視頻。但是和動(dòng)漫不同，網(wǎng)頁中的動(dòng)畫可以是任何元素，小到下劃線，大到背景和整個(gè)頁面，它可以隨著頁面加載而出現(xiàn)，也可能是鼠標(biāo)移動(dòng)到某個(gè)位置上之后 被觸發(fā)。和其他的設(shè)計(jì)手法相似，動(dòng)畫可以是非常微妙、觸動(dòng)人心的，也可以是開門見山、清晰直觀的。所以，最重要的是看你怎么運(yùn)用動(dòng)效，是在合適的時(shí)候給人 會(huì)心一擊，還是擺在顯眼的位置，令人不會(huì)錯(cuò)過。

新興的趨勢(shì)

當(dāng)我們談及網(wǎng)頁動(dòng)效的時(shí)候，它和動(dòng)漫、CG、電影、游戲中的動(dòng)畫，是截然不同的。當(dāng)我們?cè)诰W(wǎng)頁的語境之下提及動(dòng)畫和動(dòng)效的時(shí)候，它作為一個(gè)典型的設(shè) 計(jì)趨勢(shì)和設(shè)計(jì)手法，節(jié)制是是最關(guān)鍵的因素。小巧簡(jiǎn)單的動(dòng)效在網(wǎng)頁中會(huì)更具吸引力，也更加有趣，那些真正“隱形”的動(dòng)效會(huì)讓用戶難以察覺，卻更好地讓他們有 更好的體驗(yàn)。但是顯著而抓人眼球的復(fù)雜動(dòng)效也很重要，它們會(huì)強(qiáng)化設(shè)計(jì)感。不過在動(dòng)畫和動(dòng)效的設(shè)計(jì)上，一致性很重要，過于復(fù)雜的規(guī)劃可能會(huì)讓整體效果混亂。

讓動(dòng)畫成為設(shè)計(jì)趨勢(shì)，其實(shí)是整個(gè)設(shè)計(jì)圈的走向造成的。扁平化和極簡(jiǎn)風(fēng)的流行開來，網(wǎng)頁設(shè)計(jì)確實(shí)簡(jiǎn)約了很多，但是用戶需要更多的信息來告訴他們應(yīng)該怎么做，而動(dòng)畫就是最好的方案——無需影響整體美感就可以給用戶以足夠的引導(dǎo)。即使是最簡(jiǎn)單的設(shè)計(jì)，動(dòng)畫的存在都能給予用戶以說明和指引，這樣前提下誕生的動(dòng)效，在簡(jiǎn)單和易用性之間達(dá)成了平衡。

動(dòng)畫其實(shí)在后端和用戶端和有很多不錯(cuò)的影響。首先是大家再也不需要用Flash來事先復(fù)雜的動(dòng)畫了，它的實(shí)現(xiàn)方式也相當(dāng)?shù)淖杂珊投鄻樱裉斓膭?dòng)畫不會(huì)像曾經(jīng)的Flash等技術(shù)那樣拖慢網(wǎng)站的呈現(xiàn)速度甚至影響服務(wù)器，加載速度飛快，體驗(yàn)優(yōu)異。

大小動(dòng)畫的對(duì)抗

大和小的競(jìng)爭(zhēng)無處不在，即使是動(dòng)畫的領(lǐng)域也同樣是如此。

規(guī)模較大的動(dòng)畫常常是以視頻的形式存在的，它們通常會(huì)占滿整屏或者一個(gè)比較關(guān)鍵的部位，循環(huán)、簡(jiǎn)練是它們的特色。這些動(dòng)畫為整個(gè)設(shè)計(jì)創(chuàng)造了焦點(diǎn)，用戶即使沒有執(zhí)行任何操作，也能看到它們。以Studio Meta的網(wǎng)站為例，當(dāng)你閱讀文案的時(shí)候，沒一張大圖都會(huì)逐步縮放。

小動(dòng)效會(huì)出現(xiàn)在網(wǎng)站的各個(gè)角落，當(dāng)你同網(wǎng)站進(jìn)行交互的時(shí)候，會(huì)發(fā)現(xiàn)它們的存在。這些動(dòng)效可能會(huì)在光標(biāo)懸停的時(shí)候觸發(fā)，可能是一個(gè)指引性的標(biāo)識(shí)，也可 能以更加微妙的方式呈現(xiàn)。這些微小的動(dòng)效會(huì)對(duì)整體的美感產(chǎn)生影響，在 Henry Brown 的這個(gè)案例中，動(dòng)畫就非常的小而微妙，仔細(xì)觀察，你會(huì)發(fā)現(xiàn)人物的眼睛在閃爍。

什么時(shí)候使用動(dòng)畫

當(dāng)我們談及每一種設(shè)計(jì)趨勢(shì)的時(shí)候，都需要探討一個(gè)重要的問題：什么時(shí)候才能使用它們。動(dòng)畫可能是一種非常討巧的設(shè)計(jì)手段，它有用，但是并非適用于每一個(gè)設(shè)計(jì)項(xiàng)目。動(dòng)畫應(yīng)該是平滑無縫的，而非滯塞機(jī)械的，它的服務(wù)對(duì)象是用戶，并且和其他內(nèi)容的呈現(xiàn)形式不一樣。

使用動(dòng)畫和動(dòng)效的首要目的是提高網(wǎng)頁的可用性。簡(jiǎn)單的動(dòng)效可以有效的引導(dǎo)用戶，幫助他們了解點(diǎn)擊之后會(huì)去怎么樣，即使是需要使用復(fù)雜的視差滾動(dòng)動(dòng)效，設(shè)計(jì)師也會(huì)搭配一些簡(jiǎn)單的動(dòng)畫來作為引導(dǎo)和輔助之用。

可用性的呈現(xiàn)形式：

• 解釋功能，展示網(wǎng)站的運(yùn)作
• 呈現(xiàn)變化，比如展示可點(diǎn)擊的元素，或者表單那的正確填寫方式
• 創(chuàng)建流程，或者引導(dǎo)用戶執(zhí)行動(dòng)作召喚類的操作

使用動(dòng)效的第二個(gè)理由是出自美學(xué)需求。動(dòng)畫和動(dòng)效無疑是擁有強(qiáng)裝飾性的元素，如果某個(gè)動(dòng)效是出于視覺裝飾的作用而進(jìn)行設(shè)計(jì)的話，無疑是可以接受的。 這種裝飾性的動(dòng)畫不僅有助于講述故事，而且可以建立用戶界面之間的情感聯(lián)系，它可以通過視覺上的變化引發(fā)用戶的興趣，在不斷的交互中讓用戶停留更長(zhǎng)的時(shí) 間，不斷回來。

如果你要?jiǎng)?chuàng)建純粹的動(dòng)畫，那么你楈枒仔細(xì)思考它能做什么，會(huì)帶來什么。你希望用戶有什么樣的反饋？想分享一些獨(dú)特的內(nèi)容，還是用動(dòng)效給用戶帶來愉悅的體驗(yàn)？這很重要。

一些資源

準(zhǔn)備為網(wǎng)站加入動(dòng)畫和動(dòng)效么？接下來的一些文章或者網(wǎng)站可能會(huì)給你一些幫助。(這些文章都是英文的，恩)

《生命的錯(cuò)覺》會(huì)告訴你一些關(guān)于動(dòng)畫的12個(gè)基本原則

《網(wǎng)頁動(dòng)畫的運(yùn)作》是一個(gè)列表，其中的資源會(huì)告訴你網(wǎng)頁動(dòng)畫是如何運(yùn)作的

《CSS動(dòng)效新手指南》是告訴你如何運(yùn)用CSS屬性來制作動(dòng)畫的

《彈性SVG元素》是教你如何使用SVG組件的教程

《UI動(dòng)畫的藝術(shù)》是Mark Geyer 的文章

《創(chuàng)建優(yōu)秀動(dòng)畫的15個(gè)HTML5工具》，如果你掌握了基礎(chǔ)知識(shí)，這個(gè)工具列表會(huì)非常有用

《動(dòng)畫師的急救包》這篇文章也是介紹各種形式動(dòng)畫的基本原理的

結(jié)語

評(píng)判動(dòng)畫和動(dòng)效其實(shí)并不難，只要看它是否為用戶帶來更好的體驗(yàn)，就知道了：它能否產(chǎn)生情感聯(lián)系，能不能讓人會(huì)心一笑，能不能讓網(wǎng)站更好使用。

動(dòng)畫是一種有趣的技術(shù)，它的運(yùn)用范疇會(huì)越來越廣，如果你對(duì)它有興趣，就持續(xù)研究下去，它就是未來。

譯文來自：優(yōu)設(shè)

原文地址：designshack

優(yōu)設(shè)譯文：@陳子木

、?網(wǎng)站題目

個(gè)人網(wǎng)頁設(shè)計(jì)、?♂?個(gè)人簡(jiǎn)歷制作、?簡(jiǎn)單靜態(tài)HTML個(gè)人網(wǎng)頁作品、?個(gè)人介紹網(wǎng)站模板 、等網(wǎng)站的設(shè)計(jì)與制作。

二、??網(wǎng)站描述

?個(gè)人網(wǎng)頁設(shè)計(jì)網(wǎng)站模板采用DIV CSS布局制作，網(wǎng)頁作品有多個(gè)頁面，如 :個(gè)人介紹（文字頁面）、我的作品（圖片列表）、個(gè)人技能（圖文頁面）、在線留言（表單頁面）CSS樣式方面網(wǎng)頁整體采用左右布局結(jié)構(gòu)，制作了網(wǎng)頁背景圖片，導(dǎo)航區(qū)域每個(gè)導(dǎo)航背景色不同，導(dǎo)航背景色與頁面背景呼應(yīng)。

一套A+的網(wǎng)頁應(yīng)該包含 (具體可根據(jù)個(gè)人要求而定)

頁面分為頁頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分。

所有頁面相互超鏈接，可到三級(jí)頁面，有5-10個(gè)頁面組成。

頁面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯(cuò)亂，使用Div+Css技術(shù)。

菜單美觀、醒目，二級(jí)菜單可正常彈出與跳轉(zhuǎn)。

要有JS特效，如定時(shí)切換和手動(dòng)切換圖片輪播。

頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用。。

頁面清爽、美觀、大方，不雷同。 。

不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。

三、網(wǎng)站介紹

網(wǎng)站布局方面：計(jì)劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動(dòng)網(wǎng)頁布局結(jié)構(gòu)。

網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計(jì)。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時(shí)看到網(wǎng)站的效果。

網(wǎng)站素材方面：計(jì)劃收集各大平臺(tái)好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。

網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；

網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡(jiǎn)單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。

其中：

（1）html文件包含：其中index.html是首頁、其他html為二級(jí)頁面；

（2） css文件包含：css全部頁面樣式,文字滾動(dòng), 圖片放大等；

（3） js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁中運(yùn)用到j(luò)s代碼）。

網(wǎng)站頁面展示：

<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>
<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- builder code-->
<script src="libs/builder/builder.js"></script>	
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>	
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>	
<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script>	
<script src="libs/builder/components-widgets.js"></script>	
<script>
$(document).ready(function() 
{
	Vvveb.Builder.init('demo/index.html', function() {
		//load code after page is loaded here
		Vvveb.Gui.init();
	});
});
</script>

Vvveb.ComponentsGroup['Widgets']=["widgets/googlemaps", "widgets/video"];

Vvveb.Components.extend("_base", "html/link", {
 nodes: ["a"],
 name: "Link",
 properties: [{
 name: "Url",
 key: "href",
 htmlAttr: "href",
 inputtype: LinkInput
 }, {
 name: "Target",
 key: "target",
 htmlAttr: "target",
 inputtype: TextInput
 }]
});

var TextInput=$.extend({}, Input, {
 events: {
 "keyup": ['onChange', 'input'],
	 },
	setValue: function(value) {
		$('input', this.element).val(value);
	},
	
	init: function(data) {
		return this.render("textinput", data);
	},
 }
);

<script id="vvveb-input-textinput" type="text/html">
	
	<div>
		<input name="{%=key%}" type="text" class="form-control"/>
	</div>
	
</script>