動(dòng)效設(shè)置基礎(chǔ):緩動(dòng)

0 評(píng)論 9737 瀏覽 28 收藏 7 分鐘

筆者分享了關(guān)于緩動(dòng)設(shè)計(jì)的相關(guān)知識(shí),一起來(lái)看看~

先放結(jié)論:進(jìn)入屏幕用減速(ease-out);離開(kāi)屏幕用加速(ease-in);屏幕內(nèi)部移動(dòng)先加后減(ease-in-out)!

緩動(dòng)的最大用處就是應(yīng)用在設(shè)計(jì)的運(yùn)動(dòng)表現(xiàn)上,可以結(jié)合物理、數(shù)學(xué)等原理真實(shí)地模擬顯示生活中的運(yùn)動(dòng)現(xiàn)象,更加符合自然規(guī)律及人類認(rèn)知,并使對(duì)象按照用戶期望的行為交互,提供連續(xù)性體驗(yàn)。

在適當(dāng)緩動(dòng)的情景下,用戶可能會(huì)忽視運(yùn)動(dòng)本身,專注于頁(yè)面的內(nèi)容,從一定程度上保證用戶不為因?yàn)檫\(yùn)動(dòng)而分散注意力,或調(diào)動(dòng)大腦內(nèi)的認(rèn)知資源。

一、前端知識(shí)

1. CSS中不同的動(dòng)畫區(qū)別

  • linear:規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果(等于 cubic-bezier(0,0,1,1))
  • Ease-in:規(guī)定以慢速開(kāi)始的過(guò)渡效果(等于 cubic-bezier(0.42,0,1,1))
  • Ease-out:規(guī)定以慢速結(jié)束的過(guò)渡效果(等于 cubic-bezier(0,0,0.58,1))
  • Ease-in-out:規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果(等于 cubic-bezier(0.42,0,0.58,1))
  • cubic-bezier(n,n,n,n):在 cubic-bezier 函數(shù)中定義自己的值??赡艿闹凳?0 至 1 之間的數(shù)值。

2. 相關(guān)屬性(括號(hào)內(nèi)為定義該內(nèi)容的相關(guān)角色)

  • 移動(dòng)方向:向左向右等。(UX)
  • 移動(dòng)距離:以像素為單位。(UI)
  • 移動(dòng)時(shí)長(zhǎng):一個(gè)緩動(dòng)執(zhí)行的時(shí)間。(UX)
  • 移動(dòng)方式:緩動(dòng)類型。(UX)
  • 啟動(dòng)延時(shí):緩動(dòng)啟動(dòng)的延時(shí)時(shí)長(zhǎng),若設(shè)為1秒,即1秒后緩動(dòng)才啟動(dòng)。(UX)
  • 自動(dòng)播放:緩動(dòng)是否自動(dòng)播放。(UX)

二、緩動(dòng)詳解

主要看以下四個(gè):勻速運(yùn)動(dòng)(linear,主要用于對(duì)比)、緩動(dòng)-減速運(yùn)動(dòng)(ease-out)、緩動(dòng)-加速運(yùn)動(dòng)(ease-in)、緩動(dòng)-先加速后減速(ease-in-out)。

1. 勻速運(yùn)動(dòng)(linear)

比較少的情況下,會(huì)用勻速運(yùn)動(dòng),會(huì)顯得比較僵硬。不符合物理世界的規(guī)律,真實(shí)的運(yùn)動(dòng)狀態(tài)下,物體的速度是會(huì)隨著運(yùn)動(dòng)狀態(tài)發(fā)生變化的。下圖為勻速運(yùn)動(dòng)(linear)時(shí)運(yùn)動(dòng)距離隨時(shí)間的變化曲線:

2. 緩動(dòng)-減速運(yùn)動(dòng)(ease-out)

相比于勻速,開(kāi)始的時(shí)候快,結(jié)束的時(shí)候慢。下圖為緩動(dòng)-減速運(yùn)動(dòng)(ease-out)時(shí)運(yùn)動(dòng)距離隨時(shí)間的變化曲線:

3. 緩動(dòng)-加速運(yùn)動(dòng)(ease-in)

相比于勻速,開(kāi)始的時(shí)候慢,結(jié)束的時(shí)候快。下圖為緩動(dòng)-加速運(yùn)動(dòng)(ease-in)時(shí)運(yùn)動(dòng)距離隨時(shí)間的變化曲線:

在界面設(shè)計(jì)中,減速和加速動(dòng)效往往是成對(duì)使用的。通常元素進(jìn)入頁(yè)面時(shí)時(shí)用減速運(yùn)動(dòng)(ease-out),推出頁(yè)面時(shí)用加速運(yùn)動(dòng)(ease-in)。

新元素進(jìn)入屏幕的時(shí)候,用戶是希望其能快速進(jìn)入,所以一開(kāi)始的速度是快的。當(dāng)新的元素快要到達(dá)的時(shí)候,用戶的關(guān)注點(diǎn)是新元素的形態(tài),這時(shí)候,需要減速到達(dá),讓用戶感受到形態(tài)的變化。所以進(jìn)入頁(yè)面是減速運(yùn)動(dòng)(ease-out)。

用戶點(diǎn)擊當(dāng)某元素退出當(dāng)前頁(yè),更加關(guān)注的是當(dāng)前頁(yè)面給的反饋,所以該元素的初始速度不宜很快,否則用戶感受不到是他的操作引起的變化,還是頁(yè)面自己跳轉(zhuǎn)的。所以離開(kāi)頁(yè)面是加速運(yùn)動(dòng)(ease-in)。

例如iPhone App Store進(jìn)入頁(yè)面用減速:

4. 緩動(dòng)-先加速后減速(ease-in-out)

很多起點(diǎn)和終點(diǎn)都在界面內(nèi)的運(yùn)動(dòng)都使用這種先加速后減速的緩動(dòng)。

下圖為緩動(dòng)-先加速后減速(ease-in-out)時(shí)運(yùn)動(dòng)距離隨時(shí)間的變化曲線:

小結(jié)

進(jìn)入屏幕用減速;離開(kāi)屏幕用加速;屏幕內(nèi)部移動(dòng)先加后減。

 

本文由 @張大俠 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!