Σχεδιασμός κίνησης και κινούμενα σχέδια διεπαφής

1) Γιατί εμψύχωση στο προϊόν

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

Κανόνας # 1: σημαίνει> στυλ. Κάθε animation απαντά στην ερώτηση "τι συνέβη και πώς σχετίζεται με μένα ».

2) Βασικές αρχές

1. Ιεραρχία κίνησης: Τα εμπορευματοκιβώτια κινούνται πρώτα, μετά τα περιεχόμενα και μετά τα μέρη.
2. Συνέπεια: Τα ίδια πρότυπα για τις ίδιες δράσεις.
3. Εξοικονόμηση: ελάχιστες ιδιότητες, ελάχιστα πλαίσια. συντομότερη και σαφέστερη.
4. Ρεαλιστική φυσική: επιτάχυνση στην αρχή, επιβράδυνση στο τέλος. δεν υπάρχουν «κόπανοι».
5. Αναστρεψιμότητα: «πίσω» αισθάνεται καθρέφτης-όπως «προς τα εμπρός».
6. Προσβασιμότητα: Σεβασμός των ρυθμίσεων του συστήματος μείωσης κινουμένων σχεδίων.

3) Διάρκεια και καμπύλες (συστάσεις)

3. 1 Διάρκεια (Επιφάνεια εργασίας/κινητό)

Hover: 120-180ms

Εστίαση/πίεση: 80-120 мс

Εργαλείο/πρόποση: είσοδος 180-240ms, έξοδος 120-160ms

Modals/Drouers: 200-320 ms

Μετάβαση στην οθόνη: 240-360 ms

Κύλιση/Parallax: ≤ 200ms ανά τμήμα, αποφυγή άπειρων βρόχων

3. 2 Καμπύλες

Κύρια: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) '- φυσικός ρυθμός «υλικού»

Η είσοδος γίνεται γρηγορότερα, η έξοδος μαλακότερη: 'κυβικό-bezier (0. 05, 0. 7, 0. 1, 1)`

Ελαστικότητα (σπάνια, προφορά): "κυβικό-bezier (0. 2, 0. 8, 0. 2, 1. 2) "με όριο υπέρβασης ≤ 8px/8 °

Κανόνας: μην χρησιμοποιείτε γραμμική παρεμβολή για κινήσεις και αδιαφάνεια ταυτόχρονα - το αίσθημα της «μηχανικότητας».

4) Χορογραφία μετάβασης

Εμφάνιση: κλίμακα φωτός 0. 98→1. 0 + fade-in, 8-16 px όφσετ κατά μήκος του άξονα προέλευσης.
Εξαφάνιση: αντίστροφη τάξη, ταχύτερη από την είσοδο (− 20-30%).
Καμπύλες στροφής/αλλαγής: η γενική «βάση» (δοχείο) μετατοπίζεται κατά 16-24 px. η ενεργός καρτέλα επισημαίνεται πριν από την έναρξη της κίνησης.
Κατάλογοι: χαλάρωση του καταρράκτη (stagger 20-40 ms/στοιχείο, όχι περισσότερα από 6-8 στοιχεία).

5) Μικρο-αλληλεπιδράσεις (πρότυπα)

Κουμπί (hover/press): σκιά + φωτεινή υποκατηγορία/κλίμακα 0. 98; πιεσμένη αναπήδηση ≤ 80ms.
Εστίαση: δακτύλιος αντίθεσης χωρίς θολερότητα. πάχος/διαφάνεια κινουμένων σχεδίων αντί για λάμψη.
Εισροές: φωτισμός μεταφοράς/αγρού στην εστίαση. σφάλματα - ανακίνηση ≤ 6 px, ≤ 140 ms, 1 κύκλο.
Εναλλαγή/κιβώτιο ελέγχου: σπάσιμο στην τελική θέση, κάντε κλικ στην καθυστέρηση όχι περισσότερο από 60-80 ms.
Σκελετός/φορτίο: λαμπερά 1200-1600 ms, εύρος φωτεινότητας ≤ 20%, χωρίς αιχμηρές αναλαμπές.

6) Καταστάσεις περιεχομένου

Φόρτωση → επιτυχία/κενό/σφάλμα: ένα «κανάλι» κίνησης. μην αναμιγνύετε διαφορετικές κατευθύνσεις.
Τοστ/Προειδοποιήσεις: αφίξτε από την πηγή του γεγονότος (π.χ. κάτω δεξιά για τις ενέργειες των χρηστών).
Έλξη για ανανέωση: ελαστική τάση ελατηρίου. χρόνος επιστροφής ≤ 250 ms.

7) Προσβασιμότητα (A11y) και ασφάλεια

Υποστήριξη 'prefers-μειωμένη κίνηση: μείωση': Αντικατάσταση κινήσεων με ξεθωριασμένη/κλίμακα ≤ 1% ή στατική μετάβαση.
Αποφύγετε αναλαμπές> 3 ανά δευτερόλεπτο και μεγάλες αναλαμπές αντίθεσης (φωτοευαίσθητη επιληψία).
Μη χρησιμοποιείτε ισχυρή παράλλαξη/ζουμ σε χρήστες με ιστορικό ασθένειας κίνησης. να κάνει την επιλογή αποσύνδεσης.
Τα στυλ εστίασης είναι πάντα ορατά χωρίς εικονογράφηση (όχι μόνο χρώμα/κίνηση).

8) Επιδόσεις (60 FPS ως στόχος)

Κινείται μόνο η αδιαφάνεια και ο μετασχηματισμός (μετάφραση/κλίμακα/περιστροφή). να αποφεύγεται η «κορυφή/αριστερά/πλάτος/ύψος».
Συμπεριλαμβάνεται η σύνθεση: 'transform: translook Z (0)' ή 'will-change: transform, αδιαφάνεια'.
Ελαχιστοποιήστε την επανασύνδεση μη κινώντας μεγάλες σκιές θολών και φίλτρα σε πολλαπλά στοιχεία.
Σπάστε μεγάλες μεταβάσεις σε παρτίδες. χρήση animationFrame.
Για λίστες, εικονοποίηση εκτός οθόνης/αναδιάταξη.

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

: 'motion. {performance' easing 'stagger}. {role}' - 'hover', 'focus', 'overlayIn', 'pootTransition', '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) Μοτίβα φόρτωσης

Σκελετός αντί για ένα spinner όπου η δομή του περιεχομένου είναι γνωστή.
Πρόοδος: αποφασιστικός περιορισμός εάν είναι γνωστή η πρόοδος. απροσδιόριστο - με ομοιόμορφο ρυθμό, χωρίς «κόπανους».
Αποφεύγεται ο «επιπλέων» σκελετός κατά την ανακατασκευή - διαστάσεις κλειδώματος.

12) Μεταβάσεις σελίδας/οθόνης

Κρατήστε το σημείο προσοχής (μετάβαση από ένα κοινό στοιχείο) - το φύλλο «επεκτείνεται» στο μέρος.
Η ναυσιπλοΐα «βαθιά» προχωρά προς τα εμπρός/δεξιά/επάνω, «πίσω» - πίσω. η κατεύθυνση είναι η ίδια για την πλατφόρμα.
Το υπόστρωμα υποβάθρου σκουραίνει στο 40-60% στις επικαλύψεις.

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

Περιστροφή/Αποκάλυψη: μία σύντομη επιτάχυνση (≤ 200 ms) + ομοιόμορφη περιστροφή + απαλή εξασθένιση. απαγόρευση των άπειρων κύκλων χωρίς δράση.
Win/Jackpot: light splash ≤ 500 ms, no strobe? διπλός ήχος σε χαμηλό όγκο· το κείμενο της νίκης είναι ευανάγνωστο (AAA σε αντίθεση).
Τουρνουά/βαθμολογίες: αύξηση λογαριασμού - μετρητής με αριθμούς πίνακα και ελαφρύ βήμα 40-60 ms/μονάδα (παρτίδες), χωρίς διάταξη «άλματα».
Υπεύθυνο παιχνίδι: κοινοποιήσεις και όρια χωρίς αποσπασματικά αποτελέσματα. η εικονογράφηση είναι ελάχιστη, δίνεται έμφαση στην αναγνωσιμότητα.

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

Καθυστέρηση> 120ms για να κάνετε κλικ στην απάντηση.
«Ανελκυστήρας» από αδιαφάνεια + κλίμακα 0. 9→1. 05→1. 0 με υπερβολή για κάθε μικρό πράγμα.
Παράλλαξη φόντου που έρχεται σε σύγκρουση με τον πάπυρο.
Ατέρμονοι τρεμοπαίζοντες/παλμοί.
Κινούμενες ιδιότητες διάταξης/βαφής ('ύψος', 'αριστερά', 'φίλτρο: θολό ()') σε ένα σύνολο στοιχείων.
Μη σταθερές καμπύλες και διάρκειες για τις ίδιες ενέργειες.

15) Διαδικασία και διασφάλιση ποιότητας

• Πρωτότυπα με χρονοδιαγράμματα/καμπύλες. χορογραφία σε επίπεδο πλαισίου.
• Κατάλογος σημάτων κίνησης και παραδείγματα συστατικών στοιχείων.

• Δοκιμές ορατότητας/κατάστασης μονάδας (οι μεταβάσεις τελειώνουν όπως αναμενόταν).
• Οπτικές δοκιμές (στιγμιότυπα του τέλους των κινουμένων σχεδίων).
• Απόδοση/χρονοδιάγραμμα σε σκηνές με μέγιστο φορτίο.

• υποστηρίζεται η «προτιμώμενη-μειωμένη κίνηση».
• Μετασχηματισμός/αδιαφάνεια μόνο.
• Η διάρκεια και οι καμπύλες αντιστοιχούν σε μάρκες.
• Δεν υπάρχουν αναλαμπές> 3/sec και ισχυροί στρόβιλοι.
• Σκελετός αντί για spinner όπου είναι δυνατόν.
• Οι μεταβάσεις είναι αναστρέψιμες και προβλέψιμες.

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

Μάρκες κίνησης: διάρκεια/χαλάρωση/stagger με παραδείγματα.
«Πρότυπα μετάβασης»: μέθοδοι, λίστες, καρτέλες, σελίδες.
«A11y & Performance»: οδηγός για τη μείωση της κίνησης και της σύνθεσης.
«Do/Don»: σύντομα κλιπ με καλά/κακά παραδείγματα.

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

Ο σχεδιασμός κίνησης είναι η γλώσσα της αιτίας και του αποτελέσματος. Κρατήστε τις χρονικές στιγμές σύντομες, τις καμπύλες συνεπείς και τις ιδιότητες φθηνές. Σεβαστείτε τη διαθεσιμότητα, τις μάρκες εγγράφων και τις επιδόσεις ελέγχου. Στη συνέχεια, το animation θα ενισχύσει το UX και δεν θα επηρεάσει την ταχύτητα και τη σαφήνεια της διεπαφής.