Διεπαφή καρτών και οπτικά μπλοκ

1) Γιατί φύλλα

• ταχεία σάρωση,
• δίνει ένα κύριο CTA,
• προσαρμόζεται σε διαφορετικά δοχεία/στήλες,
• προβλέψιμο στη συμπεριφορά (hover, press, focus, entition menu).

2) Ανατομία κάρτας

1. Ζώνη πολυμέσων (κάλυμμα/λογότυπο/προεπισκόπηση, 16: 9/4: 3/1: 1).

2. Κεφαλίδα (κατακερματισμένες γραμμές 1-2).

3. Μεταδεδομένα (υπότιτλος, ετικέτα/κατηγορία, πάροχος, χρόνος).

4. Σήματα κατάστασης (νέα, ζωντανά, προώθηση, αξιολόγηση).

5. CTA/ταχείες ενέργειες (κουμπί ή εικονίδια).

6. Δευτερεύον κείμενο (σύντομες, 2-3 μέγιστες γραμμές).

7. Έλεγχος (αγαπημένα,... πλαίσιο).

Ιεραρχία: media → header → CTA → meta → secondary. Οι καταστροφικές ενέργειες είναι κρυμμένες ή εμφανίζονται στο μενού.

3) Δίκτυα και διατάξεις

Πλέγμα (σταθερή στήλη): 2-6 στήλες· ■ μέσω αυτόματης τοποθέτησης/αυτόματης πλήρωσης.
Πλακάκια που ανταποκρίνονται: 'minmax (240px, 1fr)' - τα φύλλα μεγαλώνουν ακριβώς στα σύνορα.
Τοιχοποιία/διαφορετικό ύψος: προσεκτική. εξασφαλίζει τη σειρά εστίασης και την αναγνωσιμότητα.
Κατάλογος (στη σειρά): όταν η οριζόντια οικονομία και η διαλογή είναι σημαντικές.

css
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
gap: 16px;
}
.card {
border-radius: 12px;
background: var(--bg-elevated);
box-shadow: var(--elev-2);
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
}
.card__media { aspect-ratio: 16/9; object-fit: cover; }

4) Πυκνότητα και ρυθμός

Περιθώρια/περιπτώσεις: εντός 12-16 px· μεταξύ των μονάδων 8-12 px.
Ύψος γραμμής: 1. 3–1. 5; γραμματοσειρές: τίτλος 16-18 px, meta 12-14 px.
Αποκοπή κειμένου: «σφιγκτήρας γραμμής: 2-3», υποχρεωτικό πλήρες κείμενο σε εργαλεία/λεπτομέρειες.

5) Κράτη και διαδραστικότητα

Hover/Focus/Active: σκιά/highlight, αλλά χωρίς διάταξη «άλματα», ': ορατή εστίαση' πάντα ορατή.
Επιλέξιμο: κιβώτιο ελέγχου/πλαίσιο. να μην συγχέεται με κάρτα αναφοράς.
Πιεσμένη: μείωση έως 98% + σκιά προς τα κάτω (≤ 120 ms).
Απασχολημένος/Φόρτωση: σκελετός, όχι «άδειος».

css
.card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.card:hover { box-shadow: var(--elev-3); transform: translateY(-1px); transition: box-shadow. 16s, transform. 16s; }

6) Εικόνες και μέσα

Ο λόγος διαστάσεων είναι σταθερός. στους καταλόγους παιχνιδιών - 16:9 ή 4:3.
Τεμπέλης φόρτωσης:' φόρτωση =» τεμπέλης»' +' αποκωδικοποίηση =» async»'.
Κάτοχος θέσης/σκελετός με κυρίαρχο χρώμα αφίσας.
Σφάλμα φόρτωσης: εικονική εικόνα + εικονίδιο απενεργοποίησης εικόνας.

html
<img class = "card __ media" src ="..." alt = "Game name" loading =" lazy" onerror =" this. src='/fallback. png'">

7) Σήματα και ετικέτες

Σύντομη (1-2 λέξεις): Νέα, ζωντανή, -20%, Top 10.
Δεν μπορείτε να βασιστείτε μόνο στο χρώμα - προσθέστε ένα εικονίδιο/κείμενο.
Θέση: αριστερά μέσα· αρκετά - σε μια στοίβα με κενό 4-6 px.

css
.badge { display:inline-flex; gap:6px; align-items:center; padding:4px 8px; border-radius:8px; font-size:.75rem; }
.badge--live { background: var(--bg-danger); color: var(--on-danger); }

8) CTA και ταχεία δράση

Ένα πρωτογενές ανά φύλλο (για παράδειγμα, «Play», «Bet»).
Βοηθητικά εικονίδια (αγαπημένα, μοιραστείτε,...) - από hover/εστίαση.
Καταστρεπτική - μέσω επιβεβαίωσης ή αναποτελεσματικότητας.

html
<div class="card__actions">
<button class="btn btn--primary">Играть</button>
<button class =" icon" aria-label = "Add to Favorites" title =" B Favorites "> </button>
<button class="icon" aria-haspopup="menu" aria-expanded="false">⋯</button>
</div>

9) Διαθεσιμότητα (A11y)

Ολόκληρη η κάρτα σύνδεσης είναι «<a>» με σαφή «aria-label», διαφορετικά: ο τίτλος είναι σαν σύνδεσμος, το υπόλοιπο είναι στατικό.
Η σειρά καρτέλας αντιστοιχεί στην οπτική. ο δακτύλιος εστίασης είναι ορατός.
Εικόνες με 'alt', διακοσμητικό -' aria-κρυμμένο =» αληθινό»'.
Για τις καταστάσεις, χρησιμοποιήστε το ρόλο = «status» '/' aria-live = «polite» '.
Αντίθεση κειμένου και σήματος ≥ AA. Το νόημα δεν είναι μόνο το χρώμα.

10) Επιδόσεις

τεμπέλης φόρτωσης μέσων και καταλόγων· σελιδοδείκτης ή κύλιση άπειρου με φρουρό-παρατηρητή.
Εικονικοποίηση για ταινίες/άπειρες εξόδους (± 10k στοιχεία).
Ελαχιστοποίηση ροής: Κινείται μόνο 'μετασχηματισμός/αδιαφάνεια'.
Δώστε κάρτες με σκελετούς και αντικαταστήστε με περιεχόμενο μετά τη φόρτωση των δεδομένων.

11) Σκελετοί, λάθη, άδειες

Ο σκελετός επαναλαμβάνει τη δομή της κάρτας (μέσα/κείμενο/κουμπί), χωρίς επιθετική λάμψη. εξετάζει το ενδεχόμενο «μειωμένης κίνησης prefers».
Κατάσταση σφάλματος: εικονίδιο + σύντομο κείμενο («Αποτυχία φόρτωσης του παιχνιδιού») + κουμπί επαναπροσδιορισμού.
Κενή κατάσταση: εικονίδιο/εικόνα, εξήγηση, «Τι ακολουθεί» (φίλτρο/αναζήτηση/συνδρομές).

12) Διαχείριση περιεχομένου

Truncation: 'line-clamp' + ρητή εργαλειοθήκη.
Μακρύς αριθμός/άθροισμα: ψηφία πίνακα: 'αριθμητικό γραμματοσειράς-παραλλαγής: αριθμοί πίνακα· '.
Τοπικοποίηση: αποθεματικό + 20-30% πλάτος για μεγάλες ετικέτες.
Υποστήριξη RTL: flip badges/εικονίδια και ευθυγραμμίσεις.

13) Σκοτεινό θέμα και αντίθεση

Οι σκιές είναι πιο αδύναμες, χρησιμοποιούν σύνορα («1px») με διαφάνεια.
Υποστήριξη ΑΑΑ για μικρές γραμματοσειρές· αποφύγετε τα τρεμοπαίζοντα.
Τα μέσα μαζικής ενημέρωσης σκοτεινιάζουν από ένα λεπτό πέπλο (επικάλυψη 8-12%) για να κάνουν το κείμενο ευανάγνωστο.

css
.theme-dark. card { background: var(--bg-elevated-dark); box-shadow: var(--elev-1-dark); }
.theme-dark. card__media::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,.12); }

14) Διαλογή, φίλτρα, σελιδοποίηση

Πίνακας άνω/πλευρικού φίλτρου. το αποτέλεσμα είναι πλέγμα καρτών.
Η σελιδοποίηση είναι ορατή. ατελείωτη κύλιση - μόνο με «Επιστροφή στην κορυφή» και διατήρηση της θέσης.
Τα φίλτρα δεν «επαναφέρουν» την κύλιση. εφαρμόζεται γρήγορα (≤ 100 ms) ή με δείκτη.

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

15. 1 Κάρτα παιχνιδιού (υποδοχή/πίνακας)

16:9 αφίσα, λογότυπο παρόχου.
Μεταδεδομένα: πάροχος, RTP, μεταβλητότητα, κατηγορίες (- μόνο ενημερωτικά, χωρίς υποσχέσεις νίκης).
Σήματα: Νέο, δημοφιλές, τουρνουά, τζάκποτ.
CTA: "Play" + "Demo. "Το πλαίσιο του "18 +" και το υπεύθυνο παιχνίδι είναι ορατά.

15. 2 Κάρτα αγώνα/συντελεστής

Ζωντανό σήμα Live, χρονοδιακόπτη/περίοδος.
Βασικοί συντελεστές (2-3) με στιγμιαία αιώρηση/πίεση και ασφαλή αναίρεση (εάν επιτρέπεται).
Ενημερώσεις χωρίς τρεμοπαίζει. όταν αλλάζει πορεία - τακτοποιημένος φωτισμός.

15. 3 Κάρτα τουρνουά/εκδήλωση

Ημερομηνίες, απονομή βραβείων, κανόνες (σύνδεσμος).
Καθεστώς (ανοικτή/κλειστή καταχώριση, εν εξελίξει).
CTA «Join», «Rules»· την πρόοδο της συμμετοχής (σημεία/τόπος).

16) Αντιπατερίδια

Ολόκληρο το φύλλο είναι clickable + μέσα σε δευτερεύοντες συνδέσμους (focus/click traps).
Δύο κοντινές CTA («Play» και «Buy Bonus») - διαγωνισμός προσοχής.
Δεν υπάρχουν κάτοχοι θέσης/σκελετοί → πλέγμα άλματος (CLS).
Ατελείωτες λαμπερές επιδράσεις. σκιώδες κινούμενο σχέδιο/θολό (ακριβό).
Μεταδεδομένα στήλης σε μικρό γκρι σε γκρι (χωρίς αντίθεση).
Σήματα που μεταδίδουν νόημα μόνο σε χρώμα.

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

json
{
"card": {
"radius": 12,
"gap": 12,
"mediaRatio": "16/9",
"px": "12 12 12 12",
"shadow": { "rest": "var(--elev-2)", "hover": "var(--elev-3)" }
},
"badge": { "radius": 8, "px": "4 8", "icon": 14 },
"grid": { "gap": 16, "min": 240, "max": 1 },
"motion": { "hoverMs": 160, "pressMs": 100, "fadeMs": 160 },
"a11y": { "contrastAA": true, "focusRingWidth": 2, "focusRingOffset": 2 }
}

18) Snippets

Αντίδραση: καθολική κάρτα

tsx type CardProps = {
title: string;
subtitle?: string;
mediaUrl?: string;
badges?: string[];
onPrimary?: () => void;
primaryLabel?: string;
onFav?: () => void;
children?: React. ReactNode;
};
export default function Card({
title, subtitle, mediaUrl, badges=[], onPrimary, primaryLabel='Открыть', onFav, children
}: CardProps){
return (
<article className="card group focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2">
<div className="relative">
{mediaUrl? <img className="w-full aspect-[16/9] object-cover" src={mediaUrl} alt={title}/>: <div className="aspect-[16/9] bg-neutral-200"/>}
<div className="absolute top-2 left-2 flex gap-1">
{badges. map(b => <span key={b} className="badge">{b}</span>)}
</div>
</div>
<div className="p-3 grid gap-2">
<h3 className="text-sm font-semibold line-clamp-2" title={title}>{title}</h3>
{subtitle && <p className="text-xs text-neutral-500 line-clamp-2">{subtitle}</p>}
{children}
<div className="flex items-center gap-8">
{onPrimary && <button className="btn btn--primary" onClick={onPrimary}>{primaryLabel}</button>}
{onFav && <button className="icon opacity-0 group-hover:opacity-100" aria-label="В избранное" onClick={onFav}></button>}
</div>
</div>
</article>
);
}

Άπειρος φρουρός κύλισης

js const sentry = document. querySelector('#sentry');
const io = new IntersectionObserver(entries=>{
if(entries. some(e=>e. isIntersecting)) loadMore();
}, { rootMargin: '200px' });
io. observe(sentry);

19) Μετρήσεις και πειράματα

Πρωτογενής CTR CTA и Χρόνος-to-Click.
Πατήστε «πάνω από τη στροφή «/» κάτω από τη στροφή ».
Στοιχεία προβολής κάρτας μετατροπή.
Ορατότητα των σημάτων και η επίδρασή τους στον CTR.
Ορατός χρόνος σκελετού и CLS.
A/B: μέγεθος καρτών, ποσότητα μεταδεδομένων, ορατότητα ταχειών ενεργειών, τύπος καννάβου (κατάλογος/κάνναβος).

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

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

• Οι δακτύλιοι εστίασης είναι ορατοί. Η εντολή καρτέλας είναι λογική.
• Τα alt-texts και το «aria-label» είναι σωστά. σήματα κατάστασης με κείμενο.
• Αντίθεση κειμένου/φόντου ≥ ΑΑ.

Συμπεριφορά

• Ένα πρωτογενές CTA. οι ταχείες ενέργειες δεν επικαλύπτουν το κύριο σενάριο.
• Hover/πιεστήριο/επιλεγμένο διακριτό· το μενού πλαισίου λειτουργεί.
• Τα κενά/σφάλματα/σκελετοί είναι σωστά. υπάρχει Retry.

Απόδοση

• Τεμπέλης φόρτωση μέσων μαζικής ενημέρωσης. δεν υπάρχουν αιχμηρά άλματα στη διάταξη.
• Εικονικοποίηση μεγάλων καταλόγων. κινούμενα σχέδια «transform/αδιαφάνεια».

Πλέγμα

• «minmax (240px, 1fr)» και «κενό» είναι προσαρμοστικά· Η τοιχοποιία δεν σπάει τη σειρά εστίασης/ανάγνωσης.
• RTL/τοπικοποίηση δεν «σπάσει» καλλιέργεια και σήματα.

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

: 'Card', 'GameCard', 'MatchCard', 'Компоненты Card', 'StatusBadge', 'SkeletonCard'.
Μάρκες: ακτίνα/σκιές/περιπτώσεις/στρώματα, χρώματα σήματος, κινούμενα σχέδια.
Μοτίβα: «One CTA», «Skeleton αντί για spinner», «Infinite scrolling + containing position».
Do/Don 't gallery: υπερφορτωμένη κάρτα έναντι minimal, «clickable whole card» έναντι ρητών στοιχείων.

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

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