Mobile app flow
Trải nghiệm app trên mobile web — 5 màn hình end-to-end, e-commerce shop An Nhiên. Demonstrate 10 mobile UX pattern dùng được cho mọi PWA project.
01 Home — Discover
02 Product — Detail
←
♡
🪵
Best seller · Giới hạn 30 lọ
Trầm tự nhiên 5 năm tuổi
500.000đ
580.000đ
Trầm hương sapwood tự nhiên, được lựa chọn kỹ từ vùng Khánh Hoà — vùng có thổ nhưỡng tốt nhất cho trầm. Hương trầm dịu, sâu, không gắt.
5 năm tuổi
Tự nhiên 100%
Có chứng nhận
1
03 Cart — Swipe to delete
Giỏ hàng
3 sản phẩm · vuốt sang trái để xoá
🪵
Trầm tự nhiên 5 năm tuổi
500.000đ
1
🌿
Hương vòng An Nhien
120.000đ
2
🗑 Xoá
🎋
Nụ trầm hộp 30 viên
85.000đ
1
Tạm tính825.000đ
Phí ship30.000đ
Mã KH mới−50.000đ
Tổng805.000đ
04 Checkout — Pay + Verify
Thanh toán
Bước 2 / 3 · xác nhận OTP
Địa chỉ giao hàng
Người nhận
Phan Dang · 0901 234 567
Địa chỉ
123 Nguyễn Văn Cừ, P.4, Q.5, TP.HCM
Phương thức thanh toán
Chuyển khoản · Momo
💸
Tiền mặt khi nhận hàng
💵
Nhập mã OTP đã gửi ☎ ***567
8
2
4
7
Gửi lại OTP sau 0:42
05 Success — Order placed
✓
Đặt hàng
thành công
Cảm ơn anh đã ủng hộ An Nhiên.
Đơn sẽ ship trong 2-3 ngày.
Mã đơnAN26-08247
Sản phẩm3 items
Tổng805.000đ
Dự kiến22-23 May
10 mobile patterns demonstrate
Mỗi screen show 2-3 pattern app-like. Fork screen nào phù hợp project mobile của anh.
01 · Bottom tab nav
4-col grid, active tinted brand, badge dot cho cart count. Min-height 56px touch.
02 · Dynamic island
iPhone 15+ shape — black pill top center 100×28px, z-index 50.
03 · Pull-to-refresh hint
Static "↓ Kéo xuống refresh" cue trên content. Real implementation cần JS gesture.
04 · Segmented control
iOS-style filter bar, active item nâng nền + shadow-xs subtle.
05 · Sticky CTA bottom
Bottom bar fixed với qty stepper + primary CTA. Safe-area inset padding.
06 · Swipe-to-delete
Item slide left → expose red zone "Xoá". Demo state static; JS thêm gesture.
07 · OTP input
6 cell autofocus, active cell ring, filled cell border tinted.
08 · Payment radio list
Card-style radio, active state bg tinted + border primary.
09 · Carousel dots
Active dot widen 20px, inactive 6px round. Overlay top of image.
10 · Success state
Check circle với 2-layer halo (12px + 28px ring), gradient background.