رابط کارت و بلوک های بصری

1) چرا کارت

• سریع اسکن کنید،
• یک CTA استاد می دهد،
• سازگار با ظروف/ستون های مختلف،
• قابل پیش بینی در رفتار (شناور، مطبوعات، تمرکز، منوی زمینه).

2) آناتومی یک کارت

1. منطقه رسانه ای (پوشش/آرم/پیش نمایش، 16: 9/4: 3/1: 1).

2. هدر (1-2 خط کوتاه).

3. ابرداده (زیرنویس، برچسب/دسته، ارائه دهنده، زمان).

4. مدالها وضعیت (جدید، زنده، ارتقاء، امتیاز).

5. CTA/اقدامات سریع (دکمه یا آیکون).

6. متن ثانویه (خطوط کوتاه، حداکثر 2-3).

7. کنترل (مورد علاقه،... زمینه).

سلسله مراتب: رسانه → هدر → CTA → متا → ثانویه. اقدامات مخرب پنهان یا نمایش داده شده در منو.

3) شبکه ها و پوسته ها

شبکه (ستون ثابت): 2-6 ستون ؛ ■ از طریق خودکار/خودکار پر کردن.
کاشی های پاسخگو: «minmax (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 پیکسل ؛ بین واحدهای 8-12 پیکسل.
ارتفاع ردیف: 1. 3–1. 5; فونت ها: عنوان 16-18 پیکسل، متا 12-14 پیکسل.
قطع متن: 'خط گیره: 2-3' ؛ متن کامل اجباری در راهنمای ابزار/جزئیات.

5) کشورها و تعامل

شناور/تمرکز/فعال: سایه/برجسته، اما بدون طرح «جهش» ؛ «: تمرکز قابل مشاهده» همیشه قابل مشاهده است.
قابل انتخاب: جعبه چک/قاب ؛ نباید با یک کارت مرجع اشتباه گرفته شود.
فشرده: کاهش تا 98٪ + سایه پایین (≤ 120 میلی ثانیه).
مشغول/بارگیری: اسکلت، نه «خالی».

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»'.
محل نگهدارنده/اسکلت با رنگ پوستر غالب.
خطای بارگیری: تصویر ساختگی + نماد تصویر خاموش.

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

7) مدالها و برچسب ها

کوتاه (1-2 کلمه): جدید، زنده، -20٪، بالا 10.
شما نمی توانید فقط به رنگ تکیه کنید - یک آیکون/متن اضافه کنید.
محل سکونت: رسانه های برتر چپ ؛ چند - در یک پشته با فاصله 4-6 پیکسل.

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 و اقدام سریع

یک کارت اصلی برای هر کارت (به عنوان مثال، «بازی»، «شرط»).
آیکون های کمکی (علاقه مندی ها، اشتراک گذاری،...) - توسط شناور/تمرکز.
مخرب - از طریق تایید یا undo-panel.

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 =» درست».
برای وضعیتها، از «role =» status «»/« aria-live =» مودبانه «» استفاده کنید.
کنتراست متن و نشان ≥ AA ؛ معنی فقط رنگ نیست.

10) عملکرد

بارگذاری تنبل رسانه ها و لیست ها ؛ صفحه بندی یا infinitis پیمایش با نگهبان ناظر.
مجازی سازی برای نوار/خروجی بی نهایت (± 10k عناصر).
به حداقل رساندن جریان: متحرک فقط «تبدیل/کدورت».
ارائه کارت با اسکلت و جایگزینی با محتوا پس از بارگذاری داده ها.

11) اسکلت، اشتباهات، خالی

اسکلت ساختار کارت را تکرار می کند (رسانه/متن/دکمه)، بدون لرزش تهاجمی ؛ «prefers-reduced-motion» را در نظر بگیرید.
حالت خطا: شمایل + متن کوتاه) «بارگیری بازی شکست خورد» (+ دکمۀ تلاش مجدد.
حالت خالی: نماد/تصویر، توضیح، «بعدی چیست» (فیلتر/جستجو/اشتراک).

12) مدیریت محتوا

برش: 'خط گیره' + نکته ابزار صریح.
اعداد بلند/مبالغ: ارقام جدول: 'font-variant-numeric: tabular-numbers ؛ '.
محلی سازی: ذخیره + 20-30٪ عرض برای برچسب های طولانی.
پشتیبانی RTL: تلنگر مدالها/آیکون ها و alignments.

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 میلی ثانیه) یا با نشانگر اعمال می شود.

15) ویژگی های iGaming

15. 1 کارت بازی (اسلات/جدول)

رسانه: 16:9 پوستر، آرم ارائه دهنده.
ابرداده: ارائه دهنده، RTP، نوسانات، دسته ها (- فقط آموزنده، بدون وعده برنده شدن).
مدالها: جدید، محبوب، مسابقات، برنده تمام پولها.
CTA: "بازی" + "نسخه ی نمایشی. زمینه «18 +» و بازی مسئول قابل مشاهده است.

15. 2 کارت بازی/ضریب

نشان زنده زنده ؛ تایمر/دوره

ضرایب کلیدی (2-3) با شناور فوری/مطبوعات و لغو امن (در صورت مجاز).
به روز رسانی سوسو زدن رایگان ؛ هنگام تغییر مسیر - روشنایی شسته و رفته.

15. 3 کارت مسابقات/رویداد

تاریخ، استخر جایزه، قوانین (لینک).
وضعیت (ثبت نام باز/بسته، در حال انجام).
CTA «پیوستن»، «قوانین» ؛ پیشرفت مشارکت (امتیاز/مکان).

16) ضد گلوله

کل کارت قابل کلیک است + در داخل لینک های ثانویه (تله تمرکز/کلیک کنید).
دو CTA اصلی در نزدیکی («بازی» و «خرید پاداش») - رقابت توجه.
بدون حفره/اسکلت → پریدن شبکه (CLS).
اثرات شفاف بی پایان ؛ سایه انیمیشن/تاری (گران).
ابرداده ستون در خاکستری کوچک در خاکستری (بدون کنتراست).
مدالهایی که فقط در رنگ معنی دارند.

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 и زمان کلیک

اسکرول عمق → کلیک کنید: کلیک کنید «بیش از خم «/» زیر خم ».
کارت → مشاهده جزئیات → تبدیل.

قابلیت مشاهده مدالها و تاثیر آنها بر CTR

زمان قابل مشاهده اسکلت и CLS.
A/B: اندازه کارت، مقدار ابرداده، قابلیت مشاهده اقدامات سریع، نوع شبکه (لیست/شبکه).

20) چک لیست QA

در دسترس بودن

• حلقه های تمرکز قابل مشاهده هستند ؛ دستور tab منطقی است.
• متن های Alt و «aria-label» درست هستند ؛ مدالها وضعیت با متن.
• کنتراست متن/پس زمینه ≥ AA.

رفتار

• یک CTA اولیه ؛ اقدامات سریع با سناریوی اصلی همپوشانی ندارند.
• شناور/مطبوعات/انتخاب قابل تشخیص ؛ منوی زمینه کار می کند.
• خالی/خطاها/اسکلت درست است ؛ رتری وجود دارد.

عملکرد

• بارگذاری رسانه های تنبل ؛ هیچ جهش تیز در طرح وجود دارد.
• مجازی سازی لیست های بزرگ ؛ انیمیشن های «transform/opacity».

شبکه

• «minmax (240px، 1fr)» و «شکاف» سازگار هستند ؛ فراماسونری دستور تمرکز/خواندن را نقض نمی کند.
• RTL/محلی سازی کند «شکستن» برداشت و مدالها.

21) مستندات در سیستم طراحی

Компоненты: 'کارت'، 'GameCard'، 'MatchCard'، 'TournamentCard'، 'StatusBadge'، 'SkeletonCard'.
نشانه: شعاع/سایه/تورفتگی/لایه، رنگ نشان، انیمیشن.
الگوها: «یک CTA»، «اسکلت به جای اسپینر»، «پیمایش بی نهایت + حفظ موقعیت».
آیا/آیا گالری نیست: کارت overloaded در مقابل حداقل، «کل کارت قابل کلیک» در مقابل عناصر صریح.

خلاصه ای کوتاه

کارت ها زمانی کار می کنند که یک سلسله مراتب روشن، یک CTA اصلی، حالت های قابل پیش بینی، شبکه های پایدار و احترام به عملکرد و دسترسی داشته باشند. نشانه ها و الگوهای ضبط، استفاده از اسکلت و بارگذاری تنبل، نگه داشتن محتوای مختصر - و رابط کارت سریع، قابل خواندن و تبدیل آماده، به ویژه در اسکریپت iGaming تبدیل خواهد شد.