UNICOM LMS · Mobile Redesign
Mobile design system cho nền tảng học tiếng Anh
Thiết kế lại giao diện mobile dựa trên web app UNICOM LMS. Áp dụng Totality Festival design system — dark obsidian, amber corona, atmospheric cyan — cho 3 nền tảng: iOS, Android, iPad.
Totality Festival Design System
Space Grotesk + Inter
Glassmorphism Cards
Working Navigation
Live Filters & Search
Staggered Animations
iOS 17 · iPhone 15 Pro · 390 × 844
iOS Screens
Bottom tab bar · Dynamic Island · Safe area handling · iOS-native interaction patterns
Bài giảng Video
Player · Chapters · Notes · AI Chat · Teacher Q&A
Mở full screen →
Android 14 · Pixel 7 · 412 × 892
Android Adaptation
Material 3 nav · Punch-hole camera · Rounder cards (24px radius) · Android-specific top app bar
iOS → Android: các thay đổi chính
Dynamic Island → Punch-hole
Camera hole đơn giản thay cho Dynamic Island
Tab bar → Material 3 nav
Nav items với indicator pill theo Material 3 spec
12px → 24px card radius
Material 3 dùng radius lớn hơn trên mọi surface
Top App Bar thay vì header inline
Android dùng top bar cố định với icon actions
Width 412px (vs iOS 390px)
Pixel 7 có màn hình rộng hơn, padding điều chỉnh theo
iPadOS 17 · iPad Pro 11" · 820 × 1180
Tablet Adaptation
Left sidebar navigation · 2-column grid layout · Full competency + leaderboard panels side by side
Mobile → Tablet: các thay đổi chính
Bottom tab bar → Left sidebar
240px sidebar với user profile + full navigation
Single column → 2-column grid
Courses/Chart và Competency/Leaderboard song song
Horizontal level cards → 6-column grid
Tất cả 6 levels hiển thị cùng lúc
Continue card in sidebar
Quick access widget luôn hiển thị trong sidebar
