KSX12
Thiết kế UI/UX phong cách Hàn Quốc
Khám phá thiết kế hiện đại, thân thiện và tối giản cho ứng dụng TMĐT học sinh. Bao gồm các màn hình chính: Trang chủ, Trình phát tài liệu, và Hồ sơ người dùng.
Màn hình chính
Luồng người dùng
UI Showcase
UI Screens Showcase
Khám phá ba màn hình chính của ứng dụng KSX12 được thiết kế theo phong cách Hàn Quốc hiện đại
Home Screen
Trang Chủ
Bố cục Bento Grid với các danh mục tài liệu, dụng cụ học tập, và ghi chú nổi bật. Sử dụng không gian trắng rộng rãi và bảng màu pastel.
Document Viewer
Trình Phát
Giao diện tối giản cho việc đọc PDF tài liệu học tập. Tích hợp các công cụ như Highlight, Bookmark, Note để hỗ trợ học tập hiệu quả.
User Profile
Hồ Sơ
Hiển thị thông tin cá nhân, avatar dễ thương, tiến độ học tập, và lịch sử mua hàng. Cá nhân hóa trải nghiệm cho từng học sinh.
User Journey & Flows
Khám phá ba luồng chính trong ứng dụng KSX12: Khám phá, Mua sắm, và Học tập
Khám Phá & Tìm Kiếm
Người dùng khám phá các danh mục tài liệu và dụng cụ học tập
Tìm kiếm
Xem chi tiết
Thêm vào giỏ
Mua Sắm & Thanh Toán
Quá trình mua tài liệu hoặc dụng cụ học tập
Xem giỏ hàng
Xác nhận đơn
Thanh toán
Sử Dụng & Học Tập
Trải nghiệm học tập với tài liệu đã mua
Mở tài liệu
Ghi chú & Highlight
Theo dõi tiến độ
Khám Phá
Người dùng tìm kiếm tài liệu theo môn học, chủ đề hoặc từ khóa. Xem chi tiết sản phẩm và thêm vào giỏ hàng.
Mua Sắm
Xem giỏ hàng, xác nhận đơn hàng, và thực hiện thanh toán. Nhận file tài liệu hoặc theo dõi đơn hàng dụng cụ.
Học Tập
Mở tài liệu trong trình xem, ghi chú, highlight, bookmark. Theo dõi tiến độ học tập và mục tiêu học tập.
Design Principles
Các nguyên tắc thiết kế cốt lõi của phong cách Soft Minimalism Hàn Quốc
Bảng Màu Mềm Mại
Sử dụng bảng màu pastel (xanh mint, hồng nhạt, vàng kem) để tạo cảm giác thân thiện, không gây áp lực cho học sinh.
Micro-Interactions
Các hiệu ứng chuyển động mượt mà, feedback visual rõ ràng khi người dùng tương tác với giao diện.
Cute & Friendly
Tích hợp các icon và hình minh họa dễ thương, phong cách cartoon để gần gũi với đối tượng học sinh.
Không Gian Trắng
Sử dụng không gian trắng rộng rãi, bố cục sạch sẽ để tập trung vào nội dung chính.
Bảng Màu Chính
Bảng màu pastel được lựa chọn cẩn thận để tạo cảm giác thân thiện và dễ chịu
Mint Green
#B8E6D5
Soft Pink
#F5C6D8
Soft Yellow
#F9E5B8
Soft Lavender
#E8D5F2
Cream White
#F8F7F3
Dark Gray
#2C2C2C
Hệ Thống Typography
Sử dụng Noto Sans KR để phù hợp với phong cách Hàn Quốc
DISPLAY
Heading
Noto Sans KR Bold 700 (32-48px)
SUBHEADING
Subheading
Noto Sans KR Medium 500 (18-24px)
BODY
Body Text
Noto Sans KR Regular 400 (14-16px)
Đặc Điểm Thiết Kế
Bố Cục
- •Bento Grid: Các ô vuông/chữ nhật có bo góc sắp xếp không đối xứng
- •Asymmetric balance: Kết hợp các kích thước khác nhau
- •Vertical flow: Cuộn dọc tự nhiên, không bị ngắt quãng
Hiệu Ứng
- •Soft shadows: Bóng đổ nhẹ, không sắc nét (0 2px 8px)
- •Rounded corners: Tất cả phần tử có bo góc 14px
- •Smooth transitions: Tất cả animation 300-400ms