카드 인터페이스 및 비주얼 블
1) 왜 카드
카드는 주요 속성과 동작으로 엔티티 (게임, 경기, 동작, 기사) 를 포장합니다. 좋은 카드:- 빨리 스캔하고
- 하나의 마스터 CTA를 제공합니다
- 다른 용기/열에 적응
- 동작이 예측 가능합니다 (호버, 프레스, 초점, 컨텍스트 메뉴).
2) 카드의 해부학
최소 구성:1. 미디어 영역 (표지/로고/미리보기, 16: 9/4: 3/1: 1).
2. 헤더 (1-2 개의 잘린 줄).
3. 메타 데이터 (자막, 태그/범주, 공급자, 시간).
4. 상태 배지 (신규, 라이브, 프로모션, 등급).
5. CTA/빠른 동작 (버튼 또는 아이콘).
6. 이차 텍스트 (짧은, 2-3 최대 줄).
7. 컨트롤 (즐겨 찾기,... 문맥).
계층: 미디어 → 헤더 → CTA → 메타 → 2 차. 파괴적인 행동은 메뉴에 숨겨져 있거나 표시됩니다.
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 px 내부; 8-12 px 단위 사이
행 높이: 1. 3–1. 5; 글꼴: 제목 16-18 px, 메타 12-14 px.
텍스트 클리핑: '라인 클램프: 2-3'; 툴팁/디테일의 필수 전체 텍스트.
5) 상태 및 상호 작용
호버/포커스/액티브: 섀도우/하이라이트이지만 레이아웃이없는 "점프"; ': 초점을 볼 수있는' 항상 볼 수 있습니다.
선택 가능: 체크 박스/프레임; 참조 카드와 혼동하지 마십시오.
프레스: 최대 98% + 섀도우 다운 (보통 120ms) 감소.
바쁜/로딩: "빈" 이 아닌 골격.
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 단어): 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 및 빠른 조치
카드 당 하나의 기본 (예: "Play", "Bet").
보조 아이콘 (즐겨 찾기, 공유,...) -호버/초점으로.
파괴적-확인 또는 실행 취소 패널을 통해.
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>' 입니다. 그렇지 않으면 제목은 링크와 같고 나머지는 정적입니다.
탭 순서는 시각에 해당합니다. 포커스 링이 보입니다.
'alt' 가있는 이미지; 장식- 'aria-hidden = "참"'.
상태의 경우 'role = "state" '/' aria-live = "polite"' 를 사용하십시오.
텍스트 및 배지 명암은 AAA입니다. 의미는 단순한 색상이 아닙니다.
10) 성능
미디어 및 목록의 게으른로드; 센트리 관찰자로 페이지 매김 또는 무한대 스크롤.
테이프/무한 출력에 대한 가상화 (λ10k 요소).
흐름을 최소화: '변환/불투명도' 만 애니메이션합니다.
스켈레톤이있는 렌더 카드를로드 한 후 컨텐츠로 교체하십시오.
11) 해골, 실수, 비어 있음
스켈레톤은 공격적인 쉬머없이 카드의 구조 (미디어/텍스트/버튼) 를 반복합니다. '선호 감소 운동' 을 고려하십시오.
오류 상태: 아이콘 + 짧은 텍스트 ("게임을로드하지 못함") + 재시도 단추.
빈 상태: 아이콘/일러스트레이션, 설명, "다음 단계" (필터/검색/구독).
12) 콘텐츠 관리
잘림: '라인 클램프' + 명시 적 툴팁.
긴 숫자/합계: 표 숫자: '글꼴 변형 숫자: 표 숫자; '.
현지화: 긴 라벨의 너비는 + 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) 정렬, 필터, 페이지 매김
상단/측면 필터 패널; 결과는 카드 그리드입니다.
Pagination이 보입니다. 끝없는 스크롤-" Back to Top "및 위치 유지.
필터는 스크롤을 "재설정" 하지 않습니다 빠르게 적용되거나 표시기와 함께 적용됩니다.
15) iGaming의 세부 사항
15. 게임 카드 1 개 (슬롯/테이블)
미디어: 16:9 포스터, 제공자 로고.
메타 데이터: 공급자, RTP, 변동성, 카테고리 (-승리 약속없이 유익합니다).
배지: 새로운, 인기, 토너먼트, 대박.
CTA: "Play" + "데모. "" 18 + "와 책임있는 게임의 맥락이 보입니다.
15. 2 일치/계수 카드
라이브 배지 라이브; 타이머/기간.
즉석 호버/프레스 및 안전한 실행 취소 (허용되는 경우) 가있는 키 계수 (2-3).
Flicker-free 업데이트; 코스를 바꿀 때-깔끔한 조명.
15. 3 토너먼트/이벤트 카드
날짜, 상금 풀, 규칙 (링크).
상태 (등록 공개/종료, 진행 중).
CTA "가입", "규칙"; 참여 진행 (포인트/장소).
16) 안티 패턴
전체 카드는 보조 링크 (초점/클릭 트랩) 내에서 클릭 가능합니다.
근처의 두 가지 주요 CTA ("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 기본 -CTA! 타임 투 클릭.
스크롤 깊이 → 클릭: "굽힘 위로 "/" 굽힘 아래" 를 클릭하십시오.
카드 → 보기 세부 사항 → 변환.
배지의 가시성 및 CTR에 미치는 영향.
해골 눈에 보이는 시간 BLS.
A/B: 카드 크기, 메타 데이터 양, 빠른 동작 가시성, 그리드 유형 (목록/그리드).
20) QA 체크리스트
가용성
- 초점 링이 보입니다. 탭 순서는 논리적입니다.
- 알트 텍스트와 '아리아 레이블' 이 정확합니다. 텍스트가있는 상태 배지.
- 텍스트/배경 대비는 AAA입니다.
행동
- 하나의 1 차 CTA; 빠른 동작은 주요 시나리오와 겹치지 않습니다.
- 호버/프레스/선택 가능; 문맥 메뉴가 작동합니다.
- 빈/오류/해골이 정확합니다. 재시도가 있습니다.
성능
- 게으른 미디어 로딩; 레이아웃에 날카로운 점프가 없습니다.
- 큰 목록의 가상화; '변환/불투명도' 애니메이션.
그리드
- 'minmax (240px, 1fr)' 및 'gap' 은 적응력이 있습니다. 메이슨은 초점/읽기 순서를 위반하지 않습니다.
- RTL/현지화는 자르기와 배지를 "파괴" 하지 않습니다.
21) 설계 시스템의 문서
계정: '카드', '게임 카드', '매치 카드', '토너먼트 카드', 'StatusBadge', '스켈 레톤 카드'.
토큰: 반경/그림자/들여 쓰기/레이어, 배지 색상, 애니메이션.
패턴: "One CTA", "스피너 대신 스켈레톤", "무한 스크롤 + 유지 위치".
갤러리 수행/수행 금지: 오버로드 된 카드 대 최소한의 "클릭 가능한 전체 카드" 대 명시 적 요소.
간략한 요약
카드는 명확한 계층 구조, 하나의 마스터 CTA, 예측 가능한 상태, 안정적인 그리드 및 성능 및 접근성에 대한 존중이있을 때 작동합니다. 토큰과 패턴을 캡처하고, 골격과 게으른로드를 사용하고, 콘텐츠를 간결하게 유지하며, 특히 iGaming 스크립트에서 카드 인터페이스가 빠르고 읽기 쉽고 변환 준비가됩니다.