設計出色的動效

本文譯自：Good to great UI animation tips

——

這篇文章希望通過7個GIF圖例來證明動效設計並不複雜，只需在關鍵之處增加一點點變化，就能讓效果大大提升一個境界。

通過這些範例，你會發現狀態連續性、元素關聯性，以及用戶注意力控制的重要性。

在做動效設計中，我參考的設計規範有：Material Motion、IBM』s Animation Principles、The UX in Motion Manifesto。

我使用的工具是早期版本 InVision Studio ，你可以從 Dropbox 下載源文件。

滑動切換頁簽

• 優秀的動效會用漸變切換頁面元素
• 出色的動效會在切換時保持狀態的持續性

設計頁簽或多級菜單時，可以嘗試將界面元素的位置和其打開的方式關聯起來。這樣動效可以涉及的，除了可見性之外，還增加了位置。這樣一來，滑動手勢也可以有了。

將卡片元素關聯起來

• 優秀的動效會利用滑動打開新頁面
• 出色的動效會將不同狀態的相同元素關聯起來

在設計狀態切換的動效時，可以看看兩者之間是否有相同元素，如果有的話可以把它們關聯起來。在 InVision Studio 創建 Motion transition 時，兩個屏幕之間的重複元素會自動關聯起來，這個功能讓原型動效變得簡單多了。

如果想知道哪些動效可以使用，建議你去看《十二條動效體驗原則》（Z Yuhan：剛好我有翻譯過）。上圖我給的範例中，用到了遮罩、過渡、父子關係和緩動原則。

瀑布流效果

• 優秀的動效通過控制所有元素的位置和可見度的變化來展示載入過程
• 出色的動效會錯開不同元素和分組的出現時間

在統一的緩動和速度的前提下，通過延時設置來實現瀑布效果，這樣能夠保證一致性的視覺感受。不用為每一個小部件都設置延時，保證恰當的分組顆粒度能夠讓動效更加高效快速。Google 建議瀑布流效果的元素出現間隔不超過 20ms 。更多範例： choreography principle in Material Motion 。

元素間的作用力

• 優秀的動效控制元素本身的變化
• 出色的動效關注元素對周圍環境的影響

體現元素之間的作用力，即讓它們相互吸引或排斥。如果想了解更多，可以去 Material Design 的 Aware motion 。

讓菜單「生長」出來

• 優秀的動效讓元素從觸發的方向出現
• 出色的動效讓元素從母體「生長」出來

利用按鈕展示狀態

• 優秀的動效將提示放在按鈕附近
• 出色的動效使用按鈕本身展示狀態變化

嘗試利用按鈕展示狀態的變化，例如用按鈕文字展示提示；或用按鈕框來展示進程。無論哪種方式，目的都是充分利用用戶的注意力（Z Yuhan：了解更多可以去看《谷歌 Material Design 從這些方面打破了我思維局限》的「不是視線追蹤元素，而是元素追蹤視線」）。

嚴肅對待注意力這個東西

• 優秀的設計用顏色、尺寸和位置來突出重要元素
• 出色的設計用動效吸引用戶注意，從而避免打破既定框架

當用戶需要進行某些重要操作時，嘗試用動效吸引他們的注意力。根據重要性來判斷需要多強的動效（如尺寸、顏色和速度）。但是確保只用在重要操作上——因為用的越多效果越弱……同時用戶也會更加厭煩。

總結

我希望以上的這些範例能夠給你的動效設計提供決策幫助。在像是 InVision Studio 這類新型動效原型工具的幫助下，創意交互這一領域會很快火起來，千萬不要忘記了對動效的關注。

我們在做設計時，不要忘記用動效來解釋狀態變化、適當吸引用戶注意、闡釋元素關聯，以及為產品增加一點樂趣和個性。以上的這些設計原則足以將我們的動效從快速有效地優秀升級到出色。

讓我們愉快地進行動效創作吧！

——

原作者：喲嘿，小夥伴們，我是 Pablo Stanley ， Carbon Health 的設計師兼聯合創始人。我在創作一個幽默漫畫故事叫做 The Design Team ，同時也在 Twitter 發布一些設計相關的內容。你還可以去我的 YouTube 頻道 Sketch Together 看看，那兒有超多的設計教程。感謝你的閱讀（西班牙語）。

——

轉載請註明來源和譯者