Profile Sharing UI Concept

DomainsDOL AcademyUX564 words3 min read

active

SOC-S01_profile_sharing_UI_CONCEPT

Feature: SOCIAL_PROFILE_SHARING.
Screen ID: SOC-S01.
Page type: Profile Page (Owner & Viewer states).
Target users: Học viên DOL (để quản lý profile) và người dùng ngoài (khách, học viên khác).
Core source alignment: Profile Sharing UX requires default-private, 1-click toggles, and block-level granular sharing. [SOC_Profile_Sharing_UX.md]

User goal: Khoe tiến trình học, streak, achievement một cách tự hào; kiểm soát quyền riêng tư dễ dàng.
Business goal: Tăng động lực học qua “social proof” và giảm rủi ro về privacy/an toàn dữ liệu.
Success signal: User bật/tắt chia sẻ ngay tại profile mà không bị lạc; viewer hiểu trạng thái profile ngay lập tức.

Private State (Default):
- Nhìn thấy preview của “Public Profile” nhưng có banner cảnh báo rõ ràng.
- CTA lớn: Bật chia sẻ công khai.
Public State:
- Banner chuyển sang màu xanh lục tích cực: Đang công khai.
- Block toggles xuất hiện: Cho phép Owner tắt mở từng nhóm nội dung (Journey, Consistency, Achievements, Knowledge).
- CTA: Tắt chia sẻ công khai (1-click quay về Private).

Viewer - Private Profile:
- Không lộ tên đầy đủ hay streak nếu chủ profile chưa cho phép.
- Empty state text: Nội dung đang được để ở chế độ riêng tư hoặc Profile này chưa bật chia sẻ công khai.
- CTA (nếu Anonymous): Button đăng nhập/đăng ký để học cùng DOL.
Viewer - Public Profile:
- Không có các toggle điều khiển quyền riêng tư như Owner.
- Hiển thị đầy đủ thông tin theo những gì Owner đã gạt mở.
- Nếu Viewer click vào nội dung yêu cầu account (Follow, Comment): Hiển thị Auth Gate Overlay.

Layout intent: Glassmorphism / Editorial Sci-Fi aesthetic. Nền gradient tối (hoặc sáng tùy theme), card nổi khối với viền mờ, Typography chắc chắn. Đề cao “cảm giác premium” khi đạt achievement.
Component tree:
- Hero Header: Avatar (có glow nếu streak cao), Display Name, Stats ngắn gọn (Followers).
- Privacy Control Strip (Chỉ Owner mới thấy): Dải băng trạng thái Private/Public + Toggle.
- Journey/Consistency Widget: Thống kê Streak, Số ngày học theo dạng card glassmorphic.
- Achievement Showcase: Badge nổi bật nhất, huy hiệu Hall of Fame.
- Action Row (Chỉ Viewer mới thấy): Button Theo dõi.

Style family: Premium Educational Glassmorphism. Cảm giác tương lai và thưởng thức (Editorial Sci-Fi).
Typography:
- Tên user: Lớn, bold, định hướng tự hào.
- Số thống kê (Streak, Score): Font số rõ ràng, nổi cộm.
Composition: Phân chia block rạch ròi. Không nhồi nhét chữ, dùng icon và số liệu làm điểm nhấn thị giác.

Sử dụng Design Tokens DOL để theme switcher hoạt động trơn tru (Light/Dark).
Sử dụng Tailwind utilities mappable từ Prototype Engine.
Cung cấp “Concept Switcher” ở góc: [Owner - Private], [Owner - Public], [Viewer - Public], [Viewer - Private].