사용자 프로필 인터페이스

1) 원칙

1. 화면 당 하나의 생각. 프로필 = 각각 하나의 CTA가있는 짧은 독립형 섹션 세트.
2. 기본 보안. 2FA/세션/장치의 가시적 인 상태, 간단한 동작 경로.
3. 데이터 투명성. 저장되는 내용, 이유, 비활성화/다운로드/삭제 방법.
4. 과부하 개인화가 없습니다. 경험에 영향을 미치는 실제 설정 만.

5. 문맥을 잃지 마십시오. 초안을 작성하고 마지막 섹션으로 돌아가서 예측할 수 있는

2) 정보 아키텍처

권장 구조 (왼쪽 메뉴/탭):

프로필 (아바타, 이름, 연락처)
보안 (암호, 2FA, 장치/세션)
결제 (방법, 자동 저장 부품, 이력)
한계 (책임 게임)
KYC (상태, 문서 업로드)
선호도 (언어, 통화, 배당률 형식, 빠른 베팅, 주제)
알림 (유형/채널, 침묵/다이제스트)
개인 정보 보호 및 데이터 (가시성, DSAR/내보내기, 계정 삭제)

전체 PAN/CVC를 표시하지 마십시오. UX 전용 토큰 및 마스크.

3) 프로필 헤더

아바타 (로딩/자르기), 표시 이름, ID/사용자 이름.
상태 배지: KYC: Under Review/Passed, 2FA: On/Off, Responsible Play: Active.
빠른 링크: "암호 변경", "전자 메일/전화 확인", "제한 설정".

html
<header class="profile-head">
<img class="avatar" alt="Аватар пользователя">
<div>
<h1>Имя пользователя</h1>
<div class="badges"><span class="badge">KYC: На проверке</span><span class="badge">2FA: Выкл</span></div>
</div>
<button class="btn btn--primary">Загрузить документы</button>
</header>

4) 프로필 섹션

필드: 이름, 생년월일, 국가, 인터페이스 언어.
연락처: 전자 메일 (확인), 전화 (OTP).
로케일: 언어와 국가에 연결된 날짜/시간/통화.
생년월일은 KYC 이후의 지원을 통해서만 편집됩니다.

UX: 형식 프롬프트, 소프트 마스크, 파기로 자동 저장, 성공 확인.

5) 안전

비밀번호: 현재 암호 + 품질 규칙 (압력 게이지/프롬프트) 에 따라 변경되며 소급하여 요구 사항을 표시하지 않습니다

2FA: TOTP/SMS; 간단한 마스터 스트림: "→ QR → 백업 코드 사용".
장치 및 세션: 활성 입력 목록 (장치/OS/위치/시간), CTA "현재를 제외한 모든 종료".
소셜 로그인: 확인과 바인딩/연결 해제.

6) 지불

지불 방법: 카드 (마스크 '1234'), A2A/지갑; 기본 상태.
결론: 해당되는 경우 마이크로 전송 검증을 통해 세부 정보 (IBAN/지갑) 를 저장했습니다.
거래 내역: 유형/날짜/금액별 필터를 사용하여 필터를 내보냅니다.
투명성: 커미션/ETA 및 프로세스/거부/준비 상태.

7) 한계 (책임 플레이)

유형: 예금, 요율, 타임 아웃, 자기 배제.
UX: 라디오 기간 (일/주/월) + 양, 명시 적 텍스트 "적용됩니다"...
약화를 향한 변화-지연; 조임-바로.

8) KYC

파일 요구 사항을 지우기 (유형/크기/선명도) + 미리보기

스테퍼: 개인 데이터 → 문서 → 보내기 → 검토 중.
상태 및 용어, 준비 상태 알림 채널, 제출 된 문서의 이력.

9) 환경 설정

계수의 형식은 10 진수/분수/미국식입니다.
빠른 베팅: 허용되는 경우 스위치 + "확인 없음" 경고 및 실행 취소.
테마: 밝은/어두운/체계적인; 시각 장애인의 대비 모드.
지리 및 언어: 관할 요구 사항 (컨텐츠/블록 목록) 을 유지하지만 기억하십시오.

10) 통지

채널: 응용 프로그램에서 푸시/전자 메일/SMS/.
그룹: 재무, 게임, 소셜, 마케팅 (기본적으로).
"방해하지 마십시오": 시간 범위 및 조건 (예: 밤에는 마케팅이 없습니다).

미리 보기: 알림 모양, 끄기 위치

11) 개인 정보 보호 및 데이터

프로필 가시성 (소셜 기능 인 경우): 닉네임/아바타/활동을 보는 사람.
데이터로드 (DSAR): 리드 타임으로 아카이브를 요청하십시오. 준비 상태에 대한 알림.
계정 삭제: 결과, 유예 기간, "동결" 을 대안으로 설명하십시오.
동의 로그: 쿠키/마케팅/조건-날짜 및 버전.

12) 액션 이력

피드: 항목/종료, 비밀번호 변경/2FA, 결제 세부 정보 변경, 한도.
필터 및 내보내기; 지오 IP 및 장치에 대한 설명.
CTA "그렇지 않습니까?" → 빠른 암호 변경 및 세션 종료 흐름.

13) A11y 및 현지화

라벨과 단서는 'aria-describedby' 를 통해 연결됩니다. 오류- 'role = "경고"'.
보이는 ': 초점 표시', 탭 순서는 시각적 순서에 해당합니다.
'선호 감소 모션' -최소 애니메이션.
언어 확장: 너비의 20-30% 마진; 숫자는 표 형입니다 ('글꼴 변형 숫자: 표-수; ').

14) 모바일 패턴

서랍으로서의 프로필 메뉴; 주요 상태/CTA-상단에 있습니다.
긴 형태의 하단에 끈적 끈적한 CTA ("변경 저장").
필드 스케일링, 키보드 유형 ('입력 모드').
알림/기록-끝없는로드 및 센트리 관찰자가있는 테이프.

15) 빈, 오류, 상태

빈: 친근한 힌트와 "다음 단계" (방법 추가/2FA 포함).

오류: 원인 + 수정 + 재시도 방법; 입력을 재설정하지 마십시오

바쁜: 전체 화면을 잠그지 않고 로컬 부트 로더; TTFF λ100 ms.

16) 지표

주요 설정 (2FA, KYC, 결제 방법) 별 완료율.
완료 시간 섹션 (암호/2FA/KYC/제한).
양식 오류율 + 재생 성공률.
채택 기본 설정 (주제, 빠른 베팅, 승률 형식).
보안 자세: 2FA 사용자의 비율, 완료된 해외 세션 수.

17) 반 패턴

바쁘거나 확인하지 않고 조용히 보내십

숨겨진 중요 설정 (2FA/한계) 의 깊이.
모달의 긴 설문지; 자동 저장이 없습니다.
초점 설정 및 "점프" 레이아웃; 사진으로 인한 CLS.
2FA/OTP 코드 사본 금지.
믹스 마케팅 및 기본 중요 알림.

18) 디자인 시스템 토큰 (예)

json
{
"profile": {
"sectionGap": 20,
"fieldHeight": 44,
"radius": 12
},
"security": {
"badge": { "radius": 8, "px": "4 8" },
"focusRing": { "width": 2, "offset": 2 }
},
"lists": {
"row": { "py": 12, "px": 16 },
"divider": 1
},
"motion": { "hoverMs": 160, "pressMs": 90 },
"a11y": { "contrastAA": true, "reduceMotion": true }
}

19) 스니펫

장치/세션 목록 (IM)

html
<ul class="sessions" role="list">
<li>
<div>Chrome · Windows · Киев</div>
<small>Последняя активность: 14:32</small>
<button class="btn btn--ghost">Выйти</button>
</li>
<li aria-current="true">
<div>Safari · iOS · Текущая сессия</div>
<small>Последняя активность: сейчас</small>
<button class="btn btn--ghost" disabled>Текущая</button>
</li>
</ul>
<button class="btn btn--secondary">Завершить все сеансы</button>

계수 형식 스위치 (무선)

html
<fieldset>
<legend>Формат коэффициентов</legend>
<label><input type="radio" name="odds" value="decimal" checked> Десятичные</label>
<label><input type="radio" name="odds" value="fractional"> Дробные</label>
<label><input type="radio" name="odds" value="american"> Американские</label>
</fieldset>

결제 방법 카드 (마스킹)

html
<article class="pay-card">
<h4>Visa •••1234</h4>
<small>По умолчанию</small>
<div class="actions">
<button>Сделать основным</button>
<button class="danger">Удалить</button>
</div>
</article>

20) QA 체크리스트

의미와 흐름

섹션은 논리적입니다. 각 화면에는 하나의 기본 CTA가 있습니다.

(PHP 3 = 3.0.6, PHP 4)

양식

수정 '유형/입력 모드/자동 완료'; 부드러운 마스크, 예측 가능한 캐
금지 된 비동기 점검; 저장은 데이터를 잃지 않습니다.

안전

2FA 흐름은 이해할 수 있습니다. 백업 코드를 다운로드 할 수 있습니다.
세션/장치가 종료되고 이벤트가 기록됩니다.
민감한 필드는 기록/캐시되지 않습니다.

iGaming-specifics

진입이 지연되고 기간이 다른 한계.
KYC 상태 및 문서는 명확합니다. 마감일 및 알림 채널이 표시됩니다.
확률 형식과 빠른 베팅은 광고 된대로 작동합니다.

지역/현지화

대조 AA; ': 초점을 볼 수있는' 참조; 탭 순서가 맞습니다.
텍스트와 숫자는 언어/통화에 적합합니다. RTL이 지원됩니다 (필요한 경우).

성능

TTFF λ100 ms; CLS 없음; 이미지가 게으르게로드
큰 목록 (역사) 은 페이지/가상화됩니다.

21) 설계 시스템의 문서

"ProfileHeader ',' ProfileSection ',' SecurityPanel ',' SessionsList ',' PaymentMethodCard ',' LimitsForm ',' KYCStepper ',' PreferencesForm '.
토큰: 필드/반경/초점/배지, CUS/제한 상태, 성공/오류/주의 색상.
패턴: "파티션 당 하나의 CTA", "실행 취소/위험 확인", "수출/삭제 데이터 (DSAR)".
Do/Do n 't: 숨겨진 보안 설정, 마케팅 포함을 가리는 오버로드 된 양식.

간단한 요약

프로필 인터페이스는 트러스트 센터입니다. 간단하고 정직하며 안전해야합니다. 명확한 아키텍처, 빠르고 예측 가능한 흐름 (2FA/KYC/제한/지불), 깔끔한 형태 및 데이터 작업의 투명성은 프로파일을 제품 지원으로 바꾸고 특히 iGaming에 중요한 지원 부하를 줄입니다.