Карта интерфейси жана көрүү блоктору

1) Эмне үчүн карталар

• тез сканерден,
• бир негизги CTA берет,
• ар кандай контейнерлерге/колонкаларга ылайыкташкан,
• жүрүм-туруму боюнча алдын ала айтууга болот (hover, пресс, фокус, контексттик меню).

2) Карта анатомиясы

1. Медиа аймак (мукаба/логотип/алдын ала, 16: 9/4: 3/1: 1).

2. Аталышы (1-2 сап кесилген).

3. Метадеректер (субтитр, тег/категория, провайдер, убакыт).

4. Статус төш белгилери (жаңылык, live, акция, рейтинг).

5. STA/тез иш-аракеттер (баскычы же иконалар).

6. Экинчилик текст (кыска, 2-3 саптарды max).

7. Controls (тандалган,... контекст).

Иерархия: медиа → аталышы → CTA → мета → экинчилик. Деструктивдүү иш-аракеттер жашыруун же менюда берилген.

3) тор жана жайгаштыруу

Grid (белгиленген тилке): 2-6 колонка; auto-fit/auto-fill аркылуу ылайыкташтырылган.
Responsive tiles: 'minmax (240px, 1fr)' - карталар так чегине чейин өсөт.
Masonry/өзгөрүп бийиктиги: сак; фокустун тартибин жана окууга жөндөмдүүлүгүн камсыз кылуу.
Тизме (катар): горизонталдык үнөмдөө жана сорттоо маанилүү болгондо.

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 аталышы, 12-14 px мета.
Текст клиппинг: 'line-clamp: 2-3'; сөзсүз толук текст tooltip/майда-чүйдөсүнө чейин.

5) Шарттар жана интерактивдүүлүк

Hover/Focus/Active: көлөкө/жарык, бирок "секирүү" макети жок; ': focus-visible' ар дайым көрүп турат.
Selectable: чекбокс/кадр; шилтеме карта менен чаташтырбоо керек.
Pressed: чейин азайтуу 98% + көлөкө (≤ 120 ms).
Busy/Loading: скелет эмес, "бош".

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) Сүрөттөр жана медиа

Aspect-ratio катуу белгиленген; оюндардын тизмесинде - 16:9 же 4:3.
Жалкоо жүктөө:' loading =" lazy"' +' decoding =" async"'.
Плейсхолдер/үстөмдүк плакат түсү менен скелетон.
Жүктөө катасы: жасалма сүрөт + "image-off" иконасы.

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

7) төш белгилер жана белгилер

Кыска (1-2 сөз): New, Live, -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 жана тез иш-аракеттер

Бир негизги карта (мисалы, "ойноо", "коюм").
Көмөкчү иконалар (тандалган, бөлүшүү,...) - hover/фокус боюнча.
Деструктивдүү - ырастоо же undo-панель аркылуу.

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', башкача: аталышы шилтеме катары, калганы - статикалык.
Tab тартиби визуалдык ылайык келет; фокус-шакек көрүнүп турат.
'alt' менен сүрөттөр; кооздук -' aria-hidden =" true"'.
Статустар үчүн 'role = "status" '/' aria-live = "polite"' колдонуңуз.
Контрасттык текст жана төш белгилер ≥ AA; мааниси бир гана түс эмес.

10) Аткаруу

Жалкоо жүктөө медиа жана тизмелери; пагинация же infinit скролл менен sentry байкоочу.
скотч/чексиз берүү үчүн Virtualization (± 10k элементтер).
reflow минималдаштыруу: жөн гана жандандыруу 'transform/opacity'.
Карттарды скелетондор менен рендерлөө жана маалыматтарды жүктөгөндөн кийин мазмунду алмаштыруу.

11) Скелеттер, каталар, бош

Скелет картанын түзүлүшүн кайталайт (медиа/текст/баскычы), агрессивдүү shimmer жок; эске алуу 'prefers-reduced-motion'.
Error-state: сөлөкөт + кыскача текст ("оюнду жүктөп алуу мүмкүн эмес") + Retry баскычы.
Empty-state: сөлөкөт/иллюстрация, түшүндүрмө, "Кийинки эмне" (чыпкасы/издөө/жазылуу).

12) Мазмунду башкаруу

кесилиши: 'line-clamp' + ачык-айкын жардам (tooltip).
Узун сандар/суммалар: таблица сандар: 'font-variant-numeric: tabular-nums;'.
Локализация: узун лейблдер үчүн резерв + 20-30% туурасы.
RTL-колдоо: флип төш белгилер/иконалар жана тегиздөө.

13) Караңгы тема жана контраст

Көлөкө алсызыраак, чектерди ('1px') ачык-айкындуулук менен колдонуңуз.
Чакан шрифттер үчүн AAA колдоо; жылтылдап качуу.
ММКлар текст окулушу үчүн жука фуаль менен караңгылатылат (overlay 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 карта оюн (slot/table)

Медиа: плакат 16:9, провайдер логотиби.
Метадеректер: провайдер, RTP, туруксуздук, категориялар (- маалыматтык гана, утуш убадасы жок).
Төш белгилер: New, Popular, Tournament, Jackpot.
CTA: "Play" + "Демо". Контекст "18 +" жана жооптуу оюн - көрүнүп турат.

15. 2 Матч/коэффициент картасы

Live бейдж; таймер/мезгил.
Негизги коэффициенттер (2-3) менен тез hover/press жана коопсуз undo (уруксат берилген болсо).
Updates эч кандай жылтылдаган; өзгөргөндө - кылдат жарыктандыруу.

15. 3 Турнир/иш-чара картасы

Даталар, байге фонду, эрежелер (шилтеме).
Статусу ("Каттоо ачык/жабык", "Келет").
CTA "Кошулуу", "Эрежелер"; катышуу прогресс (упай/орун).

16) Антипаттерндер

Бардык карта кликабель + ичинде экинчилик шилтемелер (фокус/чыкылдатуу капкандары).
Эки негизги-CTA жакын ("Play" жана "бонус сатып алуу") - атаандаштык кулак.
Playsholders/скелеттердин жоктугу → "секирүү" тор (CLS).
чексиз shimmer эффекттери; көлөкө/blur (кымбат).
Метадерилери "тилкеде" майда боз боз (эч кандай контраст).
төш белгилер, бир гана түс менен маани берүү.

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) Сниппеттер

React: универсалдуу карта

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-scroll 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) Метрика жана эксперименттер

CTR primary-CTA и Time-to-Click.
Scroll-depth → click: "бүктөлүүнүн үстүндө "/" бүктөлүүнүн астында" басуу.
Карта → майда-чүйдөсүнө чейин көрүү → конверсия.
төш белгилердин көрүнүшү жана алардын CTR боюнча таасири.
Skeleton visible time и CLS.
A/B: карталардын көлөмү, метадерилердин саны, тез иш-аракеттердин көрүнүшү, тор түрү (тизме/сетка).

20) QA-чек тизмеси

Жеткиликтүүлүк

• Focus шакек көрүнүп турат; Tab тартиби логикалуу.
• Alt-тексттер жана 'aria-label' туура; текст менен статус-төш белгилер.
• Текст/фон контрасты ≥ AA.

Жүрүм-туруму

• Бир негизги-CTA; тез иш-аракеттер негизги сценарийге тоскоол болбойт.
• Hover/press/selected айырмаланат; контексттик меню иштейт.
• Бош/каталар/скелеттер туура; Retry бар.

Аткаруу

• Жалкоо медиа жүктөө; макети кескин секирип жок.
• Виртуалдаштыруу чоң тизмелер; 'transform/opacity' анимациялары.

тор

• 'minmax (240px, 1fr)' жана 'gap' адаптивдүү; Masonry фокусту/окуу тартибин бузбайт.
• RTL/локализациялоо кесүү жана төш белгилерди "сындырбайт".

21) Дизайн системасында документтер

Компоненты: `Card`, `GameCard`, `MatchCard`, `TournamentCard`, `StatusBadge`, `SkeletonCard`.
Токендер: радиус/көлөкө/чегинүү/катмарлар, төш белгилердин, анимациялардын түстөрү.
Үлгүлөр: "Бир CTA", "Спиннердин ордуна скелетон", "Infinit-скролл + позицияны сактоо".
Do/Don 't-галерея: ашыкча карта vs минималдуу, "кликабель бүт карта" vs айкын элементтер.

Кыскача резюме

Алар так иерархия, бир негизги CTA, алдын ала шарттар, туруктуу торлорду жана аткаруу жана жеткиликтүүлүктү урматтоо болгондо карталар иштейт. Токендерди жана үлгүлөрдү бекитүү, скелеттерди жана жалкоо жүктөөлөрдү колдонуу, мазмунду кыска кармоо - жана карта интерфейстери тез, окулуучу жана конверсиялуу болуп калат, өзгөчө iGaming сценарийлеринде.