設(shè)計(jì)師都愛(ài)雕琢細(xì)節(jié)。多數(shù)時(shí)間都用來(lái)折騰像素級(jí)的按鈕、表單樣式、設(shè)定字體，還要把圖標(biāo)打磨得像圖釘一樣鋒利。很好，滿分，大家請(qǐng)繼續(xù)保持。

但是，還需要考慮一點(diǎn)，它們除了靜態(tài)組合之外如何相互結(jié)合。按下按鈕，表單就……直接出現(xiàn)嗎？滑動(dòng)刪除一個(gè)項(xiàng)目，它就直接消失？那太奇怪了，也不自然。現(xiàn)實(shí)中幾乎沒(méi)有什么會(huì)這樣突兀地直接切換狀態(tài)。它給人感覺(jué)像是出了毛病。

那好。你寫(xiě)下了一條注釋——它是“滑入”的。

如何滑入？速度多快？會(huì)不會(huì)反彈？有沒(méi)有緩沖？靜態(tài)的設(shè)計(jì)無(wú)法提供狀態(tài)之間的銜接。

提到動(dòng)畫(huà)和討喜的交互時(shí)，人們總是用“有趣”一詞。對(duì)他們來(lái)說(shuō)，這些動(dòng)態(tài)效果很酷。但你猜怎么著？動(dòng)畫(huà)還有功能性的作用。它不僅僅是個(gè)美化過(guò)的細(xì)節(jié)。

動(dòng)畫(huà)利用了一個(gè)被忽略的維度——時(shí)間！一種將空間縫合在一起的隱形織物。即使不是數(shù)學(xué)宅，你也能理解這點(diǎn)。

我們來(lái)看看一些簡(jiǎn)單的概念：

緩動(dòng)/緩沖

傳統(tǒng)動(dòng)畫(huà)中，斷點(diǎn)決定了一團(tuán)東西如何從A點(diǎn)移動(dòng)到B點(diǎn)。它給動(dòng)畫(huà)增加了偏移量，決定了其余幀的時(shí)間間隔是怎樣的。以這25幀補(bǔ)間動(dòng)畫(huà)為例，第13幀（中點(diǎn)）的位置有所不同：

瞧瞧！你已經(jīng)學(xué)會(huì)了緩沖/緩動(dòng)。電腦都是混蛋，喜歡線性均勻地填充這些空隙，因?yàn)樗麄兙褪且粓F(tuán)懶惰的電路。優(yōu)秀的動(dòng)畫(huà)/動(dòng)效設(shè)計(jì)師多數(shù)時(shí)間都在與電腦作斗爭(zhēng)，確保它們不會(huì)把這搞砸。

動(dòng)畫(huà)總是關(guān)乎時(shí)間。你可以嘗試各種不同的時(shí)間間隔，會(huì)得到不同的結(jié)果。但這已經(jīng)足夠了。這不是動(dòng)畫(huà)教程，關(guān)鍵是讓你思考時(shí)間與間隔的語(yǔ)言。

關(guān)于界面銜接動(dòng)畫(huà)的一些創(chuàng)意

我之前說(shuō)過(guò)，動(dòng)畫(huà)有助于創(chuàng)造情境。它幫助大腦理解信息如何流轉(zhuǎn)。

向列表中添加項(xiàng)目

比如說(shuō)你在看著一列動(dòng)態(tài)列表，你希望用實(shí)時(shí)數(shù)據(jù)填充它。如果你把這任務(wù)交給電腦，它看起來(lái)會(huì)是這樣：

我去，太挫了……

平滑地將它顯示出來(lái)，只需要幾幀動(dòng)畫(huà)。給你的大腦提供一點(diǎn)線索吧，想想這個(gè)列表發(fā)生了什么？

為了添加一個(gè)新項(xiàng)目，列表需要為它讓出空間，然后（來(lái)自某處的）新項(xiàng)目填充了這片空間。突兀感大大減少了。狀態(tài)淡入淡出還能使變化更加緩和。感覺(jué)更自然，因?yàn)槲覀兟?lián)想到空間的相關(guān)情境——它反映了現(xiàn)實(shí)生活中，你往一堆東西里添加?xùn)|西的過(guò)程。

再來(lái)幾個(gè)：

進(jìn)入列表項(xiàng)

典型的默認(rèn)方式是滑動(dòng)進(jìn)入某一項(xiàng)。這是常用的一種模式，但整體在空間上并不怎么合理：

滑動(dòng)的方向并沒(méi)有給你任何有用的線索，除了一系列串成線的界面。

要不考慮一下把這項(xiàng)做成一個(gè)容器，點(diǎn)它之后在內(nèi)部展示更多詳情？

如果目的是進(jìn)入該項(xiàng)，并使它吸引全部的注意力，我們甚至可以在同個(gè)界面中把其他所有都隱藏起來(lái)：

把>所有>界面>用>面包屑導(dǎo)航>串起來(lái)，很容易迷失方向。

內(nèi)部展開(kāi)的一個(gè)優(yōu)勢(shì)，是你不需要解釋用戶如何到達(dá)這個(gè)子界面?？梢話仐墝蛹?jí)式的導(dǎo)航，因?yàn)橛脩?strong style="color: #222222">看見(jiàn)了他們是如何進(jìn)到那里。

我和Kyle Bragger?先生正在致力于打造Thinglist，一款Elepath旗下的產(chǎn)品，它里面加入了一些非常好玩的界面過(guò)渡效果。上面的例子演示了這些新特性。

你該看看這些界面過(guò)渡效果案例：

Clear：與手勢(shì)操作緊密相關(guān)的動(dòng)畫(huà)。

Willcall：它有一套統(tǒng)一的律動(dòng)節(jié)奏。狀態(tài)之間不會(huì)有東西生硬地出現(xiàn)。非常有趣值得把玩。

Elepath的員工可以解釋我對(duì)于動(dòng)畫(huà)的癡迷。畢竟我是一名動(dòng)效設(shè)計(jì)師。

@pasql

你還可以參與branch的討論：http://branch.com/b/transitional-interfaces-design-ux

最新消息：我為這篇文章做了一段50分鐘的演說(shuō)，可以在此觀看（譯者提醒：需翻墻）

如果動(dòng)畫(huà)使你無(wú)法自拔，我概不負(fù)責(zé)。

戳這里查看原文鏈接