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

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

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

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

滑動(dòng)切換頁簽

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

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

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

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

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

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

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

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

瀑布流效果

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

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

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

元素間的作用力

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

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

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

讓菜單“生長”出來

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

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

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

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

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

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

嚴(yán)肅對(duì)待注意力這個(gè)東西

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

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

當(dāng)用戶需要進(jìn)行某些重要操作時(shí)，嘗試用動(dòng)效吸引他們的注意力。根據(jù)重要性來判斷需要多強(qiáng)的動(dòng)效（如尺寸、顏色和速度）。但是確保只用在重要操作上——因?yàn)橛玫脑蕉嘈Ч饺酢瑫r(shí)用戶也會(huì)更加厭煩。

總結(jié)

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

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

讓我們愉快地進(jìn)行動(dòng)效創(chuàng)作吧！

原文地址：Good to great UI animation tips

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

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

譯文地址：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é)議