在
網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、APP中我們會經(jīng)常用到動動態(tài)效果設(shè)計,一個功能完備的動效不僅要足夠微妙有趣,而且應當清晰且具有合乎邏輯的目的。動效的存在不僅降低了用戶的認知負荷,溝通不同的環(huán)節(jié),建立更為有效的信息和交互流程。但是更為重要的是,真正優(yōu)秀的動效能讓界面變得栩栩如生。
通過讓元素在形態(tài)上進行疊加、分割、延伸、形變,動效讓界面給人以更為真實、更加“物理”的質(zhì)感。流暢順滑的動效幫用戶聯(lián)通起上下文,闡釋界面元素之間的關(guān)系,強化UI的層次感,消解環(huán)節(jié)與環(huán)節(jié)之間的沖突,緩解加載和過渡中的等待。
接下來,我們分析和總結(jié)一下成功的動效的六個基本特征:
1、響應
視覺反饋在界面中的作用無疑是重要的。對于用戶而言,想要確認信息的欲望是一種生物本能,在現(xiàn)實生活中,按鈕、控制面板等對象會對我們的操作給予反饋,那么用戶面對界面中類似的東西的時候,會有相似的期望。
所以,UI應當精準而快速的針對用戶的交互作出響應,只有這樣用戶才能將他們的操作、交互和控件的變化、效果聯(lián)系到一起,形成回路。當他們清楚的知道什么樣的操作會帶來什么樣的反饋,他們會覺得非常爽的。
深圳網(wǎng)頁設(shè)計
2、關(guān)聯(lián)
動效要能將新創(chuàng)建的界面和觸發(fā)它們的操作或者控件關(guān)聯(lián)到一起。產(chǎn)生關(guān)聯(lián)的邏輯關(guān)系能幫用戶理解界面中的變化是如何產(chǎn)生的。
下面我們看看兩個菜單動效的設(shè)計案例。
第一個案例中,點擊菜單按鈕之后,菜單從遠離按鈕的地方伸展出來,這樣用戶的輸入和觸發(fā)的結(jié)果在物理距離上被割裂開了。
深圳網(wǎng)頁設(shè)計
第二個案例中,菜單是從按鈕旁邊開始伸展開來的,距離上的關(guān)系讓用用戶清晰的知道是他們的點擊觸發(fā)了菜單出現(xiàn)的結(jié)果。
深圳網(wǎng)頁設(shè)計
另外一個案例則是音樂播放器的按鈕動效設(shè)計。“播放”和“暫停”可能是最常見的按鈕設(shè)計,而這個典型的Material Design 風格的按鈕動效設(shè)計中,點擊“播放”按鈕,動效過渡,“暫停”按鈕出現(xiàn),色彩和動效讓兩者之間呈現(xiàn)出因果關(guān)聯(lián),流暢而非間斷。
深圳網(wǎng)頁設(shè)計
平滑的過渡不僅讓兩者的功能呈現(xiàn)了出來,而且強化了兩者的邏輯關(guān)系。
3、自然
好的動效設(shè)計應當盡量避免突兀的轉(zhuǎn)變。動效中的每一個動作都應當從現(xiàn)實世界中獲取靈感。最簡單的一點,現(xiàn)實世界中物體的加速和減速都會受到重量、慣性和摩擦力的影響,類似的,在動效設(shè)計中,瞬間的啟動和停止是不合規(guī)律的。
文章名稱:衡量動效是否合格的核心因素
網(wǎng)站鏈接:http://jinyejixie.com/news47/117147.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站導航、標簽優(yōu)化、外貿(mào)建站、網(wǎng)站收錄
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)