隨著CSS3和HTML5建站技術的發展,動效在網頁設計中的作用越來越顯著。與靜態界面相比,動態的轉變更符合人們的認知體系,可以有效降低用戶認知負載。這是因為,在網站界面使用動畫效果能讓元素的變化、界面的轉變、層次結構之間的關系更加清晰自然。從某種程度上來說,動效還是用戶交互的基礎。那么,什么樣的動效才是有效的呢?小編瀏覽了不少網站,成都網站建設小編總結出了5個核心準則,現在一起來了解一下:
一、自然流暢
一個好的動畫效果應該是自然流暢的。在很多糟糕的網站設計中,我們可以看到頁面或元素的狀態改變都很生硬、突兀,這會讓用戶產生困惑:為什么某某元素突然出現或消失?任何事物都存在一個轉變的過程,人們早已在自然界、生活中形成了這樣的認知規律。所以當網站的頁面有兩個或多個狀態,需要使用動畫效果做過渡時,一定要保證它的自然流暢,讓用戶明白所以然。
二、簡單清晰
動畫效果還應該簡單清晰。如果用戶界面上存在許多動態或交互的元素,用戶的注意力會分散,不知道究竟應該點擊哪一個。這在一定程度上會引起用戶的混亂。
三、層次分明
一個高效的動效應該是層次分明的。層次分明的動效一方面能夠清晰展示頁面狀態的變化,另一方面能夠有效抓住用戶的注意力,決定著用戶的關注持續時間。以下圖為例,圓形的懸浮按鈕處設置了動效,它會擴展為帶有3個按鈕的頭部導航元素,導航界面與原先的界面有很鮮明的層次分割。雖然初次瀏覽的用戶難以預測到這一轉變的發生,但是這種形式的動畫能夠很好地保持用戶的注意力,引導用戶進行下一步的交互。
四、快速精準
如果說網站中的動畫效果只能有一個準則的話,那一定就是動效的快速精準。當我們在網站中設計轉場動畫時,動效的速度絕對是一個需要重點考慮的因素。它既不能太慢,浪費訪客的時間,也不能太快,讓訪客覺得難以理解。
五、關聯性
網站頁面上動畫效果大多都涉及到前后元素或狀態之間的變化。雖然我們在前面也強調了不同元素和狀態之間的層次分明,但是,光有層次感可不行,動畫效果也要有邏輯感,能呈現出一定的關聯性,讓用戶清楚界面變化的過程。
所以,動效應避免一次呈現過多效果,尤其當動效同時存在多重、復雜的變化的時候。少即是多的原則對于動效同樣也成立。如果某個動效的簡化能夠讓整個UI更加清晰直觀,一定要去進行修改。還有,當動效中同時包含形狀、大小和位移變化的時候,一定要保持移動路徑的清晰,讓狀態變化更清晰。
動效本質上是視覺溝通的一種方式。當你在設計動效時,一定要聚焦域他們能為用戶帶來什么。網站中使用的動效,不管是有趣的還是直接的,最好跟自己網站的風格相結合,給用戶提供清晰、一致的瀏覽體驗。其實制作動畫效果并不難,重點是要選擇合適的工具!
津市網站制作公司哪家好,找創新互聯公司!從網頁設計、網站建設、微信開發、APP開發、響應式網站設計等網站項目制作,到程序開發,運營維護。創新互聯公司公司2013年成立到現在10年的時間,我們擁有了豐富的建站經驗和運維經驗,來保證我們的工作的順利進行。專注于網站建設就選創新互聯公司。
新聞名稱:如何成為一個合格的HTML5動畫
標題鏈接:http://vcdvsql.cn/article46/eogihg.html
成都網站建設公司_創新互聯,為您提供全網營銷推廣、網站排名、域名注冊、外貿建站、虛擬主機、電子商務
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯