Spring toggle
A spring, not a tween. It overshoots a hair and settles, so it feels physical.
spring 520 / 30 04.5 / ΚΙΝΗΣΗ ΓΙΑ WEB ΚΑΙ UI← Motion Graphics
Διεπαφές πουνιώθονται ζωντανές.
Ιστορίες κύλισης, μικροαλληλεπιδράσεις και μεταβάσεις σελίδων που κάνουν έναν ιστότοπο ευκολότερο να τον καταλάβεις και δυσκολότερο να τον ξεχάσεις, χωρίς κόστος σε ταχύτητα ή προσβασιμότητα.
ΔΕΙΤΕ ΤΗΝ ΤΕΧΝΗ
Το εργαστήριο κίνησης: επτά αλληλεπιδράσεις που μπορείτε να αγγίξετε
Πραγματική, λειτουργική κίνηση διεπαφής, όχι βίντεο. Εναλλάξτε, περάστε από πάνω, σύρετε και κάντε κλικ. Όλα εδώ σέβονται τις ρυθμίσεις μειωμένης κίνησης.
04Depth
0%
- Brief
- Boards
- Animate
- Ship
Φτιαγμένο από το studio Roaswell για να δείξει πώς δουλεύουμε. Όχι δουλειά πελάτη και όχι πραγματικό brand.
ΤΙ ΛΑΜΒΑΝΕΤΕΌ,τι χρειάζεται
Ό,τι χρειάζεται
για να παραδοθεί.
Καθορισμένα παραδοτέα, συμφωνημένα πριν ξεκινήσει η δουλειά, ώστε το εύρος να μην αποτελεί ποτέ έκπληξη.
01
Αρχές κίνησης
Tokens easing, χρονισμού και spring, ώστε κάθε αλληλεπίδραση να νιώθει ότι ανήκει σε ένα προϊόν.
02
Μεταβάσεις κύλισης και σελίδων
Ακολουθίες κύλισης με οδηγό την ιστορία και μεταβάσεις διαδρομών που καθοδηγούν την προσοχή, όπως αυτές σε αυτόν τον ιστότοπο.
03
Βιβλιοθήκη μικροαλληλεπιδράσεων
Κουμπιά, διακόπτες, μενού, κάρτες και φόρμες που αντιδρούν με σκοπό.
04
Κώδικας παραγωγής ή εξαγωγές
Καθαρό CSS και JavaScript ή εξαγωγές Lottie και βίντεο, έτοιμα για το stack σας.
05
Παραλλαγές προσβασιμότητας
Εναλλακτικές μειωμένης κίνησης και συμπεριφορά εστίασης σχεδιασμένες από την αρχή, όχι προστιθέμενες μετά.
06
Προϋπολογισμός απόδοσης
Η κίνηση μετριέται απέναντι στον χρόνο φόρτωσης και την καθυστέρηση αλληλεπίδρασης πριν κυκλοφορήσει.
ΠΩΣ ΤΡΕΧΕΙΑπό το brief
Από το brief
στο τελικό αποτέλεσμα.
Τέσσερα στάδια, το καθένα με σαφές αποτέλεσμα, ώστε να ξέρετε πάντα τι φτιάχνεται και γιατί.
Έλεγχος
Βρίσκουμε πού η κίνηση θα ξεκαθάριζε κάτι και πού θα πρόσθετε απλώς θόρυβο.
Θέτουμε τις αρχές
Ορίζουμε το λεξιλόγιο easing και χρονισμού ώστε οι αποφάσεις να μη λαμβάνονται κατά περίπτωση.
Πρωτότυπο στον browser
Χτίζουμε στο πραγματικό μέσο ώστε ό,τι εγκρίνετε να είναι ό,τι κυκλοφορεί.
Κυκλοφορούμε και μετράμε
Κυκλοφορούμε με προϋπολογισμό απόδοσης και βλέπουμε τι κάνουν πραγματικά οι χρήστες.
ΠΟΥ ΣΥΝΔΕΕΤΑΙΈνα studio.
Ένα studio.
Ένα σύστημα.
Η κίνηση δουλεύει καλύτερα όταν το brief της προέρχεται από δεδομένα και παραδίδεται εκεί όπου βρίσκεται ο προϋπολογισμός.
ΕΡΩΤΗΣΕΙΣΚαλές ερωτήσεις,
Καλές ερωτήσεις,
ευθείες απαντήσεις.
Δεν βρήκατε αυτό που χρειάζεστε; Ρωτήστε μας απευθείας και θα απαντήσει ένας senior.
Θα επιβραδύνει το animation τον ιστότοπό μας;
Όχι αν χτιστεί σωστά. Θέτουμε προϋπολογισμό απόδοσης, κάνουμε animation με τις φθηνότερες ιδιότητες και δοκιμάζουμε σε πραγματικές συσκευές.
Γράφετε εσείς τον κώδικα;
Ναι. Μπορούμε να παραδώσουμε κώδικα έτοιμο για παραγωγή ή να δώσουμε προδιαγραφές και εξαγωγές στην ομάδα σας για υλοποίηση.
Τι γίνεται με την προσβασιμότητα;
Κάθε κίνηση έχει εναλλακτική μειωμένης κίνησης και η συμπεριφορά πληκτρολογίου και αναγνωστών οθόνης σχεδιάζεται μαζί με το animation.
Δουλεύει με το CMS ή το framework μας;
Δουλεύουμε με τα περισσότερα σύγχρονα stacks. Πείτε μας τι τρέχετε και θα επιβεβαιώσουμε την καλύτερη προσέγγιση.
Μπορώ να το δω να δουλεύει;
Το κοιτάτε ήδη. Οι ακολουθίες κύλισης, οι μετρητές και οι αποκαλύψεις σε αυτόν τον ιστότοπο έχουν χτιστεί με την ίδια προσέγγιση.