Hover επιδράσεις και διαδραστικότητα

1) Καθοδηγητικός ρόλος στην UX

• «Είναι διαδραστικό» (hover/δρομέας/highlight)
• «Πού είμαι» (στυλ εστίασης),
• «Τι συμβαίνει με κλικ» (καθεστώς και προσιτότητα),
• «Λειτούργησε η δράση» (ενεργός/πιεσμένη και επακόλουθη ανατροφοδότηση).

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

2) Κρατικό μοντέλο και σημασιολογία

Σύνολο βάσης: 'εξ ορισμού' → 'hover' → 'focus' → 'active/pressed' → 'disabled' → 'loading' (προαιρετικά).
Για τους συνδέσμους προσθέτουμε «επίσκεψη», για τους διακόπτες - «έλεγχος».

• Μεταξύ των καταστάσεων - μια οπτική διαφορά στο σχήμα/πάχος/εικονίδιο, όχι μόνο το χρώμα.
• Κείμενο/εικονίδιο σε αντίθεση με το ιστορικό: ≥ 4. 5:1 (απλό κείμενο), ≥ 3:1 (μεγάλο/τολμηρό).
• Η εστίαση είναι ορατή χωρίς ένδειξη (ανάγνωση πληκτρολογίου/οθόνης).

3) Συσκευές και αιτήματα για μέσα μαζικής ενημέρωσης

css
/ There is an exact pointer and hover (mouse/trackpad )/
@ media (hover: hover) and (pointer: fine) {/hover effects/}

/ No hover or rough pointer (touch/remote control )/
@ media (hover: none), (pointer: coarse) {/alternatives to hover/}

/ Any type of pointer (hybrid devices )/
@ media (any-hover: hover) {/minimal improvements/}

• Στις συσκευές αφής, τα φαινόμενα κατάδειξης δεν είναι κρίσιμα για την ανίχνευση της δράσης - χρησιμοποιήστε ρητές προσφορές: χρώμα/εικονίδιο/πλαίσιο/υπόδειξη.
• Μη κρύβετε την πλοήγηση/χειριστήρια μόνο «υπό αιώρηση».

4) Διάρκεια και καμπύλες

• Hover: 120-180ms
• Εστίαση: 120-180ms
• Ενεργός/Συμπιεσμένος: 80-120 мс
• Κυματισμός/μελάνι (εάν χρησιμοποιείται): ≤ 240 ms, 1 κύκλος

Η προκαθορισμένη καμπύλη είναι 'κυβικό-bezier (0. 2, 0, 0. 2, 1)`

Ενεργό - γρηγορότερο ('κυβικό-bezier (0. 4, 0, 1, 1) '), η έξοδος είναι πιο ήπια (' cubic-bezier (0, 0, 0. 2, 1)`).

5) Μάρκες συστήματος σχεδιασμού (παράδειγμα)

json
{
"interactive": {
"duration": { "hover": 160, "focus": 160, "active": 90 },
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"shadow": { "hover": "var(--elev-2)", "focus": "0 0 0 3px var(--focus-ring)" },
"opacity": { "disabled": 0. 38, "muted": 0. 64 }
}
}

6) Κουμπιά: πρότυπο αναφοράς

Προκαθορισμένο: αναγνώσιμο κείμενο ≥ 4. 5:1 για πλήρωση.
Hover: − Δ L φόντο 0. 02–0. 04, σκιά φωτός, δείκτης '.
Ενεργό: − περισσότερο Δ L 0. 02–0. 04, συντομευμένη σκιά/εσοχή (κλίμακα 0. 98), διαρκεί. 80-100 ms.
Εστίαση: δακτύλιος αντίθεσης 2-3 px χωρίς θολό.
Απενεργοποιημένο: курсор 'μη επιτρεπόμενο '/' εξ ορισμού', αδιαφάνεια ≤ 0. 38, δεν υπάρχουν επιδράσεις στο hover.

css
.button {
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.button:hover  { background: var(--btn-bg-hover); box-shadow: var(--shadow-hover); }
}
.button:active  { transform: scale(.98); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.button[disabled] { opacity:.38; pointer-events: none; }

7) Σύνδεσμοι και δράσεις κειμένου

Διάκριση όχι μόνο από το χρώμα: έμφαση εξ ορισμού ή στο hover/εστίαση.
Για καθοδήγηση: υπογραμμίστε την ενίσχυση (πάχος/όφσετ), ελαφρά αλλαγή του τόνου.
"Επισκεφθείτε 'είναι μια διαφορετική απόχρωση της ίδιας παλέτας, η αντίθεση διατηρείται.

css a { text-decoration: underline; text-underline-offset:.12em; }
@media (hover:hover) and (pointer:fine) {
a:hover { text-underline-offset:.2em; }
}
a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

8) Κάρτες, λίστες, πίνακες

• Hover: απαλή σκιά/στιγμιότυπο πλαισίου, δρομέας 'pointer' μόνο αν ολόκληρο το φύλλο είναι clickable.
• Ενεργός: σύντομη εσοχή, προβολή τίτλου.
• Εστίαση: ένας ορατός δακτύλιος γύρω από την κάρτα, όχι μόνο μέσα.

• Hover φόντο με Δ L 0. 02–0. 04; η ενεργός σειρά είναι ένα σαφές σύνορο.
• Τα κλικ σε μια γραμμή επιτρέπονται μόνο με ρητή προσφορά (εικονίδιο «→», υπόδειξη).

• Περιορισμός προσεκτικά της «κλίμακας» των καθυστερήσεων καταρράκτη - μέγιστο 6-8 στοιχείων (stagger 20-30 ms).

9) Έντυπα και πεδία εισροών

Hover για πεδία: λεπτός οπίσθιος φωτισμός του πλαισίου (Δ L ~ 0. 05), χωρίς να αλλάξει το μέγεθος του συγκροτήματος.
Εστίαση: ring αντίθεσης + αλλαγή χρώματος πλαισίου; ο κάτοχος της θέσης παραμένει διακριτός (≥ 3:1).
Σφάλμα: χρώμα + εικονίδιο/κείμενο; Η σύντομη «ανακίνηση» ισχύει ≤ 6 px, ≤ 140 ms, μία φορά.

10) Εικονίδια και μικροί στόχοι

Αύξηση της ζώνης κλικ σε 32 × 32 (επιφάνεια εργασίας )/40 × 40 (κινητό), ακόμη και αν το ίδιο το εικονίδιο είναι 20-24 px.
Αιώρηση: μεταβολές αδιαφάνειας/πλήρωσης/πάχους, μέγιστες ιδιότητες 1-2.
Ενεργό: σύντομο «σπάσιμο» κατά κλίμακα 0. 98.
Εστίαση: δακτύλιος με κλικ στον περιέκτη ζώνης.

11) Προσβασιμότητα (A11y) και πληκτρολόγιο

Υποστήριξη ': εστίαση-ορατή' (δεν δείχνουμε στυλ εστίασης για το ποντίκι, τα δείχνουμε για το πληκτρολόγιο).
Τα στοιχεία που δημιουργούν ενδείξεις hover πρέπει να έχουν ισοδύναμο εστίασης (το ίδιο περιεχόμενο εμφανίζεται στο πλήκτρο Tab/Enter).
Aria-χαρακτηριστικά: οι αλληλεπιδράσεις έχουν «ρόλο», «aria-pressed »/« aria-expanded »/« aria-current» ανά κατάσταση.
Προτιμάται η μειωμένη κίνηση: αντικαθίσταται η κλίμακα/μετατόπιση με την ελάχιστη (αδιαφάνεια/πλήρωση), απενεργοποιούνται οι κυματισμοί.

css
@media (prefers-reduced-motion: reduce) {
{ transition-duration:.01ms! important; animation: none! important; }
}

12) Επιδόσεις

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

13) Hover-intent και «stickiness»

• Το όριο καθυστέρησης είναι 80-120 ms πριν εμφανιστεί ένα σύνθετο εργαλείο/μενού.
• «Κολλητότητα» του δρομέα: αν ο χρήστης μετακινηθεί από το αντικείμενο στο μενού υπό γωνία, δίνουμε 200-300 ms του «διαδρόμου» (τρίγωνο Fitts).
• Με ένα άγγιγμα - αντικαταστήστε το hover με πάτημα ή με ένα ρητό κουμπί «περισσότερα».

14) Tooltip/μενού/dropdowns

Άνοιγμα: hover-intent (desktop )/press (touch), κλείσιμο - care/blur/ESC.
Θέση - στην πηγή, το βέλος ευθυγραμμίζεται. ενεργοποιούνται το μέγιστο πλάτος και η εναπόθεση.
Διαθεσιμότητα: 'role =' tooltip '', συσχετισμός 'aria-descripedby', για το μενού - 'role =' menu '' + arrow control.

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

Συντελεστές/προεξοχές: το hover αναδεικνύει τη σειρά/το κύτταρο, αλλά δεν αλλάζει τις μετρήσεις τοποθέτησης (χωρίς «άλματα»).
Κάρτες τουρνουά/μπόνους: το hover μπορεί να «αναβιώσει» το πλαίσιο/εικονίδιο, αλλά το κείμενο CTA και οι συνθήκες παραμένουν αναγνώσιμες (≥ 4. 5:1).
Υπεύθυνες κοινοποιήσεις (18 +, όρια): χωρίς αποτελέσματα περισπασμού· Το hovering επιτρέπει μόνο την έμφαση των συνδέσμων και τη σαφή εστίαση.
Ποντάρισμα/αγορά κουμπιών: η ενεργός ανατροφοδότηση είναι υποχρεωτική (οπτικό κλικ/περίπτωση) και σαφής απενεργοποίηση μετά την αποστολή.

16) Παραδείγματα συνταγών διεπαφής

css
.cta {
background: var(--role-primary);
color: var(--on-primary);
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.cta:hover { background: var(--role-primary-hover); box-shadow: var(--elev-2); }
}
.cta:active { transform: scale(.98); }
.cta:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.card { transition: box-shadow. 16s var(--ease), border-color. 16s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.card:hover { box-shadow: var(--elev-2); border-color: var(--border-strong); }
}
.card:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.table tr { transition: background-color. 12s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.table tr:hover { background: var(--row-hover); }
}
.table tr:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

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

Απόκρυψη κρίσιμων δράσεων/μενού μόνο για αιώρηση.
Αλλαγή μεγεθών/διατάξεων σε hover (άλματα διάταξης).
Βασιστείτε μόνο στο χρώμα για να διακρίνετε καταστάσεις.
Τρεμοπαίζοντας, ατελείωτοι παλμοί, «οξύ» λάμπουν σε κείμενα.
Έλλειψη στυλ εστίασης ή της αορατότητάς τους σε ένα σκοτεινό θέμα.
Hover 'pointer' πάνω από μη διαδραστικά στοιχεία.

18) Κατάλογος ελέγχου QA

Διαθεσιμότητα

• Όλες οι αλληλεπιδράσεις είναι προσβάσιμες με πληκτρολόγιο. βλέπουμε να επικεντρώνεται.
• Το περιεχόμενο Hover διατίθεται από το «focus »/« aria».
• Η αντίθεση κειμένου και εικονιδίων αντιστοιχεί σε WCAG.

Συμπεριφορά

• Hover/ενεργό/με αναπηρία/επίσκεψη διακρίνονται από το σχήμα και τον τόνο.
• Καμία καθυστέρηση απόκρισης> 120ms.
• Υπάρχει μια εναλλακτική λύση για να αιωρείται στο άγγιγμα.

Απόδοση

• Μόνο «μετασχηματισμός »/« αδιαφάνεια» είναι κινούμενα σχέδια.
• Δεν βαριές θολώσεις/σκιές σε πολλαπλά στοιχεία.
• Στους μεγάλους καταλόγους, τα αποτελέσματα ελαχιστοποιούνται.

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

Πίνακας κατάστασης για βασικά στοιχεία (κουμπιά, σύνδεσμοι, κάρτες, πεδία, σειρές τραπεζιών).
Διάρκεια/καμπύλη/σκιώδεις μάρκες και κωδικός δείγματος για το φως/το σκοτάδι.
Τμήμα «Hover vs Touch»: κανόνες εναλλακτικών λύσεων και παραδείγματα.
«Do/Don» με σύντομα κλιπ και σκορ αντίθεσης.

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

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