给设计师的网页动画设计基础指南

文末相关链接中，会附上关于这12原则的相关文献。网页动画的实现方式很多，最常见的是使用Gif图，CSS，SVG，WebGL 以及视频。但是和动漫不同，网页中的动画可以是任何元素，小到下划线，大到背景和整个页面，它可以随着页面加载而出现，也可能是鼠标移动到某个位置上之后 被触发。和其他的设计手法相似，动画可以是非常微妙、触动人心的，也可以是开门见山、清晰直观的。所以，最重要的

用户研究 2016年04月10日

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

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

产品 2018年04月12日

借助动效取悦用户的 7 种方法

沿着这7个思路，你可以正确地使用动效取悦用户。当我们在探讨产品设计细节的时候，会频繁地提及“愉悦”这个词。必须承认，愉悦的体验，是优秀产品中所潜藏的魔法。在设计时候，如何构建出愉悦的体验，也是需要努力实现的核心要点。目前，在网站和APP这两类产品当中，设计师主要是通过动效和微交互来强化体验，其中动效所起到的作用至关重要。为何愉悦的动效很重要现如今，数字化的服务和产品已经深入

产品设计 2017年04月14日

一篇搞定实用动效技能

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

产品 2018年05月04日

UI 动效为什么越来越受到青睐的四大原因

如今的APP设计当中，其中的UI动效也越来越酷炫，为什么UI动效越来越受到青睐呢？肯定有APP UI动效的优势和魅力吧！不用着急，下面听学堂君慢慢给各位客官一一道来。下面25学堂的小编为你揭开谜底，APP UI动效为什么那么受欢迎的原因。看下图的圣诞老人都会开电瓶车了~不受欢迎都没道理啊不过在此，学堂君需要先说明一点的是，动效之所以越来越受青睐不是最近才流行的，而完完全全就

产品 2017年01月18日

四个动效小趋势，让网页设计更加圆融

并不是每个人都会注意到动效，但是动效的加入让体验更加优秀了却是不争的事实。这也是为什么它会成为时下流行的趋势。随着交互设计重要性的提升，动效也越来越被设计师所重视。它不仅仅是取悦用户的工具，而且被视作为改善用户体验的重要手段。从为界面营造氛围的微小动效，到用来沟通用户的视觉线索，动效解决方案越来越全面。尽管我们在实际运用的过程中，经常需要测试和试验效果，但是依然有一些经过验

产品经理 2017年11月22日

设计师们，停止不必要的 UI 动效设计吧！

这篇短文将会探讨UI设计中动画的过度使用，并将其与早期的视觉设计进行对比，提出一些对于有效的GUI动效设计的建议。我们将在下文中，简单探讨如何改善下面的这个交互。这个反面案例并非假设，而是来自近期的真实客户案例。UI动效设计的反面案例（线上Demo）自从 70、80 年代首个光栅图像在CRT屏幕出现以来，人们对于（数字）视觉设计的态度一直在不断进化。与其他艺术领域不同，在数

产品 2016年11月30日

基础知识：聊聊交互设计三要素之细节设计

我们就从布局开始聊一聊交互细节设计。@黄红艺 Designer ：交互设计三部曲终于写到最后了，今天聊聊交互设计的最后一个要素 —— 交互细节设计。本要素是在前两个要素指导下的设计实践，也是交互设计可视化与形象化的关键。相对于前两个要素的完整性和系统性，第三个要素-交互细节设计，就显得琐碎和零散。根据交互设计由浅入深的渐进，交互细节可以分为布局、控件、适配、音效与动效、流（

产品 2016年12月16日

在现代网页设计中，动效有哪些常见的用法？

令人愉悦的动效几乎已经成为如今 网页设计的标准配置了，融入动效的交互细节让现代网页同以往的设计在根本上区别开来。动效不仅可以表现状态，引导用户的关注点，帮助用于预测交互的结果，甚至影响用户的行为。在逐步的探索和发展过程中，动效在网页和APP中的运用方法与技巧已经逐步成熟，形成了一套相对系统的模式。今天的文章我们通过一系列实例，来展示一下动效是如何改善整个用户体验的。加载动效

产品 2017年02月12日

【DDC 译文】UX 设计中的功能性动效

图片来源：ZURB University功能性的动效是指一种微妙且具有清晰合理目的的动画效果。它能减少认知负荷，防止对(界面)变化的忽视、还能帮助用户在界面的空间关系之中建立惯性回忆。更重要的是，动效给用户界面赋予了生命。通过对界面元素进行组合、拆分、改变他们的形状和大小，动效可以让界面更加生动。你应当使用功能性动效流畅地在上下文间引导用户，解释屏幕上元素排列的变化，以及加

产品 2016年12月28日