動(dòng)效設(shè)計(jì)能夠給網(wǎng)站或個(gè)人作品增加亮點(diǎn)，過(guò)多的動(dòng)效也會(huì)給視覺(jué)造成一定負(fù)擔(dān)。設(shè)計(jì)資訊：改善用戶體驗(yàn)的方法文提供了設(shè)計(jì)中動(dòng)效使用中的簡(jiǎn)單小方法，和海淘科技小編一起來(lái)學(xué)習(xí)吧~~應(yīng)用程序中的動(dòng)效具有新的改良性的意義。跟過(guò)去的華麗、混亂的網(wǎng)站動(dòng)畫(huà)不同，新的動(dòng)畫(huà)干凈、流暢，并且易于導(dǎo)航。忘掉你所知的GIF、令人不愉快的廣告和Flash網(wǎng)站吧， 這些都是過(guò)去的事情了。當(dāng)你謹(jǐn)慎并且正確地使用動(dòng)效時(shí)，它能極大地提高用戶體驗(yàn) improves user experience (UX)。動(dòng)畫(huà)世界中出現(xiàn)了許多新趨勢(shì)。 HTML5和CSS3為網(wǎng)頁(yè)設(shè)計(jì)師提供了一種在網(wǎng)頁(yè)上融入動(dòng)效的方法，而不會(huì)使它成為一種令人厭惡的東西。 為您的網(wǎng)站漸進(jìn)性地增加一點(diǎn)動(dòng)效，以確保您不會(huì)超載頁(yè)面以及帶來(lái)雜亂的用戶體驗(yàn)。 這里有幾種方法將動(dòng)畫(huà)體現(xiàn)到您的網(wǎng)站上。
頁(yè)之間的動(dòng)畫(huà)對(duì)頁(yè)面標(biāo)題和頁(yè)面加載進(jìn)行動(dòng)畫(huà)，是一種對(duì)網(wǎng)站添加動(dòng)效的有效而不會(huì)過(guò)火的方法。 當(dāng)訪問(wèn)者訪問(wèn)您的網(wǎng)站時(shí)，可以看到頁(yè)面之間的平滑過(guò)渡。它們通?？焖偌虞d，并用一個(gè)流暢的動(dòng)畫(huà)來(lái)彌補(bǔ)頁(yè)面之間的間隙。
例如，上述 Origami 動(dòng)畫(huà)打開(kāi)和關(guān)閉運(yùn)用了菱形過(guò)渡的頁(yè)面。它在一個(gè)微妙的尺度上增加了頁(yè)面之間的視覺(jué)趣味。還有幾種其他的過(guò)渡風(fēng)格也可供選擇，從隧道、圓圈到波浪。
伴隨動(dòng)畫(huà)的無(wú)限滾動(dòng)我們之前討論過(guò)無(wú)限滾動(dòng)趨勢(shì)( infinite scroll trend)。許多網(wǎng)站都在使用無(wú)限滾動(dòng)將所有信息保存在一個(gè)地方。 而不是通過(guò)一系列菜單和子菜單導(dǎo)航頁(yè)面，用戶只是繼續(xù)向下滾動(dòng)直到他們找到他們正在尋找的東西。無(wú)限滾動(dòng)是一種體現(xiàn)動(dòng)效的好方式，只要頁(yè)面上的組件是干凈、有粘著力的。 太多的色塊或太多的動(dòng)效會(huì)混淆訪客并帶來(lái)不可預(yù)測(cè)的負(fù)載。可以考慮使用大背景圖片或者是帶有令人愉快色調(diào)的網(wǎng)格來(lái)創(chuàng)建粘結(jié)性和簡(jiǎn)潔性。
Wavo, 音樂(lè)/社交媒體網(wǎng)站，提供了一個(gè)極好的無(wú)限滾動(dòng)的例子。該網(wǎng)站色調(diào)是黑白的，圖像是清爽、簡(jiǎn)單的，它們很好地打破了負(fù)空間的每個(gè)部分。當(dāng)用戶向下滾動(dòng)頁(yè)面時(shí)，他們可以很容易地專(zhuān)注于那里的信息，同時(shí)仍然沉浸在品牌的美感中。
使圖表&圖形變得生動(dòng)動(dòng)畫(huà)圖表易于結(jié)合，而且看起來(lái)有趣。它們給你的網(wǎng)站添加了一小部分的運(yùn)動(dòng)來(lái)創(chuàng)建一個(gè)有趣的信息圖表。Custora.com, 是一個(gè)分析電子商務(wù)趨勢(shì)的網(wǎng)站，它通過(guò)一系列豐富的動(dòng)畫(huà)圖表展示其數(shù)據(jù)。度量(例如移動(dòng)訂單)，在條形圖中生成，當(dāng)您向下滾動(dòng)時(shí)，該條形圖將加載。 它帶來(lái)了一些興奮點(diǎn)，否則將是一些沉悶的數(shù)據(jù)點(diǎn)。 游客自然地被吸引到觀看加載條，因?yàn)樗麄兿肟纯此鼈兊耐Ａ酎c(diǎn)。
在這個(gè)案例中，動(dòng)畫(huà)被用來(lái)潛入訪客的心理。 此外，動(dòng)畫(huà)又是愉悅眼睛的，因?yàn)轫?yè)面沒(méi)有過(guò)重的顏色和其他形式的動(dòng)畫(huà)。 網(wǎng)站在一個(gè)清爽、白色背景上，運(yùn)用輕柔的色彩以及柔和明亮的字體， 這使頁(yè)面上的內(nèi)容有機(jī)會(huì)突顯，而不必與網(wǎng)站上的其他元素競(jìng)爭(zhēng)。
慢動(dòng)效的氛圍慢動(dòng)作動(dòng)畫(huà)是將運(yùn)動(dòng)融入您的網(wǎng)頁(yè)設(shè)計(jì)的最優(yōu)雅的方式之一。 當(dāng)頁(yè)面元素在一段時(shí)間內(nèi)稍微移動(dòng)時(shí)，它自動(dòng)吸引訪問(wèn)者的眼睛。 它類(lèi)似于向人們耳語(yǔ)來(lái)讓他們傾聽(tīng)。當(dāng)你耳語(yǔ)時(shí)，傾聽(tīng)者的耳朵自然地微微翹起，聽(tīng)者在潛意識(shí)中更多地關(guān)注于正在說(shuō)的話，慢動(dòng)作動(dòng)畫(huà)同理。 因?yàn)檫\(yùn)動(dòng)是如此微妙，以致訪客的眼睛想要查看對(duì)象，看它是否真的是移動(dòng)。 這是一個(gè)很棒的方式，鼓勵(lì)你的訪客駐足去聞一聞(或看一看)玫瑰。無(wú)論您使用慢動(dòng)作作為頁(yè)面上的背景圖片，還是轉(zhuǎn)換為更快節(jié)奏的動(dòng)畫(huà)(稱(chēng)為“緩動(dòng)”)，慢動(dòng)作很自然地與人類(lèi)大腦產(chǎn)生共鳴?，F(xiàn)實(shí)世界中的有機(jī)物往往以不同的速度移動(dòng)，慢慢地開(kāi)始，速度拾取，并在停止之前減速。因?yàn)樾撵`期望這種運(yùn)動(dòng)，它潛意識(shí)地使用戶感覺(jué)更舒適地使用您的網(wǎng)站。
上圖顯示了大背景圖像中慢動(dòng)畫(huà)的示例。 圖片中的元素緩慢移動(dòng)，營(yíng)造輕松的氛圍。 在一個(gè)動(dòng)畫(huà)中，蒸汽慢慢地從一壺新鮮的茶中升起，你幾乎可以發(fā)誓你能聞到香氣并感覺(jué)蒸汽的溫暖。 它創(chuàng)造了一個(gè)美麗的背景并設(shè)定了網(wǎng)站的其余部分的心情基調(diào)。
受控模塊滾動(dòng)模塊滾動(dòng)可讓用戶控制您網(wǎng)站的動(dòng)畫(huà)。模塊化滾動(dòng)功能使用戶可以滾動(dòng)瀏覽各個(gè)面板。 這種類(lèi)型的動(dòng)畫(huà)是很有效果的，因?yàn)樗梢杂糜诙鄠€(gè)行業(yè)。例如，建筑公司可以允許用戶滾動(dòng)一個(gè)面板的圖像作為工作組合，而另一個(gè)面板則具有單獨(dú)的菜單按鈕和公司信息。它允許你在公司的重要信息旁邊的頁(yè)面上展示你的品牌個(gè)性。 模塊化滾動(dòng)以意識(shí)流方式傳遞信息和圖像。 我們的大腦在多個(gè)層面上工作，以不同的速度處理信息并與模塊化滾動(dòng)相呼應(yīng)。
當(dāng)然，最有效的網(wǎng)站 keep other elements of design simple 允許所有的運(yùn)動(dòng)。 然而，你還是會(huì)給用戶帶來(lái)感覺(jué)超載的風(fēng)險(xiǎn)。網(wǎng)站 Hotel de Rome(上圖)是專(zhuān)業(yè)執(zhí)行滾動(dòng)的完美示例。 酒店信息包含在右側(cè)列中，其中包含其他可點(diǎn)擊元素，而左側(cè)滾動(dòng)顯示富有光澤的照片。 用戶掌控著大局，兩側(cè)的頁(yè)面均可瀏覽。
動(dòng)效設(shè)計(jì)使填寫(xiě)表單變得有趣讓我們來(lái)面對(duì)一個(gè)事實(shí) —— 沒(méi)有人喜歡填寫(xiě)表單。 它無(wú)聊且乏味，長(zhǎng)長(zhǎng)的表單令人惱火。 但是當(dāng)你對(duì)表單進(jìn)行動(dòng)畫(huà)處理時(shí)會(huì)發(fā)生什么呢? 這使它更像一個(gè)隨意的對(duì)話， 使它變得有趣。 用戶會(huì)希望回答表單上的問(wèn)題，因?yàn)樗麄兛雌饋?lái)更像是來(lái)自朋友的問(wèn)題，而不像機(jī)器人為了他們的信息不停地嘮叨。
[Image Source]使用自然語(yǔ)言是一種趨勢(shì)，它與動(dòng)畫(huà)形式很好地融合。
它給整體表單增加了休閑的色調(diào)，當(dāng)它配上動(dòng)效時(shí)，使得填寫(xiě)表單成為了一個(gè)愉快的體驗(yàn)。
上述網(wǎng)站(The above example
)表單中的動(dòng)效設(shè)計(jì)示例使用了兩種動(dòng)態(tài)使回答問(wèn)題變得有趣。aesthetics of the form are minimal
中，每個(gè)動(dòng)畫(huà)帶有一個(gè)問(wèn)題，而休閑的語(yǔ)言使你想去回答。 這是任何商家想要使用的號(hào)召性用語(yǔ)(CTA)。
風(fēng)格化錨文本動(dòng)畫(huà)懸停已經(jīng)存在了一段時(shí)間了，但是動(dòng)效設(shè)計(jì)趨勢(shì)使得它很好看。當(dāng)你將鼠標(biāo)懸停在鏈接上時(shí)，它會(huì)像圣誕樹(shù)一樣點(diǎn)亮。但是，與其使用老式動(dòng)畫(huà)來(lái)顯示一個(gè)單詞是可點(diǎn)擊的，為什么不做一些有趣的事?This website 顯示了一些如何讓?xiě)彝８咭曈X(jué)刺激例子(下面)。它展示了如何使用彩色底片、褪色、輪廓和其他小細(xì)節(jié)突出顯示錨文本。它是一個(gè)非常小規(guī)模的動(dòng)畫(huà)，但它仍然對(duì)用戶有影響。 如果您正在尋找一種微妙的方式來(lái)為網(wǎng)站添加一些視覺(jué)效果，那么更改懸停文字是一種很好的方式。
結(jié)論正如所有的網(wǎng)頁(yè)設(shè)計(jì)，平衡是至關(guān)重要的。如果你選擇了動(dòng)效設(shè)計(jì)，在初步實(shí)施時(shí)就要更好地了解什么是足夠的，什么是太多。無(wú)論你選擇用小規(guī)模的動(dòng)畫(huà)形式或錨文本，還是更大的東西如模塊化滾動(dòng)，你的用戶將有一個(gè)更愉快的互動(dòng)體驗(yàn)——這總是對(duì)商業(yè)有好處的。
海淘科技不僅提供設(shè)計(jì)資訊，而且提供網(wǎng)站建設(shè)方案資訊。文章下載：點(diǎn)擊：【設(shè)計(jì)資訊】改善用戶體驗(yàn)的方法
