原作者： Pasquale D'Silva
文章來源：Medium
翻譯：Joyce Cheng
譯文僅供個人學(xué)習(xí)萍嬉，不用于任何形式商業(yè)目的乌昔，轉(zhuǎn)載請注明原作者、文章來源壤追、翻譯作者及簡書鏈接磕道，版權(quán)歸原文作者所有。
設(shè)計師熱愛累死累活地?fù)讣?xì)節(jié)行冰。大部分時間都用來糾結(jié)按鈕溺蕉、表單樣式、設(shè)置類型的像素了悼做，以及把那些圖標(biāo)弄得跟圖釘一樣鋒利较性。A＋仅炊，干得好哗讥，千萬別停啊伙計們铆帽。
......但是關(guān)于它們?nèi)绾卧陟o態(tài)組合之外整合在一起，需要一些小小的思考羹与。你輕觸一個按鈕然后表格就….出現(xiàn)了故硅？你滑動刪除一個項目然后它就消失了？這樣會超級詭異而且不自然纵搁。真實(shí)世界中幾乎沒有東西做事情的方式像是僅僅切換狀態(tài)這么令人不爽吃衅。這感覺像是個故障。
噢腾誉，好吧親愛的徘层。你做了一些筆記——它會“滑進(jìn)”。
怎么滑利职？很快嗎趣效？它會反彈嗎？緩沖嗎猪贪？靜態(tài)設(shè)計無法提供狀態(tài)之間的上下文跷敬。
當(dāng)人們談到動畫和有意思的交互的時候，他們不停地用到“愉快”這個詞热押。這些家伙真酷真棒啊西傀。但是猜猜還有什么斤寇？動畫也可以有功能性的用途誒。它可不僅僅是一個裝飾性的細(xì)節(jié)拥褂。
動畫利用的是一個被忽視的維度——時間娘锁！一種將空間縫合在一起的隱形織物。你不必非得成為一個數(shù)學(xué)呆子才能理解這一點(diǎn)饺鹃。
讓我們來看一些簡單的想法：
移入/緩沖
在傳統(tǒng)的動畫中致盟，一個分解（breakdown）用于確定某物如何從A點(diǎn)移動到B點(diǎn)。它為移動增加偏差尤慰，以及確定余下的幀如何就位。以下面這個25幀的動畫為例雷蹂，其中第13幀（中間點(diǎn)）位置不同：
看看伟端！你剛剛學(xué)到了緩沖/移入。計算機(jī)挺混賬的匪煌，很喜歡線性地填空责蝠，因?yàn)樗鼈兙褪且淮鼞卸璧碾娋€啊。偉大的動畫師/運(yùn)動設(shè)計師把大多數(shù)的時間花在跟計算機(jī)對抗上以確保它們不把事情搞砸萎庭。
動畫全在于時機(jī)霜医。你可以利用各種不同的間距得到不同的結(jié)果。但是關(guān)于這一點(diǎn)到此為止驳规。這不是一個動畫教程肴敛，主要是讓你思考一些時機(jī)和間距的運(yùn)用。
關(guān)于界面中的動畫的一些想法
就像我前面說的吗购，動畫可以幫助提供上下文医男。它幫助大腦理解信息是如何流動的。
在列表中插入一個條目
比方說捻勉，你有一個關(guān)于事情的實(shí)時列表镀梭，你希望它根據(jù)實(shí)時數(shù)據(jù)進(jìn)行填充。如果你把它留給計算機(jī)的話踱启，它看起來會是這個樣子：
哎呀报账，這太粗糙了….
修改它只需要幾幀動畫。關(guān)于列表究竟發(fā)生了什么埠偿，給你的大腦一個線索如何透罢？
要添加新的條目，列表需要為新增項騰出空間冠蒋，然后新增項（來自某處）把空白填滿琐凭。沒那么不爽了。狀態(tài)的移入&移出軟化了變化浊服。感覺更自然了统屈，因?yàn)槲覀冇锌臻g的上下文連接——鏡像般地反映了我們在真實(shí)生活中往一堆東西里添加物品的情況胚吁。
還有更多：
點(diǎn)看列表條目
下面是典型的滑入一個條目的默認(rèn)模式。該模式經(jīng)常被使用愁憔，但是在空間上意義不大：
滑動的方向在各種視圖的線性鏈之外無法真正給你任何有用的線索腕扶。
假如把條目當(dāng)成一個容器呢？你戳它的話吨掌，可以得到更多的細(xì)節(jié)半抱，在行內(nèi)顯示。
如果目標(biāo)是點(diǎn)看列表條目內(nèi)容并且將全部的關(guān)注集中于它膜宋，那么我們甚至可以在同一視圖中讓其它的一切都隱藏起來：
標(biāo)記>進(jìn)入>一個>視圖的>所有路徑的>面包屑是很容易讓人迷路的窿侈。
保持在行內(nèi)顯示的一個好處是，你可以避免解釋用戶究竟在一個子視圖里面嵌得有多深秋茫。分層導(dǎo)航的顯示可以廢除了史简，因?yàn)橛脩?b>看見了他們是如何到那里的。
當(dāng)然了肛著，以上想法并不適用于每一種情況——但這種觀點(diǎn)可以帶來連接信息流的更優(yōu)雅的解決方案圆兵。
實(shí)例——Thinglist
Thinglist是我與凱爾·布拉格爾一起制作的一款Elepath的產(chǎn)品，它里面交織了一些非常有趣的過渡界面工作枢贿。上面的例子展示了我們是如何實(shí)現(xiàn)新的過濾功能的殉农。
你應(yīng)該看看的過渡界面的例子：
你懂的，其實(shí)我舉不出很多例子….一方面局荚，有許多美麗的超凳，但是非常靜態(tài)的界面。另一方面——有些界面被花里胡哨的動畫過度裝飾了耀态。
現(xiàn)在我能舉出來的有三個聪建。
Clear：手勢驅(qū)動的非常緊湊的動畫。
Willcall：具有連貫的動態(tài)的節(jié)奏茫陆。狀態(tài)間沒有生硬的跳躍金麸。可愛型的活潑有趣簿盅。
Facebook.app：不是非常連貫挥下，但是在吸引注意力方面有很不錯的解決方案。具體來說….點(diǎn)擊進(jìn)入燈箱視圖以查看全屏照片桨醋，進(jìn)入列表視圖查看評論內(nèi)容棚瘟。
許多人在思考界面時不考慮時間維度這一點(diǎn)讓我很詫異。動作可以提供這么多信息誒喜最！難道是畫原型的工具對大多數(shù)設(shè)計師來說太復(fù)雜了偎蘸？
起初我的這篇文章是寫給Elepath員工的一份內(nèi)部文檔，用以開始解釋我對動作的熱愛。畢竟我是個動畫師嘛迷雪。
后來我們覺得分享這篇文章來發(fā)起討論也挺好的限书。我很想聽聽其他認(rèn)真考慮界面如何&為什么移動的做界面的人的想法。
更新：我把這篇文章擴(kuò)展成了一個50分鐘的演講章咧，你可以在這里觀看->
*對于你縱身躍入兔子洞并沉迷于動畫倦西，我可不負(fù)任何責(zé)任。
