emotion-selection

برای هر تعامل، emotion token مناسب و پارامترهای موشن هماهنگ انتخاب کنید.

این skill با توجه به احساس کاربر، نوع تعامل و شخصیت برند، emotion token مناسب را برای انیمیشن انتخاب می‌کند؛ از celebratory برای موفقیت تا calming برای اطمینان‌بخشی و frustrated برای خطا. سپس spring، easing، duration و افکت‌های ثانویه مانند ذرات یا glow را پیشنهاد می‌دهد.

برای سناریوهای پیچیده، امکان ترکیب چند احساس، اعمال modifierهای مربوط به اولین بازدید یا دستگاه کم‌مصرف و نگاشت مناسب برای reduced motion را فراهم می‌کند. نتیجه، موشن‌هایی معنادار، سازگار با برند و قابل‌دسترس‌تر است.

چه چیزی می‌گیرید

انتخاب emotion token بر اساس وضعیت کاربر و نوع تعامل
پیشنهاد spring، duration، exaggeration و افکت‌های مکمل
راهنمای تطبیق احساسات با شخصیت برند و شناسایی گزینه‌های نامناسب
پشتیبانی از ترکیب احساسات برای سناریوهایی مانند موفقیت پرداخت
نگاشت رفتار انیمیشن برای reduced motion و دستگاه‌های کم‌مصرف

برای چه کاری خوب است

طراحان محصول و UI که می‌خواهند برای هر حالت تعاملی موشن هدفمند بسازند
تیم‌هایی که سیستم موشن مبتنی بر design token و شخصیت برند دارند
سناریوهایی مانند onboarding، loading، خطا، موفقیت پرداخت و achievement

برای چه کاری نیست

ساخت مستقیم فایل انیمیشن یا پیاده‌سازی کامل component بدون نیاز به انتخاب احساسی
پروژه‌هایی که موشن آن‌ها کاملاً تزئینی است و به تجربه یا احساس کاربر وابسته نیست
زمانی که emotion tokens یا پارامترهای پایه مانند spring و duration در پروژه تعریف نشده‌اند

دربارهٔ این اسکیل

Emotion Selection

Guide for selecting emotion tokens from tokens/emotion.tokens.json to match animation context.

Quick Selection

By User State

User Feeling	Emotion Token	Key Parameters
Accomplished something	`celebratory`	bouncy spring, 1.2x duration, particles
Needs reassurance	`calming`	gentle spring, 1.4x duration, no effects
Under time pressure	`urgent`	snappy spring, 0.8x duration, pulse
Having fun	`playful`	bouncy spring, 1.1x duration, wobble
Making decisions	`professional`	standard spring, 1.0x duration, none
Discovering something	`mysterious`	gentle spring, 1.5x duration, glow
Highly engaged	`energetic`	snappy spring, 0.9x duration, trail
Encountered error	`frustrated`	snappy spring, 0.9x duration, shake
Trusting the system	`trustworthy`	gentle spring, 1.1x duration, none
Waiting	`anticipatory`	linear, 1.0x duration, shimmer
Pleasantly surprised	`delightful`	bouncy spring, 1.3x duration, sparkle
Concentrating	`focused`	snappy spring, 0.9x duration, none
First time here	`welcoming`	enter spring, 1.2x duration, wave

By Interaction Type

Interaction	Recommended Emotion
Form submission success	`celebratory`
Payment confirmed	`celebratory` + `trustworthy` (blend 70/30)
Error message	`frustrated` (brief)
Loading state	`anticipatory`
Onboarding step	`welcoming`
Toggle/switch	`playful` or `professional`
Modal open	`professional` or `calming`
Achievement unlock	`delightful`
Security prompt	`trustworthy` + `urgent` (blend 60/40)
Help tooltip	`calming`

Emotion Parameters

Each emotion maps to specific animation parameters:

celebratory:
  spring: {motion.spring.legacy.bouncy}
  duration-multiplier: 1.2
  exaggeration: expressive
  secondary-effects: particles, glow

professional:
  spring: {motion.spring.default.spatial}
  duration-multiplier: 1.0
  exaggeration: subtle
  secondary-effects: none

Selection Process

Step 1: Identify Context

What just happened?
├── Success → celebratory, delightful
├── Error → frustrated (brief)
├── Loading → anticipatory
└── Navigation → professional, welcoming

What should user feel?
├── Confident → trustworthy
├── Engaged → playful, energetic
├── Calm → calming
└── Focused → focused

Step 2: Check Brand Compatibility

Brand Attitude	Compatible Emotions	Avoid
Elegant	calming, trustworthy, professional	playful, energetic
Playful	playful, delightful, celebratory	professional, focused
Bold	energetic, celebratory, urgent	calming, mysterious
Friendly	welcoming, playful, calming	urgent, frustrated

Step 3: Apply Context Modifiers

From tokens/emotion.tokens.json:

Context	Duration	Exaggeration	Effects
First visit	+20%	+10%	+20%
Repeat user	-10%	-10%	-10%
Reduced motion	-50%	0	disabled
Low power	-20%	n/a	-30%

Step 4: Blend if Needed

For complex scenarios, blend emotions:

// From emotion.tokens.json
"confident-celebration": {
  "blend": ["celebratory", "trustworthy"],
  "weights": [0.7, 0.3],
  "use-case": "Payment success"
}

Token Lookup

Load Token

import emotions from 'tokens/emotion.tokens.json';

const params = emotions.emotions.celebratory.parameters;
const spring = params['spring-ref']; // "{motion.spring.legacy.bouncy}"

Resolve References

Spring refs use W3C DTCG format:

{motion.spring.legacy.bouncy} → tokens/spring.tokens.json → motion.spring.legacy.bouncy

Reduced Motion Mapping

Emotion	Standard	Reduced Motion
celebratory	bounce + particles	fade + success icon
playful	spring + wobble	standard transition
energetic	fast + trail	quick fade
frustrated	shake	static error state

Related Skills

Dependencies: emotion-mapping, easing, duration
Commonly used with: animation-recipes, component-animations
See also: accessibility (for reduced motion implementation)

دانلود ZIP