목록 및 격자: UX 비교
1) 목록에있을 때 그리드 (규칙 5 질문)
자신에게 물어보십시오:1. 사용자 목표: 매개 변수 (목록) 를 빠르게 비교하거나 시각/표지 (그리드) 로 선택 하시겠습
2. 데이터 형식: 구조 필드 (표/텍스트) → 목록; 시각적 객체 (스킨, 사진) → 그리드.
3. 밀도 대 개요: 화면 당 최대 항목 (목록) 또는 유니폼 쇼케이스 (그리드) 가 필요합니까?
4. 기본 조치: 카드 (그리드) 에서 열기/세부 정보 (목록) 또는 즉시 "재생/구매"?
5. 장치 컨텍스트: 모바일 세로-일반적으로 카드 용 2 행 그리드; 데스크톱의 보고서/테이블-목록/테이블.
짧음: 비교-목록; 눈으로 선택하십시오-그리드.
2) 콘텐츠 모델 및 IA
주 신호는 텍스트/필드입니다. 로그, 트랜잭션 이력, 보고서, 속성 검색 결과.
카드 우선: 주요 신호는 표지/미리보기입니다. 게임/제품, 미디어, 컬렉션에 적합합니다.
하이브리드: 동일한 데이터 소스를 가진 "적응 형 라인 카드" (모바일-카드, 데스크탑-열이있는 라인).
3) 요소 설계: 행 대 카드
행 (목록 행)
구조: 아이콘/축소판 (선택 사항), 제목, 1-3 키 필드, 메타 (날짜/상태), 상황 동작 (표시).
강점: 가독성, 고밀도, 우수한 정렬 가능한 열 세트.
UX 팁: 높이 수정; "공개" 의 작은 필드를 숨기도록 정렬하십시오.
그리드 카드
구조: 표지, 제목, 캡션/라벨 (New/Jackpot), 하나의 주요 CTA + 추가 조치... "
강점: 시각적 선택, 빠른 행동, 감정적 맥락.
UX- 팁: 종횡비를 유지하십시오 (예: 4: 3/1: 1), 동일한 제목 높이, 툴팁이있는 텍스트 클리핑.
4) 탐색, 정렬 및 필터
일반: 필터와 종류는 근처에 있고 안정적입니다 (점프없이). 활성 조건-결과에 대한 칩.
목록: 많은 열 + "동결" 헤더를 지원합니다. 헤더를 클릭하여 정렬하십시오.
그리드: 드롭 다운 목록별로 정렬; 필터-칩/패널 별. "비주얼" 검색-호버/롱 프레스에서의 미리보기.
5) 모바일 vs 데스크탑
모바일:- 그리드: 2-in-a-row (전화), 3-in-a-row (태블릿). 엄지 손가락 영역에 큰 CTA.
- 목록: 컴팩트 한 라인 (56-72dp), 접을 수있는 메타 필드.
- 그리드: 1200px 이하에서 4-6-in-a-row, 'min' 카드 너비로 자동 채우기.
- 목록: 테이블/행, 열 크기 조정, 빠른 테이블 검색.
6) 상태 및 다운로드
해골: 골격 선 (최소 3-5), 표지 및 텍스트 플러그가있는 골격 카드.
빈: 왜 비어 있는지 설명하고 필터를 사전 설정/제거하십시오.
오류: 사용자 선택 및 위치 저장; 다시 시도하십시오.
새로 고침: 카탈로그의 끝없는 테이프보다 "더 많이 표시" (하이브리드) 가 선호됩니다. 로그의 경우 "일시 정지" 로 자동 스크롤 할 수 있습니다.
7) 성능
목표: INP 1, 스크롤 jank <1%.
목록: 문자열 가상화, 고정 높이, 지연된 계산.
격자: 게으른 이미지 (AVIF/WebP), 'srcset/sizes', 예측 가능한 크기, 20-60 장의 "배치".
일반: '콘텐츠 가시성: 자동', 미리보기 캐시, 영웅 요소에 대한로드 우선 순위.
8) 경제성
목록: 올바른 의미론 ('table/thead/tbody', 'aria-sort') 이있는 테이블은 행/셀에 중점을 둡니다.
격자: 'role = "grid"' 또는 'role = "list"' 가있는 목록; DOM의 순서 = 비주얼; 이미지 캡션.
키보드: 화살표/탭; 입력-열기; 공간- "즐겨 찾기" (적절한 경우).
클릭 크기: 44px 이상; AA 대비; 아이콘의 명시 적 서명.
9) 측정 및 원격 측정
이벤트:- (PHP 3 = 3.0.6, PHP 4)
- (PHP 3 = 3.0.6, PHP 4)
- TTFA (Time-to-First-Action), qCTR 결과, 스크롤 깊이, 결과 제로,
- Rate (목록), Quick-Action Rate (그리드), Latency p95를 비교하십시오.
10) A/B 실험 (테스트 대상)
새/귀환 자에 대한 기본보기 (목록/그리드).
화면 당 항목 수, 행 높이, 카드 크기.
필터/정렬 순서; 칩 vs 사이드 바.
카드의 빠른 동작 (아이콘/텍스트, 1 대 2 CTA).
Guardrails: INP/CLS, 레이아웃 "점프" 에 대한 불만, 결과 제로 성장.
11) iGaming의 예
게임 로비 (B2C): 그리드-커버 + 플레이/데모, 뉴/잭팟 라벨, 칩 필터 (공급자/카테고리/역학).
공급자 카탈로그: 게임 수가있는 로고 그리드; 클릭-제공자의 페이지 (내부-게임 그리드).
보고서/금융 (B2B): 목록/테이블-NGR/GGR/FTD/CR 열, 제목 수정, 내보내기.
거래 내역: 목록-조밀 한 시리즈, 상태, 양/ID/날짜 별 검색; 파일의 문자열을 확장합니다.
프로모션/토너먼트: 날짜와 CTA가있는 배너 그리드, "Going Now/Coming Soon" 으로 정렬.
12) 유연한 스위치 및 개인화
사용자에게 "목록 그리드" 라디오 버튼을 제공하고 선택 (사용자/테넌트 당) 을 기억하십시오.
성능의 사전 설정을 제공합니다: "Tight", "일반적으로", "Large".
상황 논리: 처음으로-로비의 격자; 검색에서-정확한 비교를위한 목록.
13) 안티 패턴
고정 종횡비가없는 격자 → "춤" 카드 및 높은 CLS.
열이 너무 많은 목록은 필요없는 수평 스크롤입니다.
다른 동작으로 카드와 호버에서 동작 버튼을 복제합니다.
각 하중에서 정렬/필터를 혼합합니다 (초점이 중단됨).
숨겨진 활성 필터-사용자는 결과를 "잃습니다".
14) 구현 점검표 (단계별)
1. 시각적 또는 속성 비교에 의해 화면이 선택되는지 여부를 정의하
2. 모델을 정의하십시오: 목록/격자/하이브리드; IA 및 데이터 소스에 동의합니다.
3. 키 영역 크기가 고정 된 행 또는 카드를 설계하십시오.
4. 정렬/필터: 눈에 보이는 칩, 안정적인 정렬 제어.
5. 로딩/빈/오류: 골격, 친숙한 텍스트 및 재 시도.
6. 성능: 게으른/가상화, '콘텐츠 가시성', p95 목표.
7. A11y: 의미론, 키보드, 대비, 탭 대상 크기.
8. 원격 측정: TTFA, qCTR, 결과 제로, 대기 시간 p95.
9. A/B 기본보기, 치수, 빠른 동작
10. 메모리 선택: 보기 모드와 마지막 필터를 유지하십시오.
15) 결론
목록과 그리드는 다양한 작업을위한 도구입니다.
속성과 비교가 중요한 경우 목록을 작성하십시오.
시각적으로 결정하고 빠른 조치를 취하면 그리드를 사용하십시오.
목표를 정의하고, 치수와 동작을 캡처하고, 인터페이스를 빠르고 쉽게 액세스 할 수 있으며, 사용자는 불필요한인지 노이즈없이 더 적은 단계의 결과를 얻