動(dòng)效在UI設(shè)計(jì)中的三個(gè)關(guān)鍵用途
動(dòng)效的強(qiáng)大之處在于,它將設(shè)計(jì)以更為成熟的方式呈現(xiàn)出來,它賦予設(shè)計(jì)以生命力,讓產(chǎn)品脫穎而出。
隨著技術(shù)和硬件設(shè)備性能的提升,動(dòng)效已經(jīng)不再是視覺設(shè)計(jì)中的奢侈品。動(dòng)效不僅僅是華麗的動(dòng)態(tài)效果,它首先幫助設(shè)計(jì)師和用戶解決了許多界面功能上的問題,讓這用戶更容易理解產(chǎn)品,也讓設(shè)計(jì)師更好的表達(dá)。動(dòng)效本身還讓整個(gè)界面更加活潑,充滿生命力,更加自然的相應(yīng)讓就用戶和界面之間有了情感的聯(lián)系。
動(dòng)效對(duì)于UI界面在功能和情感上的強(qiáng)化到底有哪些呢?今天的文章,我們從三個(gè)方面來聊聊這件事情。
1、系統(tǒng)狀態(tài)
每個(gè)APP 為了保證正常的運(yùn)行,后臺(tái)總會(huì)有許多進(jìn)程在進(jìn)行著,比如從服務(wù)器下載數(shù)據(jù),初始化狀態(tài),加載組件等等等等。做這些事情的時(shí)候,系統(tǒng)總是需要一定的時(shí)間來進(jìn)行的,但是用戶看著靜止的界面并不會(huì)明白這些,所以需要借助動(dòng)效讓用戶明白,后臺(tái)還在運(yùn)行,在處理數(shù)據(jù)。通過動(dòng)效,從視覺上告知用戶這些信息,讓用戶有掌控感,是很有必要的。
加載指示器
對(duì)于許多數(shù)字產(chǎn)品而言,加載是不可避免的。雖然動(dòng)效并不能解決加載的問題,但是它會(huì)讓等待不再無聊。
當(dāng)我們無法讓加載時(shí)間更短的時(shí)候,我們應(yīng)該讓等待更加有趣。
充滿創(chuàng)意的加載指示器能夠降低用戶對(duì)于時(shí)間的感知。動(dòng)效會(huì)影響用戶對(duì)于你的產(chǎn)品的看法,它會(huì)讓界面比實(shí)際上看起來更好。
如果一個(gè)APP在用戶等待的時(shí)候,給他們看更有趣的東西,他們自然會(huì)忽略等待本身。
下拉刷新
另外一個(gè)著名的動(dòng)效是下拉刷新,當(dāng)觸發(fā)這個(gè)動(dòng)效之后,移動(dòng)端設(shè)備會(huì)更新相應(yīng)的內(nèi)容。
小貼士:下拉刷新動(dòng)效應(yīng)該和整個(gè)設(shè)計(jì)的風(fēng)格保持一致,如果APP是極簡風(fēng),那么動(dòng)效也應(yīng)當(dāng)如此。
通知
由于動(dòng)效會(huì)自然的引起用戶的注意力,所以使用動(dòng)畫化的方式來呈現(xiàn)通知是很自然的設(shè)計(jì),它不會(huì)給用戶帶來太多顛覆性的使用體驗(yàn)。
2、導(dǎo)航和過渡
動(dòng)效最基本的功用是呈現(xiàn)過渡狀態(tài)。當(dāng)頁面布局發(fā)生改變的時(shí)候,動(dòng)效的存在會(huì)幫助用戶理解這種狀態(tài)的改變,呈現(xiàn)過渡的過程。一個(gè)經(jīng)典的案例就是漢堡圖標(biāo)呈現(xiàn)隱藏菜單的過渡動(dòng)效。
動(dòng)效能夠有效的吸引用戶的注意力,讓用戶在愉悅的氛圍中獲取信息。
雖然漢堡的動(dòng)效是用戶最期待的,但是能夠強(qiáng)化導(dǎo)航的動(dòng)效并不只有這么一種。
可導(dǎo)航內(nèi)容之間的過渡
設(shè)計(jì)師使用動(dòng)效平滑地讓用戶在不同的內(nèi)容之間過渡、切換,而動(dòng)效也解釋了UI的變化是怎么發(fā)生的。
過渡動(dòng)效是UI不同狀態(tài)的中介環(huán)節(jié),它幫助用戶理解。
視覺層次和元素的連接
動(dòng)效可以完美的解釋界面元素之間的關(guān)系,并且闡明它們是如何完美的進(jìn)行交互的。
功能變化
在許多案例當(dāng)中,設(shè)計(jì)師會(huì)強(qiáng)行設(shè)計(jì)一個(gè)可點(diǎn)擊的按鈕,在特定情況下,功能會(huì)發(fā)生改變。在移動(dòng)端設(shè)計(jì)中,由于屏幕空間的限制,我們常常會(huì)看到這樣的按鈕。
“播放”和“暫停”是最常見的多狀態(tài)切換的實(shí)例。
這類動(dòng)效展示了用戶在交互的時(shí)候,元素是如何發(fā)生轉(zhuǎn)變的。在下面的案例當(dāng)中,用戶點(diǎn)擊按鈕,加號(hào)變?yōu)殂U筆圖標(biāo)。這表明展開后的交互列表中,鉛筆所代表的是首要操作。這樣的小細(xì)節(jié)呈現(xiàn)出了可預(yù)期的下一步交互。
3、視覺反饋
視覺反饋對(duì)于任何UI界面都是非常重要的。視覺反饋?zhàn)層脩粲X得一切都盡在掌握,可以預(yù)期,而這種掌握意味著用戶能夠明白和理解目前的內(nèi)容和狀態(tài)。
確認(rèn)
用戶界面元素,諸如按鈕和控件,應(yīng)該看起來是可點(diǎn)擊的,即使它們實(shí)際上是在屏幕背后。
在我們的現(xiàn)實(shí)生活中,按鈕和各種控件都會(huì)對(duì)我們的交互產(chǎn)生響應(yīng)。人們期望在界面中獲得類似的反饋。
為了解決這個(gè)問題,設(shè)計(jì)師引入了視覺化的動(dòng)效來提醒用戶,讓這些虛擬的按鈕看起來能像真實(shí)的那樣有反饋。
視覺化地呈現(xiàn)操作后的結(jié)果
動(dòng)效可以強(qiáng)化每一個(gè)交互的結(jié)果并且提升用戶交互。在下面的Stripe的案例當(dāng)中,當(dāng)用戶點(diǎn)擊“支付”的時(shí)候,會(huì)有一個(gè)短暫的過渡動(dòng)效,這個(gè)動(dòng)效讓用戶更加欣賞這個(gè)過程也讓支付顯得更加便捷輕松。
結(jié)語
動(dòng)效的強(qiáng)大之處在于,它將設(shè)計(jì)以更為成熟的方式呈現(xiàn)出來,它賦予設(shè)計(jì)以生命力,讓產(chǎn)品脫穎而出。
原文作者:Nick Babich
原文地址:uxplanet
譯者:@陳子木
譯文地址:http://www.uisdc.com/3-key-uses-for-animation
這是拿什么軟件做的呢
Ae