动效设计

APP改版：怎么做动效设计？

一、动效的重要性用户在使用产品时，都希望有一个良好的使用体验。但生硬的变化、偶尔的卡顿、固定死板的效果，这些都不是我们希望看到的。这会大大增加用户的负面情绪，产
产品设计 2023年07月22日

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

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

从注意力维度谈动效设计

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

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

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

7点设计技巧，让UI动效更上一层楼

在设计动效的时候，注意状态变化的指示，元素之间关系的强化，适当地增加一些乐趣。遵循这样的原则，总能让动效更上一层楼。动效现如今在 APP 和网页中几乎已经成为了基本的组成部分，经过仔细打磨的 UI动效对于整个界面的提升是显著的。动效呈现出状态切换的过程，展现了元素之间的逻辑关系，并且吸引用户的注意力，引导他们执行有效的交互。在设计动效的过程中， Material Motio
产品 2018年05月14日

一篇搞定实用动效技能

对如今的UX设计师来说，会点动效什么的基本已是常规操作了。作为UX设计师，动效可以辅助的产出可以涵盖界面交互动效、项目宣传MG动画、产品吉祥物表情包、年终汇报PPT等等。这些技能点虽然广，但是只需要掌握基础实用的几个点就足以辅助我们更好的包装输出。在之前的文章项目1-2的设计总结提升里也简单介绍过，交互动效存在的意义和基本类型介绍，这里我们来全面详聊一下~一、关于动效分类首
产品 2018年05月04日

12 条动效设计的原理

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

从7个案例分析：如何设计出色的动效

设计动效并不是一件复杂的事情，你只要在关键饿地方稍作调整，就可以提高动效的效果。本文从7个案例分析，帮助大家设计出色的动效。这篇文章希望通过7个GIF范例，给出一些做动效的实用建议。其实动效设计并不复杂，只需在关键之处稍微的调整，就能大大的提高动效效果。通过这些例子，能够发现状态之间的连续性，不同状态的相同元素之间的关联性，并且将用户的注意力引向他们应该注意和采取行动的事物
产品 2018年04月12日

最全的动效落地方法（下篇）：从前端的角度来讲，有哪些便捷的方法实现这些动效？

上篇内容回顾看这里：《 最全的动效落地方法（上篇）：在界面设计中，好动效是什么样的？ 》接下来进入下篇、主题是：从 Web 前端的角度来讲，有哪些便捷的方法实现这些动效？在目前行业内，动效设计的整个体系还未成熟；从最终呈现效果来讲，动效可能会影响页面性能、加载速度等。所以提到动效、很多同学可能会产生抵触心理。遇到问题我们首先拆解困难、在我看来在动效落地过程中面临的困难可以分
产品 2018年04月07日
加载更多