域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

在網(wǎng)站中使用動(dòng)畫(huà)效果并不是什么新鮮事兒。建站早期，不少設(shè)計(jì)師經(jīng)常在自己的網(wǎng)站中放置gif動(dòng)畫(huà)，但由于許多設(shè)計(jì)逐漸不能兼?zhèn)鋵?shí)用性，動(dòng)畫(huà)效果慢慢成為糟糕的用戶體驗(yàn)的代名詞。不過(guò)，近些日子隨著Html5技術(shù)的發(fā)展，依靠CSS3做出的動(dòng)畫(huà)比Javascript的操作更簡(jiǎn)單、瀏覽更順暢，因此動(dòng)畫(huà)效果在歷經(jīng)起起落落之后再次回歸到大眾的懷抱，很多網(wǎng)站開(kāi)發(fā)者開(kāi)始重新思考怎樣將它更好地應(yīng)用到網(wǎng)站中。其實(shí)，適當(dāng)?shù)膭?dòng)畫(huà)效果可以給枯燥無(wú)味的用戶界面增加趣味，增添網(wǎng)站的個(gè)性化色彩，引起用戶的情感共鳴，提升用戶體驗(yàn)，提高用戶轉(zhuǎn)化率。今天小飛就帶大家一起看看動(dòng)效有哪些好處，以及在網(wǎng)站中可以怎樣使用。

在網(wǎng)站中使用動(dòng)畫(huà)效果的好處：

1.增加趣味性

設(shè)計(jì)巧妙的動(dòng)畫(huà)常常會(huì)給用戶帶來(lái)意想不到的驚喜，給網(wǎng)站增加一定的趣味性。Deal in就是一個(gè)很好的栗子，這個(gè)界面的底部有一個(gè)牛皮紙袋，看上去并沒(méi)有什么特別，但當(dāng)我們挑選好自己心儀的商品將它們添加到袋子中時(shí)，某一行的商品像是從紙上被撕下一樣。這種意料不到的操作雖然只是一個(gè)小細(xì)節(jié)，但卻能讓用戶產(chǎn)生興趣，激發(fā)他們的探索欲望。我們?cè)谧约壕W(wǎng)站的產(chǎn)品等頁(yè)面也可以使用恰當(dāng)?shù)膭?dòng)畫(huà)效果，給用戶提供預(yù)期之外的效果，讓他們更愉悅，更愿意在網(wǎng)站停駐瀏覽。

2.增添個(gè)性化色彩

動(dòng)畫(huà)效果能夠給網(wǎng)站增添個(gè)性化色彩。在網(wǎng)站導(dǎo)航菜單處使用淡入的動(dòng)畫(huà)效果，能給網(wǎng)站營(yíng)造一種優(yōu)雅大方的感覺(jué);在網(wǎng)站中使用滑出和傾倒讓屏幕上出現(xiàn)天女散花般的絢麗效果，這會(huì)樹(shù)立生動(dòng)活潑的網(wǎng)站形象。不同形式的動(dòng)畫(huà)效果會(huì)給用戶留下不一樣的印象，這種個(gè)性化色彩是網(wǎng)站的特色所在，能將其與對(duì)手網(wǎng)站區(qū)別開(kāi)來(lái)。

Optimo's hats 這個(gè)網(wǎng)站就使用懸浮的動(dòng)畫(huà)效果做出了很好的效果。當(dāng)你將鼠標(biāo)放在每個(gè)帽子的圖像上時(shí)，它們會(huì)微微翹起，下方就會(huì)出現(xiàn)每個(gè)帽子的名稱，移開(kāi)時(shí)文本就會(huì)消失。這種動(dòng)畫(huà)讓整個(gè)網(wǎng)站更顯典雅別致，也讓用戶在瀏覽上更加輕松。

3.引起訪客情感共鳴

在第二點(diǎn)中，小飛談到了動(dòng)畫(huà)效果給網(wǎng)站帶來(lái)的個(gè)性化特征。其實(shí)網(wǎng)站的個(gè)性化特征從某種程度上彰顯著站長(zhǎng)的性格偏好，如果某個(gè)網(wǎng)站上使用的動(dòng)畫(huà)效果比較活潑，不難判斷出這個(gè)站長(zhǎng)平時(shí)可能比較外向。對(duì)于網(wǎng)站訪客來(lái)說(shuō)，他們能因此更直觀的認(rèn)識(shí)電腦或屏幕背后的那個(gè)人。而站長(zhǎng)在通過(guò)訪客們表達(dá)對(duì)某種特效的好惡也能對(duì)用戶們有一定的了解。這樣一來(lái)，我們就能與用戶建立情感上的紐帶，更易引起用戶與網(wǎng)站的互動(dòng)。而且，如果一些訪客比較欣賞網(wǎng)站上的某個(gè)動(dòng)效，他們可能還會(huì)與朋友進(jìn)行分享，這有利于網(wǎng)站知名度的擴(kuò)大。

在網(wǎng)站中可以怎樣使用動(dòng)畫(huà)效果?

1.在加載頁(yè)面使用

建站早期，頁(yè)面在加載時(shí)，用戶只能看著空白的屏幕或閃爍的光標(biāo)干等著，那時(shí)候的用戶還是比較有耐心的。而現(xiàn)在，如果用戶看到加載頁(yè)一片空白，會(huì)覺(jué)得頁(yè)面沒(méi)有在加載或速度太慢，可能就會(huì)直接退出。加載頁(yè)是給用戶的第一印象，是溝通用戶與網(wǎng)站內(nèi)容的橋梁，無(wú)趣的加載頁(yè)大大降低了網(wǎng)站的流量。而有趣的動(dòng)畫(huà)則能力挽狂瀾，它夠有效轉(zhuǎn)移用戶的注意力，降低用戶的期待感，進(jìn)度條式加載動(dòng)畫(huà)還能讓用戶了解目前的進(jìn)度。如果你無(wú)法縮短頁(yè)面加載的時(shí)間，那就盡量讓這個(gè)過(guò)程變得有趣吧，讓他們?cè)俣嗤Ａ粢恍?huì)吧。快在加載頁(yè)面使用動(dòng)畫(huà)效果緩解用戶的急切感吧!

2.在導(dǎo)航菜單欄使用

簡(jiǎn)單易操作的導(dǎo)航菜單對(duì)確保網(wǎng)站的用戶友好十分重要。恰當(dāng)?shù)膭?dòng)畫(huà)效果可以使菜單欄更簡(jiǎn)潔、精煉，更能抓住用戶的眼球。而且，隨著極簡(jiǎn)主義的趨勢(shì)越來(lái)越流行，隱藏式導(dǎo)航菜單也受到越來(lái)越多人的歡迎。隱藏在漢堡圖標(biāo)中的菜單怎樣在點(diǎn)擊或關(guān)閉時(shí)實(shí)現(xiàn)很好的銜接呢?動(dòng)效的作用不容小覷，現(xiàn)在很多設(shè)計(jì)師在導(dǎo)航菜單上會(huì)使用滑出或彈出的效果，下圖就是一個(gè)栗子。網(wǎng)頁(yè)右側(cè)彈出的動(dòng)畫(huà)讓導(dǎo)航清晰可見(jiàn)，也讓網(wǎng)站整體內(nèi)容更加豐富。

3. 在主頁(yè)上使用

動(dòng)畫(huà)效果還可以用來(lái)美化網(wǎng)站的主頁(yè)面，突出網(wǎng)站的品牌、圖標(biāo)，呈現(xiàn)給用戶不一樣的視覺(jué)美感。Theory agency這個(gè)網(wǎng)站在主頁(yè)面就使用了動(dòng)畫(huà)效果，當(dāng)你打開(kāi)這個(gè)網(wǎng)站時(shí)，頁(yè)眉會(huì)以滑入的動(dòng)畫(huà)效果呈現(xiàn)，這一點(diǎn)小改變會(huì)帶來(lái)大不同。除了在主頁(yè)面上使用動(dòng)畫(huà)效果，網(wǎng)站在其他元素上也使用了動(dòng)效，按住滾動(dòng)條向下拖動(dòng)時(shí)各種元素會(huì)給用戶一種魚(yú)貫而入的感覺(jué)，流暢清晰。

除了Theory agency以外，Underbelly在將動(dòng)畫(huà)應(yīng)用到網(wǎng)站主頁(yè)上也是一個(gè)比較好的栗子。整個(gè)網(wǎng)站布局簡(jiǎn)練大氣，最有趣的莫過(guò)于網(wǎng)站上方的圖標(biāo)了，往下拖動(dòng)頁(yè)面時(shí)這個(gè)鯨魚(yú)圖標(biāo)會(huì)縮小，往上它又會(huì)恢復(fù)原樣，很是新穎別致?？戳诉@樣的動(dòng)畫(huà)效果，你還會(huì)對(duì)這個(gè)圖標(biāo)沒(méi)印象嗎?

4.在焦點(diǎn)區(qū)域上使用

人總是很容易為移動(dòng)著的事物所影響，這是一種生理本能，動(dòng)畫(huà)效果能夠極大的吸引用戶的注意力。如果我們能夠有效的將它用在用戶關(guān)注的焦點(diǎn)問(wèn)題上，可以很好的提升用戶體驗(yàn)。比如在"回到頂部"上使用動(dòng)畫(huà)，給用戶一個(gè)引導(dǎo)，在向下滾動(dòng)結(jié)束后，不用仔細(xì)查找即可跳回首頁(yè)，這樣能讓用戶覺(jué)得很方便。還比如商城的聯(lián)絡(luò)表單，我們可以給聯(lián)絡(luò)表單上添加一些動(dòng)畫(huà)效果，如果用戶輸入完成或輸入正確時(shí)，表框可以給用戶一個(gè)"點(diǎn)頭"的動(dòng)效，如果用戶輸入錯(cuò)誤如密碼錯(cuò)誤等，反饋一個(gè)"搖頭"的動(dòng)效，以示否定，這種人性化的動(dòng)效更能引起用戶的共鳴。不過(guò)在這個(gè)過(guò)程中我們唯一需要注意的問(wèn)題就是避免動(dòng)畫(huà)效果太酷炫，分散用戶的注意力。

5.在頁(yè)面的自然過(guò)渡上使用

恰當(dāng)?shù)膭?dòng)效還能夠?qū)崿F(xiàn)不同頁(yè)面之間平滑、自然的切換。有些網(wǎng)站雖然每個(gè)頁(yè)面都做的比較精致，卻忽略了上下文、不同情境之間的自然過(guò)渡，生硬、突兀的轉(zhuǎn)換是整個(gè)網(wǎng)站中的一大敗筆。

6.在圖片、數(shù)值和表格等內(nèi)容上使用

網(wǎng)站的很多元素上都可以使用動(dòng)畫(huà)效果，圖片、數(shù)值和表格也不例外。如果你覺(jué)得在網(wǎng)站中使用純粹的網(wǎng)格畫(huà)廊已經(jīng)沒(méi)什么新意了，你可以將網(wǎng)格畫(huà)廊或卡片式設(shè)計(jì)同微妙的動(dòng)畫(huà)效果相結(jié)合，讓自己的網(wǎng)站相比其他的來(lái)說(shuō)更具特點(diǎn)。另外，網(wǎng)站的數(shù)值和表格通常會(huì)讓人們覺(jué)得很是枯燥無(wú)味，在這兩種元素上使用動(dòng)效可以讓數(shù)據(jù)等更有活力，提高用戶閱讀的積極性，更有利于用戶與網(wǎng)站的互動(dòng)。也許在數(shù)據(jù)為主的商業(yè)網(wǎng)站上，使用動(dòng)效會(huì)受到一定的限制，但不可否認(rèn)這是減少用戶不適感的一種好方法。

講了這么多，大家應(yīng)該對(duì)如何使用動(dòng)畫(huà)效果有一定的認(rèn)識(shí)了吧!不過(guò)要注意，過(guò)猶不及，適度和過(guò)度只有一念之差。如果我們將動(dòng)畫(huà)效果過(guò)多的應(yīng)用在網(wǎng)站的每個(gè)區(qū)塊上或者將動(dòng)效設(shè)計(jì)的很是復(fù)雜，用戶反而可能會(huì)有比較糟糕的用戶體驗(yàn)，這是因?yàn)檫^(guò)多或復(fù)雜的特效會(huì)讓用戶暈頭轉(zhuǎn)向，失去焦點(diǎn)，還有可能滋生出抵觸情緒。

還有，動(dòng)畫(huà)效果并不適合所有類型的網(wǎng)站，對(duì)于某些性質(zhì)的網(wǎng)站，俏皮的動(dòng)畫(huà)反而會(huì)影響他們效力的發(fā)揮，比如強(qiáng)調(diào)嚴(yán)謹(jǐn)性的公益網(wǎng)站，或是政府的稅收網(wǎng)站。如果你在登錄或者點(diǎn)擊"納稅"按鈕時(shí)看見(jiàn)天女散花般的動(dòng)畫(huà)效果，你會(huì)怎么想?所以在使用動(dòng)畫(huà)效果時(shí)要考慮到網(wǎng)站的類型以及目標(biāo)用戶的可接受程度。

不管怎么說(shuō)，最近動(dòng)畫(huà)效果正慢慢回暖，重獲新生，是建站的最新潮流趨勢(shì)所在。如果你想做一個(gè)帶有動(dòng)畫(huà)效果的網(wǎng)站，不妨來(lái)起飛頁(yè)自助建站平臺(tái)（）看看吧!起飛頁(yè)自助建站平臺(tái)最近新推出了一些帶有動(dòng)畫(huà)效果的模板，在標(biāo)題、區(qū)塊或其他細(xì)節(jié)處可以使用不同的動(dòng)畫(huà)效果比如懸停、滑入等，這些動(dòng)畫(huà)效果能讓您的網(wǎng)站更富創(chuàng)意，更加高大上?？靵?lái)看看吧!

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！