mcpField
F
friendliness-approachability

friendliness-approachability

github.com/dylantarre设计与 UI132491 次安装43 周前更新
代码仓库

关于 friendliness-approachability

用于设计亲切、易接近的界面动画，面向设计师和开发者，提供时长、缓动与运动线索建议，适用于引导和支持等体验。

主要功能

  1. 01温和亲切的运动指导
  2. 02按交互类型推荐时长
  3. 03友好风格的 CSS 缓动曲线
  4. 04欢迎式动画模式
  5. 05提升界面亲和力的线索

适用场景

  1. 01设计客户支持界面
  2. 02制作引导流程
  3. 03为社区平台添加动画
  4. 04开发医疗或教育应用

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill friendliness-approachability

安装后在 Claude Code 中输入/friendliness-approachability确认已加载。

详细介绍

友好与亲和力动画

创建欢迎用户的动画，让界面显得温暖而亲切。

情感目标

友好感源于温和、欢迎式的动态效果，不会让人感到畏惧。亲和力意味着动画能够邀请用户互动，让用户感到自在。

迪士尼动画原则与友好感

挤压与拉伸

适度、柔和的形变（10-20%）。既要显得生动，又不要像卡通。就像友好地握手——温暖而得体。

预备动作

温和地做好准备（100-150ms）。友好的动态效果会预先传达意图，不会让人受到惊吓。就像行动前轻轻说一声“你好”。

演出布局

构图开放、富有邀请感。元素的排列应让人感到受欢迎，而不是受到冒犯。为进入界面提供清晰的路径。

连续动作

轻微的自发变化，增添个性。微妙的变化显得有人情味、亲切，而非机械。

跟随与重叠动作

柔和、自然地稳定下来。轻轻弹跳一两次。就像朋友在你身边坐下——放松，而非僵硬。

缓入缓出

曲线平滑、亲切。不要突然加速。使用 ease-out 让进入动画温和地呈现，营造欢迎感。

弧形运动

自然、放松的曲线。动作应显得有人情味——既不是机械的直线，也不是夸张的弹跳。

次要动作

温暖的辅助动作。轻轻挥手、微微点头。用元素表达对用户到来的关注。

时间节奏

适中、舒适（200-350ms）。不急不慢。像对话一样自然。

夸张

轻微夸张（10-20%）。赋予足够的个性，让人感到温暖，但不要过度。亲切自然，而非戏剧化。

扎实绘制

柔和、圆润的形态。亲切的比例。不要有尖锐或令人生畏的元素。

吸引力

温暖的色彩、圆角。适当时可使用友善的面孔。营造亲切、易于接近的美感。

时间建议

元素时长缓动
欢迎淡入250-350msease-out
滑入300-400msease-out
悬停响应150-200msease-out
展开/显示250-350msease-in-out

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);

欢迎式模式

@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);
  }
}

亲和力提示

  • 对悬停做出温和的回应
  • 动画应朝向用户，而非远离用户
  • 使用柔和的阴影，而非生硬的边缘
  • 元素应让人感觉触手可及
  • 避免过于强烈或具有对抗性的动态效果

适用场景

  • 客户支持界面
  • 新手引导流程
  • 社区平台
  • 医疗保健门户
  • 教育类应用
  • 小型企业网站
  • 个人作品集
  • 聊天机器人和助手

评论

支持 Markdown