ui动效设计的三个重要特性

来源：深圳UI设计培训学校时间：2020/12/26 14:24:39

　　作为一枚不会敲代码的设计师，我们不太可能让自己的设计真正“活”起来。如果没有动效设计，那总是需要很长时间去给程序员解释点击这个按钮后会发生什么。所以设计师们需要通过动画版本高保真原型(包括动效设计)去解释交互效果。

　　目前的UI动效包括系统动效都在尝试从各种不同角度解释动效设计的作用。而很多开发团队根本就不重视这些细枝末节的东西，他们认为只要掌握好基本用户需求，就可以把产品继续做下去。

　　在(CHINA)目前的各类APP中，拥有统一的视觉效果的应用比例少之又少，更别说流畅的动效效果了。好多设计师或者产品经理根本就不知道哪些地方该动，哪些地方不该动。那么，动效设计在用户体验的提升中到底有没有用呢? 我们先暂且相信它有用。我们在下面讨论的是 动效的基础理论知识，为什么要应用动效，以及在那些时候动效，还有动效对用户体验提升的作用。

　　关于动效的基本属性我喜欢科幻电影，而科幻电影的一个问题是——故事发生我根本不了解的宇宙时空中。电影里有N多件事(包括故事背景、时代背景等等)，电影在放映时我只有两个小时的时间去了解。

　　那的科幻电影导演是怎么解决这个问题的呢?他们专注于主角而不是遥远的宇宙空间。他们在没有让我们落后的情况下，将一个虚构的世界历史放进了主角的故事主线中。

　　他们通过遵循观众熟悉的真实世界物理定律和一些真实的物理细节来使虚构的宇宙像真的一样。

　　他们通过故事的感染力和真实感让故事显得非常美好又值得回忆。

　　与此相似，在UI设计中，我们想在很小的屏幕上展现一个交互的“故事”。我们的“主角”是设计的界面元素，我们的“虚构宇宙”就是UI架构。而且我们没有两小时，在用户失去兴趣和产生疑惑之前，我们多只有一秒的时间。

　　我们可以确定动效的三个重要特性(侧重类型)：功能性(Functional)，物理性(Material)，趣味性(Delightful)。动效可以帮我们提升UX(用户体验)，使UI界面显得更加一致和真实，并给整个产品带来创新的感觉。

　　功能性

　　优化用户对界面的感知，使其感到更轻快更全面。

　　引起用户的注意。

　　提供(用户操作后的)视觉(功能)反馈，并为下一步的跳转做准备。

　　物理性

　　在一致的动画原则和物理的(符合物理定律的)UI模型基础上构建动画。

　　定义屏幕和UI元件之间的空间相对关系，他们的相对高度，权重以及速度。

　　趣味性

　　在上面两个部分都满足的情况下，加入一些有趣的动画。

　　使它感觉独特，能在诸多动画中能让人眼亮。

　　娱乐用户，并让他们一想到动画就能想到该产品或者反之。

　　下面展开讲述每个类型。

　　功能性动画

　　Functional animation

　　我见过的个动画就是MS-DOS命令提示符中不断闪烁的光标。这个动画很友好并温馨——像是在说：“来吧，写点东西。” 同时它还是功能性的——如果停止闪烁，那这就意味死机并“可能起火”。我花了很久才知道这小动画的意思——动效对交互引导和了解系统状态都很重要。

　　UI界面的切换(特别是网页)通常都是直接硬切，使用户很难进行跟进。在认知科学的领域里这种情况叫做变化盲视——视觉刺激的突兀变化会阻止用户注意到新的信息。

　　功能动效能够补充理解能力的差距。

　　功能性动效可以让用户跟着你的应用程序的流程走的同时不会落后(即从哪来到哪去)。帮助人们在界面中定位并建立视觉关系。我们的大脑和眼睛会注意到移动的目标——这是一个反射。动效可以帮助眼睛注意到新的目标出现或者一个目标的隐藏。

　　物理动效能使UI转场更加可预测并使浏览有了连续性。

　　作为一个设计师。你有无数种办法在应用程序或者网站里建立一个虚拟的世界。每个UI“世界”拥有自己独特的地图。你的菜单可能隐藏在浮动的按钮里或者在画板下面，你也可以放在抽屉菜单里或做成。但是无论选择哪种方式，你的动效一定要有逻辑性和真实性。

　　用户次到我们所创造的UI虚构世界里面——需要开拓并从头开始学习。他们需要了解界面从哪到哪，这样他们再次找到就很容易，但这个转场不适合硬切换，因为真实世界中是不存在硬切换的。

　　UI动画的另一个问题就是坏品味。品味是主观的，但总体说来它和美学相关。而人类的美学是基于我们周围的世界。如果你以力学，动力学和光学原理为基本线，那么创建有品位的动画就是一件很简单的事情。

　　趣味动效Delightful animation当然，动效重要的还是上面两种。但是人类不仅有理性，还有感性。我们喜欢好玩的东西。我们希望网站和应用程序能够和用户建立联系，而趣味动效可以让用户体验变得真正愉快和难忘。

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/404/news/301479/违者必究！ 以上就是深圳UI设计培训学校 小编为您整理 ui动效设计的三个重要特性的全部内容。