1. 首页 > 儿童教育

怎么提升产品的用户体验? 怎么提升产品的价值

学习动画的同学应该都了解迪士尼的动画设计12守则吧?虽然这些守则开始是应用在动画设计当中,但是实际上在如今的 UI 界面当中,同样是适用,并且效果拔群的。

这12条守则当中,绝大多数都可以应用到 UI 的动效与交互设计当中,从而让交互与体验更上一层楼。这篇文章基于这12条守则,梳理出了 9 条适用于 UI 设计的守则,一起来看看吧:

想要学习或提高设计可以去:https://www.aaa-cg.com.cn/?wkc

1、挤压与拉伸

在动画当中,挤压与拉伸主要体今年对象在受到重力影响的情况下,物体的表现,这种动画效果能够体现出质量、重量与柔韧感。当弹球在撞击地面的时候,会呈现出这样的挤压与拉伸。在UI 界面当中,挤压与拉伸则多呈今年按钮类的元素上。

比如当按钮被按下的时候,可以加入挤压拉伸的效果,通过这种动效能够很快让按钮呈现出接近真正的物理感。当然,除了按钮之外,它还可以体今年很多其他的交互元素上。

2、准备ACT

准备ACT,通常指的是提前告诉用户马上发生的事情,让设计与用户的预期贴合起来。壹个人物要将箭射出去,他需要抬起手臂给后拉,你会清晰地看到射箭之前「引而不发」的状态,然后你会对于箭射出有所预期。在用户界面当中,当你悬停在按钮之上的时候,按钮会变化,进入「悬停」状态,它就昭示着它是可被点击的,这就是它的准备ACT。

悬停交互会告知用户下一步可以做啥子。

水平滚动的控件通常会展示出某些元素的一部分,让用户意识到可以滑动交互。

3、时间控制

在传统的动画当中,时间控制决定了帧数的绘制数量与内容。帧数越多,动画就越流畅,相应的内容变化也也许更慢。同时,壹个动画所耗费的时间长短,也会影响到其中人物的表现力与用户的心情。

时间控制是动画设计的基础。时间控制与缓动在动画编排中发挥着重要的作用,过于漫长的过渡会让用户等太久,如果太快,用户也许会觉得有失重要的信息。通常,绝大多数的动画时长会控制在 200ms 到 600ms 之间,诸如悬停与点击反馈通常会控制在 300ms,而过渡则多为 500ms,你可以参考 Material Design 中动画的时间处理。

右侧的过渡会让用户觉得等待太久。

4、渐快与渐慢

现实世界当中,绝大多数的事物的运动规律都遵循缓动的规律。换句话说,没有东西是突然最初运动,又突然停止的,自由落体也是有加速过程的。

所以,给 UI 元素当中添加缓动效果,能够让元素看起来更加自然,符合预期,结合缓动与时间控制,就能够定义整个界面的运动系统了。

左侧的为匀速运动,没有缓动,而右侧加了缓动之后,看起来更加自然。

5、表演和呈现方法

为人物配置舞台,让人物像登上舞台一样进入场景。换句话说,你需要借用动画效果来进行「叙事」,思考怎么让它进入场景,怎么呈现,怎样表演,怎么借用镜头语言来引导用户的注意力。

在 UI 界面当中,表演与呈现方法对应的就是元素的放置位置,以及元素怎么进入界面,如何抓住用户注意力,进行合理的动画编排。

当你在考虑怎么呈现壹个音乐 APP 的界面的时候,你也许需要基于用户喜好来主推类似歌曲,那么喜爱/收藏音乐将会是壹个重要的交互,与这首歌相关的歌曲也许需要壹个独立的界面来呈现,于是你要凸显喜爱/收藏按钮,要让歌曲从列表中跳出,并且在下方列举出相关的音乐。

6、弧形运动轨迹

纯粹的直线运动的事物很少,从高处抛出的球的运动轨迹是弧形的。很多时候弧形轨迹更符合自然规律也符合大家的日常认知。

在 UI 界面当中,重要的元素可以运用弧形运动轨迹来呈现,会显得更加自然舒适,尤其是那种沿着对角线运动的元素。

7、附属ACT

在传统动画中,附属ACT主要是用来支撑与辅助主要ACT的。比如壹个正在行走的人物,他的头部的摆动与转动通常会被视作为附属ACT,

在 UI 界面当中,辅助ACT可以让主要的动画效果更加突出。这些元素在需要用户反馈的地方,显得特别有用。全部的微交互几乎都是基于「附属ACT」的原理来进行设计的。

此处的粒子效果增强了按钮本身的功能。

8、夸大

在很多场景当中,人物需要具备有足够的吸引人,那么可以运用某些夸大的ACT来吸引更多的关注。

在 UI 界面当中,最重要的交互可以运用夸大的动效来强化,引起用户的注意。Material Design 当中的 FAB 动效就是壹个最典型的夸大式的动效,它最终的静态效果是很吸引人的,因为它将壹个按钮的色彩扩展到整个界面,并且在全部元素的最上层,强调到了极致。

运用 FAB 动效来进行夸大

在付款类APP中运用夸大的效果来强化

9、跟随ACT与重叠ACT

没有任何一种物体会突然停滞,通常运动是壹个接着壹个的。还有壹个更加简洁的表述为「动者恒动」。想象一下一只兔子从高处跳下,当兔子最初运动的时候,它的耳朵会随着运动而自然地偏移与摆动,当兔子落地的时候,身体基本静止之后,它的耳朵也许还在动。前一种情况是「跟随ACT」,视差滚动就是典型的跟随ACT。而后者则是「重叠ACT」,前壹个ACT停止之后,某些部分仍然处于运动的状态。

在 UI 界面当中,可以让元素在静止之前,调用壹个其他的交互与动效,从而让整个动效与交互更加流畅连贯,且自然。

模态弹出框的跟随ACT,在底层动效停止之后依然运动,然后才静止下来。

在滚动的时候,CAG与底部的元素以不同的速率运动,类似视差。

结语

在实际的设计过程中,UI动效与交互应当根据实际的情况来灵活调整,让整个 UI 界面在保持自然的情况下,在正确的位置加入不同的交互、动效以及微交互,这会让整个交互与 UI 界面本身的功能更深层地结合到一起。