原作者： Pasquale D'Silva

文章來源：Medium

翻譯：Joyce Cheng

譯文僅供個人學習，不用于任何形式商業目的，轉載請注明原作者、文章來源、翻譯作者及簡書鏈接，版權歸原文作者所有。

題圖

設計師熱愛累死累活地摳細節。大部分時間都用來糾結按鈕、表單樣式、設置類型的像素了，以及把那些圖標弄得跟圖釘一樣鋒利。A＋，干得好，千萬別停啊伙計們。

......但是關于它們如何在靜態組合之外整合在一起，需要一些小小的思考。你輕觸一個按鈕然后表格就….出現了？你滑動刪除一個項目然后它就消失了？這樣會超級詭異而且不自然。真實世界中幾乎沒有東西做事情的方式像是僅僅切換狀態這么令人不爽。這感覺像是個故障。

噢，好吧親愛的。你做了一些筆記——它會“滑進”。

怎么滑？很快嗎？它會反彈嗎？緩沖嗎？靜態設計無法提供狀態之間的上下文。

當人們談到動畫和有意思的交互的時候，他們不停地用到“愉快”這個詞。這些家伙真酷真棒啊。但是猜猜還有什么？動畫也可以有功能性的用途誒。它可不僅僅是一個裝飾性的細節。

動畫利用的是一個被忽視的維度——時間！一種將空間縫合在一起的隱形織物。你不必非得成為一個數學呆子才能理解這一點。

讓我們來看一些簡單的想法：

移入/緩沖

在傳統的動畫中，一個分解（breakdown）用于確定某物如何從A點移動到B點。它為移動增加偏差，以及確定余下的幀如何就位。以下面這個25幀的動畫為例，其中第13幀（中間點）位置不同：

線性

移入

移出

看看！你剛剛學到了緩沖/移入。計算機挺混賬的，很喜歡線性地填空，因為它們就是一袋袋懶惰的電線啊。偉大的動畫師/運動設計師把大多數的時間花在跟計算機對抗上以確保它們不把事情搞砸。

動畫全在于時機。你可以利用各種不同的間距得到不同的結果。但是關于這一點到此為止。這不是一個動畫教程，主要是讓你思考一些時機和間距的運用。

關于界面中的動畫的一些想法

就像我前面說的，動畫可以幫助提供上下文。它幫助大腦理解信息是如何流動的。

在列表中插入一個條目

比方說，你有一個關于事情的實時列表，你希望它根據實時數據進行填充。如果你把它留給計算機的話，它看起來會是這個樣子：

哎呀，這太粗糙了….

修改它只需要幾幀動畫。關于列表究竟發生了什么，給你的大腦一個線索如何？

要添加新的條目，列表需要為新增項騰出空間，然后新增項（來自某處）把空白填滿。沒那么不爽了。狀態的移入&移出軟化了變化。感覺更自然了，因為我們有空間的上下文連接——鏡像般地反映了我們在真實生活中往一堆東西里添加物品的情況。

還有更多：

點看列表條目

下面是典型的滑入一個條目的默認模式。該模式經常被使用，但是在空間上意義不大：

滑動的方向在各種視圖的線性鏈之外無法真正給你任何有用的線索。

假如把條目當成一個容器呢？你戳它的話，可以得到更多的細節，在行內顯示。

如果目標是點看列表條目內容并且將全部的關注集中于它，那么我們甚至可以在同一視圖中讓其它的一切都隱藏起來：

標記>進入>一個>視圖的>所有路徑的>面包屑是很容易讓人迷路的。

保持在行內顯示的一個好處是，你可以避免解釋用戶究竟在一個子視圖里面嵌得有多深。分層導航的顯示可以廢除了，因為用戶看見了他們是如何到那里的。

當然了，以上想法并不適用于每一種情況——但這種觀點可以帶來連接信息流的更優雅的解決方案。

實例——Thinglist

Thinglist是我與凱爾·布拉格爾一起制作的一款Elepath的產品，它里面交織了一些非常有趣的過渡界面工作。上面的例子展示了我們是如何實現新的過濾功能的。

你應該看看的過渡界面的例子：

你懂的，其實我舉不出很多例子….一方面，有許多美麗的，但是非常靜態的界面。另一方面——有些界面被花里胡哨的動畫過度裝飾了。

現在我能舉出來的有三個。

Clear：手勢驅動的非常緊湊的動畫。

Willcall：具有連貫的動態的節奏。狀態間沒有生硬的跳躍。可愛型的活潑有趣。

Facebook.app：不是非常連貫，但是在吸引注意力方面有很不錯的解決方案。具體來說….點擊進入燈箱視圖以查看全屏照片，進入列表視圖查看評論內容。

許多人在思考界面時不考慮時間維度這一點讓我很詫異。動作可以提供這么多信息誒！難道是畫原型的工具對大多數設計師來說太復雜了？

起初我的這篇文章是寫給Elepath員工的一份內部文檔，用以開始解釋我對動作的熱愛。畢竟我是個動畫師嘛。

后來我們覺得分享這篇文章來發起討論也挺好的。我很想聽聽其他認真考慮界面如何&為什么移動的做界面的人的想法。

更新：我把這篇文章擴展成了一個50分鐘的演講，你可以在這里觀看->

*對于你縱身躍入兔子洞并沉迷于動畫，我可不負任何責任。