這篇文章希望通過7個GIF圖例來證明動效設(shè)計并不復(fù)雜，只需在關(guān)鍵之處增加一點點變化，就能讓效果大大提升一個境界。

通過這些范例，你會發(fā)現(xiàn)狀態(tài)連續(xù)性、元素關(guān)聯(lián)性，以及用戶注意力控制的重要性。

在做動效設(shè)計中，我參考的設(shè)計規(guī)范有：Material Motion、IBM’s Animation Principles、The UX in Motion Manifesto。

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

滑動切換頁簽

左圖內(nèi)容區(qū)域漸變切換；右圖內(nèi)容區(qū)域與頁簽下橫杠一起滑動

• 優(yōu)秀的動效會用漸變切換頁面元素
• 出色的動效會在切換時保持狀態(tài)的持續(xù)性

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

將卡片元素關(guān)聯(lián)起來

左圖新開的頁面從下滑出；右圖新開的頁面由上一級卡片原地展開來

• 優(yōu)秀的動效會利用滑動打開新頁面
• 出色的動效會將不同狀態(tài)的相同元素關(guān)聯(lián)起來

在設(shè)計狀態(tài)切換的動效時，可以看看兩者之間是否有相同元素，如果有的話可以把它們關(guān)聯(lián)起來。在 InVision Studio 創(chuàng)建 Motion transition 時，兩個屏幕之間的重復(fù)元素會自動關(guān)聯(lián)起來，這個功能讓原型動效變得簡單多了。

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

瀑布流效果

左圖的卡片通過滑動和漸變出現(xiàn)；右圖的基本動效是一樣的，但是每張卡片的延時時間不同

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

在統(tǒng)一的緩動和速度的前提下，通過延時設(shè)置來實現(xiàn)瀑布效果，這樣能夠保證一致性的視覺感受。不用為每一個小部件都設(shè)置延時，保證恰當(dāng)?shù)姆纸M顆粒度能夠讓動效更加高效快速。Google 建議瀑布流效果的元素出現(xiàn)間隔不超過 20ms 。更多范例： choreography principle in Material Motion 。

元素間的作用力

左圖的卡片在頁面頂層浮出；右圖的卡片撐大時將周圍元素推開

• 優(yōu)秀的動效控制元素本身的變化
• 出色的動效關(guān)注元素對周圍環(huán)境的影響

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

讓菜單“生長”出來

左圖的菜單從下至上浮出；右圖的菜單從按鈕上“生長”出來

• 優(yōu)秀的動效讓元素從觸發(fā)的方向出現(xiàn)
• 出色的動效讓元素從母體“生長”出來

利用按鈕展示狀態(tài)

左圖利用按鈕外的文本展示狀態(tài)；右圖利用按鈕框本身展示狀態(tài)

• 優(yōu)秀的動效將提示放在按鈕附近
• 出色的動效使用按鈕本身展示狀態(tài)變化

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

嚴肅對待注意力這個東西

左圖利用顏色和位置來讓元素脫穎而出；右圖利用微動畫來吸引用戶注意力

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

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

總結(jié)

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

我們在做設(shè)計時，不要忘記用動效來解釋狀態(tài)變化、適當(dāng)吸引用戶注意、闡釋元素關(guān)聯(lián)，以及為產(chǎn)品增加一點樂趣和個性。以上的這些設(shè)計原則足以將我們的動效從快速有效地優(yōu)秀升級到出色。

讓我們愉快地進行動效創(chuàng)作吧！

原文地址：Good to great UI animation tips

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

譯者：Z Yuhan，鵝廠?·?交互設(shè)計

譯文地址：https://zhuanlan.zhihu.com/p/35204204?group_id=964100644554166272

本文由 @Z Yuhan 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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