一个好的用户体验设计师可以很容易地解释每一个决策背后的逻辑设计理念。 这包括信息架构、页面内容的层次结构,流动和假设。

迟早,动画将被引入,以线框的概念,然后设计决策或解释他们变得更加困难。 原因,如“这将是太酷了! ”或“新潮”或“令人兴奋”的完全设计开始失去力量的领域。 动画应该得到更好的在我们的设计考虑。 我们应该合理定义动画和解释他们的目的——同样的方式,我们将解释所有其他元素的设计。

功能性动画是什么?

功能性动画是微妙的动画,我们嵌入在一个用户界面设计作为我们的过程的一部分。

动画与动画由迪斯尼工作室或电脑游戏,功能性动画有一个明确的、逻辑的目的。 他们的目的是为设计服务的概念通过支持解决方案我们正在试图传达。 功能性动画是我们用户体验设计阿森纳的另一个工具。

在完美的世界里,我们应该能够验证功能性动画对一组定义良好的逻辑的目的。 如果某个动画在我们设计一个逻辑的目的,那么它就是一个有效的功能性动画和它的存在在我们的设计可能是合理的。 但如果它没有目的,那么这可能是冗余的,需要重新考虑。

在过去一年左右的时间,在不同的项目上工作时,我收集了家族的九个逻辑目的,今天帮我验证功能性动画。 我意识到,通过检查一个定义良好的动画,我可以很容易地适应它在这个家庭在一个或多个组。

它也以另一种方式产生:当一个动画不适合功能的目的,通常也感到尴尬或讨厌。 以下是家庭组到目前为止我已经收集了。 我希望你找到有用的验证自己的设计动画。

取向

方向照明结构。 在这一组中,我们发现在我们的导航中扮演角色动画,铸造网站的信息架构。 这种类型的动画背后的逻辑是保持用户的方向感觉,帮助用户理解的变化已经发生在页面的布局,改变引发了什么以及如何启动以后再次改变。

一个典型的例子是一个按钮,切换隐藏内容。 当你点击它,就会出现一个隐藏的面板。 当你关闭面板,它收缩回操作按钮。

第一次,一个用户不能预测将要发生的交互。 开场动画发展隐藏面板的大小帮助用户保持面向,而不是觉得他们已经离开的页面或内容突然消失了。 他们仍然控制着正在发生的一切。 关闭动画帮助用户将减少面板操作按钮,所以,下次他们会记得再次打开面板。

逻辑的目的: 避免一个令人惊讶的转变,东方用户。

例子视频

同一位置,新的行动

一个众所周知的可用性规则是一致的在这两个网站的设计和内容。 一个一致的网站是可以预测的,因此可以习得的。 这条规则适用于操作按钮,等等。

在某些情况下,我们不得不设计一个操作按钮的功能变化在一定条件下。 我们通常在设计整体空间是有限的。 因此,用户已经学会操作按钮的功能可能需要学习新功能。

“保存”和“编辑”按钮可切换的按钮可能是最常见的例子。 但这是一个简单的例子,因为行为是相互矛盾的,它们具有相同的上下文。 在其他情况下,当两个动作没有明显关系,我们面临一个可用性的挑战。 功能性动画可以帮助。

逻辑的目的: 强调操作按钮的功能变化。

例子视频

放大

第三个家庭与取向组我们之前看到一些相似之处。 在这些动画,用户选择列表中的一个条目来放大其详细视图(赶上列表视图)和能够回到完整的列表视图。

我们经常看到这种图像画廊,卡片和项目选择器。 用户选择一个条目,并将立即看到详细的屏幕,与选择。

这里的挑战是确保用户感觉他们仍在控制和保持在给定的上下文中。 功能性动画通常是一个必须在这种情况下。

在研究了大量的功能主义动画在这个家族,我注意到一个共同的模式,实现准确时,增强动画的效果:

初始状态是原始的产品清单。

每个项目指定了一个独特的视觉线索,比如主导颜色,一个符号,一个大胆的标题或缩略图图像。

当用户选择,创建一个新页面,选中的视觉线索是著名的搬迁,主导地位。 例如,整个页面可能与一个项目独特的彩色颜色;项的符号将扩大和被定位在页面的标题;项目的名称会大,出现在页面的标题。

明显的操作按钮将出现在新页面,比如“取消”,“,”“返回”或“x”。

逻辑的目的: 把一个缩略图和它的详细视图。

例子视频

视觉提示

视觉提示帮助用户更好地理解如何与产品的交互界面。 尤其需要设计,包含一个非传统的对象或一个独特的导航方法。

这种功能性动画很容易检测到当我们打开一个页面,一个快速的一次性动画突然触发,演示了如何在设计操作某些功能。

逻辑的目的: 提示展览非常规功能或一个隐藏的行动。

例子视频

视频来源: 迈克尔Martinho

突出

这个家庭协助用户组在这些不幸的情况下,当有需要超过一个嘈杂的布局。

设计师通常尽量避免嘈杂的布局,与各种加载屏幕文本和视觉内容,互相争夺用户的注意力。

减少噪音的一个接口的一个方法是通过消除杂乱。 然而,有时这个任务不是那么简单。 考虑一个新闻网站的所有者想要删除的文本从主页新闻或图片。

运动,就其本质而言,在一个用户界面的最高水平。 文本段落和静态图像都无法与运动。 我们可以利用这一功能动画组。 记住,虽然界面增加噪声通过添加一个对象与更高层次的突出是一个斜坡。

在下面的动画示例中,我们看到一个项目添加到购物车不够明显由于拥挤的背景。 因此,动画是必要的。

逻辑的目的: 抓住用户的注意力,超越一个嘈杂的布局。

例子视频

模拟

有时在设计分析和用户访谈,我们发现用户有需要,我们可以地址只有一个定制的模拟。

对于这些特殊的情况,我们将创建一个定制的功能动画。 在下面的示例中,足球的方式分析了数字,数字、表格和图表无法竞争。 在第二个示例中,用户可以监控温度在地图上根据时间和地理——一个特定的用例,几乎任何其他方式加以解决。

逻辑的目的: 模拟的话题,否则难以传达。

例子视频

视觉反馈

用户界面设计的视觉反馈是非常重要的。 在现实生活中,按钮,控制和对象响应我们的互动,这是人们期望的事情是如何工作的。

但请记住,功能性动画这个家庭组需要非常微妙的,应该设计感动地。 按钮反馈是广泛使用在每一个接口,所以使用动画功能,它不是真的需要将导致弊大于利。 触摸设备上,功能性动画可以作为替代最有利的滚动效果。

逻辑的目的: 确认用户的行动。

例子视频

系统状态

这一组是关于控制。 用户,控制意味着了解和理解当前上下文的系统在任何给定的时间。

功能性动画提供了实时监控的系统状态,让用户快速了解一个动作开始时,剩下的时间,什么时候结束。 也许第一个功能性动画,这个角色在HTML网站是旋转式GIF,仍被用于许多接口,指示一个行动进展。

有效的功能性动画这个家庭组通常遵循这种模式:

显示明确的反馈表明,这个过程已经启动。

目前正在进行的反馈过程是在进步。

估计的完成过程(步骤,顺便说一下,纺纱失败)。

显示清晰的反馈,过程终止。

著名的动画在这组是“下拉刷新”,发起一个移动设备上的内容更新的过程。 检查这些动画的实现在各种应用程序中,你很快就会注意到动画,并不完全符合上述四个步骤制定感觉错了。 例如,不确定性因缺乏明确的反馈,过程终止可以提示用户再次发起刷新操作。

逻辑的目的: 传授一种控制在一个线性过程。

例子视频

市场营销工具

这一组是关于营销,它有一些有趣的动画! 而在我们家前面的八组的动画很逻辑,这是充满感情的!

假设我们需要显示产品的行为,强调一个特定的功能,促进一个独特的能力,甚至包一个品牌的价值和风格产品。

在这些场景中,动画可以很好地服务于公司的营销策略。 显然可能不是以用户为中心的方法,但它确实有一个功能的目的。

逻辑的目的: 支持公司的品牌价值或突出产品的优势。

例子视频

总结

提供快乐或高兴时在我们的网站和应用,动画贡献很多。但他们必须永远记住 功能第一。

Aarron沃尔特的MailChimp在他的书中写了用户需求的层次 设计的情感 。 这是类似于马斯洛的需求层次理论,但而不是描述我们的个人需求,Aarron描述我们作为用户的需求。 沃尔特的层级职位的功能需要金字塔的基础,而对快乐的需求之上,适用只有基本已经完成。 在本文中,我只处理这个功能基础,没有快乐和高兴的进入方面,应该有自己的一篇文章。

到目前为止,我已经收集了9个规则的家庭。 这九规则映射到每一个动画到目前为止我遇到过。 他们帮我评估的动画,我看到接口,和他们是一个强大的指导原则在决定如何添加动画一个线框图设计。 我希望你在你的设计过程中以同样的方式他们为我服务。

然而,这项研究正在进行中。 所以,下次你遇到一个功能性动画,继续测试它对其中一个九组。 如果它不符合其中任何一个整齐且动画有一个明确的目的,与我们分享,也许你已经找到第十个家庭规则。