Kartochka interfeysi va vizual bloklar

1) Nega kartochkalar

• tezda skanerlanadi,
• bitta asosiy CTA beradi,
• turli konteyner/kolonkalarga moslashadi,
• xulq-atvorini oldindan bilish mumkin (hover, press, fokus, kontekstli menyu).

2) Kartochka anatomiyasi

1. Media-zona (muqovasi/logotipi/prevyu, 16: 9/4: 3/1: 1).

2. Sarlavha (1-2 satrlar kesilgan holda).

3. Meta maʼlumotlar (sarlavha, tag/toifa, provayder, vaqt).

4. Maqom belgilari (yangilik, live, aksiya, reyting).

5. STA/tezkor harakatlar (tugma yoki ikonkalar).

6. Ikkilamchi matn (qisqa, 2-3 satr max).

7. Nazorat (tanlangan,... ).

Ierarxiya: media → sarlavha → CTA → meta → ikkilamchi. Buzgʻunchi harakatlar yashirin yoki menyuda koʻrsatilgan.

3) To’rlar va joylashtirishlar

Grid (belgilangan ustun): 2-6 ustunlar; auto-fit/auto-fill orqali moslashtiriladi.
Responsive tiles:’minmax (240px, 1fr)’- kartochkalar chegaralargacha o’sadi.
Masonry/oʻzgaruvchan balandlik: ehtiyot boʻling; fokus va o’qish tartibini ta’minlash.
List (ketma-ket): gorizontal tejamkorlik va saralanganlik muhim boʻlganda.

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) Zichligi va ritmi

Maydonlar/cheklovlar: 12-16 px ichida; 8-12 px bloklar o’rtasida.
Satr balandligi: 1. 3–1. 5; shriftlar: sarlavha 16-18 px, meta 12-14 px.
Matnning klippingi:’line-clamp: 2-3’; tooltip/tafsilotlarda to’liq matn bo’lishi shart.

5) Holatlar va interaktivlik

Hover/Focus/Active: soya/yoritgich, lekin maketning «sakrashi» yo’q;’: focus-visible’doimo ko’rinadi.
Selectable: chekbox/ramka; havola kartochkasi bilan adashtirmaslik.
Pressed: 98% gacha pasayish + pastga tushish (120 ms ≤).
Busy/Loading: «boʻsh» emas, balki skelet.

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) Tasvirlar va media

Aspect-ratio qattiq oʻrnatilgan; o’yinlar ro’yxatida - 16:9 yoki 4:3.
Dangasa yuklash:’loading =’lazy’’+’decoding =’async’.
Afishaning ustun rangli pleysholder/skeleton.
Yuklab olishda xato roʻy berdi.

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

7) Nishonlar va belgilar

Qisqa (1-2 so’z): New, Live, -20%, Top 10.
Faqat rangga tayanib boʻlmaydi - ikona/matn qoʻshing.
Joylashuvi: medianing chap yuqori qismi; bir nechta - 4-6 px bo’shliqli stekda.

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 va tezkor harakatlar

Kartochkaga bitta primary (masalan, «O’ynash», «Tikish»).
Yordamchi piktogrammalar (tanlangan, baham koʻrish,...) - hover/fokus boʻyicha.
Destruktiv - tasdiqlash yoki undo-panel orqali.

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) Foydalanish imkoniyati (A11y)

Butun havola -’<a>’bilan tushunarli’aria-label’, aks holda: sarlavha havola sifatida, qolganlari - statik.
Tab tartibi vizual; fokus halqa ko’rinadi.
’alt’ rasmlari; dekorativ -’aria-hidden =» true»’.
Holatlar uchun’role = «status» ’/’ aria-live = «polite»’dan foydalaning.
Matn va nishonlar kontrasti ≥ AA; ma’nosi faqat rang emas.

10) Spektakl

Media va roʻyxatlarni dangasa yuklash; sentry-kuzatuvchi bilan paginatsiya yoki infinit-skroll.
Tasma/cheksiz chiqarishlar uchun virtualizatsiya (± 10k elementlar).
Reflow minimallashtiring: faqat’transform/opacity’ni jonlantiring.
Kartochkalarni skeletonlar bilan renderlang va maʼlumotlar yuklangandan keyin kontent bilan almashtiring.

11) Skeletonlar, xatolar, bo’sh

Skeleton kartochka tuzilishini takrorlaydi (media/matn/tugma), agressiv shimmersiz; ’prefers-reduced-motion’ ni hisobga oling.
Error-state: piktogramma + qisqa matn («Oʻyinni yuklab boʻlmadi») + Retry tugmasi.
Empty-state: ikona/rasm, tushuntirish, «Keyingi nima» (filter/qidiruv/obuna).

12) Kontentni boshqarish

Kesish:’line-clamp’+ aniq maslahatlar (tooltip).
Uzun sonlar/summalar: jadval raqamlari:’font-variant-numeric: tabular-nums;’.
Lokalizatsiya: uzun yorliqlar uchun 20-30% kenglikdagi zaxira.
RTL qoʻllab-quvvatlash: bayroqlar/ikonkalarni flip va tekislash.

13) Qorong’u mavzu va kontrast

Soyalar kuchsizroq, chegaralardan (’1px’) shaffoflik bilan foydalaning.
Kichik shriftlar uchun AAAni qoʻllab-quvvatlang; Chayqalishdan saqlaning.
Matnni o’qish uchun media yupqa parda (8-12%) bilan qorayadi.

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) Saralash, filtrlar, paginatsiya

Yuqori/yon filtrlar paneli; natija - kartochkalar to’plami.
Paginatsiya ko’rinadi; cheksiz skroll - faqat «Boshlanish» va pozitsiyani saqlab qolish bilan.
Filtrlar skrollni «tashlamaydi»; tez (100 ms ≤) yoki indikator bilan qo’llaniladi.

15) iGaming xususiyatlari

15. 1 O’yin kartochkasi (slot/table)

Media: poster 16:9, provayder logotipi.
Meta ma’lumotlar: provayder, RTP, o’zgaruvchanlik, toifalar (- faqat axborot bilan, yutuq va’dalarisiz).
Nishonchalar: New, Popular, Tournament, Jackpot.
CTA: «O’ynash» + «Demo». «18 +» konteksti va mas’uliyatli o’yin - ko’rinadi.

15. 2 O’yin/koeffitsiyent kartochkasi

Live nishonchasi; taymer/davr.
Asosiy koeffitsiyentlar (2-3) bilan bir zumda hover/press va xavfsiz undo (agar ruxsat berilsa).
Momaqaldiroqsiz yangilanishlar; kurs o’zgarganda - ehtiyotkorlik bilan yoritish.

15. 3 Turnir/event kartochkasi

Sanalar, mukofot jamg’armasi, qoidalar (havola).
Maqomi («Ro’yxatga olish ochiq/yopiq», «Kelmoqda»).
«Qo’shilish», «Qoidalar» CTA; ishtirok etish taraqqiyoti (ball/joy).

16) Antipatternlar

Butun kartochka + ichida ikkilamchi havolalar (fokus/klik tuzoqlari).
Yaqin atrofdagi ikkita primary-CTA («O’ynash» va «Bonus sotib olish») - e’tibor raqobati.
Pleysholderlar/skeletonlar yo’qligi → «sakrash» setkasi (CLS).
Cheksiz shimmer effektlari; soya/blur (qimmat) animatsiyasi.
Kichik kulrang rangdagi meta maʼlumotlar (kontrast yoʻq).
Ma’noni faqat rang bilan ifodalovchi nishonlar.

17) Dizayn-tizim tokenlari (misol)

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) Snippetlar

React: universal kartochka

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>
);
}

Infinit-skroll sentry

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

19) Metrika va eksperimentlar

CTR primary-CTA и Time-to-Click.
Scroll-depth → click: «burish ustida »/« burish ostida» tugmalarini bosing.
Kartochka → tafsilotlarni ko’rish → konversiya.
Bayroqlarning ko’rinishi va ularning CTRga ta’siri.
Skeleton visible time и CLS.
A/B: kartochkalar o’lchami, meta-ma’lumotlar soni, tezkor harakatlarning ko’rinishi, to’r turi (list/grid).

20) QA-chek-varaq

Foydalanish imkoniyati

• Fokus halqalari ko’rinadi; Tab tartibi mantiqiy.
• Alt-matnlar va’aria-label’to’g "ri; matnli maqom-nishonlar.
• Matn/fon kontrasti ≥ AA.

Xulq-atvori

• Bitta primary-CTA; tezkor harakatlar asosiy stsenariyni qoplamaydi.
• Hover/press/selected farqlanadi; kontekstli menyu ishlamoqda.
• Boʻsh/xato/skeletonlar toʻgʻri; Retry bor.

Spektakl

• Mediani dangasa yuklash; sxemada keskin sakrash yoʻq.
• Katta roʻyxatlarni virtuallashtirish; ’transform/opacity’ animatsiyalari.

To’r

• ’minmax (240px, 1fr)’va’gap’moslashuvchan; Masonry fokus/oʻqish tartibini buzmaydi.
• RTL/lokalizatsiya kesish va nishonchalarni «sindirmaydi».

21) Dizayn-tizimdagi hujjatlar

Компоненты: `Card`, `GameCard`, `MatchCard`, `TournamentCard`, `StatusBadge`, `SkeletonCard`.
Tokenlar: radius/soyalar/kirishlar/qatlamlar, bayroqlarning ranglari, animatsiyalar.
Patternlar: «Bitta CTA», «Spinner o’rniga skeleton», «Infinit-skroll + pozitsiyani saqlash».
Do/Don’t-galereya: ortiqcha yuklangan kartochka vs minimal, «butun kartochka bosiladi» vs aniq elementlar.

Qisqacha xulosa

Kartochkalar aniq ierarxiya, bitta asosiy CTA, oldindan aytib bo’ladigan holatlar, barqaror to’rlar va spektakl va foydalanishga bo’lgan hurmatga ega bo’lganda ishlaydi. Token va patternlarni tuzating, skeleton va dangasa yuklamadan foydalaning, kontentni lakonik tuting va karta interfeyslari tez, o’qish mumkin va konversion bo’ladi, ayniqsa iGaming stsenariylarida.