Back to Details

friendliness-approachability

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Friendliness & Approachability Animation

友好型亲和力动画

Create animations that welcome users and make interfaces feel warm and inviting.
创建能欢迎用户、让界面感觉温暖且有吸引力的动画。

Emotional Goal

情感目标

Friendliness comes from gentle, welcoming motion that doesn't intimidate. Approachability means animations that invite interaction and make users feel comfortable.
友好感源自温和、亲切的动效，不会让用户感到局促。亲和力意味着动画能吸引用户互动，让他们感到自在。

Disney Principles for Friendliness

适用于友好型动画的迪士尼动画原则

Squash & Stretch

挤压与拉伸（Squash & Stretch）

Moderate, soft deformation (10-20%). Enough to feel alive without being cartoonish. Like a friendly handshake—warm but appropriate.
适度、柔和的变形（10-20%）。既要让元素显得生动，又不过于卡通化。就像一次友好的握手——温暖且得体。

Anticipation

预备动作（Anticipation）

Gentle preparation (100-150ms). Friendly motion telegraphs intention without startling. A small "hello" before action.
温和的准备阶段（100-150ms）。友好的动效会提前传递意图，不会吓到用户。就像行动前的一声轻“问候”。

Staging

舞台呈现（Staging）

Open, inviting compositions. Elements arranged to welcome, not confront. Clear pathways into the interface.
开放、有吸引力的布局。元素的排列要能欢迎用户，而非产生压迫感。为用户进入界面提供清晰的路径。

Straight Ahead Action

顺序动作（Straight Ahead Action）

Light spontaneity for personality. Subtle variations that feel human and approachable rather than mechanical.
略带自发性以体现个性。细微的变化让动效更具人情味、更亲切，而非机械生硬。

Follow Through & Overlapping Action

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

Soft, natural settling. A gentle bounce or two. Like a friend sitting down beside you—relaxed, not rigid.
柔和、自然的收尾。可以有一两次轻微的弹跳。就像朋友坐在你身边——放松而非僵硬。

Slow In & Slow Out

慢入慢出（Slow In & Slow Out）

Smooth, approachable curves. No sharp accelerations. 
ease-out
for welcoming entrances that arrive gently.
流畅、亲切的曲线过渡。避免急剧的加速。使用
ease-out
实现温和的入场动效，让元素自然呈现。

Arc

弧线运动（Arc）

Natural, relaxed curves. Motion that feels human—not robotic straight lines, not exaggerated bounces.
自然、放松的曲线轨迹。动效应符合人类的运动规律——既不是机械的直线，也不是夸张的弹跳。

Secondary Action

次要动作（Secondary Action）

Warm supporting gestures. A subtle wave, a gentle nod. Elements acknowledge user presence.
温暖的辅助性动作。比如细微的挥手、轻轻的点头。通过元素动效感知用户的存在。

Timing

时机控制（Timing）

Moderate, comfortable (200-350ms). Not rushed, not sluggish. Conversational pacing that feels natural.
适度、舒适的时长（200-350ms）。既不仓促，也不拖沓。采用符合日常对话节奏的速度，让动效更自然。

Exaggeration

夸张表现（Exaggeration）

Mild (10-20%). Enough personality to feel warm without being overwhelming. Relatable, not theatrical.
轻度夸张（10-20%）。既要体现个性、传递温暖，又不会让用户感到不适。要贴近用户认知，而非戏剧化的夸张。

Solid Drawing

扎实造型（Solid Drawing）

Soft, rounded forms. Approachable proportions. Nothing sharp or intimidating.
柔和、圆润的形态。比例亲切。避免尖锐或有压迫感的元素。

Appeal

吸引力（Appeal）

Warm colors, rounded corners. Friendly faces when appropriate. Inviting, accessible aesthetics.
温暖的色彩、圆角设计。合适时使用友好的拟人化形象。打造有吸引力、易于接近的视觉风格。

Timing Recommendations

时长建议

ElementDurationEasing
Welcome fade250-350ms
ease-out
Slide in300-400ms
ease-out
Hover response150-200ms
ease-out
Expand/reveal250-350ms
ease-in-out
元素时长缓动效果
欢迎淡入250-350ms
ease-out
滑入300-400ms
ease-out
悬停响应150-200ms
ease-out
展开/显示250-350ms
ease-in-out

CSS Easing

CSS 缓动效果

css
--friendly-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
--friendly-enter: cubic-bezier(0.0, 0, 0.2, 1);
--friendly-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);
css
--friendly-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
--friendly-enter: cubic-bezier(0.0, 0, 0.2, 1);
--friendly-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);

Welcoming Patterns

友好型动效模式

css
@keyframes friendly-wave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-8deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-4deg); }
}

@keyframes friendly-appear {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
css
@keyframes friendly-wave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-8deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-4deg); }
}

@keyframes friendly-appear {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

Approachability Cues

亲和力提示

  • Respond to hover with gentle acknowledgment
  • Animate toward the user, not away
  • Use soft shadows, not hard edges
  • Elements should feel reachable
  • Avoid overwhelming or confrontational motion
  • 对悬停操作给出温和的反馈
  • 动效朝向用户而非远离
  • 使用柔和阴影，避免生硬边缘
  • 元素应让用户感觉易于触及
  • 避免过于强烈或有压迫感的动效

When to Use

适用场景

  • Customer support interfaces
  • Onboarding flows
  • Community platforms
  • Healthcare portals
  • Educational apps
  • Small business websites
  • Personal portfolios
  • Chatbots and assistants
  • 客户支持界面
  • 新手引导流程
  • 社区平台
  • 医疗健康门户
  • 教育类应用
  • 小型企业网站
  • 个人作品集
  • 聊天机器人与助手