Skip to main content
LanguageΕλληνικά
Φυσική & Μαρτυρίες4 λεπτά ανάγνωσηΟκτώβριος 2026

Τι είναι τα διακριτικά κίνησης και πώς λειτουργούν στα συστήματα σχεδιασμού;

Σύντομη απάντηση

Τα διακριτικά κίνησης ονομάζονται τιμές συστήματος σχεδίασης για κινούμενα σχέδια: διάρκειες, καμπύλες χαλάρωσης, ρυθμίσεις ελατηρίου και μερικές φορές αποστάσεις. Αντί να γράφουν 300ms ease-out σε κάθε στοιχείο, οι ομάδες χρησιμοποιούν ονόματα όπως motion.duration.medium ή motion.spring.gentle, έτσι ώστε η κίνηση να παραμένει σταθερή και να μπορεί να αλλάξει σε ένα μέρος.

Core Takeaway

  • Τα διακριτικά κίνησης αποθηκεύουν αποφάσεις χρονισμού: διάρκεια, χαλάρωση, ακαμψία ελατηρίου και απόσβεση
  • Ονομάστε τα κατά σκοπό (εισαγωγή, έξοδος, έμφαση) ή μέγεθος (κοντό, μεσαίο, μακρύ)
  • Κρατήστε ένα μικρό σετ: μερικές διάρκειες και μερικές καμπύλες ή ελατήρια
  • Συμπεριλάβετε μια παραλλαγή μειωμένης κίνησης για προσβασιμότητα
  • Αποθηκεύστε τα στον ίδιο αγωγό με χρώμα και απόσταση

Τα συστήματα σχεδίασης χρησιμοποιούν ήδη διακριτικά για το χρώμα, την απόσταση και την τυπογραφία. Τα διακριτικά κίνησης εφαρμόζουν την ίδια ιδέα στα κινούμενα σχέδια. Μετατρέπουν αποφάσεις όπως "τα μικρά στοιχεία κινούνται γρήγορα και εγκαθίστανται απαλά" σε επώνυμες αξίες που χρησιμοποιεί κάθε σχεδιαστής και προγραμματιστής.

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

Η ονομασία έχει σημασία. Τα ονόματα που βασίζονται στο σκοπό, όπως το motion.enter ή το motion.emphasis, είναι πιο εύκολο να εφαρμοστούν σωστά από τους μη επεξεργασμένους αριθμούς. Κρατήστε το σετ μικρό. Εάν κάθε στοιχείο αποκτήσει τη δική του καμπύλη, τα διακριτικά σταματούν να κάνουν τη δουλειά τους.

Η προσβασιμότητα ανήκει και στα token. Καθορίστε τι συμβαίνει όταν ο χρήστης ενεργοποιεί τη μειωμένη κίνηση, για παράδειγμα πιο κοντό ξεθωριασμό αντί για μεγάλη κίνηση, ώστε κάθε στοιχείο να το χειρίζεται με τον ίδιο τρόπο.

Τα token αποθηκεύονται συνήθως στο JSON και μετατρέπονται σε μεταβλητές CSS, Swift, Kotlin ή JavaScript από ένα εργαλείο δημιουργίας διακριτικών. Το δωρεάν Motion Token Generator παράγει ένα σετ εκκίνησης που μπορείτε να προσαρμόσετε.

Συχνές ερωτήσεις

Πόσα κουπόνια κίνησης χρειάζομαι;

Λιγότερο από όσο νομίζετε. Τρεις ή τέσσερις διάρκειες και δύο ή τρεις καμπύλες χαλάρωσης ή ελατήρια καλύπτουν τα περισσότερα προϊόντα.

Τα κουπόνια κίνησης πρέπει να χρησιμοποιούν ελατήρια ή διάρκειες;

Και τα δύο μπορούν να λειτουργήσουν. Τα ελατήρια αισθάνονται πιο φυσικά για διαδραστική και διακοπτόμενη κίνηση. Οι διάρκειες είναι απλούστερες για fades και CSS μεταβάσεις.

Πώς χειρίζονται τα διακριτικά κίνησης τη μειωμένη κίνηση;

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

Μπορεί το Figma να αποθηκεύσει διακριτικά κίνησης;

Μπορείτε να αποθηκεύσετε αριθμητικές τιμές σε μεταβλητές Figma, αλλά ο τρόπος με τον οποίο συνδέονται με μεταβάσεις πρωτότυπου είναι περιορισμένος. Οι περισσότερες ομάδες κρατούν την πηγή της αλήθειας σε ένα συμβολικό αρχείο.

Σχετικοί Οδηγοί & Παραδείγματα

Δημιουργήστε ένα αρχικό σύνολο διακριτικών κίνησης

Επιλέξτε διάρκειες, easing και ελατήρια, κάντε προεπισκόπηση και εξάγετε διακριτικά για CSS και JSON. Δωρεάν.

Ανοίξτε τη γεννήτρια διακριτικών
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →