עיצוב תנועה ואנימציות ממשק

1) מדוע אנימציה במוצר

• מסביר יחסים סיבתיים (שבו הוא נעלם, שבו האלמנט בא),
• מפנה את תשומת הלב לפעולה העיקרית,
• מאשר את התוצאה (משוב) ומפחית עומס קוגניטיבי,
• גורם למעברים להיות צפויים ו ”מוחשיים”.

חוק מס '1: משמעות סגנון>. כל אנימציה עונה על השאלה "מה קרה ואיך זה קשור אליי? ».

2) עקרונות בסיסיים

1. מכולות זזות קודם, אחר כך תוכן, ואז חלקים.
2. עקביות, אותם דפוסים לאותן פעולות.
3. חיסכון: מינימום נכסים, מינימום מסגרות; עדיף קצר וברור יותר.
4. פיזיקה ריאליסטית: האצה בהתחלה, האטה בסוף; אין ”אידיוטים”.
5. ”אחורה” מרגיש כמו מראה ”קדימה”.
6. נגישות: כבד את הגדרות מערכת הפחתת האנימציה.

3) משך זמן ועקומות (המלצות)

3. 1 משך זמן (שולחן עבודה/נייד)

ריחוף: 120-180ms

מיקוד/לחץ: 80-120

טיפ/טוסט: קלט 180-240ms, פלט 120-160ms

מודלים/דרורים: 200-320 ms

מעברי מסך: 240-360 ms

גלילה/פאראלקס: רשום 200 מ "מ לקטע, הימנע מלולאות אינסופיות

3. 2 עקומות

ראשי: "cubic-bezier (0. 2, 0. 0, 0. 2, 1) "- טבעי" קצב חומר "

קלט מהר יותר, פלט רך יותר: "cubic-bezier (0. 05, 0. 7, 0. 1, 1)`

אלסטיות (נדיר, מבטא): "cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2) עם הגבלת הילוך 8px/8 °

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

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

מראה: סולם אור 0. 98→1. 0 + fade-in, 8-16 px קיזוז לאורך ציר המוצא.
היעלמות: סדר הפוך, מהר יותר מהכניסה (20-30%).
הפיכת/שינוי לשוניות: כללי ”בסיס” (continer) מוזז על ידי 16-24 px; הלשונית הפעילה מודגשת לפני שהתנועה מתחילה.
רשימות: לשחרר את המפל (stagger 20-40 ms/element, לא יותר מ-6-8 אלמנטים).

5) מיקרו-אינטראקציות (דפוסים)

כפתור (ריחוף/לחיצה): צל + מנוי אור/סולם 0. 98; לחץ קופץ במהירות של 80 קמ "ש.
מיקוד: טבעת ניגוד ללא טשטוש; להחיות עובי/שקיפות במקום זוהר.
כניסות: תאורת כרכרה/שדה על פוקוס; שגיאות - טלטול בלמים 6 px, בידוד 140 ms, מחזור 1.
Toggle/Checkbox: הצמד למיקום הסופי, לחץ על עיכוב לא יותר מ 60-80 ms.
שלד/עומס: נצנוץ 1200-1600 ms, משרעת בהירות/20%, ללא הבזקים חדים.

6) מצבי תוכן

טעינה * הצלחה/שגיאה ריקה: ”ערוץ” אחד של תנועה; לא לערבב כיוונים שונים.
טוסט/התראות: להגיע מהצד המקור של האירוע (למשל. ימין תחתון לפעולות משתמש).
משוך לרענון: מתח אביבי גמיש; זמן החזרה, 250 מ "ר.

7) נגישות (A11y) וביטחון

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

8) ביצועים (60 FPS כמטרה)

האנימציה רק אופייה ושינוי צורה (translate/scale/rolate); הימנע 'למעלה/שמאלה/רוחב/גובה'.
כולל שזירה: ”transformation: translatz (0)” או ”will-change: transformation, opicity”.
למזער את הצביעה על ידי לא להנפיש צללי טשטוש גדולים ומסננים על אלמנטים מרובים.
לשבור מעברים גדולים לחבורות; השתמש אנימציה.
לרשימות, וירטואליזציה מחוץ למסך/פריסה מחדש.

9) אסימוני תנועה במערכת העיצוב

json
{
"motion": {
"duration": { "xs": 100, "sm": 160, "md": 220, "lg": 280, "xl": 340 },
"easing": {
"standard": "cubic-bezier(0. 2, 0. 0, 0. 2, 1)",
"emphasis": "cubic-bezier(0. 05, 0. 7, 0. 1, 1)",
"decelerate": "cubic-bezier(0. 0, 0. 0, 0. 2, 1)",
"accelerate": "cubic-bezier(0. 4, 0. 0, 1, 1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

”תנועה”. (משך זמן 'eeasing' stagger). ”תרחף”, ”פוקוס”, ”overayin”, ”pageTransformation”, ”Listite”.

10) יישום (CSS/JS/React)

css
:root {
--motion-dur-sm: 160ms;
--motion-dur-md: 220ms;
--motion-ease: cubic-bezier(0. 2, 0, 0. 2, 1);
}
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration: 0. 01ms! important; }
}

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

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

Lottie/SVG: השתמש במצבים ריקים ועלייה למטוס; לא לבקרה קריטית. לייעל ומטמון.

11) תבניות טעינה

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

12) מעברי עמוד/מסך

שמור על נקודת תשומת הלב (מעבר אלמנטים משותפים) - הכרטיס ”מורחב” לחלק.
ניווט ”עמוק” הולך קדימה/ימינה/למעלה, ”אחורה” - אחורה; הכיוון זהה לרציף.
סבסטרט רקע מחשיך ל-40-60% בכיסוי.

13) הפרטים של iGaming

ספין/חשיפה: תאוצה קצרה אחת (200 ms) + סיבוב אחיד + האטה רכה; איסור על מחזורים אינסופיים ללא פעולה.
Win/Geppot: התזה קלה על פני 500 ms, ללא Strobe; צליל כפול בעוצמה נמוכה; טקסט הניצחון קריא (AAA לעומת זאת).
טורנירים/דירוגים: הגדלת חשבון - נגד עם מספרים טבעיים וצעד אור של 40-60 ms/unit (חבורות), ללא ”קפיצות” פריסה.
משחק אחראי: הודעות ומגבלות ללא אפקטים מסיחים את הדעת; אנימציה היא מינימלית, דגש על קריאה.

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

עיכוב> 120ms כדי ללחוץ על תגובה.
”מעלית” מאפיון + סולם 0. 9→1. 05→1. 0 עם מעבר לכל דבר קטן.
מקבילי רקע המתנגשים עם המגילה.
הבזקים/פעימות אינסופיים.
פריסת אנימציה/מאפייני צבע (”גובה”, ”שמאל”, ”מסנן: טשטוש”) על קבוצת יסודות.
עקומות ומשכים לא קבועים לאותן פעולות.

15) תהליך ו ־ QA

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

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

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

[ ] שינוי צורה/אטימות בלבד.

[ ] זמן ועקומות מתאימים לאסימונים.

[ ] אין הבזקים> 3/שניות ושבץ חזק.

[ ] שלד במקום ספינר איפה שאפשר.

[ ] המעברים הפיכים וצפויים.

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

אסימוני תנועה: משך/הקלה/סטגר עם דוגמאות.
”דפוסי מעבר”: מודלים, רשימות, לשוניות, דפים.
”A11y & ביצועים”: מדריך להפחתת תנועה ושילוב.
”דו/אל”: קטעים קצרים עם דוגמאות טובות/רעות.

תקציר

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