ממשק כרטיס ובלוקים חזותיים

1) מדוע כרטיסים

• נסרק במהירות,
• נותן CTA מאסטר אחד,
• מסתגל למכלים/טורים שונים,
• צפוי בהתנהגות (ריחוף, עיתונות, מיקוד, תפריט הקשר).

2) אנטומיה של כרטיס

1. אזור מדיה (כיסוי/לוגו/תצוגה מקדימה, 16: 9/4: 3/1: 1).

2. כותרת (1-2 קווים מקושרים).

3. Metadata (כתוביות, תגית/קטגוריה, ספק, זמן).

4. תגי מצב (חדש, חי, קידום, דירוג).

5. פעולות CTA/מהירות (כפתור או סמלים).

6. טקסט משני (קצר, 2-3 שורות מקסימום).

7. בקרות (מועדפים,... הקשר).

היררכיה: media # header # CTA # meta ac משני. פעולות הרסניות מוסתרות או מוצגות בתפריט.

3) שרשראות ופריסות

Grid (עמודה קבועה): 2-6 עמודות; ▪ באמצעות התאמה אוטומטית/מילוי אוטומטי.
אריחים מגיבים: ”מינמקס (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/פוקוס/Active: shadow/dight, אך ללא פריסה ”קופץ”; מיקוד גלוי לעין תמיד נראה לעין.
ניתן לבחור: checkbox/frame; לא להתבלבל עם כרטיס התייחסות.
לחץ: להקטין עד 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”.
ממלא מקום/שלד עם צבע פוסטר דומיננטי.
שגיאת טעינה: תמונת דמה + סמליל תמונה-off.

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

7) תגים ותגים

קצר (1-2 מילים): חדש, חי, -20%, 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”).
סמלים מסייעים (מועדפים, חולקים,...) -על ידי ריחוף/מיקוד.
הרסני - באמצעות אישור או ביטול פנל.

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>' עם 'אריה-תווית ברורה', אחרת: הכותרת היא כמו קישור, השאר סטטי.
סדר הלשונית תואם את הוויזואלי; טבעת המיקוד נראית לעין.
תמונות עם ”אלט”; קישוט -' אריה-מוסתר =” נכון”.
עבור סטטוסים, השתמש ב ”תפקיד” = ”סטטוס ”/” אריה-לחיות” = ”מנומס”.
טקסט וניגוד תגים AA; משמעות היא לא רק צבע.

10) ביצועים

טעינה עצלה של מדיה ורשימות; פג 'יניציה או דלקת אינפיניטיס גלילה עם שומר-צופה.
וירטואליזציה עבור טייפ/תפוקות אינסופיות (מרכיבים של 10k).
מזעור זרימה: Animate רק ”transformation/opicity”.
הפעל כרטיסים עם שלדים ותחליף אותם בתוכן לאחר טעינת נתונים.

11) שלדים, טעויות, ריקים

השלד חוזר על מבנה הכרטיס (מדיה/טקסט/כפתור), ללא נצנוץ אגרסיבי; לשקול 'מעדיף-מופחת תנועה'.
שגיאה-מצב: סמל + טקסט קצר (”נכשל לטעון משחק”) + כפתור ריטרי.
מצב ריק: סמל/איור, הסבר, ”מה הלאה” (פילטר/חיפוש/מנויים).

12) ניהול תוכן

Truncation: ”line-clamp” + tooltip מפורש.
מספרים/סכומים ארוכים: ספרות שולחן: 'פונט-וריאנט-מספרי: tabular-nums; '.
לוקליזציה: רזרבה + 20-30% רוחב עבור תוויות ארוכות.
תמיכה ב-RTL: תהפוך תגים/סמלים ומערכים.

13) נושא אפל וניגוד

הצללים חלשים יותר, משתמשים בגבולות (”1px”) בשקיפות.
תמיכה AAA לגופנים קטנים; הימנע מהבהבים.
המדיה מוחשכת על ידי רעלה דקה (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 פוסטר, לוגו של ספק.
Metadata: ספק, RTP, תנודתיות, קטגוריות (- רק אינפורמטיבי, ללא הבטחות לניצחון).
תגים: חדש, פופולרי, טורניר, כל הקופה.
CTA: "לשחק" + "דמו. "ההקשר של "18 +" ושל המשחק האחראי גלוי לעין.

15. 2 כרטיס התאמה/מקדם

Live תג Live; טיימר/נקודה.
מקדמי מפתח (2-3) עם ריחוף מיידי/לחץ וביטול בטוח (אם מותר).
עדכונים ללא הבהוב; בעת שינוי מסלול - הארה מסודרת.

15. 3 כרטיס טורניר/אירוע

תאריכים, מאגר פרסים, חוקים (קישור).
מצב (רישום פתוח/סגור, בהתקדמות).
CTA ”להצטרף”, ”כללים”; התקדמות ההשתתפות (נקודות/מקום).

16) תרופות אנטי ־ פטריות

כל הכרטיס הוא קליק + בתוך קישורים משניים (פוקוס/לחיצה על מלכודות).
שני CTAs ראשוניים בקרבת מקום (”Play” ו- ”Buy Bonus”) - תחרות תשומת לב.
אין בעלי מקומות/שלדים = = רשת קפיצות (CLS).
אפקטים מנצנצים אינסופיים; צל אנימציה/טשטוש (יקר).
עמוד metadata באפור קטן על אפור (אין ניגוד).
תגים שמעבירים משמעות רק בצבע.

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) קטעים

תגובה: כרטיס אוניברסלי

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 Primary-CTA-Time-to-Click.
גלילה לעומק * לחץ: לחץ על ”מעבר לעיקול ”/” מתחת לעיקול ”.
Card prograve port # המרה.
ראות של תגים והשפעתם על סי-טי-אר.
שלד בזמן הנראה לעין.
A/B: גודל כרטיסים, כמות מטא-נתונים, ראות של פעולות מהירות, סוג של רשת (רשימה/רשת).

20) רשימת QA

זמינות

[ ] טבעות פוקוס גלויות; סדר לשונית הוא הגיוני.

[ ] אלט-טקסטים ו ”אריה-תווית” נכונים; תגי מצב עם טקסט.

[ ] טקסט/רקע ניגוד AA.

התנהגות

[ ] 1 - CTA; פעולות מהירות אינן חופפות את התרחיש המרכזי.

[ ] Hover/Press/נבחר להבדיל; תפריט ההקשר עובד.

[ ] שגיאות/שלדים ריקים נכונים; הנה ריטרי.

ביצועים

[ ] Lazy מדיה טעינה; אין קפיצות חדות במערך.

[ ] וירטואליזציה של רשימות גדולות; אנימציות ”טרנספורמציה/אפיון”.

רשת

[ ] מינמקס (240px, 1fr) ו ”פער” הם הסתגלות; בונרי לא שובר פוקוס/קריאת סדר.

[ ] RTL/localization לא ”לשבור” קישוטים ותגים.

21) תיעוד במערכת התכנון

”Card”, ”GameCard”, ”MatchCard”, ”GroughtCard”, ”Grought Dage”, ”SkeletonCard”.
אסימונים: רדיוס/צללים/חריצים/שכבות, צבעי תג, אנימציות.
תבניות: ”CTA אחד”, ”שלד במקום ספינר”, ”גלילה אינסופית + שמירה על מיקום”.
גלריה Do/Don 't: כרטיס עמוס נגד מינימלי, ”כרטיס שלם קליק” נגד אלמנטים מפורשים.

תקציר

קלפים עובדים כאשר יש להם היררכיה ברורה, מאסטר CTA, מצבים צפויים, רשתות יציבות, וכבוד לביצועים ונגישות. לכידת אסימונים ותבניות, שימוש בשלדים וטעינה עצלנית, שמירה על תוכן תמציתי וממשקי קלפים יהפכו למהירים, קריאים ומוכנים להמרה, במיוחד בתסריטי iGaming.