Συγχρονισμός κινουμένων σχεδίων και αντίληψη UX

1) Γιατί ο συγχρονισμός είναι κρίσιμος

• αίσθηση άμεσης απόκρισης και εμπιστοσύνης στο σύστημα·
• σαφήνεια αιτίου και αποτελέσματος (από/προς το οποίο έχει μετακινηθεί το στοιχείο)·
• κόπωση και άνεση σε μεγάλες συνεδρίες·
• ακρίβεια των ενεργειών (ιδίως σε κινητές και σε υψηλές ταχύτητες).

Ο κανόνας: ο συγχρονισμός εξυπηρετεί έναν σκοπό. Αν η εικονογράφηση δεν βοηθά στην κατανόηση του «τι συνέβη», παρεμβαίνει.

2) Ψυχοφυσική και κατώτατα όρια

• 50 ms - είσοδος ηχώ (εκτύπωση, επίδραση κλικ)· φαίνεται άμεση.
• 100 ms - η πρώτη οπτική ανατροφοδότηση με δράση (το κουμπί «πατημένο»).
• 120-180 ms - hover/εστίαση, μετάβαση σε ήπια κατάσταση.
• 180-280 ms - μέθοδοι/πάνελ· θεωρείται ως μια «φυσική» εμφάνιση.
• 300-500 ms - κοινό στοιχείο, βήμα προόδου.
💡 700 ms - κίνδυνοι «βραδύτητας», να αποχωρήσει μόνο εάν έχει νόημα (για παράδειγμα, επιβεβαίωση νίκης).
• 1200-1600 ms - σκελετός/λαμπερός κύκλος; περισσότερο - κουραστικό.

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-40ms): ελαφρύ ξεθώριασμα/κλίμακα 0. - σήμα εκκίνησης.

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 }
}
}

Ονομασία: 'motion. διάρκεια. {ρόλος} 'и' κίνηση. χαλάρωση. {role} '- τα κατασκευαστικά στοιχεία και το Figma είναι τα ίδια για τον κινητήρα.

9) Εφαρμογή: CSS και Framer Motion

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) Σύνθεση του χρόνου: παράλληλη προς ακολουθία

Παράλληλα (ξεθωριάζει + μεταφράζεται ταυτόχρονα) - γρηγορότερα στην αίσθηση.
Η ακολουθία (δοχείο πρώτα, τότε περιεχόμενο) είναι σαφέστερη δομή, αλλά μεγαλύτερη. Εφαρμόστε όταν είναι σημαντικό να δείξετε την ιεραρχία.
Αποφύγετε τα βήματα> 60 ms μεταξύ στενά συνδεδεμένων στοιχείων στο ίδιο μπλοκ.

11) Χρονοδιάγραμμα και περιεχόμενο

Κείμενο: μην κινείται γράμμα/λέξη προς λέξη σε προϊόντα. είναι μια τεχνική μάρκετινγκ.
Αριθμοί/μετρητές: βήμα 40-60 ms batchami, καμία διάταξη jitter (tabular-nums).
Γραφικά: εναρκτήρια σειρά 180-240 ms, hover-highlight ≤ 120 ms.

12) Προσβασιμότητα και σφάλμα αντίληψης

Τα στυλ εστίασης πρέπει να εμφανίζονται χωρίς καθυστέρηση.
Προειδοποιήσεις/σφάλματα - ελάχιστη εικονογράφηση (≤ 120 ms), καμία ανακίνηση εάν ο χρήστης είναι με AT (βοηθητική τεχνολογία).
Αποφεύγονται οι αναλαμπές> 3/s και τα μεγάλα flickers αντίθεσης.

13) Οι ιδιαιτερότητες του iGaming

• Πιέστε ≤ 100 ms. κατάσταση «αμετάκλητα»· τελική πρόποση/δείκτης - καμία καθυστέρηση.
• Ο χρόνος απόκρισης UI είναι πιο σημαντικός από την επιβεβαίωση κινουμένων σχεδίων: η επιβεβαίωση είναι σύντομη 120-160 ms.

• Εκκίνηση ≤ 200 ms, ομοιόμορφος κύκλος, πέδηση 300-500 ms. όχι ατελείωτα τρεμοπαίζοντα.
• Διάρρηξη νίκης ≤ 500 ms, χωρίς στρόβιλο. Το κείμενο του ποσού είναι AAA.

• Επικαιροποιήσεις ανά παρτίδες (250-1000 ms) οπτικό diff ≤ 160 ms· χωρίς άλματα διάταξης.
• Σε hover/εστίαση - debunk backlight 80-120 ms έτσι ώστε να μην «αναβοσβήνει».

14) Αντι-μοτίβα

Γραμμικές καμπύλες για κινήσεις (αίσθημα «μηχανικής»).
Διάρκεια> 400 ms για απλές καταστάσεις κουμπιού.
Καταρρέει 100 + ms σύμφωνα με μια λίστα με δεκάδες στοιχεία (έλξη).
Σκιές/θολώσεις σε εκατοντάδες στοιχεία στο animation.
Ασυνέπεια: ίδιες ενέργειες με διαφορετικές χρονικές στιγμές στο ίδιο προϊόν.
Καθυστερημένη εστίαση ή καθυστέρηση στην ενεργοποίηση πληκτρολογίου.

15) Κατάλογος χρονοδιαγράμματος QA

Συνέπεια

• Χρονοδιαγράμματα και καμπύλες λαμβάνονται από μάρκες, το ίδιο για τις ίδιες ενέργειες.

Απόκριση

• Πιέστε/αιωρήστε/εστιάστε ταιριάζει στην κλίμακα των 80-180 ms.
• Η πρώτη οπτική απόκριση ≤ 100 ms.

Χορογραφία

• Η είσοδος και η έξοδος είναι συμμετρικές. η έξοδος είναι 15-30% ταχύτερη από την είσοδο.
• Ο καταρράκτης δεν υπερβαίνει τα 8 στοιχεία και τα 40 ms βήμα.

A11y

• υποστηρίζεται η «προτιμώμενη-μειωμένη κίνηση»· επικέντρωση χωρίς καθυστέρηση.
• Δεν αναβοσβήνει> 3/s.

Επιδόσεις

• Κινείται μόνο «μετασχηματισμός/αδιαφάνεια». καμία θολερότητα/σκιές μάζας.

16) Τεκμηρίωση στο σύστημα σχεδιασμού

«Motion Tokens»: διάρκεια/χαλάρωση/stagger + χάρτης εφαρμογής (κουμπί, επικάλυψη, καρτέλα, λίστα).
«Ρυθμός & Φάση»: διαδοχικά συστήματα και συστήματα αναστρεψιμότητας.
«Μείωση της κίνησης»: κανόνες και παραδείγματα υποβάθμισης.
«Do/Don»: σύντομα κλιπ με χρονοδιαγράμματα και μετρήσεις-στόχους (INP/First Feedback).

Σύντομη Περίληψη

Ο καλός συγχρονισμός είναι μια άμεση απόκριση, κατανοητή χορογραφία και οικονομικές καμπύλες. Διατηρούν σύντομες διάρκειες για τις μικρο-καταστάσεις, τεντώνονται μόνο εκεί όπου προσθέτει νόημα, διατηρούν μειωμένη κίνηση, και δεν κινούνται «ακριβές» ιδιότητες. Στη συνέχεια, η διεπαφή αισθάνεται ζωντανή και αξιόπιστη - ειδικά σε σενάρια σε πραγματικό χρόνο και υψηλού επιπέδου.