واجهة البطاقة والكتل المرئية

1) لماذا البطاقات

• مسح ضوئي سريع،
• يعطي معلم CTA واحد،
• يتكيف مع مختلف الحاويات/الأعمدة،
• يمكن التنبؤ به في السلوك (التحليق، الضغط، التركيز، قائمة السياق).

2) تشريح البطاقة

1. منطقة الوسائط (الغلاف/الشعار/المعاينة، 16: 9/4: 3/1: 1).

2. رأسية (1-2 خطوط مقطوعة).

3. البيانات الوصفية (العنوان الفرعي، العلامة/الفئة، المزود، الوقت).

4. شارات الحالة (جديدة، حية، ترقية، تصنيف).

5. CTA/الإجراءات السريعة (زر أو أيقونات).

6. النص الثانوي (سطور قصيرة، 2-3 كحد أقصى).

7. عناصر التحكم (المفضلة،... (.

التسلسل الهرمي: media → header → CTA → meta → secondary. يتم إخفاء أو عرض الإجراءات المدمرة في القائمة.

3) الشبكات والتخطيطات

الشبكة (عمود ثابت): 2-6 أعمدة ؛ ■ عن طريق الملاءمة التلقائية/التعبئة التلقائية.
البلاط المستجيب: «minmax (240 px، 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 px ؛ بين الوحدات 8-12 px.
ارتفاع الصف: 1. 3–1. 5; الخطوط: العنوان 16-18 px، meta 12-14 px.
قص النص: «مشبك الخط: 2-3» ؛ النص الكامل الإلزامي في الأدوات/التفاصيل.

5) الدول والتفاعل

Hover/Focus/Active: shadow/highlight، ولكن بدون تخطيط «قفزات» ؛ «: التركيز مرئي» دائما مرئي.
قابلة للاختيار: صندوق التحقق/الإطار ؛ لا ينبغي الخلط بينه وبين بطاقة مرجعية.
مضغوط: انخفض بنسبة تصل إلى 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 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 والعمل السريع

واحد أساسي لكل بطاقة (على سبيل المثال، «اللعب»، «الرهان»).
أيقونات مساعدة (مفضلة، مشاركة،...) - عن طريق التحليق/التركيز.
مدمر - من خلال التأكيد أو التراجع عن اللوحة.

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' واضحة، وإلا: العنوان مثل الرابط، والباقي ثابت.
ويتطابق ترتيب علامة التبويب مع الصورة المرئية ؛ حلقة التركيز مرئية.
'1' الصور 'البديلة' ؛ decorative - «aria-hidden =» true «».
بالنسبة للحالات، استخدم «الدور» = «الحالة »/« aria-live» = «مهذب».
تباين النص والشارة ≥ AA ؛ المعنى ليس فقط اللون.

10) الأداء

كسل تحميل الوسائط والقوائم ؛ التثبيت أو التهاب اللانهاية التمرير مع مراقب الحراسة.
افتراضية للشريط/النواتج اللانهائية (عناصر ± 10k).
تقليل التدفق: تحريك فقط «التحويل/التعتيم».
اعرض بطاقات بهياكل عظمية واستبدلها بمحتوى بعد تحميل البيانات.

11) هياكل عظمية، أخطاء، فارغة

ويكرر الهيكل العظمي هيكل البطاقة (وسائط/نصوص/زر)، دون وميض عدواني ؛ النظر في «prefers-remove-movement».
حالة الخطأ: icon + short text («Failed to load game») + Retry button.
الحالة الفارغة: أيقونة/رسم توضيحي، شرح، «ما التالي» (مرشح/بحث/اشتراكات).

12) إدارة المحتوى

القطع: «مشبك الخط» + أداة صريحة.
الأرقام/المجاميع الطويلة: أرقام الجدول: 'خط-متغير-رقم: جدول-nums; '.
التوطين: احتفظ بعرض 20-30٪ للملصقات الطويلة.
دعم RTL: قلب الشارات/الأيقونات والمحاذاة.

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: "Play" + "Demo. "سياق "18 +" واللعبة المسؤولة مرئية.

15. 2 بطاقة المطابقة/المعامل

Live badge Live; الوقت/الفترة.
المعاملات الرئيسية (2-3) مع التحليق/الضغط الفوري والتراجع الآمن (إذا سمح).
تحديثات خالية من الوميض ؛ عند تغيير المسار - إضاءة أنيقة.

15. 3 بطاقة البطولة/الحدث

التواريخ، مجموعة الجوائز، القواعد (الرابط).
الحالة (التسجيل مفتوح/مغلق، قيد التنفيذ).
CTA «انضم»، «القواعد» ؛ تقدم المشاركة (نقاط/مكان).

16) أنتيباترن

البطاقة بأكملها قابلة للنقر + داخل الروابط الثانوية (مصائد التركيز/النقر).
اثنين من CTAs الأولية القريبة ("Play" و "Buy Bonus') - مسابقة الاهتمام.
لا توجد عناصر/هياكل عظمية → شبكة القفز (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 и Time-to-Click.
تمرير العمق → انقر: انقر فوق «فوق المنعطف «/» أسفل المنعطف ».
البطاقة → عرض التفاصيل → التحويل.
رؤية الشارات وتأثيرها على CTR.
وقت رؤية الهيكل العظمي и CLS.
ألف/باء: حجم البطاقات، وكمية البيانات الوصفية، ورؤية الإجراءات السريعة، ونوع الشبكة (القائمة/الشبكة).

20) قائمة QA المرجعية

توافر

• حلقات التركيز مرئية ؛ ترتيب علامة التبويب منطقي.
• النصوص البديلة و 'aria-label' صحيحة ؛ شارات الحالة مع النص.
• تباين النص/الخلفية ≥ AA.

السلوك

• اتفاقية أولية واحدة ؛ الإجراءات السريعة لا تتداخل مع السيناريو الرئيسي.
• تحوم/اضغط/مجموعة مختارة قابلة للتمييز ؛ قائمة السياق تعمل.
• فارغة/أخطاء/هياكل عظمية صحيحة ؛ هناك ريتري.

الأداء

• التحميل الكسول لوسائط الإعلام ؛ لا توجد قفزات حادة في التخطيط.
• فرضنة القوائم الكبيرة ؛ الرسوم المتحركة «التحويل/التعتيم».

الشبكة

• «minmax (240px، 1fr)» و «الفجوة» قابلة للتكيف ؛ البناء لا يكسر ترتيب التركيز/القراءة.
• RTL/التوطين لا «يكسر» المحاصيل والشارات.

21) التوثيق في نظام التصميم

Компоненты: "Card'،" GameCard'، "MatchCard'،" TournamentCard'، "StatusBadge"، "SkeletonCard'.
الرموز: نصف القطر/الظلال/المسافات البادئة/الطبقات، ألوان الشارة، الرسوم المتحركة.
الأنماط: «One CTA»، «Skeleton بدلاً من spinner»، «التمرير اللانهائي + الحفاظ على الوضع».
افعل/لا تقم بالمعرض: بطاقة محملة أكثر من اللازم مقابل الحد الأدنى، «بطاقة كاملة قابلة للنقر» مقابل عناصر صريحة.

موجز موجز

تعمل البطاقات عندما يكون لديها تسلسل هرمي واضح، و CTA رئيسي واحد، وحالات يمكن التنبؤ بها، وشبكات مستقرة، واحترام الأداء وإمكانية الوصول. التقط الرموز والأنماط، واستخدم الهياكل العظمية والتحميل الكسول، واحتفظ بالمحتوى موجزًا - وستصبح واجهات البطاقات سريعة وقابلة للقراءة وجاهزة للتحويل، خاصة في نصوص iGaming.