动效设计

从动效设计到代码 | 网易云音乐2018年度听歌报告的背后

从动效设计到代码，网易云音乐这版年度听歌报告的背后有怎样的故事呢？前言作为 2019 年第一个爆款刷屏 H5 项目，「网易云音乐 2018 年度听歌报告」除了走心的文案、精美的页面，也包含了不少有意思的动效。大家应该能想到，这些动效的设计是出自我们设计团队，但你可能没想到的是，实现这些动效的前端代码也有一大部分也是设计师「写」的哦。据不完全统计，可能有上万行之多（为什么会这
产品 2019年03月06日

谷歌动效设计师经验：做好动效设计并不难

动效可以让界面变得更加生动和易于使用，尽管拥有很大的潜力，但动效设计可能是在设计领域中最不被人熟练掌握的技能。所以，我们一起来看看谷歌动效设计师经验。之前有篇比较类似的文章，《译文丨做好动效你需要了解的细节》只是那篇文章跟偏重理论，而谷歌设计师写的这篇文章用到的案例会更加真实具体。本文也有很多实用的观点，相信希望大家读完会有不少收获！下面来看译文：动效可以让界面变得更加生动
产品设计 2018年10月25日

动效在交互方案中的 5 种作用

提起动效，很多设计师可能首先想到的是「酷炫」。一个应用有了动效，好像就会在设计上显得更「高级」。有一次，我在上课，讲到「完整的交互方案应该包含的内容」，其中把动效放在了最末尾的位置。有个同学提问：我们
产品经理 2024年07月20日

产品的力量：从理论到实践（十三）

作为一位产品经理，在产品设计的海洋中，我曾经航行于众多理论的岛屿之间，寻找着通向成功的航道。但我并非天赋异禀，甚至是一个设计审美有点低下的人类。深入认识自己后，我自己只坚信一个核心的理念：“避免重复发
产品经理 2024年09月02日

10分钟带你了解动效设计

现如，今动效设计在产品中的使用已经十分普遍。这也导致动效设计由早期的「魅力型因素」逐渐成为「必要型因素」，越来越多的公司和团队已经意识到动效在产品用户体验中的
产品设计 2023年07月27日

从注意力维度谈动效设计

近年来，随着ios和android系统对于动效设计的带动效应，多数产品对于动效设计也越来越重视，从app引导页到动作反馈，从官网介绍到hover效果，动效设计似乎已经成为一个成功产品的标配。但是动效也不是越绚丽越好，过于绚丽的动效对于我们的设计目标来说也许会适得其反，用户可能只关注到了动效本身，而没有精力或时间去关注动效要传达的信息，而如何把握这个度，本文会从以下几个方面来
交互体验 2014年11月10日

7个GIF图例，来证明动效设计并不复杂

这篇文章希望通过7个GIF图例来证明动效设计并不复杂，只需在关键之处增加一点点变化，就能让效果大大提升一个境界。通过这些范例，你会发现状态连续性、元素关联性，以及用户注意力控制的重要性。在做动效设计中，我参考的设计规范有：Material Motion、IBM’s Animation Principles、The UX in Motion Manifesto。我使用的工具是
产品 2018年04月03日

用户体验设计中绕不开的环节：动画和动效

本文尽可能系统地呈现动画和动效在视觉和交互上的常见功能和作用。enjoy~动画效果是用户体验设计中绕不开的环节，而在移动端交互当中，动效是作为转场的润滑剂，承上启下的重要环节而存在。无论是发送信息，打开设置，选中元素，导航到下一个页面，这些变化发生的时候，动效让这一切不那么突兀，自然地过渡，呈现状态变化，帮助用户更清晰的明白当前的状态，这是绝佳的方式。在今天的文章当中，我们
交互体验 2018年03月29日

12 条动效设计的原理

这是关于动效设计的12条原理，一起来看看吧~首先看下面表格： 缓动（Easing）、偏移和延迟（Offset & Delay）与时间相关。 父子关系（Parenting）用于阐述元素之间的关系。变形（Transformation）、数值变化（Value Change）、遮罩（Masking）、覆盖（Overlay）、生成（Cloning）可以加强元素自身的延续性。视差（Pa
产品 2018年04月25日
加载更多