首页 > 知识•资讯 > 网站动画的功能性与用户体验! > 正文

网站动画的功能性与用户体验!

2015/5/22 0:00:00 · 稿源:传诚信

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

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

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

方向照明结构。 在这一组中,我们发现在我们的导航中扮演角色动画,铸造网站的信息架构。 这种类型的动画背后的逻辑是保持用户的方向感觉,帮助用户理解的变化已经发生在页面的布局,改变引发了什么以及如何启动以后再次改变。
第一次,一个用户不能预测将要发生的交互。 开场动画发展隐藏面板的大小帮助用户保持面向,而不是觉得他们已经离开的页面或内容突然消失了。 他们仍然控制着正在发生的一切。 关闭动画帮助用户将减少面板操作按钮,所以,下次他们会记得再次打开面板。

例子视频

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

 

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

例子视频

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


 

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

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

视觉提示

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

例子视频

视频来源: 迈克尔Martinho

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

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

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

例子视频

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


 

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

视觉反馈

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

例子视频

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


 

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


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


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


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


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


 

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

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

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

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

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

 

  • 相关推荐
  • 大家在看
客户服务
咨询热线

010-62199213

24小时咨询热线

139-1050-5354