隨著CSS3和HTML5網(wǎng)站技術(shù)的發(fā)展，動態(tài)效果在網(wǎng)頁設(shè)計中的作用變得越來越重要。與靜態(tài)界面相比，動態(tài)過渡更符合人們的認(rèn)知系統(tǒng)，可以有效降低用戶的認(rèn)知負(fù)荷。這是因為在網(wǎng)站界面上使用動畫效果可以使元素，界面更改和層次結(jié)構(gòu)之間的關(guān)系更加清晰自然。在某種程度上，動畫也是用戶交互的基礎(chǔ)。那么，什么樣的動態(tài)效果是有效的？小飛瀏覽了很多網(wǎng)站，總結(jié)了五個核心標(biāo)準(zhǔn)。我們現(xiàn)在來看看吧。
1、自然流暢
一個好的動畫效果應(yīng)該是自然而流暢的。在許多糟糕的網(wǎng)站設(shè)計中，我們可以看到頁面或元素的狀態(tài)變化非常生硬和尷尬，這會讓用戶感到困惑：為什么某個元素會突然出現(xiàn)或消失？一切都有轉(zhuǎn)變的過程，人們這種認(rèn)知規(guī)律已經(jīng)在自然界和生活中形成。因此，當(dāng)網(wǎng)站的頁面有兩個或更多狀態(tài)時，您需要使用動畫效果進(jìn)行轉(zhuǎn)換，您必須確保它自然流暢，以便用戶理解原因。以下圖片就是一個很好的例子。當(dāng)用戶選擇列表中的項目并單擊以查看它時，小卡片將擴展為大卡片并顯示許多細(xì)節(jié)。這種動畫有遵循的規(guī)則。
2、層次分明
有效的動態(tài)效應(yīng)應(yīng)該是分層的。一方面，分層動態(tài)可以清晰地顯示頁面狀態(tài)的變化，另一方面，它可以有效地掌握用戶的注意力并確定用戶注意的持續(xù)時間。例如，在下圖中，圓形浮動按鈕設(shè)置為動態(tài)，它被擴展為帶有3個按鈕的頭部導(dǎo)航元素。導(dǎo)航界面與原始界面具有明顯的分離級別。雖然第一次瀏覽的用戶很難預(yù)測這種變化，但這種形式的動畫可以很好地保持用戶的注意力并引導(dǎo)用戶進(jìn)入下一步。
3、關(guān)聯(lián)性
網(wǎng)站頁面上的大多數(shù)動畫效果都涉及元素或狀態(tài)之前和之后的變化。雖然我們也強調(diào)前面不同層次的不同元素和狀態(tài)，但層次不能輕，動畫效果也應(yīng)該有邏輯感，能表現(xiàn)出一定的相關(guān)性，讓用戶知道界面變化的過程。這里有兩個栗子，向您展示效果的相關(guān)性。
在第一個栗子中，新界面離觸發(fā)點更遠(yuǎn)，這使整個界面看起來像一個錯誤，用戶在瀏覽時不那么順暢;
在第二個栗子中，新興的界面從觸發(fā)點延伸，這種動態(tài)形式在相關(guān)性方面做得很好。
4、快速精準(zhǔn)
如果網(wǎng)站中的動畫效果只有一個標(biāo)準(zhǔn)，那么它必須是動畫的快速而精確的效果。當(dāng)我們在網(wǎng)站上設(shè)計過渡動畫時，動作速度絕對是一個需要考慮的因素。它不能太慢，浪費游客的時間，也不會太快，讓游客感到難以理解。以下是負(fù)面教科書。動畫效果太慢了。這種不必要的延遲會延長用戶的等待時間并使用戶感到惱火。
還有一個積極的栗子。當(dāng)元素在不同狀態(tài)之間切換時，運動的速度是合適的，足夠快且足夠準(zhǔn)確以供用戶理解。小飛建議，為了平衡動態(tài)效果的效率和用戶的流暢理解，動態(tài)效果應(yīng)在觸摸后的0.1s內(nèi)開始，并在300ms內(nèi)結(jié)束，這是最佳狀態(tài)。但是，本指南不固定，您可以根據(jù)您網(wǎng)站動畫效果的實際情況進(jìn)行調(diào)整。
5、簡單清晰
動畫效果也應(yīng)該簡單明了。如果用戶界面上有許多動態(tài)或交互元素，用戶的注意力會分散注意力，我不知道要點擊哪一個。這將在一定程度上給用戶造成混淆。
因此，動態(tài)效果避免一次表現(xiàn)出過度的影響，特別是當(dāng)動態(tài)效果發(fā)生多重復(fù)雜變化時。少即是多的原則也適用于動力學(xué)。如果簡化動作可以使整個UI更清晰，更直觀，請務(wù)必進(jìn)行更改。此外，當(dāng)效果包括形狀，大小和位移的變化時，請務(wù)必保持路徑清晰并使?fàn)顟B(tài)更改更清晰。
移動性本質(zhì)上是一種視覺交流方式。在設(shè)計效果時，請務(wù)必專注于他們可以為用戶做些什么。網(wǎng)站中使用的動態(tài)，無論是有趣的還是直接的，最好與您網(wǎng)站的風(fēng)格相結(jié)合，為用戶提供清晰一致的瀏覽體驗。實際上，動畫效果并不難。關(guān)鍵是要選擇合適的工具。起飛頁面自助平臺（http://www.qifeiye.com/?t_wd=a5）是一個不錯的選擇。它提供了網(wǎng)頁上的所有容器。不同形式的動畫設(shè)置，快點摘下頁面，制作一個響應(yīng)迅速的HTML5動畫效果的網(wǎng)站！