2019-1-16 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
迪士尼動(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)說，當(dāng)一個(gè)彈球在它撞擊地面時(shí)會(huì)發(fā)生形態(tài)變化，就是擠壓和拉伸。
在界面中，擠壓和拉伸很容易就聯(lián)想到按鈕。當(dāng)一個(gè)按鈕被按下時(shí)，就可以理解為受到了擠壓，通過控制按鈕的擠壓和拉伸，我們可以很輕易的做好一個(gè)按鈕的交互動(dòng)畫。除了按鈕之外，這種原則也可以應(yīng)用于UI中的任何交互元素上。
按鈕在交互時(shí)的擠壓和拉伸
擠壓和拉伸被應(yīng)用于側(cè)邊欄
讓觀眾能預(yù)先知道接下來(lái)將會(huì)發(fā)生什么，它是先于下一步會(huì)發(fā)生的動(dòng)作。舉例來(lái)說，迪士尼動(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ò)過一些內(nèi)容。一般來(lái)說，大多數(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è)很重要的方面，并為每種類型的過渡都制定了嚴(yán)格的規(guī)范。
右邊的過渡動(dòng)畫顯得太過于漫長(zhǎng)，繁瑣。
在現(xiàn)實(shí)世界中，大多數(shù)物體都遵循著緩動(dòng)運(yùn)動(dòng)規(guī)律。也就是說，物體的運(yùn)動(dòng)并不會(huì)瞬間開始或瞬間結(jié)束，就像一個(gè)物體自由落體，也是一開始很慢后面才變會(huì)變快。
左側(cè)的卡片是沒有緩動(dòng)的，右側(cè)的是帶有緩動(dòng)的，看起來(lái)會(huì)自然很多。
給UI中的元素加上緩動(dòng)會(huì)讓它看起來(lái)更加自然，緩動(dòng)和節(jié)奏感都是可以有效的提升動(dòng)畫的品質(zhì)。
舞臺(tái)中的表演需要合適的編排才會(huì)精彩。也就是說，對(duì)象在場(chǎng)景中如何擺放，每個(gè)動(dòng)畫又如何出現(xiàn)，關(guān)乎演出的質(zhì)量。通過這種編排，能夠?qū)⒆⒁饬σ蜃钪匾慕巧?
在界面中，呈現(xiàn)方式能夠決定元素的位置，以及在交互時(shí)，它應(yīng)該如何編排才能將用戶的注意力引向預(yù)期的元素。
比如現(xiàn)在有一個(gè)基于興趣的音樂APP，對(duì)這個(gè)應(yīng)用來(lái)說，最重要的事就是讓動(dòng)畫引導(dǎo)用戶選擇他們所喜歡的音樂。因此，有必要將類似的操作與其他元素分開編排，有目的的引導(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í)，多嘗試使用弧線軌跡。
通過對(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ì)通過一些夸張的動(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ì)于支付這么重要功能的按鈕，通過夸張的動(dòng)效引起用戶的注意
想象一只兔子從高處跳下來(lái)，當(dāng)兔子開始起跳時(shí)，它的耳朵動(dòng)作會(huì)與身體動(dòng)作發(fā)生錯(cuò)位。然后當(dāng)它著陸時(shí)，它的身體停下來(lái)了，但是耳朵還在動(dòng)。前者稱之為跟隨動(dòng)作，后者被稱為重疊動(dòng)作。其原理說的就是：沒有任何一種物體會(huì)突然停止，物體的運(yùn)動(dòng)是一個(gè)部分接著另一個(gè)部分的。
在界面中，可以使元素在停止之前超過它們?cè)镜奈恢?，使得元素運(yùn)動(dòng)更加自然。（譯者注：大白話就是我們常說的回彈效果。）
界面有一定的回彈，會(huì)顯得更加自然。
當(dāng)界面滾動(dòng)時(shí)，文字會(huì)跟隨圖片的運(yùn)動(dòng)，圖片與文字以不同的速度運(yùn)動(dòng)會(huì)更加自然。（譯者注：像是被拖著走的那種感覺）
界面中的每一次交互都必須在適當(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ī)則到今天仍然適用。
藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net