토렌트 기어

UI 리더 보드 및 미션 카드: 모범 사례

1) 모든 이유: UI 목표

리더 보드: "누가 어디에 있는지" 그리고 왜 다음에 경기를해야하는지 즉시 설명하십시오. 가장 가까운 대상을 보여줍니다 (ap 전 + N 포인트).

미션 카드: 긴 규칙을 10-30 분 동안 이해할 수있는 "행동 단위" 로 바꿉니다.

2) 리더십위원회 정보 계층

최소 열 세트:

1. 안정적인 너비와 많은 숫자로 (#) 을 배치하십시오.

2. 플레이어 (아바타/프레임/제목, 짧은 닉네임) -클릭 가능 → 프로필.

3. 포인트/등급 메트릭 (SP/MMR/이벤트 포인트) -오른쪽에 정렬됩니다.

4. 상/순위 영역 (희귀 아이콘/수상 범위).

5. 시간/단계 (실시간/예선/결승), 최종 타이머.

패턴:

줄을 강조하십시오 (끈적 끈적한 행 + "나에게 돌아 오십시오").
"타겟팅 할 임계 값": 작은 다이 "-48 SP에서 TOP-100".
타이 접착 (동일한 점의 경우 "T-10").

3) 제어 및 탐색

필터: 리그/분할, 지역, 친구, "그냥 내 공급자".

위치 (기본값), 포인트, 입력 시간, 상품 영역별로 정렬하십시오.

Pagination vs 무한 스크롤:

데스크톱 - 페이지 매김 + "자신에게", 모바일-끝없는 스크롤이지만 "처음/자신에게"
점프 투 랭크: 즉각적인 전환을위한 랭크 입력 필드 (스케일 보드에 중요).

4) 실시간 업데이트 (경련 없음)

Diff 업데이트: 실제로 이동 한 회선 만 변경합니다.

라인 이동 애니메이션: 120-200 ms, 완화; 점프가 없습니다.

깜박임 방지: 1-2 초마다 배치 업데이트 (더 이상 자주).

낙관적 인 업데이트: 포인트를 로컬로 추가하고 "동기화"... 로 표시하십시

5) UI 리더 보드의 무결성과 안전

규칙 설명: 버튼 "안경은 어떻게 계산됩니까?" 제목 옆에.

괴롭힘 방지: 닉네임의 일부 (옵션), 독성 이름에 대한 불만-1 클릭.

의심스러운 계정의 표시: 다른 사람들로부터 숨겨져 있음 플레이어- "포인트가 확인됩니다".

디비전 분리: 시각적으로 다른 리그 배지로 강한 배지가 스타터와 혼합되지 않습니다.

6) 미션 카드의 해부학 (한 눈에 디자인)

제목 (약 40-50 자), 미션 유형 아이콘.

짧은 설명 (얼마나 많은 일을해야하는지).

숫자/백분율 + 시간 추정치가있는 진행 표시 줄 (약 20-25 분).

어려움 (1-3 점) 과 희귀 한 보상 (색상/얼굴).

보상: "금전적" 하위 텍스트가없는 토큰/화장품 (작은 미니어처).

용어: 부드러운 색상으로 만료 될 때까지 타이머 (마지막 10% 에서 주황색/빨간색).

CTA: "시작 "/" 계속 "/" 픽업" -하나의 기본 버튼.

이차: "임무 변경" (허용되는 경우), "더 많은" (모달 규칙).

7) 미션 카드 상태

고정: 회색, 프롬프트 "레벨 7 이후에 열립니다"; CTA = "무엇이 필요합니까? ».

사용 가능: 유형별 색상; CTA = "시작".

진행 중: 진행 표시 줄 활성, CTA = "계속".

완료: 녹색 점검; CTA = "픽업" (효과

만료: 창백한; CTA = "숨기기 "/" 시즌 반복 N"

보류 중 (정직 점검): 노란색 다이 "결과 점검 1-3 분".

8) 시각적 언어 및 접근성

희귀 색상: 공통 (중립), 희귀 (파란색), 에픽 (보라색), 전설 (금), 신화 (무지개 악센트).

시맨틱 색상: 성공/진행-녹색, 경고-호박색, 마감일-빨간색.

(PHP 3 = 3.0.6, P 5:1, 글꼴은 모바일에서 14-16 px 이상입니다.

중요한 것은 색상 (아이콘/패턴) 뿐만 아니라

중요한 VFX: 0. 6–1. 2 c, 제어 중복없이.

Anavar: 테이블 → 카드 (2 열 태블릿, 1 열 전화); 고정 헤더.

9) 로딩 상태, 공극 및 오류

테이블 및 카드 용 해골 (3-5 줄/타일).

빈 상태: 유용한 텍스트 + "발사 임무 수행".

네트워크 오류: "반복" 을 사용하여 이해할 수 있습니다. 오프라인-캐시를 표시하고 "마지막 업데이트: 14:02" 로 표시하십시오.

10) 성능

가상화 목록 (300 개 이상의 행).

스프라이트/로티와 같은 아이콘 (SVG 동물원이 아님).

직불 필터/검색 (300-500 ms).

보드/미션을위한 클라이언트 캐시 및 ETag.

11) UI 임무에서 정직한 콘텐츠 및 남용 방지

짧은 "작동 방식": 드롭 기회, 연민 논리, 마우스 가드, 마케팅 성운 없음.

농장 방지 패턴: "다양성" 에 주목하십시오-공급자/내기를 변경할 때 진행 상황이 더 빠릅니

"미션 변경" 버튼의 냉각과 다시 할 수있는 힌트.

12) 정말 중요한 지표

CTR 미션 카드, 시작 속도, 완료 속도, 중앙 TTC.

미션 파생 화장품의 장비 요금/지속 시간.

리더 보드 참여: "자신에게", "프로필로 이동", 가시성 시간을 클릭하십시오.

VFX/알림에 대한 불만/음소거 비율.

미션/토너먼트에 참여하는 사람들을위한 Stickiness (DAU/MAU) 및 D7/D30 향상.

SP에 의한 지니: 비슷한 게임 시간에서의 고르지 못함.

13) A/B 아이디어

1. 진행 막대 형식: 숫자 + 비주얼 대 비주얼 만.

2. 시간 평가: 쇼/표시하지 않음; 시작에 미치는 영향.

3. CTA 레이아웃: 하나의 큰 버튼 대 두 개의 동일한 버튼.

4. 기본 정렬: 상품 영역 대 장소 별.

5. 마감일 백라이트 임계 값: 시간의 T-10% 대 T-20%.

6. 리더 보드의 "자신에게": vs 버튼은 항상 고정 문자열입니다.

14) JSON 체계의 예 (컨텐츠 → UI)

미션 카드

json
{
"id": "m. s4. 공급자. 다양성, "" 제목 ":" 공급 업체 열기 "," 요약 ":" 30 분 안에 3 개의 다른 공급자와 재생 "," 난이도 ":" 매체 "," est _ time _ min ": 25," 진행 ": {" 현재 ": 2," 대상 ": 3}," 보상 ": 10," 화장품 ": rarity", "0.  1}}, "만료": "2025-10-26T18: 00: 00Z", "상태": "in _ progress", "cta": {"lable": "계속", "딥 링크": "앱 :/오픈/로비? 탭 = 공급자 "}
}

리더 보드 행

json
{
"순위": 124, "사용자": {"id": "u _ 59211", "이름": "SeaFox", "abatar _ frame": "legend. 웨이브 "}", 점수 ": 18420," 리그 ":" 골드 I "," prize _ band ":" Top 100 "," delta _ to _ neside ": 47," is _ me ": 거짓," 스테이지 ":" qualifier "," 종료 ":" 2025-10-24T21: 00: 00Z "
}

15) 마이크로 코피 (짧고 명확한)

임무는 시작되었습니다- "가자! 20 분 남았습니다".

진행 상황을 장려- "수상 전에 1 명 더 제공자".

마감일- "시간의 10%, 한 번에 시간이 있습니다".

정직 점검- "결과를 확인합니다 (최대 3 분) - 보상이 저장됩니다".

16) 시험판 점검표

320 px에서 읽을 수있는 테이블; "자신에게" 끈적 끈적한 헤더가 있습니다.
미션 카드는 목표, 시간, 보상, CTA와 같이 "한눈에" 명확합니다.
깜박임없이 실시간 업데이트; diff 패치 및 부치 주파수.
작동 방식 화면: 포인트/캡/희귀 공식.
노이즈 컨트롤: VFX 제한/분, 야간 조용한 모드.
접근성: 키보드 탐색뿐만 아니라 대비.
남용 방지: 쿨 다운 "변경 임무", 다양성 강조.
측정 및 A/B 계획 수립; 로그를 클릭하고 동기화하십시오

리더 보드 및 미션 카드의 강력한 UI는 즉각적인 가독성, 부드러운 역학, 정직한 투명성 및 제어 된 노이즈입니다. 플레이어에게 가장 가까운 목표, 이해할 수있는 진행 상황 및 깔끔한 VFX를 제공하고 업데이트를 안정적으로 유지 그런 다음 보드는 경쟁의 엔진이되고 미션 카드는 편리한 "행동 단위" 가되어 체계적으로 참여와 유지를 향상시킵니다.