高端UI设计公司:UI界面怎样做才能符合用户习惯


查看对称和非对称标准曲线之间的区别

当对象从屏幕的一部分移动到另一部分时,将使用缓入退出。在这种情况下,动画避免了引人注目的戏剧效果。

卡片在屏幕上的移动和相应的不对称曲线

当元素从屏幕上消失时,应使用相同的移动类型,但用户可以随时将其返回到上一个位置。它涉及导航抽屉等。

导航抽屉以标准曲线隐藏在屏幕上

从这些例子中遵循许多初学者忽略的基本规则 - 开始动画不等于结束动画。与导航抽屉的情况一样 — 它以减速曲线显示,随标准曲线消失。此外,根据Google Material Design的说法,物体出现的时间应该更长,以吸引更多的注意力。

侧菜单的出现和消失通过相应的减速和标准曲线来实现

函数用于描述曲线。它被称为立方体,因为它基于四个点。第一个带有坐标的点(左下角)和最后一个带有坐标的点(右上角)已在图形上定义。

基于此,我们只需要描述图上的两个点,它们由函数的四个参数给出:前两个是坐标和第一个点,后两个是坐标和第二个点。

为了简化曲线的工作,我建议使用站点 easings.net 和 cubic-bezier.com。第一个包含最常用的曲线列表,您可以将这些曲线的参数复制到原型工具中。第二个源使您可以使用曲线的不同参数,并立即查看对象将如何移动。

函数立方贝塞尔()的不同类型的曲线及其参数

界面动画中的编排

就像芭蕾舞编舞一样,主要思想是在从一种状态过渡到另一种状态的过程中将用户的注意力引导到一个流畅的方向。

有两种类型的编舞——平等互动和从属互动。

平等互动

平等交互意味着所有对象的外观都遵循一个特定规则。在这种情况下,所有卡片的外观都被视为一个流程,它将用户的注意力引导到一个方向,即从上到下。如果我们不遵循顺序,用户的注意力就会被分散。同时出现所有元素看起来也很糟糕。

用户的注意力应该被引导到一个流畅的方向上

至于表格视图,它有点复杂。在这里,用户的焦点应该对角线,因此逐个显示元素是一个糟糕的主意。逐个显示每个元素会使动画过长,用户的注意力会像锯齿形一样,这是错误的。

卡片表格视图的对角线外观

从属交互

从属交互意味着我们有一个吸引所有用户注意力的中心对象,所有其他元素都从属于它。这种类型的动画给人秩序感,并吸引更多人关注主要内容。

在其他情况下,用户很难知道要关注哪个对象,因此他的注意力会被分散。因此,如果要对多个元素进行动画处理,则需要明确定义其运动顺序,并一次尽可能少地对对象进行动画处理。

只为一个中心对象制作动画,其余所有对象都受制于它。否则,用户将不知道要关注什么对象

根据材料设计,当移动物体不成比例地改变其尺寸时,它们应该沿着弧线而不是直线移动。它有助于使运动更自然。通过“不成比例地”,我的意思是通过增加/减少来改变对象的高度和宽度是不对称的,即以不同的速度进行(例如,一张正方形卡片变成一个矩形)。

不成比例地改变其大小的物体的运动应沿弧线排列

当对象按比例更改其大小时,将使用沿线的移动。由于这种运动的实施要容易得多,因此不成比例的弧形运动规则经常被忽略。查看应用程序的真实示例,您将看到线性运动的主导地位。

尺寸的比例变化在一条直线上实现

曲线上的运动可以通过两种方式实现:第一种称为垂直输出 — 对象开始水平移动并以垂直移动结束;第二个 — 水平输出 — 对象开始垂直移动并以水平运动结束。

对象沿曲线移动的路径必须与滚动界面的主轴一致。例如,在下一张图片上,我们可以上下滚动界面,相应地,卡片以垂直方式展开——首先向右,然后向下。反向移动以相反的方式完成——即卡片首先垂直上升,最后水平移动。

卡的展开/折叠方向应与接口的轴线一致

如果移动物体的路径彼此相交,则它们不能相互移动。物体应该通过减慢或加速自己的速度来为另一个物体的移动留出足够的空间。另一种选择——他们只是推开其他物体。为什么呢?因为我们假设接口中的所有对象都位于一个平面上。

在移动过程中,物体不应相互穿过,而应为另一个物体的移动留出空间

在另一种情况下,移动物体可以高于其他物体。但同样没有溶解或通过其他物体移动。为什么?因为我们相信界面的元素的行为符合物理定律,而现实世界中没有固体物体能够做到这一点。

对象可以高于其他对象,然后移动

结论

因此,如果我们总结上述所有规则和原则,界面中的动画应该反映我们从物理世界中知道的运动——摩擦、加速度等。模仿现实世界中对象的行为,我们可以创建一个序列,允许用户了解对界面的期望。

如果动画构建正确,那么它就不会引人注目,并且不会分散用户对目标的注意力。如果是这样,您要么需要软化它,要么甚至根本不需要删除。这意味着动画不应减慢用户的速度或阻止执行任务。

但不要忘记,动画与其说是科学,不如说是一门艺术,所以最好对用户进行实验和测试你的决定。

ui设计公司,欢迎咨询

网站UI设计公司,UI外包公司,UI设计公司排名,UI设计公司,UI界面设计公司,人工智能体验设计咨询公司,高端UI设计公司


首页 > 新闻资讯

Tag: 高端UI设计公司 人工智能体验设计咨询公司 UI界面设计公司 北京UI设计公司 HMI交互设计 上海UI设计公司
留言