UI의 컨텐츠 계층 구조

1) 계층 구조가 필요한 이유

• 3-5 초 안에 세 가지 질문에 대답합니다: 무엇입니까? → 중요한 것은 무엇입니까? → 무엇을해야합니까?;
• 인터페이스를 예측 가능하고 스캔하기 쉽게
• 오류를 줄이고 변환을 증가시킵니

원칙: 신호> 잡음, 시퀀스> 다양성, 컨텍스트> 절대 규칙.

2) 중요성 수준 및 구조

1. 내비게이션 컨텍스트 (브랜드, 섹션, 부스러기/빵 부스러기).

2. H1 - 화면 대상 (가능한 한 짧고 필요한 경우 동사).

3. 납/자막 (한 줄의 혜택 또는 상태).

4. 기본 조치 (1-2 주요 CTA).

5. 기본 데이터 (기본 KPI, 1 차 카드).

6. 이차 데이터 (부품, 필터, 보조 테이블).

7. 메타/도움말 (힌트, 메모, 법률 텍스트).

규칙: 하나의 화면에서-하나의 H1, 두 개의 기본 CTA 이하.

3) 타이포그래피와 리듬

글꼴 스케일: H1 28-32, H2 22-24, H3 18-20, 본체 14-16, 마이크로 12 (웹에서 px/pt 등가).
줄 간격: 1. 3–1. 몸의 경우 5, 1. 2–1. 제목은 3입니다.
명령어 리듬: 여러 개의 기본 장치 (4/8 px). 자 골로 복크 블록: 16-24; 단락: 8-12.
대조: WCAG AA 최소; 제목은 항상 캡션/메타보다 대조적입니다.
색상 대 무게: 색상-크기/지방 대신 "크러치" 가 아닌 악센트.

4) 그리드 및 레이아웃

고정 개터가있는 그리드 12 열 (데스크톱 )/4-6 (모바일).

DOM에서 처음으로 시각적으로 =: 리더와 SEO를 선별하는 데 도움이됩니다

읽기 축: 왼쪽에서 오른쪽 (LTR) 또는 오른쪽에서 왼쪽 (RTL) -신호 순서를 반영합니다.
"주의 영역": 왼쪽 상단/중앙-제목 및 리드; "액션 바" -근처/아래.

5) 시각적 우선 순위 신호

크기와 무게 (타이포그래피) 가 기본 신호입니다.
위치 (LTR에서 위/왼쪽으로 = 더 중요).
색상 (고정 팔레트에 따른 CTA, 상태 악센트).
도해 법 (텍스트 지원 만 해당).
인던트/프레임 ("공기" 가 많은 카드가 더 중요합니다).
역학 (자극없이주의를 끌기위한 애니메이션 약 200ms).

6) 진보적 인 공개

• 접기 위-상황, 목적 및 기본 조치 만 있습니다.
• 아코디언/탭 섹션은 보조 데이터입니다.
• 드릴 다운: 카드 → 패널 → 모달.
• 오버로드 된 "도움말" 대신 인라인 힌트.
• 해골/위치 홀더는 하중 기간 동안 구조를 유지합니다.

7) 일반적인 화면의 계층

7. 대시 보드 1 개

상단의 H1 + 시간 필터.
KPI 바 (3-5 카드) -첫 번째 줄.
그래프/테이블-두 번째 줄, 정렬/필터가 나란히 있습니다.
Anomalies/alerts-별도의 열/테이프로 KPI와 혼합되지 않습니다.

7. 카탈로그 2 개/로비

H1 + 고속 필터/칩.
제목에 더 가까운 CTA "Play/Buy" 카드를 정렬합니다.
태그 (신규/탑/잭팟) -이름에 시각적으로 부차적입니다.

7. 3 엔티티 카드 (게임/아이템)

영웅 영역: 이름 (H1), 주요 사실 (RTP/휘발성/등급), 기본 CTA.
세부 정보: 설명/특성/피드백 탭.
메타 데이터: 레이블 및 법률 텍스트-하단에 있습니다.

7. 양식/마법사 4 개

스텝 헤더 + 짧은 리드 ("2 분, 카드는 해체되지 않습니다").
빈도/필수 필수로 필드 순서.
CTA의 오른쪽/아래, 지원 동작-아래/왼쪽을 연결합니다.
오류-필드 옆에서 간단히 그리고 케이스에서.

8) 국가 우선 순위

계층 구조는 다른 상태를 견뎌야합니다

Norm → 로드 → 성공/빈 → 오류.
로딩 중-프레임 (골격) 을 유지하면 CTA가 점프하지 않습니다.
오류-H1이 "무슨 일이 있었는지", CTA- "반복/접촉" 으로 변경됩니다.

9) 콘텐츠 토큰 및 디자인 시스템

• '글꼴. 제목. xl ',' 글꼴. 몸. md ',' 공간. 200 ',' 반경. md ',' 고도. sm '.
• 텍스트 역할: '텍스트. 제목 ',' 텍스트. 리드 ',' 텍스트. 보조 ',' 텍스트. 메타 ',' 텍스트. 도우미 '.
• 색상 역할: '악센트/중립/성공/경고/위험' + '레벨' (100-900).
• 구성 요소: 'KPI. 카드/섹션. 타이틀/인라인. 도움말/메타. 줄 '.

10) 측정 및 품질

• 스캔 시간 (중앙값에서 먼저 의미있는 클릭/동작)
• 초점 주문 오류 (사용자가 모양을 "누락" 하는 횟수).
• CTA 가시성% (CTA 대 클릭 수).
• INP/CLS (로딩 할 때 계층 구조가 "점프" 해서는 안됨).
• A/B: 더 큰 H1 vs 더 강한 대비; 측면 패널과 상단의 칩 필터.

• (PHP 3 = 3.0.6, PHP 4)

11) iGaming 관행 (예)

카지노 로비: H1 "로비", "새로운/라이브/잭팟/즐겨 찾기" 칩, 타일. 각 카드에는 이름, 제공자 아이콘, CTA "Play" 가 포함되어 있습니다. 새/잭팟 태그-보조.
운영자의 대시 보드: 첫 번째 라인-NGR/GGR/DAU/CR, 두 번째-트렌드 및 이상, 세 번째 테이블.
지불 단계: H1 "보충", "커미션 없음, 즉시", 변환 방법 목록, 최소 메타 텍스트.

12) 안티 패턴

화면에서 동일한 강도의 10 가지 악센트 ("시각적 비명").
텍스트가없는 사진/아이콘으로 제목 지정 (접근성 및 검색 중단).
"작은 인쇄물의 결과" 및 거대한 배너의 알림.
기본 CTA 옆의 보조 링크는 동일한 시각적 무게로 연결됩니다.
일관성없는 순서: 오늘날 "위의 필터", 내일 "왼쪽의 필터".

13) 구현 점검표

1. 화면 대상을 정의하십시오 (H1 + 1-2 기본 동작).
2. 레벨을 표시하십시오: 1 차/2 차/메타; DS 토큰에 핀을 넣습니다.
3. 타이포그래피 스케일과 기본 압입 리듬을 수집하십시오.

4. STA/헤더 점프없이 디버그 상태 (부팅/공백/오류)

5. 3-5 명의 사람들과 함께 5 분의 "스캔 테스트" 를 수행하십시오.
6. 원격 측정 (노출 CTA, 스캔 시간, 초점 순서) 을 연결하십시오.
7. 전후 예제와 함께 가이드에서 패턴을 수정합니다.

14) 결론

컨텐츠 계층은 "메인을위한 큰 글꼴" 이 아니라 타이포그래피, 그리드, 색상, 들여 쓰기 리듬, DOM 순서 및 다른 상태의 동작과 같은 솔루션 시스템입니다. 각 레벨마다 고유 한 역할과 무게가 있으면 인터페이스가 명확 해지고 빠르며 예측 가능해지며 사용자는 자신의 행동에 확신을 갖게됩니다.