Карта интерфейсі және визуалды блоктар

1) Карточкалар не үшін

• тез сканерленеді,
• бір басты CTA береді,
• контейнерлерге/бағандарға бейімделеді,
• мінез-құлық бойынша болжамды (hover, press, фокус, контекстік мәзір).

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

1. Медиа-аймақ (мұқаба/логотип/превью, 16: 9/4: 3/1: 1).

2. Тақырып (1-2 жолдар қысқартылған).

3. Метадеректер (тақырыпша, тег/санат, провайдер, уақыт).

4. Мәртебе бейдждері (жаңалық, live, акция, рейтинг).

5. СТА/жылдам әрекеттер (түйме немесе иконалар).

6. Қайталама мәтін (қысқа, 2-3 жол max).

7. Бақылаулар (таңдаулы,... контексті).

Иерархия: медиа → тақырып → CTA → мета → қайталама. Деструктивті әрекеттер жасырылған немесе мәзірге енгізілген.

3) Торлар мен жаймалар

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

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 мс ≤).
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 және жылдам әрекеттер

Карточкаға бір primary (мысалы, «Ойнау», «Ставка жасау»).
Қосымша иконалар (таңдаулы, бөлісу,...) - 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) Перформанс

Медиа және тізімдерді жалқау жүктеу; sentry-бақылаушысы бар пагинация немесе инфинит-скролл.
Таспалы/шексіз беру үшін виртуалдандыру (± 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 мс ≤) немесе индикатормен қолданылады.

15) iGaming ерекшелігі

15. 1 Ойын карточкасы (slot/table)

Медиа: плакат 16:9, провайдер логотипі.
Метадеректер: провайдер, RTP, құбылмалылық, санаттар (- тек ақпараттық, ұтыс уәдесіз).
Бейдждер: New, Popular, Tournament, Jackpot.
CTA: «Ойнату» + «Демо». «18 +» контексті және жауапты ойын - көрініп тұрады.

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

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

15. 3 Турнир/ивент карточкасы

Күндер, жүлде қоры, ережелер (сілтеме).
Мәртебесі («Тіркеу ашық/жабық», «Келеді»).
CTA «Қосылу», «Ережелер»; қатысу прогресі (ұпай/орын).

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

Барлық карточка кликабельді + ішіндегі екінші сілтемелер (фокус/басу тұзақтары).
Екі primary-CTA қатар («Play» және «Бонус сатып алу») - бәсекелестік назар.
Плейсхолдерлердің/скелетондардың болмауы → «секіру» торы (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>
);
}

Инфинит-скролл 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: карточкалардың мөлшері, метадеректер саны, жылдам әрекеттердің көрінуі, тор түрі (list/grid).

20) QA-чек парағы

Қол жетімділік

• Фокус-сақиналар көрінеді; Tab тәртібі қисынды.
• Alt-мәтіндер және 'aria-label' дұрыс; мәтіні бар статус-бейдждер.
• Мәтін/ая контрасты ≥ AA.

Мінез-құлық

• Бір primary-CTA; жылдам әрекеттер негізгі сценарийді жаба алмайды.
• Hover/press/selected ажыратылады; мәтінмәндік мәзір жұмыс істейді.
• Бос/қателер/скелетондар дұрыс; Retry бар.

Көрініс

• Дереу медиа жүктеу; орналасуда кенеттен секірулер жоқ.
• Үлкен тізімдерді виртуалдандыру; 'transform/opacity' анимациялары.

Тор

• 'minmax (240px, 1fr)' және 'gap' бейімделеді; Masonry оқу фокусын/тәртібін бұзбайды.
• RTL/локализация кесу мен бейдждерді «сындырмайды».

21) Дизайн-жүйедегі құжаттама

Компоненты: `Card`, `GameCard`, `MatchCard`, `TournamentCard`, `StatusBadge`, `SkeletonCard`.
Токендер: радиусы/көлеңкелері/шегіністері/қабаттары, бейдждер, анимациялар түстері.
Паттерндер: «Бір CTA», «Спиннер орнына скелетон», «Инфинит-скролл + позицияны сақтау».
Do/Don 't-галереясы: артық жүктелген карточка vs ең аз, «бүкіл карточка» vs айқын элементтер.

Қысқаша түйіндеме

Карточкалар нақты иерархиясы, бір басты CTA, болжамды жағдайлары, тұрақты торлары және спектакльге және қол жетімділікке деген құрметі болғанда жұмыс істейді. Белгілер мен үлгілерді белгілеңіз, скелетондар мен жалқау жүктемелерді пайдаланыңыз, мазмұнды қысқа ұстаңыз - және карталық интерфейстер жылдам, оқылатын және конверсиялы болады, әсіресе iGaming сценарийлерінде.