在網(wǎng)站中使用動畫效果并不是什么新鮮事兒。建站早期，不少設計師經(jīng)常在自己的網(wǎng)站中放置gif動畫，但由于許多設計逐漸不能兼?zhèn)鋵嵱眯裕瑒赢嬓Ч蔀樵愀獾挠脩趔w驗的代名詞。不過，近些日子隨著Html5技術的發(fā)展，依靠CSS3做出的動畫比Javascript的操作更簡單、瀏覽更順暢，因此動畫效果在歷經(jīng)起起落落之后再次回歸到大眾的懷抱，很多網(wǎng)站開發(fā)者開始重新思考怎樣將它更好地應用到網(wǎng)站中。其實，適當?shù)膭赢嬓Ч梢越o枯燥無味的用戶界面增加趣味，增添網(wǎng)站的個性化色彩，引起用戶的情感共鳴，提升用戶體驗，提高用戶轉(zhuǎn)化率。今天小飛就帶大家一起看看動效有哪些好處，以及在網(wǎng)站中可以怎樣使用。
在網(wǎng)站中使用動畫效果的好處：
1.增加趣味性
設計巧妙的動畫常常會給用戶帶來意想不到的驚喜，給網(wǎng)站增加一定的趣味性。Deal in就是一個很好的栗子，這個界面的底部有一個牛皮紙袋，看上去并沒有什么特別，但當我們挑選好自己心儀的商品將它們添加到袋子中時，某一行的商品像是從紙上被撕下一樣。這種意料不到的操作雖然只是一個小細節(jié)，但卻能讓用戶產(chǎn)生興趣，激發(fā)他們的探索欲望。我們在自己網(wǎng)站的產(chǎn)品等頁面也可以使用恰當?shù)膭赢嬓Ч?，給用戶提供預期之外的效果，讓他們更愉悅，更愿意在網(wǎng)站停駐瀏覽。
2.增添個性化色彩
動畫效果能夠給網(wǎng)站增添個性化色彩。在網(wǎng)站導航菜單處使用淡入的動畫效果，能給網(wǎng)站營造一種優(yōu)雅大方的感覺;在網(wǎng)站中使用滑出和傾倒讓屏幕上出現(xiàn)天女散花般的絢麗效果，這會樹立生動活潑的網(wǎng)站形象。不同形式的動畫效果會給用戶留下不一樣的印象，這種個性化色彩是網(wǎng)站的特色所在，能將其與對手網(wǎng)站區(qū)別開來。
Optimo's hats 這個網(wǎng)站就使用懸浮的動畫效果做出了很好的效果。當你將鼠標放在每個帽子的圖像上時，它們會微微翹起，下方就會出現(xiàn)每個帽子的名稱，移開時文本就會消失。這種動畫讓整個網(wǎng)站更顯典雅別致，也讓用戶在瀏覽上更加輕松。
3.引起訪客情感共鳴
在第二點中，小飛談到了動畫效果給網(wǎng)站帶來的個性化特征。其實網(wǎng)站的個性化特征從某種程度上彰顯著站長的性格偏好，如果某個網(wǎng)站上使用的動畫效果比較活潑，不難判斷出這個站長平時可能比較外向。對于網(wǎng)站訪客來說，他們能因此更直觀的認識電腦或屏幕背后的那個人。而站長在通過訪客們表達對某種特效的好惡也能對用戶們有一定的了解。這樣一來，我們就能與用戶建立情感上的紐帶，更易引起用戶與網(wǎng)站的互動。而且，如果一些訪客比較欣賞網(wǎng)站上的某個動效，他們可能還會與朋友進行分享，這有利于網(wǎng)站知名度的擴大。
在網(wǎng)站中可以怎樣使用動畫效果?
1.在加載頁面使用
建站早期，頁面在加載時，用戶只能看著空白的屏幕或閃爍的光標干等著，那時候的用戶還是比較有耐心的。而現(xiàn)在，如果用戶看到加載頁一片空白，會覺得頁面沒有在加載或速度太慢，可能就會直接退出。加載頁是給用戶的第一印象，是溝通用戶與網(wǎng)站內(nèi)容的橋梁，無趣的加載頁大大降低了網(wǎng)站的流量。而有趣的動畫則能力挽狂瀾，它夠有效轉(zhuǎn)移用戶的注意力，降低用戶的期待感，進度條式加載動畫還能讓用戶了解目前的進度。如果你無法縮短頁面加載的時間，那就盡量讓這個過程變得有趣吧，讓他們再多停留一小會吧?？煸诩虞d頁面使用動畫效果緩解用戶的急切感吧!
2.在導航菜單欄使用
簡單易操作的導航菜單對確保網(wǎng)站的用戶友好十分重要。恰當?shù)膭赢嬓Ч梢允共藛螜诟啙?、精煉，更能抓住用戶的眼球。而且，隨著極簡主義的趨勢越來越流行，隱藏式導航菜單也受到越來越多人的歡迎。隱藏在漢堡圖標中的菜單怎樣在點擊或關閉時實現(xiàn)很好的銜接呢?動效的作用不容小覷，現(xiàn)在很多設計師在導航菜單上會使用滑出或彈出的效果，下圖就是一個栗子。網(wǎng)頁右側(cè)彈出的動畫讓導航清晰可見，也讓網(wǎng)站整體內(nèi)容更加豐富。
3. 在主頁上使用
動畫效果還可以用來美化網(wǎng)站的主頁面，突出網(wǎng)站的品牌、圖標，呈現(xiàn)給用戶不一樣的視覺美感。Theory agency這個網(wǎng)站在主頁面就使用了動畫效果，當你打開這個網(wǎng)站時，頁眉會以滑入的動畫效果呈現(xiàn)，這一點小改變會帶來大不同。除了在主頁面上使用動畫效果，網(wǎng)站在其他元素上也使用了動效，按住滾動條向下拖動時各種元素會給用戶一種魚貫而入的感覺，流暢清晰。
除了Theory agency以外，Underbelly在將動畫應用到網(wǎng)站主頁上也是一個比較好的栗子。整個網(wǎng)站布局簡練大氣，最有趣的莫過于網(wǎng)站上方的圖標了，往下拖動頁面時這個鯨魚圖標會縮小，往上它又會恢復原樣，很是新穎別致?？戳诉@樣的動畫效果，你還會對這個圖標沒印象嗎?
4.在焦點區(qū)域上使用
人總是很容易為移動著的事物所影響，這是一種生理本能，動畫效果能夠極大的吸引用戶的注意力。如果我們能夠有效的將它用在用戶關注的焦點問題上，可以很好的提升用戶體驗。比如在"回到頂部"上使用動畫，給用戶一個引導，在向下滾動結束后，不用仔細查找即可跳回首頁，這樣能讓用戶覺得很方便。還比如商城的聯(lián)絡表單，我們可以給聯(lián)絡表單上添加一些動畫效果，如果用戶輸入完成或輸入正確時，表框可以給用戶一個"點頭"的動效，如果用戶輸入錯誤如密碼錯誤等，反饋一個"搖頭"的動效，以示否定，這種人性化的動效更能引起用戶的共鳴。不過在這個過程中我們唯一需要注意的問題就是避免動畫效果太酷炫，分散用戶的注意力。
5.在頁面的自然過渡上使用
恰當?shù)膭有н€能夠?qū)崿F(xiàn)不同頁面之間平滑、自然的切換。有些網(wǎng)站雖然每個頁面都做的比較精致，卻忽略了上下文、不同情境之間的自然過渡，生硬、突兀的轉(zhuǎn)換是整個網(wǎng)站中的一大敗筆。
6.在圖片、數(shù)值和表格等內(nèi)容上使用
網(wǎng)站的很多元素上都可以使用動畫效果，圖片、數(shù)值和表格也不例外。如果你覺得在網(wǎng)站中使用純粹的網(wǎng)格畫廊已經(jīng)沒什么新意了，你可以將網(wǎng)格畫廊或卡片式設計同微妙的動畫效果相結合，讓自己的網(wǎng)站相比其他的來說更具特點。另外，網(wǎng)站的數(shù)值和表格通常會讓人們覺得很是枯燥無味，在這兩種元素上使用動效可以讓數(shù)據(jù)等更有活力，提高用戶閱讀的積極性，更有利于用戶與網(wǎng)站的互動。也許在數(shù)據(jù)為主的商業(yè)網(wǎng)站上，使用動效會受到一定的限制，但不可否認這是減少用戶不適感的一種好方法。
講了這么多，大家應該對如何使用動畫效果有一定的認識了吧!不過要注意，過猶不及，適度和過度只有一念之差。如果我們將動畫效果過多的應用在網(wǎng)站的每個區(qū)塊上或者將動效設計的很是復雜，用戶反而可能會有比較糟糕的用戶體驗，這是因為過多或復雜的特效會讓用戶暈頭轉(zhuǎn)向，失去焦點，還有可能滋生出抵觸情緒。
還有，動畫效果并不適合所有類型的網(wǎng)站，對于某些性質(zhì)的網(wǎng)站，俏皮的動畫反而會影響他們效力的發(fā)揮，比如強調(diào)嚴謹性的公益網(wǎng)站，或是政府的稅收網(wǎng)站。如果你在登錄或者點擊"納稅"按鈕時看見天女散花般的動畫效果，你會怎么想?所以在使用動畫效果時要考慮到網(wǎng)站的類型以及目標用戶的可接受程度。
不管怎么說，最近動畫效果正慢慢回暖，重獲新生，是建站的最新潮流趨勢所在。如果你想做一個帶有動畫效果的網(wǎng)站，不妨來起飛頁自助建站平臺（）看看吧!起飛頁自助建站平臺最近新推出了一些帶有動畫效果的模板，在標題、區(qū)塊或其他細節(jié)處可以使用不同的動畫效果比如懸停、滑入等，這些動畫效果能讓您的網(wǎng)站更富創(chuàng)意，更加高大上?？靵砜纯窗?
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
