Քարտային ինտերֆեյսը և տեսողական բլոկները

Tab-ի կարգը համապատասխանում է տեսողական։ ֆոկուս օղակը տեսանելի է։

Պատկերներ 'alt'; դեկորատիվ '"aria-hidden =" art "։

Ստատուսների համար օգտագործեք "role =" status "'/' aria-104 =" polite "։

Տեքստի և բեյջեյի հակադրություն AA-ի; իմաստը միայն գույնի չէ։

10) Պերֆորանսը

Լենինի բեռնումը լրատվամիջոցների և ցուցակների; pagination կամ infinit scroll sentry-դիտորդի հետ։

Վիրտուալիզացիան երկրորդային/անվերջ միացությունների համար (10k տարրերի ստանդարտ)։

Նվազագույնի հասցրեք reflow: Անիմիրուզեք միայն «transform/opacity»։

Փոխանցեք քարտերը կմախքներով և փոխարինեք բովանդակությամբ տվյալների բեռնումից հետո։

11) Կմախքներ, սխալներ, դատարկ։

Սկելետոնը կրկնում է քարտի կառուցվածքը (մեդիա/տեքստ/կոճակ), առանց ագրեսիվ shimmer; հաշվի առեք «wwww.fers-reduced-motion»։

Error-state: Iconka + հակիրճ տեքստը («Չի կարողացել ներբեռնել խաղը») + Retry կոճակը։

Empty-state: icon/նկարազարդում, բացատրություն, «Ի՞ նչ է հաջորդը» (ֆիլտրը/որոնումը/)։

12) Բովանդակության կառավարումը

Ուսումը '«07-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 Խաղի քարտ/2019

Կենդանի բեյջ Express; Թայմեր/շրջան։

Հիմնական գործակիցները (2-3) ակնթարթային hover/press և անվտանգ undo (եթե թույլատրված է)։

Թարմացումներ առանց չափման; դասընթացը փոխելիս 'կոկիկ լուսավորություն։

15. 3 Քարտեզ 2019/ivent

Ամսաթվերը, մրցանակային ֆոնդը, կանոնները (հղում)։

Կարգավիճակը («Մոսկվան բաց/փակված», «Գնում»)։

CTA «Միանալ», «Կանոնները»; մասնակցության առաջընթաց (ակնոցներ/տեղ)։

16) Անտիպատերնի

Ամբողջ քարտը կլիկաբելնի + ինտերֆեյսի ներսում (ֆոկուսի/կլիկի թակարդներ)։

Երկու primary-CTA-ը մոտակայքում («Խաղալ» և «Գնել բոնուս») ուշադրության մրցակցությունն է։

Պլեյշոլդերների/կմախքների բացակայությունը բացատրում է «ցատկող» ցանցը (CLS)։

Անսահման shimmer ազդեցություն; անիմացիան ստվեր/բլուր (թանկ)։

Մեթադները «սյունակում» փոքրիկ մոխրագույն են մոխրագույն վրա (ոչ հակադրություն)։

Բայջին, որը իմաստը փոխանցում է միայն գույով։

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.

Scrome-depth www.click: Տեսահոլովակները «վերևում »/« ճեղքման տակ»։

Քարտը բացատրում է մանրամասները դիտելու համար։

Բեյջեյի տեսանելիությունը և նրանց ազդեցությունը CTR-ի վրա։

Skeleton visible time и CLS.

A/B ՝ քարտերի չափը, մետատվյալների քանակը, արագ գործողությունների տեսանելիությունը, ցանցի տեսակը (list/grid)։

20) QA-chek-թերթ

Հասանելիություն

• Ֆոկուս օղակները տեսանելի են. Tab-ի կարգը տրամաբանական է։
• Alt-տեքստերը և «aria-label» -ը ճիշտ են։ Բեյջի կարգավիճակը տեքստով։
• Տեքստի/ֆոնի հակադրություն AA։

Վարք

• Մեկ primary-CTA; արագ գործողությունները չեն արգելափակում հիմնական սցենարը։
• Hover/press/edected-ը տարբեր է. համատեքստային ընտրացանկն աշխատում է։
• Դատարկ/սխալներ/կմախքներ ճիշտ են. Կա retry.

Պերֆորանսը

• Լենովային մեդիայի բեռնումը; ոչ մի կտրուկ ցատկ չկա։
• Մեծ ցուցակների վիրտուալացում; անիմացիա 'transform/opacity "։

Ցանցը

• 'minmax (www.0px, 1fr) "և' gap 'հարմարվողական; Disonry-ը չի կոտրում ֆոկուսը/կարդալու կարգը։
• RTL/տեղայնացումը չի «կոտրում» կտրվածքը և բեյջը։

21) Մոսկվա դիզայնի համակարգում

Компоненты: `Card`, `GameCard`, `MatchCard`, `TournamentCard`, `StatusBadge`, `SkeletonCard`.

Տոկենները ՝ շառավղը/ստվերը/նահանջները/շերտերը, բեյջեյի գույները, անիմացիաները։

Patterns: «Մեկ CTA», «Skeleton փոխարեն», «Infinit-scroll + դիրքի պահպանումը»։

Do/Don 't-պատկերասրահը' ծանրաբեռնված քարտը vs նվազագույն է, «կլիկաբելային ամբողջ քարտը» vs ակնհայտ տարրեր։

Live ռեզյումե

Քարտերը աշխատում են, երբ նրանք ունեն հստակ հիերարխիա, մեկ հիմնական CTA, կանխատեսելի վիճակներ, կայուն ցանցեր և հարգանք պերֆորանսի և հասանելիության նկատմամբ։ Ամրացրեք հոսանքներն ու փամփուշտները, օգտագործեք կմախքներ և ծույլ բեռ, պահեք բովանդակությունը լաքոնիկ, և քարտի ինտերֆեյսները կդառնան արագ, ընթերցված և փոխարկելի, հատկապես iGaming-ի սցենարներում։