动画风格指南

动画和动效界面通过减少精神负荷和降低改变盲目性, 对用户具有认知优势。与单一静态界面相比, 动效能够更有效地连通内容层次结构和空间关系。动画可以强化企业品牌, 并在平台、设备和外形因素中提供线性顺滑体验。高性能动画还为认知能力下降的人提供辅助功能的好处。

动效设计三要素：

TIMING

"时间网格" 创造一致的节奏。动画被定义为基网格的倍数。

TIMING

EFFECTS

随着时间的推移, 属性将被动画化, 以创建效果的词汇表。

EFFECTS

DIMENSION

利用 z 轴支持空间组织，辅助创建视觉层次结构, 我们称之为 "大气"。

DIMENSION

动效设计指南：

时效性Timing

时间计算为即使是100ms 的倍数, 即每秒60帧的6帧。短时性是非常可取的, 这样用户就不会觉得他们必须等待一个动作完成。动画应跟随贝塞尔动画曲线, 使对象有质量和物理的感觉。为了更好地理解贝塞尔曲线, 请在此处阅读更多内容, 并浏览下面的示例。

Timing

效果Effects

效果包括从过渡到微交互的各种可能的动画, 展示品牌的个性。一般来说, 动画的出现频率应该较低 (每次登录一次), 而且是微妙的。再次, 要警惕的是, 添加的动画是要有意义的, 而不能仅仅是为了装饰而设计。下面是一个动画库, 其中包含用于生成它们的代码。有关更多动画, 请前往 "组件" 部分。

Effects

维Dimensional

维度建议使用框阴影来指示视觉层次结构的概念层次结构。实际的 z 索引由开发人员来维护正确的阴影。“大气”是屏幕前面和后面的虚拟空间。屏幕的平面有一个 x, y 坐标系, 左上角为 0, 0。然而, z 升维在用户的正常想象范围,-z 下降超出了屏幕的平面。“大气”中对象的高程在视觉上呈现为框阴影。高程的数量与 z 索引不同, 而是它的相对高程, 这有助于渲染阴影。

Dimensional

运动Movement

不同的运动轴会引起不同的情绪反应, 重要的是要保持动画的一致性, 以传递清晰的信息。

X轴：对象进入/离开屏幕边界；全局标头、进度条、诱导路径。

X-AXIS

Y轴：指示进度或加载状态的对象；通知、卡片、选项卡内容。

Y-AXIS

Z轴：提供新信息的对象；模型, 悬停状态, 欢迎引导。

Z-AXIS

---

Animation Style Guidelines

Animation and kinetic interfaces have cognitive benefits for your users by reducing mental loads, and reducing change blindness. It has the ability to more effectively communicate content hierarchy and spatial relationships than static interfaces alone. Animation can reinforce your corporate brand and provide a steel thread experience across your platforms, devices, and form factors. Used responsibly, performant animation also provides accessibility benefits to those with reduced cognitive abilities.

TIMING

A “grid of time” creates consistent rhythm. Animation is defined as multiples of a base grid.

EFFECTS

Attributes are animated over time to create a vocabulary of effects.

DIMENSION

Utilizing the Z-axis to support spatial organization aids in creating a visual hierarchy we refer to as “atmosphere”.

Timing

Timings are calculated as even multiples of 100ms which is 6 frames at 60 frames-per-second.

Short timing is greatly prefered, so that users do not feels as if they have to wait for an action to complete

Animations should follow bezier animation curves to give objects a sense of mass and physics.To get a better understanding of bezier curves, read more here and explore the example below.

Effects

Effects encompase a wide variety of possible animations from transitions to micro-interactions that showcase your brand’s personality.

In general animations should tend to appear less frequently (once per login) and be subtle. Again, be concious that added animations are meaningful, and not just decorative.

Below is a library of animations with the code used to produce them . For more animations, head to the Component Section.

Dimensional

Dimension suggests a conceptual hierarchy that makes use of box shadows to indicate visual hierarchy. The actual Z-index is up to the developer to maintain the correct shadows.

Atmosphere is the virtual space in front and behind the screen. The plane of the screen has an X,Y coordinate system with 0,0 in the top left. However, the Z elevation is the imaginary normal pointed at the user, -Z descent is beyond the plane of the screen.

The elevation of an object in the atmosphere is visually rendered as box shadows. The amount of elevation is not the same as the Z-index, rather its relative elevation which aids in rendering the shadow.

Consider the example below, then head to the design tokens page for tokens to include in the CSS Box-shadow attribute.

Movement

Different axis of motion evoke different emotional responses, and it is important to keep animations consistent to deliver a clear message.

X-AXIS

Objects entering/leaving screen bounds.

Global header, progress bar, sales path.

Y-AXIS

Objects indicating progress or loading state.

Notifications, cards, tab content.

Z-AXIS

Objects providing new information.

Modals, hover states, welcome mat.

Salesforce Lightning Design System：Animation Style Guidelines