Muốn làm giao diện mobile cho web app dùng tốt, bạn không thu nhỏ bản desktop mà phải thiết kế lại cách hiển thị và thao tác cho màn hình nhỏ: gom nút chức năng, giới hạn số cấp menu, đưa form về một cột. Khi nhờ AI viết code (vibe coding), bạn cũng phải nói rõ yêu cầu responsive ngay từ câu lệnh đầu, nếu không AI dễ làm giao diện chạy được trên máy tính nhưng vỡ trên điện thoại.
Nguồn: video Seri Vibe Coding: Cách làm giao diện WebApp chuẩn Mobile – Đẹp, nhanh và dễ dùng của kênh Nghiện AppSheet. Bài này là phần giải thích lại bằng lời của tôi, kèm cách áp dụng cho doanh nghiệp vừa và nhỏ ở Việt Nam, không phải bản dịch hay chép lại lời thoại.
Giao diện mobile cho web app khác gì bản desktop thu nhỏ?
Khác ở chỗ màn hình nhỏ có ít không gian và người dùng thao tác bằng ngón tay, nên nội dung, nút bấm và luồng sử dụng đều phải sắp xếp lại. Video chia việc tối ưu thành hai phần: tối ưu không gian hiển thị và tối ưu thao tác của người dùng.
Ví dụ trên máy tính, trang danh sách nhân viên có thể có một thanh công cụ dày đặc: tìm kiếm, nhiều bộ lọc, nhập, xuất, chọn cột, in. Cùng màn hình đó trên điện thoại sẽ chiếm gần hết chiều cao nếu bê nguyên sang. Người dùng chỉ cần một ô tìm kiếm, một nút lọc và một chỗ để mở các chức năng còn lại.
Nếu web app của bạn do nhân viên, khách hàng hoặc đội kinh doanh dùng thường xuyên ngoài hiện trường, phần giao diện này quyết định app có được dùng hay bị bỏ. Nếu bạn chưa rõ web app khác website thế nào, đọc thêm Web app là gì trước.
Làm sao để AI viết giao diện responsive ngay từ đầu?
Hãy đưa từ khoá responsive và yêu cầu kiểm tra trên mobile vào chính câu lệnh. Video nhấn mạnh: nếu câu lệnh chỉ nói "xây dựng giao diện module nhân viên", AI có thể chỉ tối ưu cho màn hình lớn.
Giao diện thường được chia thành ba nhóm kích thước: màn hình lớn (desktop), tablet (máy tính bảng) và mobile. Bạn nên yêu cầu AI tối ưu riêng cho từng nhóm, không chỉ "co lại cho vừa". Một câu lệnh gợi ý (do tôi diễn đạt lại, bạn chỉnh theo app của mình):
Xây dựng giao diện module Nhân viên theo hướng responsive, tối ưu riêng cho desktop, tablet và mobile. Trên mobile hiển thị dạng card, gom các nút chức năng vào một nút menu, form chỉ một cột. Sau khi làm xong hãy tự kiểm tra lại trên mobile.
Điều này quan trọng vì video kể lại một kiểu làm app chắp vá, không có quy hoạch từ đầu: màn hình lớn thì đủ nút, thu hẹp một chút là mất nút "Thêm", người dùng không thêm được dữ liệu. Sửa module này xong, module khác lại lỗi. Bài Template web app chuẩn nói về cách dựng bộ khung dùng chung để tránh tình trạng đó.
Những nguyên tắc nào giúp giao diện mobile gọn và dễ dùng?
Có bốn nguyên tắc chính trong video, tôi xếp lại thành bảng để bạn dễ đối chiếu.
| Phần giao diện | Trên desktop | Trên mobile |
|---|---|---|
| Thanh công cụ (toolbar) | Nhiều chức năng bày hết ra | Một ô tìm kiếm, một nút lọc, các chức năng còn lại gom vào một nút |
| Danh sách dữ liệu | Bảng nhiều cột | Dạng card, ẩn bớt phần không cần như chọn cột; vẫn giữ nút sửa và nút thao tác chính |
| Form nhập liệu | Nhiều cột song song | Một cột |
| Điều hướng | Menu bên cạnh | Thanh điều hướng dưới màn hình, các trang ghé thăm ít mở trang riêng |
Gom nhóm chức năng thay vì bày hết ra
Ở module nhân viên trong video, bản desktop có rất nhiều nút, còn bản mobile chỉ giữ ô tìm kiếm. Bấm nút lọc thì các bộ lọc xổ ra bên dưới, chọn gì áp dụng nấy. Các nút như nhập, xuất được cho vào một nút chung. Chức năng in thì có thể ẩn đi, vì trên điện thoại ít ai in, và dạng card cũng không có tuỳ chọn cột.
Menu tối đa hai cấp
Theo video, menu xổ ra hai ba cấp, thậm chí năm bảy cấp, gần như không dùng được trên điện thoại. Nguyên tắc người nói rút ra là chỉ dẫn tối đa hai cấp. Nếu một mục như phòng ban có phòng ban con, hãy mở một trang riêng cho mục con thay vì xổ tiếp trong cùng màn hình.
Ví dụ cho một công ty có nhiều phòng ban: danh sách phòng ban là một trang, bấm vào phòng ban nào thì mở trang riêng của phòng ban đó. Tên phòng ban dài thì cho kéo ngang thay vì ngắt thành nhiều dòng làm nhảy bố cục.
Ít mục chính, rõ thứ tự ưu tiên
Video nói app có nhiều tính năng thì chỉ nên đưa các chức năng chính lên thanh điều hướng, và chỉ cần một lần bấm là tới nơi. Theo lời người nói, riêng chức năng chính của app trong video đã hơn mười trang. Với doanh nghiệp bạn, hãy tự hỏi nhân viên ngoài hiện trường dùng 3–5 việc nào nhiều nhất, rồi đưa chúng lên đầu.
Những lỗi nào hay gặp khi AI viết giao diện mobile?
Lỗi hay gặp nhất là AI "nhớ" vị trí cuộn của người dùng. Video nêu hai tình huống cụ thể:
- Bấm vào một mục từ cuối danh sách, trang chi tiết lại mở ở vị trí cuối thay vì đầu trang.
- Ở trang danh sách (list view), kéo xuống dưới rồi bấm sang trang, màn hình vẫn nằm ở dưới thay vì quay về đầu.
Cách xử lý là thêm vào câu lệnh yêu cầu "khi chuyển trang hoặc chuyển trang con thì cuộn về đầu trang". Đây là kiểu lỗi bạn chỉ thấy khi tự cầm điện thoại thao tác thật, chứ nhìn code thì khó phát hiện.
Các lỗi khác cũng đáng kiểm tra, dựa trên danh sách nội dung của video:
- Bảng dữ liệu tràn màn hình, phải kéo ngang khó chịu.
- Nút bấm quá nhỏ, form có khoảng cách quá sát.
- Mất nút quan trọng (như "Thêm") khi màn hình thu hẹp.
- Sửa module này làm hỏng module khác vì mỗi chỗ làm một kiểu.
Làm thế nào để biết giao diện đã đủ tốt?
Hãy kiểm tra trên nhiều kích thước màn hình và để người thật dùng thử. Bạn có thể thu hẹp cửa sổ trình duyệt từ màn hình lớn xuống nhỏ để xem bố cục đổi thế nào: video cho thấy khi đủ nhỏ, thanh điều hướng chuyển xuống phía dưới. Sau đó cầm điện thoại thao tác đủ các việc chính: tìm, lọc, thêm, sửa, quay lại.
Người nói trong video chia sẻ ba cách để tiến bộ, tôi thấy khá thực tế:
- Làm nhiều, gặp lỗi nhiều. Người nói cho biết đã làm việc với web app này gần như mỗi ngày trong khoảng một năm rưỡi, và riêng template phải đập đi xây lại hơn mười lần. Tôi hiểu ý là không có danh sách mẹo nào thay được trải nghiệm thật.
- Tham khảo template có sẵn. Trên mạng có nhiều template giá không cao, dùng sẽ đỡ lỗi hơn tự mò từ đầu. Hãy xem kỹ từng nơi bán trước khi chọn.
- Xem người khác làm. Quan sát cách các ứng dụng lớn như Facebook bố trí giao diện trên mobile, rồi áp dụng phần phù hợp.
Áp dụng cho doanh nghiệp vừa và nhỏ Việt Nam như thế nào?
Hãy bắt đầu từ một module thật, ví dụ danh sách nhân viên hoặc đơn hàng, thay vì cả hệ thống. Ví dụ một xưởng nội thất có nhân viên kinh doanh đi đo đạc: họ cần xem đơn hàng, tìm khách theo tên hoặc số điện thoại và cập nhật trạng thái ngay tại nhà khách. Trên điện thoại, họ chỉ cần ô tìm kiếm, vài bộ lọc theo trạng thái, các đơn dạng card với nút sửa nổi bật.
Quy trình tôi gợi ý cho người không viết code:
- Liệt kê 3–5 việc nhân viên làm nhiều nhất trên điện thoại.
- Viết câu lệnh cho AI có đủ ba ý: responsive cho desktop, tablet, mobile; gom toolbar; menu tối đa hai cấp.
- Yêu cầu thêm: chuyển trang thì cuộn về đầu trang.
- Tự cầm điện thoại thao tác đủ các việc chính, ghi lại chỗ vướng.
- Đưa danh sách lỗi đó lại cho AI sửa, rồi thử lại. Mẹo làm việc với AI nhiều vòng có thể xem ở Mẹo dùng Claude Code.
Lưu ý thêm từ góc nhìn của tôi: video chủ yếu dựa trên kinh nghiệm cá nhân của người làm, không đưa số đo hay thử nghiệm so sánh. Vì vậy hãy coi các nguyên tắc này là điểm xuất phát, rồi điều chỉnh theo thói quen của chính nhân viên bạn.
Tóm tắt và bước tiếp theo
- Giao diện mobile là thiết kế lại, không phải thu nhỏ bản desktop.
- Ghi rõ responsive và tối ưu cho desktop, tablet, mobile ngay trong câu lệnh.
- Toolbar gom gọn, danh sách dạng card, form một cột, menu tối đa hai cấp.
- Kiểm tra lỗi cuộn trang và nút bị mất khi thu hẹp màn hình bằng thao tác thật.
Bước tiếp theo: chọn một module, chạy thử năm bước ở trên rồi ghi lại các lỗi để làm thành checklist riêng. Bạn có thể tham khảo thêm bộ tài liệu vibe coding miễn phí để có thêm mẫu câu lệnh.
Xem thêm
Câu hỏi thường gặp
›Mobile-first là gì?
Mobile-first là cách thiết kế bắt đầu từ màn hình điện thoại trước rồi mới mở rộng lên máy tính. Nhờ vậy bạn buộc phải chọn thứ quan trọng nhất để hiển thị, thay vì dồn mọi thứ rồi mới cố thu nhỏ.
›Responsive nghĩa là gì khi làm web app?
Responsive nghĩa là giao diện tự thay đổi bố cục theo kích thước màn hình, như desktop, tablet và mobile. Khi nhờ AI viết code, bạn nên ghi rõ từ này trong câu lệnh để AI tối ưu cho từng loại màn hình.
›Menu trên điện thoại nên có bao nhiêu cấp?
Theo kinh nghiệm trong video, tối đa hai cấp. Menu xổ ra nhiều tầng rất khó dùng trên điện thoại; nếu có mục con, hãy mở thành một trang riêng.
›Bảng dữ liệu nhiều cột xử lý thế nào trên điện thoại?
Nên chuyển sang dạng card, chỉ hiển thị các thông tin chính và giữ các nút thao tác như sửa. Các tuỳ chọn ít dùng trên mobile như chọn cột hay in có thể ẩn đi.
›Vì sao AI viết giao diện hay lỗi trên mobile?
Thường vì câu lệnh không nói rõ yêu cầu responsive hoặc không mô tả hành vi như cuộn về đầu trang khi chuyển trang. Cách khắc phục là bổ sung yêu cầu cụ thể và tự kiểm tra bằng điện thoại thật.
Tác giả
Chuyên gia chuyển đổi số · Đại diện 5F Edu
Hơn 8 năm triển khai và tư vấn chuyển đổi số cho doanh nghiệp vừa và nhỏ: chuẩn hoá quy trình, xây phần mềm quản lý bằng AppSheet và web app, tự động hoá bằng N8N. Người làm kênh YouTube Nghiện AppSheet.
