2022-6-12 純純
迪士尼動(dòng)畫的12條原則是設(shè)計(jì)師必須要掌握的經(jīng)典指導(dǎo)性原則,是由 Ollie Johnston 和 Frank Thomas 在他們的書《The Illusion of Life》中提出來(lái)的觀點(diǎn)(譯者注:這本書在豆瓣的評(píng)分有9.3分,值得一看)。這些原則最初是用來(lái)為動(dòng)畫片這種傳統(tǒng)的形式設(shè)計(jì)的,然而,這些原則也同樣適用于 UI設(shè)計(jì)。所以,我想在這里做一個(gè)有趣的嘗試,看能否將這些動(dòng)畫原則聯(lián)系起來(lái)。
在動(dòng)畫中,擠壓和拉伸代表了物體的重力,質(zhì)量,重量和靈活性。舉例來(lái)說(shuō),當(dāng)一個(gè)彈球在它撞擊地面時(shí)會(huì)發(fā)生形態(tài)變化,就是擠壓和拉伸。
在界面中,擠壓和拉伸很容易就聯(lián)想到按鈕。當(dāng)一個(gè)按鈕被按下時(shí),就可以理解為受到了擠壓,通過(guò)控制按鈕的擠壓和拉伸,我們可以很輕易地做好一個(gè)按鈕的交互動(dòng)畫。除了按鈕之外,這種原則也可以應(yīng)用于 UI 中的任何交互元素上。
△ 按鈕在交互時(shí)的擠壓和拉伸
△ 擠壓和拉伸被應(yīng)用于側(cè)邊欄
讓觀眾能預(yù)先知道接下來(lái)將會(huì)發(fā)生什么,它是先于下一步會(huì)發(fā)生的動(dòng)作。舉例來(lái)說(shuō),迪士尼動(dòng)畫里經(jīng)常有從高空往下跳躍時(shí)會(huì)先彎曲膝蓋再跳,正在跑步的人要停止跑步前會(huì)逐漸變慢步伐等等。
在界面中,懸停狀態(tài)就是很好的例子。當(dāng)我們把鼠標(biāo)懸停在元素上時(shí),元素會(huì)提供反饋,表明它是可以點(diǎn)擊的,并且在點(diǎn)擊時(shí),又會(huì)有一些別的反饋。
△ 懸停的交互通常會(huì)暗示這個(gè)按鈕是可以點(diǎn)的
在有水平滾動(dòng)界面里,通常在交互時(shí)會(huì)顯示下一個(gè)元素的部分內(nèi)容。這其實(shí)是一個(gè)很好的例子,因?yàn)樗窃诟嬷脩粝乱徊降囊恍┬畔ⅰ?
在傳統(tǒng)動(dòng)畫中,時(shí)間會(huì)決定關(guān)鍵幀的繪制方式。幀數(shù)越多,動(dòng)畫就越流暢,同時(shí)也更慢,時(shí)間能夠給動(dòng)畫賦予情緒和性格。
時(shí)間的節(jié)奏感是任何動(dòng)畫的基礎(chǔ),速度在元素編排中起著非常重要的作用。速度太慢,用戶會(huì)不耐煩;速度太快,用戶又會(huì)錯(cuò)過(guò)一些內(nèi)容。一般來(lái)說(shuō),大多數(shù) UI動(dòng)畫在200-600ms之間,其中懸停和反饋交互時(shí)長(zhǎng)大約為300ms,精細(xì)的轉(zhuǎn)場(chǎng)動(dòng)畫大約在500ms。也可以去參考谷歌的動(dòng)畫規(guī)范(https://material.io/design/motion/speed.html#duration),里面非常詳細(xì)地解釋了每種動(dòng)畫類型的持續(xù)時(shí)間。
一些設(shè)計(jì)系統(tǒng),如 Carbon(https://www.carbondesignsystem.com/guidelines/motion/)、 Lightning(https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/)都把運(yùn)動(dòng)的節(jié)奏感視為一個(gè)很重要的方面,并為每種類型的過(guò)渡都制定了嚴(yán)格的規(guī)范。
△ 右邊的過(guò)渡動(dòng)畫顯得太過(guò)于漫長(zhǎng),繁瑣。
在現(xiàn)實(shí)世界中,大多數(shù)物體都遵循著緩動(dòng)運(yùn)動(dòng)規(guī)律。也就是說(shuō),物體的運(yùn)動(dòng)并不會(huì)瞬間開(kāi)始或瞬間結(jié)束,就像一個(gè)物體自由落體,也是一開(kāi)始很慢后面才會(huì)變快。
△ 左側(cè)的卡片是沒(méi)有緩動(dòng)的,右側(cè)的是帶有緩動(dòng)的,看起來(lái)會(huì)自然很多。
給 UI 中的元素加上緩動(dòng)會(huì)讓它看起來(lái)更加自然,緩動(dòng)和節(jié)奏感都是可以有效的提升動(dòng)畫的品質(zhì)。
舞臺(tái)中的表演需要合適的編排才會(huì)精彩。也就是說(shuō),對(duì)象在場(chǎng)景中如何擺放,每個(gè)動(dòng)畫又如何出現(xiàn),關(guān)乎演出的質(zhì)量。通過(guò)這種編排,能夠?qū)⒆⒁饬σ蜃钪匾慕巧?
在界面中,呈現(xiàn)方式能夠決定元素的位置,以及在交互時(shí),它應(yīng)該如何編排才能將用戶的注意力引向預(yù)期的元素。
比如現(xiàn)在有一個(gè)基于興趣的音樂(lè)APP,對(duì)這個(gè)應(yīng)用來(lái)說(shuō),最重要的事就是讓動(dòng)畫引導(dǎo)用戶選擇他們所喜歡的音樂(lè)。因此,有必要將類似的操作與其他元素分開(kāi)編排,有目的的引導(dǎo)用戶。
一個(gè)從高處拋出的小球,運(yùn)動(dòng)軌跡會(huì)做拋物線軌跡運(yùn)動(dòng),弧線能使物體的運(yùn)動(dòng)更加自然。
在界面中,沿著對(duì)角線的元素沿著弧線軌跡將會(huì)使運(yùn)動(dòng)變得更加自然。當(dāng)需要凸顯出元素的運(yùn)動(dòng)路徑時(shí),多嘗試使用弧線軌跡。
△ 通過(guò)對(duì)比,能夠發(fā)現(xiàn)右側(cè)的弧線運(yùn)動(dòng)軌跡會(huì)比左側(cè)的直線運(yùn)動(dòng)軌跡顯得更加自然。
在動(dòng)畫中,次要?jiǎng)幼髂軌蚱鸬胶嫱兄饕獎(jiǎng)幼?,比如?dòng)畫中的角色在走路時(shí),頭部的晃動(dòng)就是次要?jiǎng)幼?,卻能夠讓角色行走顯得更加自然。
在界面中,次要操作能夠起到強(qiáng)化關(guān)鍵動(dòng)作,當(dāng)元素需要向用戶提供反饋時(shí),這個(gè)方法非常管用。所有的微交互都是基于這個(gè)附屬動(dòng)作原理。
△ 按鈕邊上的粒子效果強(qiáng)化了主按鈕的點(diǎn)擊效果
場(chǎng)景中的重要角色通常會(huì)采用一些比較夸張的動(dòng)作來(lái)獲得更多的注意力。
在界面中,重要的交互也會(huì)通過(guò)一些夸張的動(dòng)畫來(lái)引起用戶的注意。谷歌設(shè)計(jì)規(guī)范中的 FAB按鈕就是一個(gè)很好的例子,F(xiàn)AB按鈕在不動(dòng)的時(shí)候也比較能引起注意,因?yàn)樗ǔ?huì)帶有比較鮮明的顏色,并且是獨(dú)立懸浮在界面元素之上的。當(dāng)它被點(diǎn)擊時(shí),F(xiàn)AB的動(dòng)畫被放大,把整個(gè)界面都占滿,使得它完全占據(jù)用戶的注意力。
△ FAB夸張的交互形式
△ 對(duì)于支付這么重要功能的按鈕,通過(guò)夸張的動(dòng)效引起用戶的注意
想象一只兔子從高處跳下來(lái),當(dāng)兔子開(kāi)始起跳時(shí),它的耳朵動(dòng)作會(huì)與身體動(dòng)作發(fā)生錯(cuò)位。然后當(dāng)它著陸時(shí),它的身體停下來(lái)了,但是耳朵還在動(dòng)。前者稱之為跟隨動(dòng)作,后者被稱為重疊動(dòng)作。其原理說(shuō)的就是:沒(méi)有任何一種物體會(huì)突然停止,物體的運(yùn)動(dòng)是一個(gè)部分接著另一個(gè)部分的。
在界面中,可以使元素在停止之前超過(guò)它們?cè)镜奈恢茫沟迷剡\(yùn)動(dòng)更加自然。(譯者注:大白話就是我們常說(shuō)的回彈效果。)
△ 界面有一定的回彈,會(huì)顯得更加自然。
△ 當(dāng)界面滾動(dòng)時(shí),文字會(huì)跟隨圖片的運(yùn)動(dòng),圖片與文字以不同的速度運(yùn)動(dòng)會(huì)更加自然。(譯者注:像是被拖著走的那種感覺(jué))
界面中的每一次交互都必須在適當(dāng)?shù)膱?chǎng)景中精心設(shè)計(jì),讓整個(gè)體驗(yàn)更具沉浸感。在正確的地方使用這些原則能夠確保產(chǎn)品中的交互體驗(yàn)更加協(xié)調(diào)自然。
這些原則正在以不同的形式應(yīng)用于當(dāng)今的數(shù)字產(chǎn)品中,值得敬畏的是,30年前設(shè)計(jì)的一套規(guī)則到今天仍然適用。
(譯者注:這又應(yīng)了迪特·拉姆斯的設(shè)計(jì)十誡,好的設(shè)計(jì)是不會(huì)過(guò)時(shí)的。)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com