发布时间：2020-2-18 分类： 行业资讯
本文主要介绍界面动力学的价值，以及界面动力学的一些优秀实例。享受〜
用户体验设计的发展正变得越来越完善。卓越的动态效果是完善用户体验不可或缺的一部分。优秀的界面动态设计可以使产品的用户体验锦上添花; …
你会说我理解所有这些原因，但这样做真的很麻烦。直接切入常见问题：
通常，工程师希望设计人员在通信接口动态过程中使用更具体的表达方式。这里的术语“具体”是指：接近代码。但是，在设计工具和Web端实现逻辑时，同一组效果可能完全不同。
没有精确的参数说明。设计师很难清楚地解释什么样的动态与发展有关。而且只是简单的口头描述，发展也很痛苦，导致发展效率低下。所以有这样一个问题：在APP的开发过程中，作为设计师，如何说服程序实现动态效果？
你在这里看到它可能会很疯狂。好消息是随着越来越多优秀的开源库的诞生，动态效果的实现变得越来越简单。即使设计师不必说服工程师，他也可以直接实现动画。例如，San：https://baidu.github.io/san/
在这个例子中卡的设计和开发是我做的。
虽然这只是一个非常简单的细节，但它在一定程度上让人惊喜并提高了代购源码网站的质量。
本教程将分为两部分来详细说明：
第一部分：界面设计中哪种动态效果好？
下一篇：从前端的角度来看，实现这些效果的方便方法是什么？
首先，什么样的动态效果是好的效果
Movure不是设计师为他们的魅力而设计的东西。它具有很多实际意义。为了更有效（自愿）实现动态效果（努力工作）。我们首先需要知道什么是动力是好的。
简单地说，运动的效果有以下三个方面：
1.满足用户的心理期望
我们生活在一个物质世界中，一切的运动都符合物质世界的客观规律。因此，人们对事物的观察和理解是基于对物理定律的理解。虚拟界面上的元素是现实世界中不存在的东西，会让用户感到奇怪。
通过合理的动力学，让虚拟界面模拟物理世界的规律，如惯性，视差等，使这个虚拟世界与物理世界相交。用户将他们对物理世界的知识映射到他们对产品的感知。
以下是两个具体映射示例：
（1）质量
物体具有质量，质量带给我们最常见的物理现象：惯性。在这个例子中，该块通过界面上的加速，减速，反弹，过冲等模拟所谓的重量感，使这个简单的界面元素具有真实感。
（2）空间
我们生活的世界是三维的。然而，由于显示设备的影响，我们当前与之接触的大多数人机界面仍然是二维的。如何通过二维平面模拟三维世界？
在这个例子中，近方形移动得更快，远方移动得更远。通过这种视差的效果，整个屏幕具有深度感，不再是简单的二维平面。我们可以很容易地感受到块之间的堆叠顺序。以同样的方式，类似于简单的动态效果，可以容易地表达元素的级别。
总结：合理的动态效果可以满足用户的心理预期。它们越符合人们对物理世界的感知设计，就越容易帮助用户预测或理解产品的交互逻辑。
2.引导用户注意
如果按界面的明显程度对界面上的所有元素进行排序，很明显我们会得到这样的订单：动态>颜色>亮度。
因此，通过合理的动力，可以以低成本吸引人们的注意力，并让他们关注设计师希望他们注意的事项。
网易新闻的刷新动画就是一个很好的例子：
在此示例中，左上角有一个非常简单的白线图标，不会干扰整个页面的主要功能，颜色和视觉。但是通过一个小动画，图标的视觉水平得到了提升。很容易注意到它，这是一个非常好的提示。
3.情绪设计
情感词汇设计的目标是在用户接触和使用产品的过程中激发用户的积极情绪，如快乐，信任和满足感;避免消极情绪，如失望，沮丧和痛苦。积极情绪使用户更愿意使用该产品，并且使用过程中的一些小问题更具包容性。
卓越的界面动力学可以提高产品的质量。以下是情绪设计中动力学设计的一个很好的例子：
在推特喜欢它之后，心脏会亮起，并且会产生小烟花效果。虽然绝对没有必要添加这种效果，但这种丰富的细节将为用户提供与产品的积极情感联系，这种关联最终将赢得用户对产品的认可。
在Facebook喜欢它之后，你可以表达你的态度，比如眼泪，愤怒或赞美。虽然从功能上讲，这些表达是静态的。然而，动画中的丰富表达细节进一步指导用户表达他们的愿望。它不仅给人们一个惊喜，而且还显着改善了声明的使用。
动态效果的价值在这里。接下来，基于以上三点，我将谈谈如何构建合理有效的动态系统。
二，优秀的界面动力学系统
卓越的界面动力学系统符合以下四个原则：
动态效应意味着二维界面所隐含的三维层次关系及其隐含的操作逻辑。
引导用户注意界面的关键元素。
通过动态设计，情感设计变得更加生动。
动态效果的视觉效果是统一的，数量是可控的，并且不被滥用。
接下来，使用iOS系统动画来举例。众所周知，iOS的运动系统已经多次迭代并且做得非常好，以上四点反映在以下示例中。
（1）分层建议
切换界面时，所有打开的APP界面刚刚覆盖在主界面上，主界面模糊，内容区域缩小，共同创造了原始界面向后移动的效果。表达主界面和APP界面之间的层次关系非常直观。
在键盘机的时代，当通过菜单进入新页面时，通常的做法是刷新整个页面，但这个操作很长，打开太多菜单使人们容易“迷失”混乱。在此动画中，界面的左右滑动用于表示不同界面之间的层次关系。即使您没有看到主菜单，也知道您来自哪里。
（2）操作提示
在此示例中，长按图标进入编辑模式，所有图标将开始抖动。虽然整个页面没有任何文字提示“现在可以拖动图标”，但这种抖动的抖动是设计师意图的非常直观的表达。
如果密码输入不正确，密码输入字段将显示摇头的效果。完全可以想象，使用带有错误提示的弹出窗口不仅会中断用户的操作过程，还会引起人们的不满，并且很容易受挫。通过动态效果，设计师以更加友好和简单的方式实现了提示的目的。
（3）乐趣
这是开关的过度状态，我们可以看到月亮将有利润和损失，锁定状态被锁定和打开。动画的这些有趣细节给用户带来了惊喜，并提高了界面的质量。
（4）克制
鉴于这么多积极的例子，这里有两个反例。这两个数字是我在运球时发现的数字。但事实上，不建议在产品中使用此类效果。
流动性不能被滥用，数量必须得到控制。在这个页面上，一切都在移动。人们很难掌握视觉重心。当菜单栏关闭时，每个菜单都会产生抖动效果。我们不知道为什么这个菜单会如此颤抖。似乎作者只是为了这个伎俩而这样做了。事实上，它没有传达任何内容，也无形地增加了用户的操作负担。
良好运动应控制在0.3~0.5秒。在这种情况下，菜单出现几乎需要一秒钟。经常打开菜单很容易导致疲劳，这可以说是多余的补充。
总结
我在这里谈到了它，在本文中我们理解了界面动态的价值：
满足用户的心理期望
引导用户注意
情感设计
还可以获得界面动态的一个很好的例子：
动态效应意味着二维界面所隐含的三维层次关系及其隐含的操作逻辑。
引导用户注意界面的关键元素。
通过动态设计，情感设计变得更加生动。
动态效果的视觉效果是统一的，数量是可控的，并且不被滥用。
在下一部分中，我将讨论一些实现这些优异效果的便捷方法。事实上，我们通常在天空中看到的设计参数非常简单，只有三个。敬请关注。
作者：Green Lvgreen，设计师混合了前圈，曾在百度Echarts团队工作过。了解专栏：UX元素
资料来源：https://zhuanlan.zhihu.com/p/34501702
本文是在@绿绿绿的授权下发布的，未经作者许可，不得复制。
该地图来自Pexels，基于CC0协议
