本文筆者將與大家分享：如何在 UX 設(shè)計中如何使用動畫？以及在設(shè)計中使用動畫時要記住的事項。

如果說在豐富而漫長的動畫歷史中，有什么最明顯的特點的話，那就是讓觀眾著迷的移動圖形和圖像。動畫并不是一個新鮮事物，除了娛樂之外，動畫現(xiàn)在還被用于其他目的。

事實上，有一種方法是：充分利用其永恒的吸引力和多功能性，為網(wǎng)站用戶創(chuàng)造積極和引人入勝的體驗。

但并非所有動畫都是一樣的，特別是從用戶體驗（UX）設(shè)計的角度來看，有些動畫最終會創(chuàng)造問題而不是解決問題。善意但有誤導(dǎo)性的動畫可能會分散用戶的注意力，使界面變得混亂，或者減慢網(wǎng)站的速度。設(shè)計師不僅需要清楚地了解動畫的好處，還需要了解將動畫融入 UX 設(shè)計的原則。

本文討論了在 UX 設(shè)計中使用動畫的原則，包括將移動設(shè)計給品牌帶來的好處最大化的首要原則。

不只是動態(tài)圖片

對于許多設(shè)計師來說，網(wǎng)站或應(yīng)用程序的動畫元素只是用來增加吸引力的可選附加項。但是，當(dāng)動畫被明智地使用時，動畫可以做的更多，可以為網(wǎng)站提供核心利益，并為優(yōu)秀的用戶體驗設(shè)計做出貢獻。

以下是動畫改進 UX 的一些方法：

動畫和講故事

創(chuàng)作用戶可以輕松理解的情感，是動畫在用戶體驗設(shè)計中最有力的表現(xiàn)方式。眾所周知，情緒會對消費者行為產(chǎn)生相當(dāng)大的影響，因此使用動畫元素是確保用戶積極響應(yīng)的潛在有效方式。

要了解動畫如何創(chuàng)造情感，您需要了解：動畫如何講述故事？

在一項研究中，受試者看了運動的圓圈和三角形的視頻。通過觀察幾何形狀如何移動，受試者能夠理解一個故事。這個虛構(gòu)的故事成為他們明確屏幕上多邊形“情感”的基礎(chǔ)。因此，運動對于講故事是必要的。從故事中，人們可以感知到情感。

用戶體驗就是一系列的故事，設(shè)計師在網(wǎng)站或應(yīng)用程序上工作時會傳遞這些故事。用戶每次使用它時都會經(jīng)歷這些故事，無論是在線購買，上傳自拍還是分享任何類型的內(nèi)容，目的是確保每個故事都能無縫有效地傳遞。

使用動畫可以更好地講述故事，從而與用戶建立情感聯(lián)系。

這些包括：

• 改變按鈕顏色，表示用戶在整個過程中采取哪些步驟？
• 視差效應(yīng)在體驗的不同點之間產(chǎn)生連續(xù)感。

即使是界面上的小動畫也可以改善用戶使用產(chǎn)品時的體驗。通過仔細(xì)選擇要使用的動畫元素，設(shè)計師可以激發(fā)用戶持久的情感印象和回應(yīng)。從長遠(yuǎn)來看，所有這些都可以使他們的網(wǎng)站或應(yīng)用程序受益。

動畫作為功能元素

謹(jǐn)記動畫元素是要占用空間的，因此，有必要使它們發(fā)揮作用。這意味著不應(yīng)該添加大量動畫來給觀眾留下深刻印象。

相反，動畫必須用來執(zhí)行特定的角色或功能。

以下是使用動畫的一些聰明的方法：

1. 讓加載屏幕不再無聊

用戶僅愿意等待兩秒鐘來加載網(wǎng)站或應(yīng)用程序，任何一秒的延遲都可能導(dǎo)致許多人離開，轉(zhuǎn)而使用更快的網(wǎng)站或應(yīng)用程序。當(dāng)用戶等待著內(nèi)容出現(xiàn)在網(wǎng)站或應(yīng)用程序上時，動畫加載屏幕可以使他們保持愉悅并參與其中。

2. 給用戶一點線索

設(shè)計人員使用動畫讓用戶了解他們可以在網(wǎng)站或應(yīng)用程序上執(zhí)行哪些操作。

例如：讓列表在屏幕上顯示時向上滑動，而不是簡單地讓它們出現(xiàn)，告訴用戶這些列表可以滑動，如果他們想看到更多。

3. 提供實時視覺反饋

為了防止混淆，設(shè)計師可以加入動畫元素，為他們在應(yīng)用程序或網(wǎng)站上的每一個動作提供即時的視覺反饋。

例如：當(dāng)點擊或按下按鈕時，按鈕可以改變顏色或點亮。

動畫作為品牌推廣工具

動畫元素喚起用戶內(nèi)心情感的能力，使其成為塑造品牌的有效工具。

當(dāng)用戶打開一個網(wǎng)站或應(yīng)用程序時，動態(tài)圖形可以引起喜悅、期待、興奮、好奇，甚至同情。通過喚起正確的情感，您可以激發(fā)用戶的忠誠感，增強消費者對特定品牌的粘性。

在使用動畫作為品牌推廣工具時，重要的動畫元素不會從故事中消失。相反，動畫元素必須支持整體體驗的連續(xù)性。它們必須與整體故事很好的融合，同時突出品牌及其產(chǎn)品的價值和實力。

使用動畫時要記住的事項

綜上所述，將動畫元素引入到您的產(chǎn)品中并非全是益處。要確保應(yīng)用程序或網(wǎng)站享有使用動畫的全部好處，您必須記住以下內(nèi)容：

1. 動畫僅僅支持體驗

用戶訪問網(wǎng)站或應(yīng)用程序來獲得內(nèi)容、產(chǎn)品、服務(wù)和體驗。除非在非常特殊的情況下，否則他們不會訪問一個網(wǎng)站來呆呆地看著它的動畫按鈕、轉(zhuǎn)換或滑塊。動畫元素永遠(yuǎn)不應(yīng)成為焦點，而是應(yīng)該改善整體體驗。

在你的設(shè)計中加入動畫時，一定要克制自己。不要試圖用華麗的裝飾來打動觀眾，而是要確保動畫元素與視覺效果和品牌形象一致。更重要的是，動畫應(yīng)該支持用戶與產(chǎn)品元素的互動。

2. 不需要為所有內(nèi)容制作動畫

俗話說：“能夠做并不意味著應(yīng)該做。”

如上所述，在設(shè)計出色的體驗時，克制是一種重要的品質(zhì)。在這種情況下，僅僅因為可能或容易為元素設(shè)置動畫并不意味著這樣做會使用戶受益。如果為元素設(shè)置動畫不會增進任何用戶體驗，那么最好將其保持簡單。

這并不意味著，你就不能對你的想法采取古怪或冒險的態(tài)度。事實上，能夠使用動畫將一個陳舊的、嘗試過的概念變成能夠與用戶產(chǎn)生共鳴的新鮮事物，可能是一個很棒的想法。為用戶制作交互動畫，并堅持動作簡單，可以幫助用戶保持專注并創(chuàng)造更好的體驗。

3. 保持自然

應(yīng)用和網(wǎng)站，以及它們的視覺元素，在現(xiàn)實世界中并不存在。它們不受物理規(guī)則的約束，但網(wǎng)頁設(shè)計師需要按照自然規(guī)律設(shè)計它們。

例如：可以理解的是，動畫列表的響應(yīng)速度和用戶與應(yīng)用程序交互的速度相同。這是因為用戶基于現(xiàn)實世界中熟悉的規(guī)則，解釋他們與數(shù)字元素的交互。界面的元素需要符合用戶的期望，否則，故事就會中斷。

要在這方面取得成功，一定要意識到應(yīng)用程序或網(wǎng)站元素的“物質(zhì)”和“重量”。那些“感覺”輕的可以理所當(dāng)然地移動得快些，而那些“感覺”重的需要表現(xiàn)得好像他們真的很重。你必須既有想象力，又能牢牢掌握物理規(guī)則，以及它們是如何影響現(xiàn)實生活中的事物的。

3. 始終與實際用戶一起測試

制造企業(yè)在任何產(chǎn)品推出之前，測試都是一項強制性要求。

這種方法也需要應(yīng)用于數(shù)字產(chǎn)品，以確保包括動畫在內(nèi)的所有元素與品牌的原始目標(biāo)保持一致，并確保它們實際符合預(yù)期結(jié)果。不用說，測試需要實際用戶參與。

測試似乎是一項額外的要求，但它實際上可以使設(shè)計人員免于大量工作。

通過了解實際用戶如何響應(yīng)網(wǎng)站或應(yīng)用程序，設(shè)計人員可以確定需要修改哪些元素以優(yōu)化用戶體驗，并使所有人都可以訪問網(wǎng)站或應(yīng)用程序。更重要的是，他們可以在難以改變結(jié)果之前做到這一點。最終，測試使品牌和設(shè)計師都能避免代價高昂的錯誤。

下一步

如果一張圖片勝過千言萬語，那么一幅動畫又有多少價值呢？

動畫作為講述品牌獨特故事以及與用戶建立積極互動的工具，其潛力是巨大的。將它整合到產(chǎn)品中有很多益處，但如果隨意使用，它也可能沒有多大幫助。

為了充分利用網(wǎng)站的動畫元素，您需要了解品牌以及目標(biāo)受眾。畢竟目的是講述一個故事，突出品牌的優(yōu)勢和品質(zhì)，同時確保為讀者提供積極和引人入勝的體驗。

原文作者：Robert Mayer

原文地址：https://www.uxbooth.com/articles/build-better-products-by-leveraging-feedback-effectively/

編譯作者：桃花果，杭州，設(shè)計師，微信ID：shiningineye-bq

編輯整理：三分設(shè)翻譯特工隊（微信ID：sanfen-design）

本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議