תזמון אנימציה ותפיסת UX

1) מדוע העיתוי קריטי

• תחושת תגובה מיידית ואמון במערכת;
• בהירות של סיבה ותוצאה (מ/אליה האלמנט זז);
• עייפות ונוחות בפגישות ארוכות;
• דיוק פעולות (במיוחד בניידות ובקצבים גבוהים).

הכלל: עיתוי משרת מטרה. אם האנימציה לא עוזרת להבין ”מה קרה”, זה מפריע.

2) פסיכופיזיקה וסף

• קליטת 50 ms-echo (הדפסה, קליק אפקט); נראה מיידי.
• 100 ms - המשוב החזותי הראשון על ידי פעולה (הכפתור ”לחץ”).
• 120-180 ms - ריחוף/פוקוס, מעבר מדינה רך.
• 180-280 ms - מודלים/פאנלים; נתפס כהופעה ”טבעית”.
• 300-500 ms - אלמנט משותף, צעד קדימה התקדמות.
💡 700 ms - סיכונים של ”איטיות”; לעזוב רק אם זה הגיוני (למשל, אישור של ניצחון).
• מעגל 1200-1600 ms-שלד/shimmer; ארוך יותר - מעייף.

3) הקלות ועקומות משקל

• סטנדרטי: 'cubic-bezier (0. 2, 0, 0. 2, 1) ”ניטראלי” ”חומר” דינמיקה.
• לחץ: "cubic-bezier (0. 4, 0, 1, 1) התחברות מהירה, לחיצה קצרה.
• כיסוי החוצה: 'cubic-bezier (0, 0, 0. 2, 1) "- פלט רך.
• מבטא מודגש (נדיר): "cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2) "לעקוף את השלט 8 px.

משקל אופטי: ככל שהרכיב גדול יותר (כרטיס, מגירה), כך משך הזמן ארוך יותר (+ 40-80 ms לבסיס).

4) שלבים וכוריאוגרפיה

1. חניכה (10-40 מ "מ): אור דועך/סולם 0. 98 # 1 - אות התחלה.

2. תחבורה (שלב ראשי): הזזה/פתיחה.

3. טיוטה (20-60 ms): בלם קטן, צל/מיקוד טבעת ייצוב.

• רשימות: 20-40 ms/פריט, מקסימום 6-8 פריטים ברצף.
• צורות: אין מפל; הכל מופיע באותו הזמן כדי לא להפריע לקלט.

תהפוכות: ”אחורה” מראות ”קדימה” ומהירות ב-15-30%.

5) עיתוי על ידי סוג אינטראקציה

6) תפיסת זמן: כיצד ”להאיץ” ללא תאוצה אמיתית

זמינות מיידית: שינוי מיידי של סלסולים/סגנון לחץ על 100 ms אפילו לפני הרשת.
הסתרת המורכבות: הורדות מקבילות; בדיקת רקע לפני פתיחת הפאנל.
עוגן חוש: מרכיב משותף וכיוון תנועה מפחיתים את העלות הקוגניטיבית של ההמתנה.
עדכונים אופטימיים: UI הוא ”מוכן” באופן מיידי, השרת מאשר או מתגלגל בחזרה.

7) עייפות והיגיינת אנימציה

הימנע מפעימות אינסופיות; כל מחזור חייב להיות לסירוגין או ניתוק.
האם מיקרו אפקטים על מערכים של יסודות (טבלה, רשת) ללא טשטוש/תיבה-צל בכל צומת.
תמיכה 'מעדיף-מופחת תנועה: להפחית': להשאיר רק דועך 100ms או מתג סטטוס סטטי.

css
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration:.01ms! important; }
}

8) אסימוני תזמון (מערכת עיצוב)

json
{
"motion": {
"duration": { "press": 90, "hover": 160, "focus": 160, "overlayIn": 240, "overlayOut": 180, "tab": 200, "shared": 280 },
"easing": {
"standard": "cubic-bezier(0. 2,0,0. 2,1)",
"accelerate": "cubic-bezier(0. 4,0,1,1)",
"decelerate": "cubic-bezier(0,0,0. 2,1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

שמות: "תנועה. משך זמן. 'תפקיד' תנועה. רכיבים ופיגמה הם אותו הדבר עבור המנוע.

9) יישום: CSS ותנועת Framer

css
:root{
--dur-press:90ms; --dur-hover:160ms; --dur-overlay-in:240ms; --dur-overlay-out:180ms;
--ease-std:cubic-bezier(.2,0,.2,1);
--ease-acc:cubic-bezier(.4,0,1,1);
--ease-dec:cubic-bezier(0,0,.2,1);
}
.button{ transition: transform var(--dur-press) var(--ease-acc), box-shadow var(--dur-hover) var(--ease-std); }
.button:active{ transform: scale(.98); }
.modal-enter{ animation: modalIn var(--dur-overlay-in) var(--ease-std) both; }
.modal-exit { animation: modalOut var(--dur-overlay-out) var(--ease-dec) both; }
@keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
@keyframes modalOut{ from{opacity:1} to{opacity:0; transform:translateY(8px) scale(.99)} }

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{opacity:0}} animate={{opacity:1}} exit={{opacity:0}}
transition={{duration:.18, ease:[0. 2,0,0. 2,1]}} className="fixed inset-0 bg-black/50">
<motion. div initial={{y:16, scale:.98, opacity:0}}
animate={{y:0, scale:1, opacity:1, transition:{duration:.24, ease:[0. 2,0,0. 2,1]}}}
exit={{y:8, scale:.99, opacity:0, transition:{duration:.18, ease:[0,0,0. 2,1]}}}
className="m-auto max-w-lg rounded-2xl bg-white p-6">
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

10) הרכב של זמן: מקביל נגד רצף

במקביל (fade + translate בעת ובעונה אחת) - מהר יותר בהרגשה.
הרצף (המכל הראשון, ולאחר מכן התוכן) הוא מבנה ברור יותר, אך ארוך יותר. ליישם כאשר חשוב להראות את ההיררכיה.
הימנע מצעדים> 60 ms בין גורמים קרובים באותו גוש.

11) עיתוי ותוכן

טקסט: אין להחיות אות/מילה אחר מילה במוצרים; זו טכניקה שיווקית.
מספרים/דלפקים: צעד 40-60 ms batchami, אין פריסת ג 'יטר (tabular-nums).
גרפיקה: פתיחת סדרה 180-240 ms, hover-glight name 120 ms.

12) שגיאות נגישות ותפיסתיות

סגנונות המיקוד חייבים להופיע ללא דיחוי.
אזהרות/שגיאות - אנימציה מינימלית (120 ms), ללא טלטול אם המשתמש נמצא עם AT (assistive tech).
הימנע מהבזקים> 3/s והבזקים ניגודיים גדולים.

13) הפרטים של iGaming

• לחץ על 100 ms; מעמד 'עסוק מאוד; הרמת כוסית אחרונה/אינדיקטור - אין עיכוב.
• תזמון תגובה UI חשוב יותר מאנימציית אישור: אישור קצר 120-160 ms.

• התחל רישום 200 מ ”מ, מחזור אחיד, בלימה 300-500 מ” מ; אין הבהובים אינסופיים.
• Win-burst 500 ms, אין Strobe; הכמות היא AAA.

• עדכונים על ידי חבורות (250-1000 ms); דיפ חזותי 160 ms; ללא קפיצות פריסה.
• בריחוף/מיקוד - תאורה אחורית דיבאנק 80-120 ms כדי לא ”למצמץ”.

14) אנטי דפוסים

עקומות ליניאריות לתנועות (תחושה ”מכנית”).
משך> 400 ms למצבי כפתור פשוטים.
מפל 100 + ms על פי רשימה של עשרות יסודות (גרירה).
צללים/טשטוש על מאות אלמנטים באנימציה.
חוסר עקביות: אותן פעולות עם תזמונים שונים באותו מוצר.
התמקדות או עיכוב בהפעלת המקלדת.

15) רשימת עיתוי QA

עקביות

[ ] טימינגס ועקומות נלקחים מאסימונים, אותו הדבר לאותן פעולות.

תגובה

[ ] לחץ/ריחוף/מיקוד מתאים לסולם של 80-180 ms.

[ ] התגובה החזותית הראשונה על 100 ms.

כוריאוגרפיה

[ ] הקלט והפלט סימטריים; פלט מהיר ב-15-30% מקלט.

[ ] המפל אינו עולה על 8 יסודות ו-40 מדרגות.

A11y

[ ] 'מעדיף-מופחת תנועה' נתמך; להתמקד ללא דיחוי.

[ ] אין מצמוצים> 3/s.

ביצועים

[ רק ] transformation/officity "מונפשת; אין טשטוש המוני/צללים.

16) תיעוד במערכת התכנון

"Motion Tokens': משך/הקלה/stagger + מפת יישומים (כפתור, כיסוי, לשונית, רשימה).
”קצב ושלב”: שרשרת ותוכניות הפיכות.
”להפחית את התנועה”: כללי השפלה ודוגמאות.
"Do/Don ': קטעים קצרים עם מדדי זמן ומקטעי מטרה (INP/First Feedback).

תקציר

תזמון טוב הוא תגובה מיידית, כוריאוגרפיה מובנת ועקומות חסכוניות. לשמור על משך זמן קצר עבור מיקרו-מצבים, למתוח רק היכן שהוא מוסיף משמעות, לשמור על הפחתת תנועה, ולא להחיות תכונות ”יקרות”. אז הממשק מרגיש תוסס ואמין - במיוחד בתרחישים בזמן אמת וסכומים גבוהים.