這是英文譯文的第6篇文章。關於動效在UI設計中的作用，為產品增添趣味性，更趣味性地表達產品功能，提升用戶體驗。在日常工作中，我也在努力思考和使用動效為用戶打造更好的產品。本文純個人學習交流使用。

以下是譯文：

動畫效果通常(typically)被設計師認為是提高用戶體驗的東西，但總的來說，這並不能增加多少價值。結果是在設計中加入動效經常發生在產品設計流程的最後，作為最後的口紅。

(口紅：在這裡被理解為最後的點睛之筆)

但是如果我們重新思考我們使用動畫的方式，並且在我們的設計中作為一個基礎將會如何呢？在這篇文章中，我將敘述在何時以及如何運用動效創造情感。

注釋：為了這篇文章的目的，我將不會使用「愉悅(delight)」一詞來描述動效，原因是因為「愉悅」是一個錯誤的詞語，在情感語境中，同樣的動畫效果能讓一組用戶高興，也能讓另一組用戶困惑。

使用動效講故事

每一次體驗都是一段故事(narrative)。無論是你為什麼類型的應用程序或網站工作，你想為你的用戶和訪客傳遞一些特定的信息。設計師的目標是用更加高效有用的方式傳遞這個故事。

每一個設計師都是一個講述者。

你能遵循很多不同的方式來講你的故事，但是有些方式比其他的更有用，如我們都熟悉的一句諺語說：「一張圖片勝過千言萬語。」 通過在畫布中使用動效可能增強(reinforce)圖片的效果。動效不僅僅幫助設計師更加高效傳遞信息，而且也能讓整個故事更有吸引力。當設計師運用這一原則進行設計，他們能創造真正令人難忘的(memorable)經歷。

使用動效描述複雜的概念

當設計師需要傳遞一個相當複雜的消息給他們的用戶和訪客時，動效是非常棒的。使用動效的想法非常簡單(straightforward)：

展示，而不是講述

讓我們看看一個特別的(particular)的案例，如何體現「展示，而不是講述」的概念—一個強調回收利用的重要性的網站，他沒有直接「告訴」訪客給垃圾正確分類的重要性，而是設計師使用了動效來展示人們應該如何處理垃圾。

動畫敘事

故事貫穿整個用戶體驗，是一個線性發展(progression)的事件，設計師創造一個數字敘事最簡單的方式就是使用視差(parallax)效果。UI設計中的視差效果創造了一個當用戶向下或跨頁滾動時的三維滾動效果。

視差效果有一個非常清晰實用的目的，它支持視覺的連續性(continuity)—幫助訪客明白他們體驗中的位置。

視頻封面

00:04視察效果

重新思考基本的移動交互

在動效的幫助下，可以將基本的(fundamental)日常交互保持新鮮和出人意料(unexpected)。動效在移動應用程序上尤其有用— 它讓用戶忘記他們僅僅是在輕敲一塊玻璃，而是讓他們感覺他們在屏幕上和真實的元素進行交互。

令人印象深刻的首次登錄體驗

動效能幫助用戶看到他們操作的效果，在第一次體驗中，這個屬性尤其的好—當用戶他們熟悉應用程序時，創造一個好的第一印象是至關重要的。

看看下面的例子，動效如何指引用戶到下一個視圖— 從登錄頁轉換到詳情頁。

Readme.io應用程序是另一個好的例子，動效是如何優化第一次登錄。這個應用程序在登錄時使用一隻貓頭鷹吉祥物(mascot)，當用戶點擊密碼輸入框時，貓頭鷹遮住自己的眼睛，當你第一次看到這個動效時，你會覺得非常有趣。

平滑的導航過渡

動效習慣於引導用戶去關注他們關心的事，下面動效的例子是幫助人們在界面中定位(orient)自己，以及在不同對象之間的建立(establish)視覺關係。

視頻封面

00:03導航

有趣的滾動效果

動效能考慮到對象的物理屬性。下面的例子通過考慮到液體的行為，增強了滾動效果的物理感知。

豐富數據的交互

當設計師使用有趣的動效時，即使是周所周知的概念，比如數據可視化，也能變得新鮮和出人意料。

反饋變得更加自然

動效能很好的提供反饋—讓用戶知道正在發生或即將發生的事情。通過在設計中注入(injecting)微妙的(subtle)動效，你能讓用戶感受到他們在和一些有個性的(personality)東西進行交互。

創造動效的工具

這裡有一個工具列表，你可以用來創造在這篇文章提到的任何動效。

uxpro.cc/toolbox/visual

總結

當人們與數字產品進行交互時，他們更加欣賞有人性化的產品，比純理性產品更有價值。設計師需要告別靜態的(static)用戶界面，並創造更加活躍的界面。

思考

合理有趣的動效能更好地為用戶傳遞複雜的產品價值，在視覺和交互上讓界面更有吸引力。動效還有指引用戶操作的用戶，好的動效是符合用戶預期的。最後，關於Readme.io的貓頭鷹動畫，對我印象很大，在我剛學習動效設計時，就用AE模仿了這個效果，更加關鍵是是他讓我更好的理解了一個有趣的動效對產品的價值，對用戶的價值。

原文地址:uxplanet.org/when-motio 原作者：Nick Babich

（題圖來自Unsplash)

:.

推薦閱讀：

相关文章