Μικρο-αλληλεπιδράσεις: 15 παραδείγματα και πώς να τα σχεδιάσετε
Οι μικροαλληλεπιδράσεις εξηγούνται: ένας ορισμός, τα τέσσερα μέρη του Dan Saffer, 15 πραγματικά παραδείγματα ομαδοποιημένα ανά τύπο, κανόνες σχεδίασης και πώς να τα δημιουργήσετε σε CSS, Framer Motion, GSAP ή ExodeUI.
Core Takeaway
Μια μικροαλληλεπίδραση είναι μια μικρή, περιορισμένη στιγμή σε μια διεπαφή που κάνει ένα πράγμα: επισήμανση μιας ανάρτησης, εναλλαγή μιας ρύθμισης, επιβεβαίωση μιας φόρμας ή συμπλήρωση μιας χειρονομίας. Ο όρος και η ανατομία του προέρχονται από τον Dan Saffer, ο οποίος ορίζει τέσσερα μέρη. Το έναυσμα την εκκινεί, οι κανόνες αποφασίζουν τι θα συμβεί, η ανατροφοδότηση δείχνει το αποτέλεσμα και οι βρόχοι ή οι λειτουργίες διέπουν το τι κάνει με την πάροδο του χρόνου. Οι καλές μικρο-αλληλεπιδράσεις είναι σύντομες, ανταποκρίνονται στη συμβολή του ίδιου του χρήστη και παραμένουν διακοπτόμενες.
Τι είναι η μικροαλληλεπίδραση;
Μια μικρο-αλληλεπίδραση είναι η μικρότερη πλήρης αλληλεπίδραση σε ένα προϊόν: μια μεμονωμένη εργασία με αρχή, αλλαγή και τέλος. Δεν είναι ολόκληρη ροή. Το να κάνετε like σε μια ανάρτηση είναι μια μικρο-αλληλεπίδραση. Η σύνταξη και η δημοσίευση ενός σχολίου είναι μια ροή. Η ιδέα και η δομή της προέρχονται από το βιβλίο Microinteractions του Dan Saffer, το οποίο χωρίζει το καθένα σε τέσσερα μέρη.
Τα τέσσερα μέρη μιας μικρο-αλληλεπίδρασης
Το πλαίσιο του Dan Saffer χωρίζει μια μικρο-αλληλεπίδραση σε τέσσερα στοιχεία. Η ονομασία τους είναι χρήσιμη γιατί τα περισσότερα σφάλματα και οι περισσότερες κακές κινήσεις ζουν σε ένα από τα τέσσερα, όχι στο σύνολο.
Σκανδάλη
Το γεγονός που το ξεκινά. Εκκίνηση χρήστη (πάτημα, τοποθέτηση του δείκτη, παρατεταμένο πάτημα, μεταφορά) ή εκκίνηση του συστήματος (ολοκλήρωση λήψης, άφιξη σφάλματος δικτύου). Πίστωση: Dan Saffer.
Κανόνες
Τι συμβαίνει μόλις ξεκινήσει: έγκυρες καταστάσεις, περιορισμοί όπως όρια μεταφοράς ή ελάχιστες και μέγιστες τιμές και η ακολουθία γεγονότων. Πίστωση: Dan Saffer.
Ανατροφοδότηση
Πώς το προϊόν λέει στον χρήστη τι συνέβη: η άνοιξη, η αλλαγή χρώματος, η μορφοποίηση του εικονιδίου, η ενημέρωση κειμένου. Εδώ ζει το μεγαλύτερο μέρος του σχεδίου κίνησης. Πίστωση: Dan Saffer.
Βρόχοι και λειτουργίες
Τι κάνει η αλληλεπίδραση με την πάροδο του χρόνου και πώς την αλλάζουν οι λειτουργίες. Η ίδια εναλλαγή μπορεί να συμπεριφέρεται διαφορετικά στη σκοτεινή λειτουργία ή σε μια συμπαγή διάταξη χωρίς να αλλάξει η λογική της. Πίστωση: Dan Saffer.
Γιατί οι μικροαλληλεπιδράσεις έχουν σημασία
Μια μικρο-αλληλεπίδραση είναι ο τρόπος με τον οποίο μια διεπαφή απαντά στον χρήστη χωρίς μια παράγραφο κειμένου. Επιβεβαιώνει ότι ελήφθη μια ενέργεια, δείχνει ότι κάτι εξακολουθεί να λειτουργεί ή εξηγεί τι μόλις άλλαξε. Όταν λείπουν, το ίδιο προϊόν αισθάνεται πιο βαρύ: οι χρήστες αγγίζουν δύο φορές επειδή τίποτα δεν τους είπε ότι το πρώτο άγγιγμα προσγειώθηκε ή περιμένουν σε μια οθόνη που δεν έδινε σημάδια προόδου. Τα καλά γίνονται αισθητά περισσότερο από τα παρατηρούμενα, αυτό είναι το ζητούμενο.
15 παραδείγματα μικροαλληλεπίδρασης
Αυτά ομαδοποιούνται ανάλογα με το τι επικοινωνούν. Όπου το ExodeUI αποστέλλει ένα αντίστοιχο παράδειγμα, δίνεται το όνομα ώστε να μπορείτε να το ανοίξετε και να το επεξεργαστείτε.
Κουμπιά και εναλλαγές (πάτημα και κατάσταση)
1. Πάτημα κουμπιού: κλιμάκωση σε περίπου 0,92 με το δείκτη προς τα κάτω και ελατήριο πίσω κατά την απελευθέρωση (παράδειγμα ExodeUI: Κουμπί ζελέ). 2. Διακόπτης εναλλαγής: μετάφραση βασισμένη σε ελατήριο με αλλαγή χρώματος κατά την δέσμευση (Gooey Toggle). 3. Διακόπτης λειτουργίας: ένα τμηματοποιημένο χειριστήριο που ολισθαίνει την ένδειξη του και μεταμορφώνει την ενεργή ετικέτα (Διακόπτης κίνησης).
Σχόλια φόρμας (επικύρωση και υποβολή)
4. Μη έγκυρο κούνημα εισόδου: μια σύντομη οριζόντια ώθηση που λέει "ελέγξτε αυτό το πεδίο" χωρίς διάλογο (Wiggle Text Input). 5. Υποβολή σε εξέλιξη: το κουμπί γίνεται ο δείκτης προόδου, έτσι ώστε ο χρήστης να μην χάνει ποτέ τη θέση του (Κινούμενο κουμπί αποστολής). 6. Επιβεβαίωση επιτυχίας: μια μικρή εορταστική έκρηξη στο κουμπί κατά την προσγείωση της δράσης (κουμπί εκτόξευσης πυραύλων).
Φόρτωση και πρόοδος
7. Κυκλική πρόοδος: ένας δακτύλιος που γεμίζει στην πραγματική τιμή και καθιζάνει με ένα ελατήριο (Radial Gauge). 8. Μετρητής επιπέδου ή δραστηριότητας: μια γραμμή που αντιδρά ζωντανά στα εισερχόμενα δεδομένα, όπως το επίπεδο ήχου (Sound Wave).
Πλοήγηση
9. Εναλλαγή μενού: ένα εικονίδιο που μεταμορφώνεται μεταξύ δύο καταστάσεων και αποκαλύπτει το μενού στη θέση του (Morph Nav). 10. Μεγέθυνση βάσης: τα στοιχεία κοντά στον κέρσορα ανυψώνονται και μεγαλώνουν και στη συνέχεια καθιζάνουν (Μαγνητική βάση). 11. Επιλογή καρτελών: μια ένδειξη που ολισθαίνει μεταξύ καρτελών αντί να αναβοσβήνει (Liquid Tab Bar).
Άδειες και πολιτείες επιτυχίας
12. Κενή κατάσταση: μια μικρή εικόνα που ζωντανεύει μια φορά για να μαλακώσει μια κενή οθόνη. 13. Αποκάλυψη ανταμοιβής: ένα δώρο ή ένα σήμα που ανοίγει με προσμονή όταν επιτευχθεί ένα ορόσημο (Surprise Gift Box).
Τραβήξτε για ανανέωση
14. Τραβήξτε για ανανέωση: ελαστική υπερκύλιση που παρακολουθεί την έλξη και, στη συνέχεια, αναπηδά και σταθεροποιείται κατά την απελευθέρωση. Η ανατροφοδότηση είναι το τέντωμα, όχι μια περιστροφή.
Ανατροφοδότηση σε στυλ απτικών
15. Παλμός επιβεβαίωσης: μια σύντομη κλίμακα και λάμψη στο στοιχείο που αντικατοπτρίζει το απτικό άγγιγμα στο κινητό, έτσι ώστε η ίδια δράση να έχει την ίδια αίσθηση σε μια συσκευή χωρίς κινητήρα δόνησης.
Κανόνες σχεδίασης που τα κρατούν καλά
Μερικοί κανόνες διαχωρίζουν μια μικρο-αλληλεπίδραση που βοηθά από αυτή που ενοχλεί.
- Κρατήστε το σύντομο: το πιο ολοκληρωμένο σε περίπου 200-400ms. Η μεγαλύτερη κίνηση σε ένα μικρό στοιχείο είναι αργή
- Ξεκινήστε στο ίδιο πλαίσιο με την είσοδο. μια καθυστερημένη έναρξη σπάει την αίσθηση της αιτίας και του αποτελέσματος
- Διατηρήστε το διακοπτόμενο: εάν ο χρήστης αντιστρέψει την ενέργεια στη μέση της κίνησης, ανακατευθύνετε με ταχύτητα αντί να κάνετε επανεκκίνηση από το μηδέν
- Respect prefers-reduced-motion: παρέχετε ένα στατικό ή cross-fade backback που εξακολουθεί να επικοινωνεί την αλλαγή
- Δώστε του μια δουλειά: αν η αλληλεπίδραση χρειάζεται περισσότερες από μία αποφάσεις, είναι μια ροή
Πώς να δημιουργήσετε μικρο-αλληλεπιδράσεις
Το σωστό εργαλείο εξαρτάται από το πόσες πλατφόρμες πρέπει να εκτελεστεί η ίδια αλληλεπίδραση.
CSS μόνο
Κατάλληλο για απλές, αυτόνομες περιπτώσεις: ανυψώσεις αιώρησης, δακτύλιοι εστίασης και εναλλαγές που οδηγούνται από :checked ή αλλαγή κατηγορίας. Οι μεταβάσεις και τα @keyframes είναι αρκετά και δεν υπάρχει τίποτα για αποστολή πέρα από το φύλλο στυλ.
Framer Motion ή GSAP (ιστός)
Καλό όταν η κίνηση χρειάζεται ελατήρια, χειρονομίες ή ενορχήστρωση και πρέπει να εκτελείται μόνο στον Ιστό. Και τα δύο σας παρέχουν διακοπτόμενα ελατήρια και μπορούν να οδηγηθούν από την κατάσταση React.
ExodeUI (ιστός, iOS και Android από ένα αρχείο)
Χρησιμοποιήστε το όταν η ίδια αλληλεπίδραση πρέπει να συμπεριφέρεται πανομοιότυπα σε μια εφαρμογή React, μια εφαρμογή SwiftUI και Flutter. Το γράφετε μία φορά σε ένα αρχείο .exode και ο χρόνος εκτέλεσης το αναπαράγει σε κάθε πλατφόρμα, επομένως δεν υπάρχει επανεγγραφή ανά πλατφόρμα.
Απόσπασμα υλοποίησης παραγωγής
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Κλειδί Principles για να θυμάστε
- Μια μικροαλληλεπίδραση είναι μια μικρή εργασία με έναυσμα, κανόνες, ανατροφοδότηση και βρόχους ή λειτουργίες, τα τέσσερα μέρη που ονομάστηκαν από τον Dan Saffer
- Τα περισσότερα καλά ολοκληρώνονται σε περίπου 200-400ms, ξεκινούν στο ίδιο πλαίσιο με την είσοδο και παραμένουν διακοπτόμενα
- Η ανατροφοδότηση είναι αυτό που λειτουργεί: επιβεβαιώνει τη δράση και εξηγεί τι άλλαξε, συχνά χωρίς κείμενο
- Να παρέχετε πάντα μια εναλλακτική επιλογή προτιμήσεων μειωμένης κίνησης που μεταφέρει τις ίδιες πληροφορίες χωρίς κίνηση