中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

這篇文章希望通過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 這類新型動效原型工具的幫助下，創意交互這一領域會很快火起來，千萬不要忘記了對動效的關注。

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

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

原文地址：Good to great UI animation tips

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

譯者：Z Yuhan，鵝廠?·?交互設計

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

本文由 @Z Yuhan 授權發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協議