一個功能完備的動效不僅要足夠微妙有趣,而且應當清晰且具有合乎邏輯的目的。動效的存在不僅降低了用戶的認知負荷,溝通不同的環節,建立更為有效的信息和交互流程。但是更為重要的是,真正優秀的動效能讓界面變得栩栩如生。
通過讓元素在形態上進行疊加、分割、延伸、形變,動效讓界面給人以更為真實、更加“物理”的質感。流暢順滑的動效幫用戶聯通起上下文,闡釋界面元素之間的關系,強化UI的層次感,消解環節與環節之間的沖突,緩解加載和過渡中的等待。
接下來,我們分析和總結一下成功的動效的六個基本特征:1、響應
視覺反饋在界面中的作用無疑是重要的。對于用戶而言,想要確認信息的欲望是一種生物本能,在現實生活中,按鈕、控制面板等對象會對我們的操作給予反饋,那么用戶面對界面中類似的東西的時候,會有相似的期望。
所以,UI應當精準而快速的針對用戶的交互作出響應,只有這樣用戶才能將他們的操作、交互和控件的變化、效果聯系到一起,形成回路。當他們清楚的知道什么樣的操作會帶來什么樣的反饋,他們會覺得非常爽的。
2、關聯
動效要能將新創建的界面和觸發它們的操作或者控件關聯到一起。產生關聯的邏輯關系能幫用戶理解界面中的變化是如何產生的。平滑的過渡不僅讓兩者的功能呈現了出來,而且強化了兩者的邏輯關系。
3、自然
好的動效設計應當盡量避免突兀的轉變。動效中的每一個動作都應當從現實世界中獲取靈感。最簡單的一點,現實世界中物體的加速和減速都會受到重量、慣性和摩擦力的影響,類似的,在動效設計中,瞬間的啟動和停止是不合規律的。
下面的案例就很好的展示了動效中“自然”的特性。當用戶點擊小卡片的之后,卡片展開呈現出詳細信息,而其中小圓點的伸展軌跡就是符合自然規律的弧線。4、意圖
在合適的時機將用戶的注意力引導到對的關注點上去。在界面中,動效作為動態元素先天具有更加突出的屬性。靜態的文本和圖片大都是一成不變的元素,它們無法同動效抗衡。一個優秀的動效能夠引導用戶交互自然的進入下一個步驟。
用戶一次同某個界面進行交互的時候,他們本身是無法準確預知交互的結果的,但是動效的引導能夠讓用戶明白變化的趨勢,并且不會覺得變化是突然的。
MacOSX 的用戶點擊最小化按鈕之后,界面會收縮卷曲收納到底部的Dock中,這個動效的變化過程連接了顯示和隱藏兩個狀態,而這個特效則讓用戶了解兩者的因果關系。5、快速
當界面或者控件借助動效轉變位置和狀態的時候,動效的速度應當適中,它不能太慢,得讓用戶不會為了動效加載而等待,同樣也不能太快,得讓用戶明白和理解這個轉變的過程與關系。
盡量不要讓動效太慢,不要在逐步加載中拖延時間。
不同的元素逐個加載,每個動效都顫顫巍巍的,這樣總是不可避免的讓整個動效顯得拖沓而尷尬。
再快一點其實用戶也可以感受到細節,快速的動效能給用戶一種爽利高效的感覺。
盡量在300ms內搞定動效,在用戶能注意到細節的前提下完成過渡過程。6、清晰
當一個動效中容納太多過程的時候,難免會讓人看不清、感到迷惑,不同的元素沿著不同的軌跡向著不同方向運動,人的眼睛很難Get到全部的過程,自然而然會感到混亂。
所以,動效設計應當清晰直觀,明確而一致。這個時候,我們常說的“少即是多”就是保持動效清晰明了的核心規則,炫技式的動效還是少做的好。
結語
標題名稱:衡量網頁動效是否合格的六個核心要素
URL地址:http://m.newbst.com/news18/186318.html
成都網站建設公司_創新互聯,為您提供軟件開發、靜態網站、全網營銷推廣、搜索引擎優化、虛擬主機、商城網站
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創新互聯