網(wǎng)站建設(shè)

Website development

網(wǎng)站建設(shè)用動(dòng)畫吸引用戶的幾種方法

發(fā)布時(shí)間：2017-10-23 11:15:48

網(wǎng)頁上的動(dòng)畫曾經(jīng)被認(rèn)為是網(wǎng)站上的裝飾品。但隨著技術(shù)進(jìn)步和寬帶的提速，設(shè)計(jì)師們正在擁抱實(shí)際的好處。在這里我們將重點(diǎn)放在動(dòng)畫，營銷動(dòng)畫的一個(gè)特別的好處或出售動(dòng)畫。網(wǎng)站設(shè)計(jì)人員可以通過以下方式利用這種類型的動(dòng)畫：

演示工藝

人們注意動(dòng)畫可以使體驗(yàn)感受到過程。當(dāng)應(yīng)用網(wǎng)站播放一個(gè)視動(dòng)畫時(shí)，可以給用戶帶來了一種新奇的感覺。

加載屏幕動(dòng)畫

加載動(dòng)畫是動(dòng)畫古老的用途之一，它應(yīng)該分散用戶的加載時(shí)間。但即使是這樣的動(dòng)畫也可以證明你的產(chǎn)品是受歡迎的。例如，當(dāng)用戶啟動(dòng)Uber應(yīng)用程序時(shí)，他們立即注意到在地圖上變成引腳的動(dòng)畫下降。這個(gè)動(dòng)畫并不純粹是新奇，它也會(huì)影響用戶的眼睛和控制用戶應(yīng)該關(guān)注的位置。這個(gè)快速的開放時(shí)間使得第一印象更加清晰，并引導(dǎo)用戶進(jìn)一步互動(dòng)。

簽名動(dòng)畫

一些公司走得更遠(yuǎn)，使用動(dòng)畫作為品牌的特色。MailChimp是以這種方式使用動(dòng)畫的公司之一。該公司完成了一個(gè)技術(shù)開發(fā)，并發(fā)送電子郵件活動(dòng)，但使用動(dòng)畫，它將這個(gè)干燥的任務(wù)變成一個(gè)邀請(qǐng)的經(jīng)驗(yàn)。該服務(wù)在整個(gè)用戶旅程中增加了小而愉快的用戶體驗(yàn)，并使發(fā)送電子郵件更加有趣。

2.更好地提供相關(guān)信息展示

動(dòng)畫效果有助于更清晰地顯示您的信息。使用動(dòng)畫，您可以采取復(fù)雜的想法或流程，并使其易于消化，有趣和圖形的方式。

互動(dòng)動(dòng)畫

動(dòng)畫能突出產(chǎn)品的優(yōu)勢(shì)。Bellroy是一家銷售錢包的公司。他們表示，力求創(chuàng)造一個(gè)纖薄的設(shè)計(jì)，以減少口袋大量。在下面的示例中，您可以看到Bellroy中使用的動(dòng)畫如何清楚地表明產(chǎn)品的行為并顯示其優(yōu)點(diǎn)。

懸停動(dòng)畫

懸停動(dòng)畫對(duì)于提供有關(guān)您的產(chǎn)品的其他信息非常實(shí)用。這種類型的動(dòng)畫使得這個(gè)啟示更不刺激，并為您的網(wǎng)站提供了一些令人愉快的角色的機(jī)會(huì)。

講故事動(dòng)畫

動(dòng)畫的講故事的潛力可以增加一個(gè)情感連接到一個(gè)否則平淡的界面。故事講述的一些常見例子是通過在眼前“匯編”來展示新產(chǎn)品的頁面。例如，蘋果網(wǎng)站上專門針對(duì)Mac Pro的頁面在您向下滾動(dòng)時(shí)會(huì)顯示出什么是引擎蓋：

考慮將您的網(wǎng)站分解成可滾動(dòng)的“塊”。在每個(gè)塊中，您可以通過動(dòng)畫介紹內(nèi)容。Le Mugs網(wǎng)站的示例中的動(dòng)畫通過動(dòng)畫簡單的藝術(shù)插圖使內(nèi)容。

讓用戶采取進(jìn)一步措施

動(dòng)畫的使用將影響用戶的眼睛，并且可以控制他們將注意力集中在您的頁面上。人眼自然被運(yùn)動(dòng)吸引，這使動(dòng)畫成為控制視覺層次結(jié)構(gòu)的完美工具。

直接用戶注意

移動(dòng)元素是吸引用戶注意力的有力工具。如果目標(biāo)是將用戶的注意力吸引到幾個(gè)單一的元素中，或者提醒用戶更新信息，那么動(dòng)畫就會(huì)做到這一點(diǎn)。只要屏幕上沒有許多其他競爭的元素，即使是輕微的一點(diǎn)動(dòng)作也會(huì)引起關(guān)注。西雅圖太空針?biāo)W(wǎng)站利用了這個(gè)微妙之處。該網(wǎng)站提醒注意在向上箭頭中具有次要但有效的動(dòng)畫的說明。

鼓勵(lì)用戶行動(dòng)

精美的動(dòng)畫和互動(dòng)效果鼓勵(lì)用戶點(diǎn)擊?？纯聪旅嬗糜凇捌踉X夫活著”的設(shè)計(jì)。設(shè)計(jì)讓您點(diǎn)擊查找您的角色。

要考慮的事情

動(dòng)畫是一把雙刃劍。不正確使用，可能會(huì)破壞用戶體驗(yàn)。

避免動(dòng)畫分散用戶的任務(wù)。在網(wǎng)絡(luò)銷售和營銷的世界里，分散用戶的注意力等于揮刀自宮。

在設(shè)計(jì)動(dòng)畫時(shí)要考慮的一個(gè)非常重要的方面是在單個(gè)用戶會(huì)話中可能發(fā)生的頻率。動(dòng)畫可能是第一次用戶看到它，但經(jīng)過第100次嘗試，它可以變得煩人，特別是當(dāng)它沒有目的，而不是“有趣”。

有許多UI元素可以以有趣的和從屬的方式動(dòng)畫化。但要記住一點(diǎn)，如果你想創(chuàng)建營銷動(dòng)畫，你應(yīng)該設(shè)置一個(gè)創(chuàng)造一個(gè)具有風(fēng)格和目的的動(dòng)畫的目標(biāo)。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7345,0.html

上一篇：網(wǎng)頁制作過程中細(xì)微的交互有助于提高用戶體驗(yàn)

下一篇：2017 10月君多色彩網(wǎng)站設(shè)計(jì)的案例一欣賞

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理