시각적 계층 및 우선 순위

1) 시각적 계층 구조는 무엇입니까?

비주얼 계층 구조는 사용자의주의를 분배하고 대상 동작 (가입, 예금, 게임 검색, 필터, 출력) 을 빠르고 충돌없이 진행하는 인터페이스를 강조하는 시스템입니다. 계층 구조는 대비, 스케일, 위치, 색상, 정보 밀도, 모션 및 공백을 통해 구성됩니다.

목표는 "인지 비용" 을 줄이고 필요한 요소에 의해 First Meaningful Click의 점유율을 높이는 것입니다.

2) 비즈니스 영향 및 KPI

올바른 계층 구조는 다음과 같은 직접적

목표 CTA 변환 (등록, 예금, 즐겨 찾기에 추가)

가치가있는 시간

혼란률

바운스, 스크롤 깊이 및 고정

• FMC (첫 번째 의미있는 클릭): 로드 후 키 CTA를 클릭 한 사용자의%
• TTV (Time to Value): 로그인에서 키 값까지의 시간 (예: 슬롯을 찾아서 실행).
• 화면에서 주요 CTA의 CTR: 홈, 카탈로그, 게임 페이지, 박스 오피스.
• 1 차/2 차 클릭 비율 (주의 분야).
• 제안/토너먼트로 차단하려면 깊이를 스크롤하십시

3) 시각적 계층 구조의 원리 (핵심)

1. 대조와 규모: 더 중요하고 대조적입니다.
2. 위치 및 읽기 순서: 상단/왼쪽 및 "첫 번째 화면" 이 우선 순위를받습니다.

3. 백색 공간: 공기 = 중요성. 너무 빡빡합니다-우선 순위가 손실됩

4. 색상 및 채도: 색상 악센트- "주의 통화"; 그녀를 구하십시오

5. 형태 및 도해 법: 단추 모양, 마커, 상태 아이콘은 독창성을 향상시킵니다.
6. 모션 및 마이크로 애니메이션: 드문, 간단한 전체 악센트; "공정" 을 피하십시오.
7. 그룹화 (gestalt): 근접, 유사성, 폐쇄, 정렬, 공통 영역.
8. 정보 밀도: 임계 경로에서-올바른 경로 만 있고 나머지는 "약한" 레이어에 있습니다.

4) 우선 순위 매트릭스 (P1-P4)

P1 (Critical-Primary): 화면 당 1-2 CTA/항목. 큰 크기, 밝은 대비, 고정 된 위치.
P2 (중요 지원): 필터, 빠른 태그, 보조 CTA. P1 옆의 중간 대비.
P3 (도움말/상황): 힌트, 등급, 미니 카드. 평온한 스타일, 컴팩트.
P4 (배경/참조): 도움, 바닥, 법적 링크. 작은 대비와 크기.

규칙: 한 화면에서 하나 이하의 P1. P1이 경쟁하면 더 이상 P1이 아닙니다.

5) 계층 구조

글로벌: 최상위 탐색, 글로벌 검색, 알림.
페이지: 영웅 블록, H1/H2, 키 배너/오퍼.
구성 요소: 게임 카드, 박스 오피스 양식, 토너먼트 테이블.
구성 요소 내: 현장 순서, 서명, 상태, 마이크로 힌트.

6) 전형적인 시나리오 (iGaming-fitting)

• P1: "계정 생성 "/" 로그 인" (큰 버튼, 고정 된 위치).
• P2: 소셜 로그인, "비밀번호 보이기", 비밀번호 정책.
• P3: "암호를 잊어 버렸습니까?" 링크, 보안 팁.

• P1: Top Up/Display + 선택된 방법.
• P2: 근처의 금액, 빠른 사전 설정, 수수료/제한.
• P3: 자세한 메소드 설명, 타이밍을 취소했습니다.

• P1: 검색 + 키 필터 (공급자, 변동성, RTP, New/Hit).
• P2: 세그먼트/태그 (Megaways, Jackpot, Buy Feature).
• P3: 2 차 정렬, 카드 배지 (새로운, 적중, 토너먼트).

• P1: 가입/상 세부 사항.
• P2: 리더 보드 (처음 5), 카운트 다운 타이머.
• P3: 클릭/회전 규칙을 완료하십시오.

7) 타이포그래피 및 그리드

모듈 식 스케일: 12-14 (텍스트), 16 (줄기), 20-24 (하위 제목), 28-40 (H1/영웅).
기초 라인: 4/8px 단계; 세로 리듬 = 가독성.
줄 길이: 텍스트의 경우 45-75 자; 카드 설명은 20-40입니다.
라인 간: 텍스트의 경우 120-150%, 제목의 경우 110-120%.

8) 색상과 대비

텍스트 대비: 주요 경로의 텍스트에 대한 AA 레벨 랜드 마크보다 낮지 않습니다.
색상 역할: 기본 (CTA), 악센트 (주의), 정보/성공/경고/위험 (상태).
어두운 주제: 광범위한 색상 평면의 채도를 줄이기 위해 테두리와 텍스트의 대비를 강화합니다. "네온 통증" 을 피하십시오.
기본/호버/초점/활성/비활성화 요소의 상태는 구별 할 수 있습니다.

9) 악센트 및 버튼

기본 CTA: 화면 당 하나, 눈에 띄는 색상/스케일, 충분한 필드 (최소 탭 44 × 44px).
2 차/3 차: 부드러운 톤, 윤곽 스타일.
스피너 계층 구조: 진행 상황은 피드백을 제공하지만 P1을 중단해서는 안됩니다.

10) 주의 역학 및 속도

F/Z- 패턴: 시선이 지나갈 것으로 예상되는 P1을 배치하십시오.
Hick의 법칙: 덜 빠르다-첫 번째 단계 옵션 단축.

Fitts의 법칙: 더 크고 가까운 클릭이 더 쉽습니다. 적중 영역을 중요하게 증가시

직렬 프롬프트: "텍스트 벽" 이 아닌 단계별로 가르칩니다.

11) 홈 스크린/랜딩 페이지

영웅 블록: 짧은 제안 + 단일 P1.
비주얼 "reiki": 첫 번째 스크롤 (범주, 새 항목, 토너먼트) 까지 최대 3-4 개의 섹션.
사회적 증거: 제공자 배지, "주중 적중" -P2는 P1을 중단하지 마십시오.

12) 대시 보드 및 테이블

첫 번째 화면: 1-2 키 KPI 크고 스파크 라인 + 트렌드 배지.
표: 중요도에 따라 열을 정렬하고 키 열을 "동결" 하고 밀도 스위치 (소형/표준) 를 사용하십시오.
빈 상태: 다음 단계를 설명하십시오 (P1 버튼 + 프롬프트).

13) 모바일 vs 데스크톱

모바일: 하나의 P1이 엄격하게 스크롤 라인 위에 있으며 탭 막대는 5 점이며 플로팅 CTA는 체크 아웃/플레이에 허용됩니다.
데스크톱: 컨테이너 너비 1200-1440px; 행 길이를 제한하면 "스트레칭" P1이 발생하지 않습니다.

14) 현지화, 숫자, RTL

회선 길이 (독일어/터키어), 다른 통화 및 등급을 고려하십시오.
RTL: 그리드 및 악센트 순서를 미러링하지만 P1 우위를 유지하십시오.

15) A/B 및 계층 구조 지표

• P1 크기/대비의 12-16% 증가 → FMC 및 CTR의 증가.
• 이동 필터 (P2) 가 검색 → 게임 검색 TTV를 줄입니다.
• 금전 등록기의 첫 단계에서 옵션의 축소 → 위의 완료.

트랙: FMC (N 초), CTR P1, 대상 블록에 대한 스크롤 깊이, TTV, 혼란률 (오류/반환), Rage Clicks.

16) 감사 절차 (체크리스트)

1. 각 키 화면에 이름 P1-정확히 하나가 있습니까?
2. P2 요소는 P1을 지원합니다. 색상/대비로 논쟁하지 않습니까?
3. 시야의 길: P1이 처음 3 개의 초점을 맞추나요?
4. 텍스트/ACTA가 밝거나 어두운 테마에서 충분합니까?

5. 최소 적중 지역이 충족 되었습니까

6. 소음: 변환을 잃지 않고 요소의 20% 를 제거 할 수 있습니까?
7. 빈 상태가 행동으로 이어집니까?
8. 상태 (호버/포커스/액티브) 는 구별 가능하고 액세스 가능합니까?
9. 모바일에서 스크롤하지 않고 P1이 표시됩니까?
10. 깔때기에서 메트릭이 연결되고 읽을 수 있습니까?

17) 반 패턴

하나의 화면에서 두 개 이상의 기본.
P1이 겹치는 "화려한" 배너.
회색으로 회색 (불충분 한 대비).
중요한 경로에 텍스트가없는 아이콘.
오버로드 된 카드: 6 개 이상의 배지, 4 개의 설명 줄.
대상이없는 애니메이션 (깜박임/끝없는).

18) 설계 시스템: 우선 순위 사양

토큰: '색. 기본 ',' 색상. 악센트 ',' 고도. p1 ',' 반경. lg ',' 공간. 8/12/16`.
차원 역할: 'btn. p1. lg ',' btn. p2. md ',' 텍스트. h1/h2/body ',' 배지. 상태 '.
Layers/Z- 인덱스: 컨텐츠 모듈에 비해 P1이지만 시스템 모델보다 낮습니다.
상태: 예제가있는 상태 테이블 (스크린 가이드).

19) 우선 순위 알고리즘 (의사)

1. 화면의 목적을 정의하십시오 (한 문장).
2. P1 (하나의 요소) 을 할당하면 가장 눈에 띄게 디자인됩니다.
3. P1 옆과 뒤에 P2 (2-5 요소) 양식.
4. P3-P4를 숨기거나 해제하십시오.
5. 경제성 및 이동성 점검표를 작성하십시오.
6. 경로와 P1 시간을 확인하십시오 (3 초 클릭).
7. A/B를 시작하고 FMC/TTV/CTR을 관찰하십시오.

20) 마이크로 카피 및 텍스트

H1 제목-간단한 동사/값: "10 초 후에 재생을 시작하십시오".
CTA-액션 및 결과: "1 분 안에 보충", "지금 플레이".
팁-전문 용어없이 최대 한 줄.

21) 계층 과제에 대한 수락 기준

단일 P1은 화면에 정의되어 있습니다. 스크롤하지 않고 (모바일/데스크톱) 참조

P1 대비는 지침에 해당합니다. 치수는 면적이 44 × 44px 이상입니다.
P2는 P1보다 시각적으로 약합니다 (1-2 대비/스케일 단계).
요소의 상태는 구별 할 수 있습니다. 키보드 포커스 스타일이 있습니다.
FMC/TTV/CTR/Scroll Depth에 대한 연결된 분석 이벤트.

22) 짧은 요약 (TL; DR)

계층은 관심의 대상입니다. 화면 당 하나의 명시 적 P1, P2를 통한 지원, 노이즈 감소, 충분한 대비 및 읽을 수있는 타이포그래피. 체크리스트로 자신을 테스트하고 FMC/TTV/CTR을 측정하고 A/B 테스트로 가설을 확인하십시오.