Back to Details

comfort-safety

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Comfort & Safety Animation

舒适与安全感动画

Create animations that reassure, protect, and make users feel secure.
创建能安抚用户、带来保护感并使用户感到安全的动画。

Emotional Goal

情感目标

Comfort comes from predictable, gentle motion that never startles. Safety means animations that communicate protection, stability, and user control.
舒适感源于可预测、柔和的动效，绝不会让用户受惊。安全感意味着动画能传递保护、稳定和用户掌控感。

Disney Principles for Comfort

适用于舒适感的迪士尼动画原则

Squash & Stretch

挤压与拉伸

Minimal, soft (5-10%). Gentle give without instability. Like a cushion—absorbs impact, maintains structure.
幅度极小且柔和（5-10%）。有轻微的弹性但不失稳定性，就像靠垫一样——能缓冲冲击力，同时保持结构完整。

Anticipation

预备动作

Clear, reassuring preparation (150-200ms). Users always know what's coming. No surprises, no hidden actions.
清晰、让人安心的准备阶段（150-200毫秒）。用户总能预知接下来的动作，没有意外，没有隐藏操作。

Staging

舞台布局

Enclosed, protected compositions. Clear boundaries. Safe spaces. Visual hierarchy that guides without overwhelming.
采用封闭、有保护感的构图，边界清晰，营造安全空间。视觉层级引导用户但不会造成信息过载。

Straight Ahead Action

逐帧动画

Avoid. Safety requires predictability. Every movement should be controlled and expected.
避免使用。安全感需要可预测性，每一个动作都应是可控且可预知的。

Follow Through & Overlapping Action

跟随动作与重叠动作

Gentle, cushioned settling. Soft landings. Elements ease into place like being tucked in.
柔和、缓冲式的收尾，就像轻轻落下。元素缓缓归位，如同被妥善安置。

Slow In & Slow Out

慢入慢出

Smooth, gentle curves throughout. No sudden changes. 
ease-in-out
for predictable, comfortable motion.
全程保持流畅、柔和的曲线，无突然变化。
ease-in-out
用于实现可预测、舒适的动效。

Arc

运动轨迹

Soft, natural curves. Cradling, embracing paths. Motion that wraps around rather than cuts through.
柔和、自然的曲线，呈现环抱式的运动路径。动效应包裹元素而非生硬穿过。

Secondary Action

次要动作

Reassuring cues only. Checkmarks, shields, locks. Visual confirmation of safety and completion.
仅添加让人安心的提示，如对勾、盾牌、锁形图标，用视觉确认安全与操作完成。

Timing

时长

Moderate, unhurried (300-450ms). Time to process and feel safe. Never rushed or abrupt.
适中、从容的时长（300-450毫秒），让用户有时间接收信息并感到安全，绝不要仓促或突兀。

Exaggeration

夸张

None to minimal. Realistic, grounded movements. Comfort requires believability.
几乎不使用夸张效果。采用真实、贴合实际的动作，舒适感需要真实可信。

Solid Drawing

扎实造型

Stable, balanced forms. Low center of gravity. Shapes that feel grounded and secure.
稳定、平衡的形态，低重心，让视觉元素感觉稳固可靠。

Appeal

吸引力

Warm, muted colors. Soft edges. Familiar, comfortable aesthetics. Nothing aggressive or sharp.
采用温暖、柔和的色彩，边缘圆润，风格熟悉且舒适，避免尖锐或具有攻击性的设计。

Timing Recommendations

时长建议

ElementDurationEasing
Transitions300-400ms
ease-in-out
Feedback200-250ms
ease-out
Confirmation350-450ms
ease-out
Protection reveal400-500ms
ease-in-out
元素时长缓动效果
过渡动效300-400ms
ease-in-out
反馈动效200-250ms
ease-out
确认动效350-450ms
ease-out
保护提示展示400-500ms
ease-in-out

CSS Easing

CSS缓动效果

css
--comfort-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--comfort-gentle: cubic-bezier(0.45, 0, 0.55, 1);
--comfort-settle: cubic-bezier(0.25, 0.1, 0.25, 1);
css
--comfort-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--comfort-gentle: cubic-bezier(0.45, 0, 0.55, 1);
--comfort-settle: cubic-bezier(0.25, 0.1, 0.25, 1);

Reassuring Patterns

安抚性动效模式

css
@keyframes comfort-embrace {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes comfort-check {
  0% {
    stroke-dashoffset: 24;
    opacity: 0;
  }
  50% { opacity: 1; }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.safe-element {
  animation: comfort-embrace 400ms ease-in-out forwards;
}
css
@keyframes comfort-embrace {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes comfort-check {
  0% {
    stroke-dashoffset: 24;
    opacity: 0;
  }
  50% { opacity: 1; }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.safe-element {
  animation: comfort-embrace 400ms ease-in-out forwards;
}

Safety Signals

安全感信号

  • Clear, visible feedback for all actions
  • Undo animations that show reversibility
  • Progress that never goes backward unexpectedly
  • Transitions that maintain orientation
  • Consistent patterns users can rely on
  • 所有操作都有清晰可见的反馈
  • 支持撤销的动效，展示可逆性
  • 进度不会意外倒退
  • 过渡动效保持界面方向一致
  • 用户可依赖的一致模式

When to Use

适用场景

  • Banking and finance
  • Healthcare applications
  • Password and security flows
  • Data privacy controls
  • Insurance platforms
  • Backup and recovery
  • Parental controls
  • Sensitive data handling
  • 银行与金融类应用
  • 医疗健康类应用
  • 密码与安全流程
  • 数据隐私控制
  • 保险平台
  • 备份与恢复功能
  • 家长控制功能
  • 敏感数据处理场景