久久久久国产精品www,综合久久无码,亚洲精品99久久久久中文字幕,无码伊人网Apdm

在這5個基本要求中做好合格的HTML5動畫
瀏覽:338 時間:2022-10-12

隨著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)站!