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

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

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

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

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

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

減輕生硬的切換

沒有過渡 vs 水平滑動過渡

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

提供上下文

沒有過渡 vs 從底部滑入

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

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

提供定位

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

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

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

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

很多時候你會看到 UI 元素與過渡動效相矛盾。這有點(diǎn)惱人，我認(rèn)為這些是我們應(yīng)該制止的，不然動畫會讓用戶看起來很突兀，因?yàn)樗鼈冞`反了用戶的預(yù)期。

提供及時反饋

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

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

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

標(biāo)簽：東營 九江 鹽城 烏魯木齊 林芝