trust-reliability

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Trust & Reliability Animation

信任与可靠性动画

Create animations that establish confidence, consistency, and dependable user experiences.

创建能够建立用户信心、保持一致性并提供可靠体验的动画。

Emotional Goal

情感目标

Trust develops through predictable, controlled movements that respect user expectations. Reliability means animations behave consistently and never surprise negatively.

信任感源于符合用户预期的可预测、可控的动效。可靠性意味着动画表现始终一致，不会带来负面意外。

Disney Principles for Trust

用于构建信任的迪士尼动画原则

Squash & Stretch

挤压与拉伸（Squash & Stretch）

Minimal stretch (5-10% maximum). Controlled deformation shows stability. Elements should feel solid and grounded, not rubbery.

最小化拉伸（最大5-10%）。可控的变形体现稳定性。元素应给人坚实、扎实的感觉，而非像橡胶一样柔软。

Anticipation

预备动作（Anticipation）

Subtle but present (50-100ms). Brief preparation signals what's coming without surprises. Users should always know what to expect next.

细微但明确（50-100毫秒）。简短的预备动作预示即将发生的变化，避免意外。用户应始终能预判下一步的内容。

Staging

舞台呈现（Staging）

Clear, unambiguous presentation. One action at a time. Important elements are obvious. No hidden or confusing movements.

清晰、明确的展示。同一时间只执行一个动作。重要元素应醒目呈现，避免隐藏或易混淆的动效。

Straight Ahead Action

逐帧动画（Straight Ahead Action）

Avoid for trust-building. Prefer pose-to-pose for predictable, controlled results. Every frame should be intentional.

构建信任时应避免使用。优先采用关键帧动画（pose-to-pose）以获得可预测、可控的效果。每一帧都应具有目的性。

Follow Through & Overlapping Action

跟随动作与重叠动作（Follow Through & Overlapping Action）

Restrained follow-through. Elements settle quickly without excessive bouncing. Professional, controlled completion of movements.

克制的跟随动作。元素应快速稳定下来，避免过度弹跳。动作的完成应专业、可控。

Slow In & Slow Out

慢入慢出（Slow In & Slow Out）

Smooth, symmetrical easing.

ease-in-out

creates predictable, professional motion. No sudden accelerations or jarring stops.

平滑、对称的缓动效果。

ease-in-out

可创造可预测、专业的动效。避免突然加速或突兀的停止。

Arc

弧线运动（Arc）

Gentle, predictable curves. Consistent arc patterns across similar interactions. Avoid erratic or unexpected paths.

柔和、可预测的曲线。相似交互采用一致的弧线轨迹。避免不规则或意外的运动路径。

Secondary Action

次要动作（Secondary Action）

Minimal and purposeful. Supporting animations should reinforce, not distract. Loading indicators should be calm and steady.

精简且有明确目的。辅助动画应起到强化作用，而非分散注意力。加载指示器应保持平稳、镇定。

Timing

时长（Timing）

Moderate, consistent timing (250-400ms). Never too fast (feels rushed) or too slow (feels broken). Same elements should always animate at same speed.

适中、一致的时长（250-400毫秒）。既不能太快（显得仓促）也不能太慢（显得故障）。同一元素的动画速度应始终保持一致。

Exaggeration

夸张（Exaggeration）

Very minimal (5-10%). Near-realistic movements feel professional and trustworthy. Subtle refinement over dramatic effect.

极少量的夸张（5-10%）。接近现实的动效会显得专业且值得信赖。优先选择细微的优化而非戏剧性的效果。

Solid Drawing

扎实绘制（Solid Drawing）

Maintain perfect proportions. No warping or distortion. Elements should feel stable and well-constructed.

保持完美的比例。避免扭曲或变形。元素应给人稳定、结构合理的感觉。

Appeal

吸引力（Appeal）

Clean, balanced designs. Symmetry suggests stability. Professional aesthetics over playful charm.

简洁、平衡的设计。对称感暗示稳定性。优先采用专业的美学风格而非活泼的趣味性设计。

Timing Recommendations

时长建议

Element	Duration	Easing
Transitions	250-350ms	`ease-in-out`
Feedback	150-200ms	`ease-out`
Loading	Continuous	`linear`
Modals	200-300ms	`ease-out`

元素	时长	缓动效果
过渡效果	250-350ms	`ease-in-out`
反馈动效	150-200ms	`ease-out`
加载动画	持续运行	`linear`
模态框	200-300ms	`ease-out`

CSS Easing

CSS 缓动函数

css

--trust-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--trust-enter: cubic-bezier(0, 0, 0.2, 1);
--trust-exit: cubic-bezier(0.4, 0, 1, 1);

css

--trust-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--trust-enter: cubic-bezier(0, 0, 0.2, 1);
--trust-exit: cubic-bezier(0.4, 0, 1, 1);

Consistency Rules

一致性规则

Same action = same animation, always
Duration variance: maximum ±50ms
No random or variable timing
Respect system motion preferences
Graceful degradation when disabled

同一操作对应同一动画，始终保持一致
时长偏差：最大±50毫秒
禁止随机或可变的时长设置
尊重系统的动效偏好设置
当动效被禁用时，应优雅降级

When to Use

适用场景

Financial transactions and payments
Form submissions and data entry
Authentication flows
Settings and configuration
Progress indicators
Confirmation dialogs
Enterprise applications

金融交易与支付
表单提交与数据录入
身份验证流程
设置与配置
进度指示器
确认对话框
企业级应用