卡接口和可視塊

1）卡片為什麼

• 快速掃描，
• 給出一個主要的CTA，
• 適應不同的容器/揚聲器，
• 可預測的行為（hover, press,焦點,上下文菜單）。

2）卡片解剖學

1.媒體區（封面/徽標/預覽,16：9/4：3/1：1）。

2.標題（截斷的1-2行）。

3.元數據（副標題，標簽/類別，提供商，時間）。

4.狀態徽章（新穎性，現場，促銷活動，排名）。

5.STA/快速動作（按鈕或圖標）。

6.次要文本（簡短的2-3行max）。

7.Controlls（當選，……上下文）。

層次結構：媒體→標題→ CTA →元→次要。破壞性行為隱藏或放在菜單上。

3）網格和布局

網格（固定列）：2-6列；通過auto-fit/auto-fill進行適應。
Responsive tiles： 「minmax （240 px, 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, meta 12-14 px。
拼寫文本：「line-clamp： 2-3」；必定是工具/部件中的完整文本。

5）狀態和交互性

Hover/Focus/Active：陰影/背光,但不存在「跳躍」布局；'：focus-visible'始終可見。
選擇性：支架/框架；不要與參考卡混淆。
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％，前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）表演

懶惰地下載媒體和列表；與哨兵觀察者進行分區或不定式滾動。
磁帶/無限發行虛擬化（± 10k元素）。
最小化reflow：僅使用「轉換/opacity」動畫。
將卡渲染為骨架,並在下載數據後替換內容。

11）骨架，錯誤，空白

骨架重復卡的結構（媒體/文本/按鈕），沒有激進的shimmer；考慮到「prefers-reduced-motion」。
錯誤狀態：圖標+簡短文本（「無法下載遊戲」）+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，波動，類別（僅提供信息，沒有獲勝承諾）。
徽章：新，人口，錦標賽，傑克波特。
CTA：「播放」+「演示」。「18+」的上下文和負責任的遊戲是可見的。

15.2比賽/系數卡

現場直播；計時器/時間段。
關鍵系數（2-3）具有瞬時散發/散發和安全undo（如果允許）。
無閃爍更新；當課程改變時-整潔的背光。

15.3錦標賽/活動卡

日期，獎金，規則（鏈接）。
狀態（「註冊/關閉」，「繼續」）。
CTA「加入」，「規則」；參與進展（積分/地點）。

16）反模式

整個卡片在次要鏈接（焦點/點擊陷阱）中是可點擊的+。
附近的兩個primary-CTA（「播放」和「購買獎金」）是關註的競爭。
缺少播放器/骨架→「跳躍」網格（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）Snippets

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>
);
}

不定式滾動哨所

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 →點擊：點擊：「在彎道上」/「彎道下」。
卡片→查看零件→轉換。
徽章的可見性及其對CTR的影響。

Skeleton visible time и CLS.

A/B：卡的大小，元數據的數量，快速行動的可見性，網格類型（清單/網格）。

20） QA支票清單

可用性

• 焦環是可見的；Tab順序是合乎邏輯的。
• Alt文本和「aria-label」是正確的；文本狀態徽章。
• AA ≥文本/背景的對比。

行為

• 一個primary-CTA；快速操作不會與主腳本重叠。
• Hover/press/selected是可區分的；上下文菜單工作。
• 空白/錯誤/骨架是正確的；有一個復古。

表演

• 懶惰的媒體下載；沒有突然的布局跳躍。
• 大列表虛擬化；「轉換/操作」動畫。

網格

• 「minmax（240 px，1fr）」和「gap」是適應性的；Masonry不會破壞焦點/閱讀順序。
• RTL/本地化不會「打破」修剪和徽章。

21）設計系統中的文檔

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

令牌：半徑/陰影/縮進/圖層，徽章顏色，動畫。
模式：「One CTA」，「Skeleton代替旋轉器」，「Infinit-scroll+保持位置」。
Do/Do n't Gallery：超載卡vs最小、「可點擊的整張卡片」vs顯而易見的元素。

簡短摘要

當卡具有明確的層次結構，一個主要的CTA，可預測的狀態，穩定的網格以及對表演和可用性的尊重時，卡就可以工作。記錄令牌和模式，使用骨架和懶惰的下載，保持內容簡潔-卡接口將變得快速，可讀和轉換，尤其是在iGaming腳本中。