成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

做好這5點(diǎn)基本要求 才能算一個(gè)合格的HTML5動(dòng)畫

2022-05-22    分類: 網(wǎng)站建設(shè)

  隨著CSS3和HTML5建站技術(shù)的發(fā)展,動(dòng)效在網(wǎng)頁設(shè)計(jì)中的作用越來越顯著。與靜態(tài)界面相比,動(dòng)態(tài)的轉(zhuǎn)變更符合人們的認(rèn)知體系,可以有效降低用戶認(rèn)知負(fù)載。這是因?yàn)?,在網(wǎng)站界面使用動(dòng)畫效果能讓元素的變化、界面的轉(zhuǎn)變、層次結(jié)構(gòu)之間的關(guān)系更加清晰自然。從某種程度上來說,動(dòng)效還是用戶交互的基礎(chǔ)。那么,什么樣的動(dòng)效才是有效的呢?小飛瀏覽了不少網(wǎng)站,總結(jié)出了5個(gè)核心準(zhǔn)則,現(xiàn)在一起來看一下吧。
  1、自然流暢
  一個(gè)好的動(dòng)畫效果應(yīng)該是自然流暢的。在很多糟糕的網(wǎng)站設(shè)計(jì)中,我們可以看到頁面或元素的狀態(tài)改變都很生硬、突兀,這會(huì)讓用戶產(chǎn)生困惑:為什么某某元素突然出現(xiàn)或消失?任何事物都存在一個(gè)轉(zhuǎn)變的過程,人們?cè)缫言谧匀唤纭⑸钪行纬闪诉@樣的認(rèn)知規(guī)律。所以當(dāng)網(wǎng)站的頁面有兩個(gè)或多個(gè)狀態(tài),需要使用動(dòng)畫效果做過渡時(shí),一定要保證它的自然流暢,讓用戶明白所以然。下圖就是一個(gè)比較好的示例,當(dāng)用戶在列表中選取一個(gè)項(xiàng)目點(diǎn)擊查看時(shí),小卡片會(huì)展開為大卡片,展示眾多細(xì)節(jié),這種動(dòng)效是有規(guī)則可循的。
  2、層次分明
  一個(gè)高效的動(dòng)效應(yīng)該是層次分明的。層次分明的動(dòng)效一方面能夠清晰展示頁面狀態(tài)的變化,另一方面能夠有效抓住用戶的注意力,決定著用戶的關(guān)注持續(xù)時(shí)間。以下圖為例,圓形的懸浮按鈕處設(shè)置了動(dòng)效,它會(huì)擴(kuò)展為帶有3個(gè)按鈕的頭部導(dǎo)航元素,導(dǎo)航界面與原先的界面有很鮮明的層次分割。雖然初次瀏覽的用戶難以預(yù)測到這一轉(zhuǎn)變的發(fā)生,但是這種形式的動(dòng)畫能夠很好地保持用戶的注意力,引導(dǎo)用戶進(jìn)行下一步的交互。
  3、關(guān)聯(lián)性
  網(wǎng)站頁面上動(dòng)畫效果大多都涉及到前后元素或狀態(tài)之間的變化。雖然我們?cè)谇懊嬉矎?qiáng)調(diào)了不同元素和狀態(tài)之間的層次分明,但是,光有層次感可不行,動(dòng)畫效果也要有邏輯感,能呈現(xiàn)出一定的關(guān)聯(lián)性,讓用戶清楚界面變化的過程。下面以兩個(gè)栗子給大家實(shí)際展示一下什么是動(dòng)效的關(guān)聯(lián)性。
  在第一個(gè)栗子中,新出現(xiàn)的界面與動(dòng)效觸發(fā)點(diǎn)較遠(yuǎn),這讓整個(gè)界面看上去有斷層的感覺,用戶在瀏覽起來時(shí)也沒有那么順暢;
  在第二個(gè)栗子中,新出現(xiàn)的界面就是從觸發(fā)點(diǎn)延伸出去的,這種形式的動(dòng)效在關(guān)聯(lián)性上就做的很好。
  4、快速精準(zhǔn)
  如果說網(wǎng)站中的動(dòng)畫效果只能有一個(gè)準(zhǔn)則的話,那一定就是動(dòng)效的快速精準(zhǔn)。當(dāng)我們?cè)诰W(wǎng)站中設(shè)計(jì)轉(zhuǎn)場動(dòng)畫時(shí),動(dòng)效的速度絕對(duì)是一個(gè)需要重點(diǎn)考慮的因素。它既不能太慢,浪費(fèi)訪客的時(shí)間,也不能太快,讓訪客覺得難以理解。下面是一個(gè)反面教材,動(dòng)畫效果的速度太慢了,這種不必要的延遲會(huì)加長用戶的等待時(shí)間,讓用戶覺得煩躁。
  這還有一個(gè)正面的栗子。當(dāng)元素在不同狀態(tài)中切換時(shí),動(dòng)效的速度是恰當(dāng)?shù)?,足夠快速精?zhǔn),也足夠讓用戶理解。小飛建議,為了兼顧動(dòng)效的效率、用戶理解的順暢,動(dòng)效應(yīng)該在觸動(dòng)后的0.1s內(nèi)開始,在300ms內(nèi)結(jié)束,這算是一個(gè)好的狀態(tài)。不過這條準(zhǔn)則也不是固定不變的,你可以根據(jù)自己網(wǎng)站動(dòng)畫效果的實(shí)際狀況進(jìn)行調(diào)整。
  5、簡單清晰
  動(dòng)畫效果還應(yīng)該簡單清晰。如果用戶界面上存在許多動(dòng)態(tài)或交互的元素,用戶的注意力會(huì)分散,不知道究竟應(yīng)該點(diǎn)擊哪一個(gè)。這在一定程度上會(huì)引起用戶的混亂。
  所以,動(dòng)效應(yīng)避免一次呈現(xiàn)過多效果,尤其當(dāng)動(dòng)效同時(shí)存在多重、復(fù)雜的變化的時(shí)候。少即是多的原則對(duì)于動(dòng)效同樣也成立。如果某個(gè)動(dòng)效的簡化能夠讓整個(gè)UI更加清晰直觀,一定要去進(jìn)行修改。還有,當(dāng)動(dòng)效中同時(shí)包含形狀、大小和位移變化的時(shí)候,一定要保持移動(dòng)路徑的清晰,讓狀態(tài)變化更清晰。
  動(dòng)效本質(zhì)上是視覺溝通的一種方式。當(dāng)你在設(shè)計(jì)動(dòng)效時(shí),一定要聚焦域他們能為用戶帶來什么。網(wǎng)站中使用的動(dòng)效,不管是有趣的還是直接的,最好跟自己網(wǎng)站的風(fēng)格相結(jié)合,給用戶提供清晰、一致的瀏覽體驗(yàn)。其實(shí)制作動(dòng)畫效果并不難,重點(diǎn)是要選擇合適的工具。

  本文轉(zhuǎn)載自互聯(lián)網(wǎng),如涉及知識(shí)產(chǎn)權(quán)問題請(qǐng)及時(shí)聯(lián)系我們刪除。

文章題目:做好這5點(diǎn)基本要求 才能算一個(gè)合格的HTML5動(dòng)畫
當(dāng)前鏈接:http://jinyejixie.com/news/156105.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站微信小程序、小程序開發(fā)、品牌網(wǎng)站制作、面包屑導(dǎo)航、軟件開發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名
绥化市| 巴彦县| 云阳县| 依安县| 孙吴县| 开原市| 和林格尔县| 武汉市| 河池市| 浮梁县| 天祝| 若羌县| 崇仁县| 庆安县| 贵南县| 肥东县| 眉山市| 松桃| 金阳县| 额尔古纳市| 泾川县| 浑源县| 惠安县| 台山市| 乌兰县| 体育| 舟山市| 高唐县| 东至县| 建宁县| 通河县| 沁水县| 河西区| 商洛市| 禄丰县| 郴州市| 浦城县| 福海县| 威信县| 南阳市| 漳平市|