作者 José Torre 是 TomTom 公司的資深視覺設(shè)計師，有感于動畫被大量錯誤使用的現(xiàn)狀，結(jié)合自身多年的設(shè)計經(jīng)驗，總結(jié)出 6 條動畫設(shè)計原則，通過豐富的案例介紹了在何時、何處、如何使用動畫及其克服障礙的心得體會。

你確定了所有交互而且視覺設(shè)計已經(jīng)定稿，但是你感覺少了些什么。這時你可能會想「是時候加些動畫點綴一下了」。這是一個巨大的錯誤，也是動畫被濫用的原因之一。在設(shè)計過程最后考慮動畫通常會和在 PPT 中添加過渡效果混為一談，這是完全錯誤的。

如果把用戶體驗看作是一個蛋糕，在大多數(shù)的情況下，動畫被認為是蛋糕頂部的櫻桃，但是我完全差別意這個不雅觀點。我認為動畫應該是你混入蛋糕糊的另一種原料。

在你繪制線框圖的時候，動畫就應該成竹在胸了。這就像在按下按鈕后，特定物體會按照箭頭指示的標的目的移動那么簡單。連結(jié)簡單有助于你無需關(guān)注過多樣式，就能發(fā)現(xiàn)動效的目的（或特定目的的動效）。也會讓你不過于依戀動畫，因為動畫不總是問題的解決方案。如果它無法助你達成目標，棄之即可，無用的動畫將會成為最終用戶的障礙。

這就把我們直接帶入到下一條原則。

多余的動畫會占用用戶名貴的時間，而且用戶在獲得初次愉悅之后就會厭倦，這就是為什么動畫需要有功能性的原因。假如你想知道哪些動畫可以幫手你，下面是一些案例。

減輕生硬的切換

沒有過渡 vs 水平滑動過渡

不管是不是設(shè)計師，我們都對此很熟悉。你在屏幕 A 中點按一個按鈕，砰！一個完全差別的屏幕（B）突然出現(xiàn)了。然后你會疑惑，它是從哪來的？我按下的是正確的按鈕嗎？接下來呢？如果「B」看起來和「A」很像怎么辦？用戶可能會認為什么都未發(fā)生。這展示了動畫中最常見的一類，變革時刻。考慮下從屏幕 A 到 B 這次「旅程」花費了多長時間，哪些對象應在屏幕中保存，它們將如何達到那里？但請不要過度使用，因為接下來你將發(fā)現(xiàn)，動畫最好在「無形」中發(fā)揮作用。

提供上下文

沒有過渡 vs 從底部滑入

有時候你進入了某個頁面，但是并不確定如何與之交互。一種幫手用戶理解的好方法就是在特定物體進入時，提供一些它的特性的線索。以文章列表舉例，滑動它們有助于用戶理解可以不竭的刷動查看更多。你甚至可以更進一步，讓它們一個接一個的按時滑動出現(xiàn)，強調(diào)這些項目都是分開的，你可以與傍邊的任一個進行交互。

假如你決定點擊其中一個項目，然后它展開了那篇文章的全部內(nèi)容，之前與其他信息處于同一層級的信息現(xiàn)在釀成了主要內(nèi)容。過渡動畫是加強用戶選擇的一種好方法，不但展示了你仍然和處于選中狀態(tài)的同一物體進行交互，并且也會給你帶來更多的屏幕空間。

提供定位

當用戶界面和用戶之間的所有障礙被移除后，用戶界面變得更加真實具體起來，因此賦予用戶空間定位感變得十分重要。你可以通過讓動畫連結(jié)一致和 app 的結(jié)構(gòu)易于理解做到這一點。

一個物體向左移出屏幕，如果它再次出現(xiàn)，從邏輯上講，應該來自其移出的地方。這將幫手你的用戶理解 app 的面貌，用戶在使用時會感覺更加舒暢。反之則會引發(fā)混亂，用戶甚至可能會認為他們看到的完全不是同一個物體。

內(nèi)容從底部進入 vs 內(nèi)容從右邊（箭頭的指向）進入

這同樣適用于屏幕上出現(xiàn)的視覺提示。想象你點擊了一個帶有向右指示箭頭的列表項，邏輯上的過渡應該是自右向左滑動，好像用戶視圖向右移動一樣，加強了用戶界面中的視覺線索。

很多時候你會看到 UI 元素與過渡動效相矛盾。這有點惱人，我認為這些是我們應該制止的，不然動畫會讓用戶看起來很突兀，因為它們違反了用戶的預期。

提供及時反饋

你曾否問過本身，我按下阿誰按鈕了嗎？它做了什么？我應該再按一次嗎？回答可能是必定的，你或許會一遍又一遍的點擊，只為確認實際上你在最初的時候就按下了。這就是為什么提供及時反饋是重要的原因，即便 app 沒有立即做出反應。

在這個世界中，你的手指通常會蓋住點按按鈕，動畫在為用戶提供他們所需的慰藉上發(fā)揮了巨大的作用。

輕微的顏色變革 vs 快速動畫

標簽：東營 九江 鹽城 烏魯木齊 林芝