Vì sao giao diện này không "mùi AI", và copy dẫn khách đi đâu
Trang này dành cho anh Nguyên, designer và người viết nội dung khi chuyển mockup thành website thật. Mọi quyết định đều có lý do, và có danh sách thứ cần thay bằng dữ liệu thật.
12 trang trong bộ mockup
1. Chống "mùi AI": tám quyết định cụ thể
| Dấu hiệu web AI thường gặp | Mockup này làm ngược lại |
|---|---|
| Ảnh stock hoặc ảnh AI bóng loáng, xe không biển số | 100% ảnh xe thật lấy từ kho ảnh Việt Long: Everest trên đồi, Transit xếp hàng, Limousine ở bãi Cam Ranh, bán tải ở công trường. Có nhãn "Ảnh thật" và chú thích viết tay kể bối cảnh. |
| Gradient tím–xanh, nền kính mờ, blob trôi nổi | Màu lấy từ logo (xanh biển chỉ dẫn, vàng huy hiệu, đỏ chữ VL) trên nền giấy cát. Không gradient trang trí. |
| Font Inter/Space Grotesk, mọi thứ căn giữa | Yeseva One (serif poster du lịch, hỗ trợ tiếng Việt) cho tiêu đề; Big Shoulders Display (chữ nén kiểu biển báo, bảng số) cho số liệu, biển chỉ dẫn và giá; Archivo cho thân bài; Mali cho ghi chú tay. Không dùng Inter, Roboto, Montserrat, Be Vietnam Pro. Bố cục lệch trái, ảnh lệch, tem xoay nghiêng. |
| Card bo tròn giống hệt nhau, icon emoji, số "01/02/03" | Thành phần mang ngôn ngữ của ngành: biển chỉ dẫn xanh có số km, vé xe đục lỗ làm form đặt xe, tem bưu điện địa danh, đường kẻ vàng đứt có xe chạy. Số bước chỉ dùng ở quy trình thật sự có thứ tự. |
| Copy "giải pháp hàng đầu", "trải nghiệm đẳng cấp" | Câu ngắn, số cụ thể: "65 km, 1h15, 700.000đ", "cột số 3 ga quốc nội", "trễ 30 phút giảm 10%". Giọng tài xế kể chuyện. |
| Testimonial chung chung, 5 sao không ngữ cảnh | Review gắn tuyến + loại xe + tình huống (bay đêm, 11 người, hợp đồng 6 tháng). Bản thật thay bằng review Google nhúng. |
| Animation khắp nơi, parallax rối | Motion có nghĩa: xe chạy trên đường kẻ (quy trình), bảng tuyến chạy marquee (có 13 tuyến thật), thẻ xe nghiêng nhẹ theo chuột. Tôn trọng prefers-reduced-motion. |
| Popup, bong bóng chat chồng nhau | Một thanh CTA mobile 4 nút, không popup. Form là vé xe, có câu "không spam, không giữ số". |
2. Màu và chữ
Xanh logo giữ vai trò nút chính và biển chỉ dẫn. Vàng chỉ dùng cho điểm nhấn (đường kẻ, tem, eyebrow). Đỏ chỉ cho giá. Nền giấy cát ấm thay cho trắng tinh để ảnh xe nổi và trang đỡ “SaaS”.
3. Copy dẫn hành vi theo từng tệp khách
| Tệp khách | Nỗi lo thật | Câu trả lời trên trang | Hành động được dẫn tới |
|---|---|---|---|
| Gia đình bay xuống Cam Ranh (Hà Nội, Sài Gòn) | Taxi dù hét giá, máy bay trễ không ai đón, xe nhỏ không đủ vali | "Tài xế cầm bảng tên, canh chuyến bay, chờ miễn phí"; giá in sẵn 700.000đ xe 7 chỗ; ảnh Limousine đang chờ ở bãi lúc 5h40 | Nhắn Zalo số hiệu chuyến bay (ví dụ có sẵn để copy) |
| Nhóm bạn, đại gia đình đi tour trong tỉnh | Không biết đi đâu, sợ bị dẫn vào quán chặt chém, chia tiền thế nào | Ba lịch trình mẫu có giờ và km; "16 chỗ rẻ hơn 2 xe 7 chỗ"; ghi chú tài xế về giờ đẹp, quán ngon | Gửi danh sách điểm muốn đi |
| Khách Mũi Né muốn về sân bay / đi Vĩnh Hy | Không biết bao xa, bao lâu, đi về trong ngày được không | Bảng km–giờ từng chặng; lời khuyên thẳng "không nên đi về trong ngày" | Chọn gói có dừng tham quan |
| Doanh nghiệp dự án | Xe hỏng giữa công trường, phụ phí cuối tháng, kế toán không quyết toán | Ba nỗi đau → ba điều khoản hợp đồng; quy trình 5 ngày; form "nhận đề xuất" | Điền form 5 trường hoặc email |
Nguyên tắc chung: mỗi màn hình đầu trả lời 4 câu (xe gì, giá bao nhiêu, tin được không, bấm đâu). Mọi CTA đều có “lời hứa thời gian” (5 phút, 24 giờ, 12 tiếng) vì khách thuê xe sợ bị bỏ lơ hơn sợ giá. Cam kết nào cũng có hậu quả đo được (giảm 10%, xe thay 60 phút) để đọc như hợp đồng, không như khẩu hiệu.
4. Bảng giá
Toàn bộ số trong mockup lấy từ 5 bảng giá đối tác Việt Long công bố (09/2024) và bảng giá sân bay (03/2026) trên website hiện tại, làm tròn và gắn nhãn “chưa gồm VAT 8%”. Các mục “nửa ngày”, “dừng tham quan 3 tiếng”, “quá giờ 100.000đ/giờ”, “ăn ở tài xế 300.000đ/đêm” là đề xuất để bảng giá đủ tình huống; cần chốt với chủ xe trước khi đăng.
5. Những chỗ phải thay bằng dữ liệu thật trước khi lên web
- Số năm hoạt động, số chuyến/năm, số giấy phép vận tải (đang để "(…)" ở trang Về chúng tôi).
- Review: thay 3 review minh họa bằng review Google thật (widget hoặc chụp màn hình có link).
- Tên và ảnh tài xế thật cho thẻ đội ngũ; xin phép trước khi đăng.
- Logo khách doanh nghiệp (đang là ô chữ).
- Chú thích ảnh: tài xế xác nhận lại địa điểm chụp (mockup viết theo bối cảnh ảnh).
- Điều khoản cam kết (giảm 10% khi trễ, xe thay 60 phút): chủ xe chốt rồi mới dùng.
- Bản đồ Google nhúng ở trang Liên hệ; form nối Zalo OA + Google Sheet; sự kiện GTM cho 4 nút.
6. Đồ họa và motion đã dùng
- Panorama bờ biển Ninh Thuận, bản đồ tuyến và 4 tem địa danh: vẽ bằng SVG (gouache giả lập bằng filter nhiễu giấy), không dùng ảnh AI. Figma AI hết credit ngày 17/10 nên bản này tự vẽ; nếu muốn bản vẽ tay chi tiết hơn, có thể tạo lại khi credit reset.
- Biển chỉ dẫn xanh: viền trắng, số km trong ô trắng, giống biển thật trên QL1.
- Form đặt xe hình vé đục lỗ, cuống vé bên phải ghi giá tham khảo.
- Đường kẻ vàng đứt + xe chạy (requestAnimationFrame), thẻ xe nghiêng 3D theo chuột (tắt trên cảm ứng), bộ đếm số, reveal khi cuộn, marquee tuyến đường. Tất cả tắt khi người dùng bật giảm chuyển động.
7. Chuyển sang WordPress thế nào
Mỗi trang ở đây tương ứng một template trong kế hoạch làm lại website: trang chủ, hub dịch vụ, trang tuyến, trang xe, bài cẩm nang, bảng giá, về chúng tôi, liên hệ. CSS trong assets/style.css đã đặt token màu và chữ; dựng bằng GeneratePress/Blocksy với block tùy chỉnh cho biển chỉ dẫn, vé đặt xe, bảng giá (đọc từ một file dữ liệu như app.js để giá chỉ sửa một chỗ).