最全的動效落地方法(上篇):在界面設(shè)計中,好動效是什么樣的?
本文主要介紹了界面動效的價值,以及一些優(yōu)秀的界面動效實例。enjoy~
用戶體驗設(shè)計的發(fā)展日趨完善,優(yōu)秀的動效是完善用戶體驗中不可或缺的一環(huán),優(yōu)秀的界面動態(tài)設(shè)計可以讓產(chǎn)品的用戶體驗錦上添花……
你會說,這些道理我都懂,但是動效做起來真的很麻煩啊。直接切入到大家常見的問題吧:
一般情況下,在溝通界面動效的過程中,工程師會希望設(shè)計師使用更具體的表達方式。這里所謂「具體」的意思是:接近代碼。然而同樣的一套動效,在設(shè)計工具上和 Web 端上實現(xiàn)邏輯可能完全不一樣。
沒有了精確的參數(shù)描述。設(shè)計師很難跟開發(fā)解釋清楚要做一個什么樣的動效。而只有簡單的口頭描述的話、開發(fā)做起來也很痛苦,導(dǎo)致最終開發(fā)效率低下。以至于知乎上出現(xiàn)了這樣的問題:在APP的開發(fā)過程中,作為設(shè)計師,如何說服程序去實現(xiàn)動效?
看到這里也許你會很抓狂。好消息是隨著卻越來越多優(yōu)秀開源庫的誕生,動效的實現(xiàn)也變得越來越簡單。甚至以后設(shè)計師都不用說服工程師了,自己可以直接上手在端上實現(xiàn)動畫了。舉個例子 San :https://baidu.github.io/san/
這個例子中卡片 Hover 動效的設(shè)計和開發(fā)都是我做的。
雖然只是一個很簡單的細節(jié),卻給人以驚喜,一定程度提高了網(wǎng)站的品質(zhì)感。
本篇教程會分為兩個部分來詳細闡述:
- 上篇:在界面設(shè)計中,什么樣的動效是好動效?
- 下篇:從前端的角度來講,有哪些便捷的方法實現(xiàn)這些動效?
一、什么樣的動效是好動效
動效并不是設(shè)計師為了炫技設(shè)計出來的東西,它是有很多現(xiàn)實意義的。為了更加高效(心甘情愿)的去實現(xiàn)動效(做苦力)。我們首先需要知道什么動效是好動效。
簡單來講,動效有以下三個方面的價值:
1. 滿足用戶的心理預(yù)期
我們生活在一個物理世界,任何事物的運動都是符合物理世界的客觀規(guī)律的。因此,人對于事物的觀察和理解都是出于對物理規(guī)律的理解。而虛擬界面上的元素都是現(xiàn)實世界中并不存在的東西,會讓用戶有陌生感。
通過合理的動效,讓虛擬界面模擬物理世界的規(guī)律,例如慣性、視差等等,可以讓這個虛擬的世界與物理世界產(chǎn)生交集。用戶會把自己對物理世界的認知映射到對產(chǎn)品的認知上。
下面舉兩個例子來說說具體是怎么映射的:
(1)質(zhì)量
物體都擁有質(zhì)量,質(zhì)量帶來了我們最常見的物理現(xiàn)象:慣性。在這個例子中、方塊在界面上通過加速、減速、反彈、過沖等等動態(tài)來模擬所謂的重量感,讓這個簡單的界面元素有了實在感。
(2)空間
我們所處的世界是三維的,然而受顯示設(shè)備的影響,目前大家接觸的大部分人機界面還是二維的,如何通過一個二維平面來模擬三維的世界呢?
在這個例子中,近處的方塊運動的快,遠處的方塊運動的遠。通過這樣的視差的效果,整個屏幕有縱深感,不再是一個簡單的二維平面。我們很容易感受到,方塊間的層疊順序。同理,類似簡單的動效,可以很輕易的表達元素的層級。
小結(jié):合理的動效可以滿足用戶的心理預(yù)期,越是符合人對物理世界認知的設(shè)計,就越容易幫助用戶去預(yù)判或者理解產(chǎn)品的交互邏輯。
2. 引導(dǎo)用戶注意力
如果把一個界面上的所有元素,按照明顯程度來排序,顯而易見我們會得到這樣一個順序:動態(tài) > 色彩 > 明度。
所以通過合理的動效,可以低成本的抓取人的注意力,讓他們關(guān)注設(shè)計師想讓他們關(guān)注的東西。
網(wǎng)易新聞的刷新動畫,就是一個很優(yōu)秀的例子:
在這個例子中,左上角有一個非常簡單的白色線狀 icon,并不會干擾整個頁面的主功能,顏色,以及視覺。但是通過小的動畫,提升了 icon 的視覺層級。讓我們很容易注意到它,起到了非常好的提示效果。
3. 情感化設(shè)計
情感話設(shè)計的目標是在用戶接觸和使用產(chǎn)品的過程中,激發(fā)用戶的正向情感,比如愉快,信任,滿足;避免用戶產(chǎn)生負向情感,比如失望,挫折感,痛苦。正向的情感會使用戶更樂于使用產(chǎn)品,遇到使用過程的一些小問題也更加包容。
而優(yōu)良的界面動效可以打磨產(chǎn)品的品質(zhì)感,下面就是動效在情感化設(shè)計中的優(yōu)秀例子:
twitter 點贊后,心會亮起的同時,還有一個小小的禮花效果。雖然完全沒必要加上這個禮花效果,但是這種豐富的細節(jié)會讓用戶對產(chǎn)品產(chǎn)生一個正向的情感關(guān)聯(lián),而這種關(guān)聯(lián)最終將贏得用戶對產(chǎn)品的認同。
Facebook 點贊之后,可以表達你的態(tài)度,比如流淚,憤怒或者是贊。雖然在功能上來說,這些表情有靜態(tài)的就可以了。但是正是動畫中豐富的表情細節(jié),進一步引導(dǎo)用戶愿意去表態(tài)。不僅給人以驚喜,也顯著的提升表態(tài)的使用量。
動效的價值就講到這里,接下來,基于以上三點,我會說一說怎樣去構(gòu)建一個合理高效的動效體系。
二、優(yōu)秀的界面動效體系
優(yōu)秀的界面動效體系符合以下四點原則:
- 通過動效暗示二維界面暗含的三維層級關(guān)系,及其暗含的操作邏輯。
- 引導(dǎo)用戶的注意力向界面重點元素。
- 通過動態(tài)設(shè)計讓情感化設(shè)計變得更生動。
- 動效的視覺效果統(tǒng)一,控制數(shù)量,不濫用。
接下來用 iOS 系統(tǒng)動效來舉例子,眾所周知 iOS 的動效系統(tǒng)經(jīng)過了多次的迭代,已經(jīng)做的非常完美,而上述四點,在接下來的例子中都有體現(xiàn)。
(1)層級暗示
切換界面的時候,所有打開的 APP 界面覆蓋在剛才的主界面上面,同時主界面模糊,內(nèi)容區(qū)域的縮小,共同營造出原來界面往深處后退的效果。很直觀的表達了主界面和 APP 界面的層級關(guān)系。
在鍵盤機的時代,通過菜單進入一個新頁面的時候,通常做法是整個頁面刷新一下,但是這樣操作久了,打開菜單太多,很容易讓人有一種「迷路」的困惑。在這個動畫中,通過界面的左滑、右滑來表達不同界面之間的層級關(guān)系。即使看不到主菜單,你也知道自己是從哪兒進來的。
(2)操作暗示
在這個例子中,長按一個 圖標進入編輯模式,所有圖標都會開始晃動。雖然整個頁面并沒有任何文字提示說明「現(xiàn)在圖標可以拖動的」,但是這種抖動的不穩(wěn)定感很直觀的表達了設(shè)計者的意圖。
當(dāng)輸入密碼錯誤的時候,密碼輸入欄會顯示出一個搖頭的效果。完全可以想象,假設(shè)用一個錯誤提示的彈窗,不僅會中斷用戶的操作流程,引起人的反感,而且很容易讓人受挫。通過動效,設(shè)計者用一種更友好簡單的方式達到了提示的目的。
(3)趣味
這里是開關(guān)狀態(tài)的過度,我們可以看到月亮?xí)杏?,鎖的狀態(tài)有鎖上和開啟兩種。這些有趣味的細節(jié)動效給用戶帶來驚喜,提升界面的品質(zhì)。
(4)克制
舉了那么多正面例子,下面也說兩個反例。這兩張圖都是我在 dribbble 找到的點贊量非常高的圖。但是實際上,完全不推薦在產(chǎn)品中使用這樣的效果。
動效不能濫用,要控制數(shù)量。在這頁面中,所有東西都在動。很難讓人抓住視覺重心。當(dāng)菜單欄下滑的時候,每一個菜單都會有一個抖動的效果。我們并不知道這個菜單為什么要這樣顫,看起來作者只是為了炫技這么做,實際上并沒有傳達任何的內(nèi)容,還會無形的增加了用戶的操作負擔(dān)。
好的動效要控制在0.3~0.5秒,本例中,菜單出現(xiàn)幾乎花費了一秒。頻繁打開菜單很容易引起人的疲倦,可以說是畫蛇添足了。
小結(jié)
上篇就講到這里,本篇里面我們了解了界面動效的價值:
- 滿足用戶心理預(yù)期
- 引導(dǎo)用戶注意力
- 情感化設(shè)計
也接觸到一下優(yōu)秀的界面動效實例:
- 通過動效暗示二維界面暗含的三維層級關(guān)系,及其暗含的操作邏輯。
- 引導(dǎo)用戶的注意力向界面重點元素。
- 通過動態(tài)設(shè)計讓情感化設(shè)計變得更生動。
- 動效的視覺效果統(tǒng)一,控制數(shù)量,不濫用。
在下篇中我會講講有哪些便捷的方式去實現(xiàn)這些優(yōu)秀動效。其實,我們平時看到的那些天花亂墜的效果,背后涉及到的設(shè)計參數(shù)非常簡單,只有三個。敬請期待吧。
作者:綠Lvgreen,混前端圈的設(shè)計師,就職于百度 Echarts 團隊。知乎專欄:UX 要素
來源:https://zhuanlan.zhihu.com/p/34501702
本文由 @綠Lvgreen 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自 Pexels,基于 CC0 協(xié)議
小白表示可以看懂^ω^