有用勝于有趣：6 條 UX 設(shè)計(jì)動(dòng)畫(huà)原則

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

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

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

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

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

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

減輕生硬的切換

沒(méi)有過(guò)渡 vs 水平滑動(dòng)過(guò)渡

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

提供上下文

沒(méi)有過(guò)渡 vs 從底部滑入

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

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

提供定位

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

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

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

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

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

提供及時(shí)反饋

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

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

輕微的顏色變革 vs 快速動(dòng)畫(huà)

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