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

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

产品 2016年11月30日

动效丨七何分析法帮你全面分析界面动效

@十圆QCee ：以前在团队内部做过一个关于动效的分享，当时，是从现实参照、功能性、品牌，等维度进行分析。这次为了更全面的了解界面动效，我参考了5W2H分析法。5W2H又称七何分析法，分别是：What、Why、Who、When、Where、How、How much。WHAT什么是界面动效？大家对其的理解大致是，用户界面上所有运动的效果，也可以视其为界面设计（UI desig

产品 2016年11月30日

App 动效原理和应用设计

前言时下对动效的追捧，疯狂至可以用一句话形容——“没有动效的APP，简直不是好的APP”。优秀的动效设计在提升产品体验、用户粘性方面的积极作用有目共睹，已然成为现下Web、APP产品交互设计和界面设计必不可少的元素。笔者想从常见基础动效、动效作用、动效的应用设计和动效评判四个方面简单谈谈对动效理解。Part 1 基础动效常见动效通常是由多个基础动效组合而成。下面就让我们来看

产品 2016年11月28日

App 动效原理和应用设计

前言时下对动效的追捧，疯狂至可以用一句话形容——“没有动效的APP，简直不是好的APP”。优秀的动效设计在提升产品体验、用户粘性方面的积极作用有目共睹，已然成为现下Web、APP产品交互设计和界面设计必不可少的元素。笔者想从常见基础动效、动效作用、动效的应用设计和动效评判四个方面简单谈谈对动效理解。Part 1 基础动效常见动效通常是由多个基础动效组合而成。下面就让我们来看

产品 2016年11月10日

如何利用动效提升用户体验

我们不再是设计静态的屏幕，用户将会从我们的设计中看到实际的内容。动画可以讲述故事。不是很长很复杂而是很简单的故事，而像是 “嘿，你现在要看看这个！” 或 “哇，你竞争成功了！”。然而，动效的目的不是娱乐用户，而是帮助他们理解发什么什么事，或者如何有效的使用你的软件。在Zurb的叙述中很清晰的表明了：我们不再是设计静态的屏幕，用户将会从我们的设计中看到实际的内容。图片来源：B

交互体验 2016年11月08日

App 动效原理和应用设计

前言时下对动效的追捧，疯狂至可以用一句话形容——“没有动效的APP，简直不是好的APP”。优秀的动效设计在提升产品体验、用户粘性方面的积极作用有目共睹，已然成为现下Web、APP产品交互设计和界面设计必不可少的元素。笔者想从 常见基础动效 、 动效作用 、 动效的应用设计 和 动效评判 四个方面简单谈谈对动效理解。Part 1 基础动效常见动效通常是由多个基础动效组合而成。

交互体验 2016年11月09日

一半海水，一半火焰。

在此之前你可能对于zustin很陌生，但是你看到了作品就会发出“噢！原来是他！做的动效厉害了！”的感叹，可能崛起的速度太快，粉丝增长的太快，他还来不及出现在大家面前就已经蹭蹭的出了好几个作品，各个首页。把有效的时间用在无限的创作当中，对于动效仿佛是永不枯竭的创意。头像样子是高冷的黑白色，私下的他是稚嫩而热情的。很谦逊，也很懵懂，很执着，也很专业。像一半海水，一半火焰。采编：

产品经理 2016年11月02日

【深度解析】从科幻电影到 UI 动效设计

作者：Kit Oliynyk （译者：Eloise@墨刀）UI 动效设计是一个值得讨论的话题，有人觉得 UI 动效设计中功能性最为重要，有人认为真实度是重点，还有人认为 UI 动效根本就没有必要。下面我们来谈谈动效的基本原则，为什么及什么时候需要用到 UI 动效，如何使用它来优化用户体验？从科幻电影到 UI 动效设计作为一名科幻电影爱好者，我发现科幻导演经常会遇到一个问题：

产品 2016年10月17日

细节控：移动应用上的动效 & 微交互

微交互尽管细小且不易察觉，但它却极其重要。那些让你怦然心动的产品和那些让你抓狂的产品之间的差别往往就在于微交互。想开发一个既好用又高大上的应用，你就要拿出决心和行动一遍遍地推翻你的设计直到找到正确的方向。就算你做到这一点，通常至少已经有5个应用也做了你所做的。为什么你的就更好？你的应用有什么脱颖而出之处？最近我一直在研究我最喜欢的应用里面的小细节来积累经验。这些小细节总能对

产品经理 2016年10月10日

一个动效设计的 5 次改进

OK，下面这张图就是我们今天的主角：目的很简单：点击「show details」按钮后，展示用户的详细信息窗口。设计思路也很清晰：点击 → 加载 → 出现。但是过程中存在问题：加载缓慢，且没有任何指示在加载遮罩的出现挡住了原本的 UI动效太慢动效多余那么，接下来就针对这些开始改进。首先，加了一朵菊花，告诉用户正在加载。如下图：加载本来就需要时间了，何苦再因为上浮窗口增加时间

产品经理 2016年10月08日