LearnFlow App – 260003

Thiết kế một ứng dụng học tập trực tuyến trên thiết bị di động, cho phép người dùng học mọi lúc, mọi nơi thông qua các khóa học video, bài giảng có cấu trúc và tài liệu học tập có thể tải xuống.

Learnflow App – 260003

Mobile Tablet Desktop

Nhu cầu: Học trực tuyến mọi lúc
Giải pháp: Các bài học qua video, bài giảng được ghi hình sẵn, tài liệu kỹ thuật số và các nguồn tài nguyên học tập.

Nguyên tắc thiết kế:

• Giao diện người dùng (UI) tinh gọn với phong cách hiện đại, cao cấp và tối giản.
• Trải nghiệm người dùng (UX) trực quan, giúp người dùng bắt đầu học chỉ trong vài giây.
• Thiết kế ưu tiên thiết bị di động (mobile-first), tối ưu hóa cho cả iOS và Android.
• Hệ thống thiết kế nhất quán trên tất cả 8 màn hình.
• Phân cấp thị giác rõ ràng, sử dụng khoảng trắng hợp lý và kiểu chữ dễ đọc.
• Điều hướng lấy người dùng làm trọng tâm, giảm thiểu tối đa nỗ lực tư duy khi sử dụng.

Hệ thống thiết kế trực quan

• Màu chủ đạo: Xanh dương #2563EB
• Màu phụ: Xanh dương nhạt #EFF6FF
• Nền: #F8FAFC
• Bề mặt (thành phần giao diện): #FFFFFF
• Văn bản chính: #0F172A
• Văn bản phụ: #64748B
• Trạng thái thành công: #16A34A
• Phông chữ: Inter hoặc phông chữ không chân (sans-serif) hiện đại tương tự.
• Độ bo góc (border radius): 12–16px cho các thẻ (cards) và nút bấm (buttons).
• Sử dụng đường viền tinh tế và đổ bóng nhẹ.
• Sử dụng hình ảnh thu nhỏ (thumbnails) chất lượng cao cho nội dung giáo dục cùng các biểu tượng mang ý nghĩa rõ ràng.
• Đảm bảo sự nhất quán về khoảng cách, kiểu nút, kiểu chữ và kích thước các thành phần.

Tránh bố cục lộn xộn, sử dụng quá nhiều hiệu ứng chuyển màu (gradients), các yếu tố trang trí không cần thiết và hệ thống điều hướng quá phức tạp.