Preview trái/phải nhìn phát hiểu ngay
- Hai route khác độ đậm; STOP marker ở ô cuối.
- Ô trống then chốt glow; cụm capture rung trước commit.
- Move không tạo capture vẫn preview rõ nhưng không có reward glow.
Visual & UX Readability
Menu phải đưa người chơi tới lượt chơi kế tiếp trong một quyết định; gameplay phải giữ board là tâm điểm và diễn giải route sow/capture bằng hình ảnh, không biến game thành màn hình chat.
Avatar cạnh HUD, không nằm trên board
- Bubble tối đa hai dòng, auto-collapse sau animation.
- Hint button luôn do player chủ động; auto-message có nút tắt.
- Màu coach đi cùng icon/silhouette, không chỉ màu.
Objective bằng silhouette + motion
Sao biển là token gameplay duy nhất, rung nhẹ khi được preview và “plop” khi rời board để được cứu.
Concept → Area → Strategy
Hint level luôn hiển thị rõ để player biết mức spoil; level 3 cần xác nhận lần hai.
Replay 2–3 giây
Highlight nước gần đúng, rồi mới hiện coach sentence và Retry CTA.
Tide Bond không giống currency
Dùng meter tình bạn/crew badge, không dùng giá tiền, shop icon hoặc nút mua.
Coach không chặn frame hoặc input
- Render local hint ngay; API response có thể thay copy nếu đến kịp.
- Không khóa board chờ network.
- Test Chrome, Edge, Safari, Firefox; desktop/mobile.
- Tôn trọng
prefers-reduced-motion.
Nền tảng UI dùng chung
Hai màn hình dùng cùng art direction Pairing A · Tropical Clean HD + Sea Glass: sáng, thân thiện, có chiều sâu vừa đủ và đọc rõ trên browser lẫn mobile.
Clean HD cho thế giới, Sea Glass cho điều khiển
- Background là bãi biển Tropical Clean HD, ánh sáng ấm từ trên trái; vùng chứa thông tin dùng panel kính biển aqua đủ đục để chữ không chìm vào cảnh.
- Card và button bo tròn 14–24 px, viền deep teal/navy, highlight cream và shadow mềm; tránh glass trong suốt quá mức hoặc outline đen thuần.
- Coral dùng cho cảnh báo/route trái, cyan dùng cho hành động/route phải, yellow dùng cho tiến trình và phần thưởng, green chỉ dùng cho hoàn thành.
- Không bake text vào sprite. Icon phải còn nhận ra ở 24 px; portrait và item quan trọng phải còn rõ silhouette ở 48–64 px.
Ba cấp chữ, số liệu luôn quét được
- Display: Afacad Flux ExtraBold hoặc font display cùng tinh thần, dùng cho tên game, tên level và kết quả; không dùng cho paragraph dài.
- UI: LT Avocado Bold hoặc system fallback có x-height lớn; body tối thiểu 14 px desktop và 13 px mobile.
- Label 11–12 px, button 14–16 px, tiêu đề panel 18–24 px; số lượt, objective và Nhân Phẩm dùng tabular numbers.
- Tương phản text/panel đạt tối thiểu 4.5:1; text phụ không thấp hơn 3:1 và không truyền trạng thái chỉ bằng độ mờ.
Target tối thiểu 48 × 48 px
Khoảng cách giữa hai target tối thiểu 8 px. Mọi nút có pressed, disabled và focus-visible; không có thao tác bắt buộc phụ thuộc hover.
Không chạm notch hoặc browser chrome
Content padding tối thiểu 16 px desktop, 12 px tablet; trên mobile mỗi cạnh dùng max(12px, env(safe-area-inset-left)) hoặc biến safe-area tương ứng.
Nhanh, có nguyên nhân
Micro feedback 120–180 ms; chuyển panel 200–280 ms; reward tối đa 800 ms. Reduced motion bỏ rung/parallax nhưng giữ đổi màu, icon và trạng thái cuối.
Gameplay screen · Board cứu hộ
Board chu vi vuông 8 node (grid 3×3) hoặc 12 node (grid 4×4) quanh hồ nguồn chiếm ưu tiên số một. HUD, Coach và control chỉ giải thích trạng thái; không cạnh tranh thị giác với route preview hoặc capture.
Khung layout chuẩn
| Vùng | Desktop ≥1180 px | Tablet / mobile landscape | Quy tắc nội dung |
|---|---|---|---|
| A · Top bar | 56–64 px, sticky | 48–52 px; ẩn label phụ | Back về Album, Level N/10, Nhân Phẩm, Pause. Restart nằm trong Pause để tránh bấm nhầm; Metrics chỉ có ở dev build. |
| B · Level HUD | Nằm trên board, cao 76–96 px | Hai hàng compact | Tên level + Full Rescue objective ở trái; turnsUsed/maxTurns, Đã cứu và Còn lại ở phải. Không hiển thị score; rating chỉ reveal sau khi board sạch. |
| C · Board stage | 52–60% chiều ngang content; tối thiểu 640 × 320 px | Full width; ưu tiên scale vừa màn hình | Hiển thị trọn chu vi 8 hoặc 12 node khi landscape ≥844 px. Nếu portrait quá hẹp, cho pan ngang một trục và có affordance; không thu sao dưới ngưỡng đọc. |
| D · Rescue Zone | Dải riêng ngay dưới board | Dải compact 44–56 px | Màu nước cyan, label và bộ đếm riêng; khác rõ Wet pit trên route và hồ trung tâm visual-only. |
| E · Direction controls | Hai nút cân nhau dưới Rescue Zone | Hai nút ngang ở landscape; xếp dọc ở portrait | Trái coral, phải cyan; mỗi nút ghi hướng, STOP và kết quả dự kiến ngắn. Disabled cho tới khi chọn ô hợp lệ. |
| F · Map context | Cột trái 20–22%, sticky | Collapsed thành button Tiến trình | Chapter progress, node hiện tại, reward tiếp theo; không hiển thị toàn bộ mô tả map trong lúc chơi. |
| G · Coach Dock | Cột phải 20–22%, sticky | Avatar chip ở góc; mở bottom sheet tối đa 45% màn hình | Portrait, bubble hai dòng, Hint/Skill và charge. Booster và Tide Bond nằm trong phần mở rộng, không đẩy board xuống. |
Luồng tương tác của một lượt
1 · Idle
Ô hợp lệ có affordance nhẹ; objective và số lượt ổn định. Không có đường route chạy nền.
2 · Chọn ô
Ô được chọn có viền coral/cream; hai route trái/phải xuất hiện đồng thời, khác màu và có arrow.
3 · Preview
STOP gắn tại ô cuối; ô trống then chốt glow; capture candidate rung nhẹ. Hai nút hướng cập nhật kết quả dự kiến.
4 · Commit & resolve
Khóa input theo từng nhịp rải, token di chuyển theo route, capture bay sang Rescue Zone; mở input lại ngay khi state cuối ổn định.
Một thời điểm chỉ có một tín hiệu mạnh
- Khi preview, giảm motion nền và Coach; route + STOP là lớp nổi bật nhất.
- Khi resolve, ẩn route chưa chọn; highlight chỉ bám đường đã commit.
- Khi capture, Rescue Zone sáng và nhận token; combo name xuất hiện tối đa 0.9 giây, không che ô STOP kế tiếp.
- Khi nguy cấp, Tide Turns và objective đổi icon + màu; không dùng flash toàn màn hình.
Gần board nhưng không nằm trên board
- Auto-message tối đa một lần/level và tự thu sau 3–4 giây; player có thể tắt.
- Hint mức 1 highlight concept, mức 2 highlight area, mức 3 nêu strategy và cần xác nhận lần hai.
- Coach không đổi layout khi API chậm; local copy xuất hiện trước, response mới chỉ thay nội dung câu.
- Active skill có trạng thái Ready / Charging / Used; Passive skill chỉ hiện trigger receipt, không giả dạng button.
Kết quả theo ba nhịp
Rescue payoff trên board → modal tóm tắt Đã cứu/Điểm/Nhân Phẩm → CTA primary Level tiếp theo, secondary Về Album.
Giải thích trước Retry
Replay 2–3 giây vùng gần đúng, nêu một nguyên nhân ngắn, rồi mới hiện Thử lại. Không trừ Nhân Phẩm và không tải lại page.
Dừng an toàn
Pause giữ nguyên board state, cho Tiếp tục / Chơi lại / Âm thanh / Về Album. Chơi lại và Về Album cần xác nhận nếu lượt đã bắt đầu.
Responsive, layering và nghiệm thu screen
Responsive không chỉ là xếp card xuống hàng; thứ tự thông tin phải thay đổi để board và CTA chính luôn xuất hiện trước nội dung phụ.
| Breakpoint | Menu screen | Gameplay screen | Không được xảy ra |
|---|---|---|---|
| ≥1180 px | Map + Coach hai cột; Next-level card neo dưới map. | Map context / Board / Coach theo tỷ lệ 22 / 56 / 22. | Board nhỏ hơn hai side panel hoặc CTA nằm ngoài first viewport. |
| 821–1179 px | Map khoảng 65%; Coach thành drawer hoặc hàng dưới. | Map context + Board hai cột; Coach xuống hàng dưới hoặc drawer. | Coach bubble làm đổi chiều rộng board giữa lượt. |
| ≤820 px landscape | Map full width; Next-level card sticky; Coach là side sheet. | HUD → Board → Rescue Zone → Direction controls; side panel thành sheet. | Phải cuộn dọc trước khi thấy board hoặc nút commit. |
| Portrait | Journey summary → map → sticky CTA; bottom navigation cố định. | Cho pan board một trục; direction controls xếp dọc; Coach là bottom sheet. | Scale token/item xuống dưới 48 px hoặc dùng drag chính xác để chơi. |
Board state không bị overlay nuốt mất
0 background → 10 board/item → 20 route/STOP → 30 HUD/Coach → 40 toast → 50 sheet → 60 modal. Combo/VFX không nhận input và tự biến mất trước modal kết quả.
Thứ tự focus theo đúng lượt chơi
Top bar → HUD summary → 8 hoặc 12 node chu vi theo route → hướng trái/phải → Hint/Skill → panel phụ. Mỗi node có tên, số sao và trạng thái; cập nhật rescue/combo dùng live region ngắn, không đọc lại toàn board.
5-second test
5/5 tester tìm được level tiếp theo, CTA Chơi và Agent đang trang bị trong 5 giây mà không được hướng dẫn.
3-second scan
Tester chỉ đúng objective, số lượt, board 10+2 và hai hướng commit trong 3 giây sau khi chọn một ô.
Không che core action
Ở 1440×810, 1180×720 và 844×390, board cùng direction controls nằm trong first viewport; không có overlap hoặc target dưới 48 px.
Polish & Completion acceptance gates
Spec chỉ có giá trị khi build vượt qua các ngưỡng nghiệm thu trước khi quay video và submit.
| Hạng mục | Go | No-go |
|---|---|---|
| Completion | Đủ 10 level playable, map mở đúng, Level 10 có payoff. | Level placeholder, khóa progression hoặc thiếu objective. |
| Loading | Initial load mục tiêu <3 giây trên máy test; restart <1 giây. | Màn trắng dài, tải lại page khi retry. |
| Input | Chuột/touch ổn, target ≥48px, không phụ thuộc hover. | Miss drag, double-trigger, input kẹt sau animation. |
| VFX & audio | Preview/capture/combo đọc rõ, không chồng âm hoặc block input. | Particle che board, volume spike, frame drop mạnh. |
| Resilience | API/network lỗi vẫn chơi đủ 10 level bằng local fallback. | Coach loading chặn move hoặc làm fail level. |
| Browser QA | Chrome/Edge/Safari/Firefox desktop; mobile landscape smoke test; không lỗi console nghiêm trọng. | Crash, asset 404 hoặc layout che board. |