Thiết kế giao diện bằng AI hiện nay nghĩa là dùng AI như một người phụ việc nhanh tay: phác bố cục, liệt kê trạng thái màn hình, đặt câu hỏi phản biện, soát lỗi lặt vặt. Phần quyết định giao diện có dùng được hay không — luồng thao tác, thứ tự ưu tiên, hệ thống thành phần, khả năng đọc trên máy thật — vẫn nằm trong tay người thiết kế. Màn hình do công cụ tạo ảnh sinh ra trông bóng bẩy, nhưng gần như không bao giờ đưa thẳng cho lập trình viên dựng được.
Bài này dành cho người làm đồ hoạ quen ấn phẩm in và mạng xã hội, nay nhận thêm việc thiết kế trang web, trang đích hay ứng dụng nhỏ cho khách. Bạn sẽ có một bảng chia việc giữa người và AI, danh sách lý do màn hình AI "đẹp mà không dùng được", quy trình bảy bước cho một màn hình và các câu lệnh mẫu bằng tiếng Việt. Phần viết code nằm ngoài phạm vi trang này.
Chia việc giữa người thiết kế và AI theo từng khâu
Cách nghĩ hữu ích nhất là chia quy trình làm giao diện thành từng khâu nhỏ rồi hỏi: ở khâu này, sai thì ai phát hiện và sửa tốn bao nhiêu. Khâu nào sai rẻ và dễ thấy thì giao AI mạnh tay; khâu nào sai đắt và khó thấy thì người phải cầm.
| Khâu | AI giúp tốt ở | Người thiết kế phải tự làm |
|---|---|---|
| Hiểu bài toán | Tóm tắt brief dài, liệt kê câu hỏi cần hỏi lại khách, gợi ý nhóm người dùng có thể đã bị quên | Hỏi khách, chọn người dùng chính, chốt mục tiêu của từng màn hình |
| Luồng thao tác | Liệt kê nhánh rẽ, trường hợp lỗi, lối thoát; đếm số bước | Quyết định luồng nào là chính, cắt bước thừa, cân với giới hạn kỹ thuật |
| Bố cục | Đưa ba bốn phương án sắp xếp khối bằng lời hoặc bằng ảnh phác | Chọn phương án theo ưu tiên nội dung, dựng lại trên lưới thật |
| Thành phần | Liệt kê trạng thái của nút, ô nhập, thẻ; gợi ý cách đặt tên | Dựng thư viện thành phần, giữ đồng nhất giữa các màn hình |
| Nội dung trên màn hình | Viết nháp nhãn nút, thông báo lỗi, chữ hướng dẫn ngắn | Đối chiếu với dữ liệu thật của khách, sửa giọng cho đúng thương hiệu |
| Soát | Đọc ảnh chụp màn hình và chỉ ra chữ quá nhỏ, nút sát nhau, chỗ thiếu nhãn | Kiểm trên điện thoại thật, kiểm với người dùng thật |
| Bàn giao | Viết nháp ghi chú hành vi từ mô tả của bạn | Rà thông số, trả lời câu hỏi của lập trình viên, soát bản dựng |
Đọc theo hàng ngang, bạn sẽ thấy cột giữa toàn là việc "liệt kê, gợi ý, viết nháp", còn cột phải toàn là "chọn, quyết định, kiểm". Đó không phải chuyện khiêm tốn: AI không nhìn thấy khách hàng của bạn, không biết lập trình viên của dự án dùng nền tảng gì, và không cầm điện thoại đứng ngoài nắng để thử.
Vì sao màn hình giao diện do AI vẽ không đưa thẳng cho lập trình viên được
Nó là một bức ảnh, không phải một hệ thống. Công cụ tạo ảnh vẽ ra một khoảnh khắc đẹp nhất của màn hình. Giao diện thật có hàng chục khoảnh khắc: lúc đang tải, lúc trống dữ liệu, lúc nhập sai, lúc mất mạng, lúc tên khách dài gấp ba chữ mẫu. Ảnh không trả lời được những lúc đó.
Khoảng cách và cỡ chữ không theo quy luật nào. Đo thử một màn hình AI sinh, bạn sẽ thấy lề trái mỗi khối lệch vài điểm ảnh, cỡ chữ có bảy tám mức khác nhau. Lập trình viên dựng theo đúng như vậy thì mã rối, còn dựng theo quy luật riêng thì sản phẩm không giống bản thiết kế.
Chữ là chữ giả. Chữ trong ảnh AI thường là ký tự vô nghĩa hoặc tiếng Anh, và gần như luôn sai dấu khi gặp tiếng Việt. Một nhãn "Thanh toán" ngắn gọn có thể biến thành dòng dài gấp đôi khi thay bằng câu thật, làm vỡ cả bố cục.
Không có thành phần tái dùng. Ba nút trên cùng một ảnh có thể có ba kiểu bo góc khác nhau. Trong sản phẩm thật, nút chính phải giống nhau ở mọi màn hình, nếu không người dùng mất dấu đâu là việc quan trọng nhất.
Chi tiết trang trí lấn chức năng. Đổ bóng nhiều lớp, nền chuyển màu, chữ mỏng trên nền ảnh: những thứ làm ảnh đẹp trên mạng xã hội lại làm giao diện khó đọc trên điện thoại giá rẻ, màn hình độ sáng thấp.
Quy trình bảy bước cho một màn hình có AI hỗ trợ
Quy trình dưới đây áp dụng cho một màn hình đơn lẻ, ví dụ trang chi tiết sản phẩm của một cửa hàng trực tuyến. Với cả một sản phẩm, bạn lặp lại từ bước hai cho từng luồng.
- Viết một câu mục tiêu. Màn hình này giúp ai làm xong việc gì. Ví dụ giả định: "Giúp khách đang xem trên điện thoại quyết định có thêm bộ ấm chén vào giỏ hay không." Câu này dùng để loại mọi thứ không phục vụ mục tiêu.
- Liệt kê nội dung thật. Xin khách dữ liệu thật hoặc mẫu sát thật: tên sản phẩm dài nhất, mô tả ngắn nhất, số ảnh nhiều nhất. Nhờ AI đọc danh sách và chỉ ra nội dung nào có thể thiếu.
- Xếp thứ tự ưu tiên. Đánh số các khối nội dung theo mức quan trọng với mục tiêu. Đây là việc của bạn và khách; AI chỉ gợi ý để bạn đối chiếu.
- Phác ba bố cục thô. Vẽ tay hoặc dựng khung xám. Có thể nhờ AI mô tả thêm một hai cách sắp xếp mà bạn chưa nghĩ tới, rồi tự vẽ lại.
- Liệt kê trạng thái. Nhờ AI liệt kê mọi trạng thái màn hình có thể gặp, sau đó bạn gạch những trạng thái không áp dụng và vẽ những trạng thái còn lại.
- Dựng bản chi tiết từ thư viện thành phần. Dùng nút, ô nhập, thẻ đã có, theo lưới và thang khoảng cách cố định. Không lấy chi tiết từ ảnh AI sinh mà không dựng lại.
- Soát hai vòng. Vòng một đưa ảnh chụp màn hình cho AI tìm lỗi rõ ràng; vòng hai mở bản mẫu trên điện thoại thật và nhờ một người chưa từng thấy thiết kế thử làm đúng việc ở câu mục tiêu.
Bước hai và bước năm là nơi AI tiết kiệm nhiều thời gian nhất, vì đó là việc liệt kê cho đủ — thứ con người hay bỏ sót khi mệt. Bước ba và bước sáu là nơi bạn không nên nhường, vì đó là chỗ tay nghề thể hiện.
Câu lệnh mẫu cho từng khâu
Các câu lệnh dưới đây viết bằng tiếng Việt, dùng được với các chatbot phổ biến như ChatGPT, Claude, Gemini hay Copilot. Thay phần trong ngoặc vuông bằng thông tin của dự án, và nhớ đã che tên khách, số liệu kinh doanh trước khi dán.
- Đọc brief: "Đây là yêu cầu thiết kế của một cửa hàng gốm nhỏ bán trực tuyến [dán brief đã che tên]. Hãy liệt kê mười câu hỏi một người thiết kế giao diện cần hỏi lại trước khi bắt đầu, xếp theo mức ảnh hưởng tới bố cục."
- Liệt kê trạng thái: "Màn hình giỏ hàng trên điện thoại gồm danh sách sản phẩm, ô mã giảm giá, tổng tiền, nút thanh toán. Liệt kê mọi trạng thái màn hình này có thể gặp, kể cả lỗi và trường hợp dữ liệu bất thường. Mỗi trạng thái một dòng, kèm việc người dùng cần làm tiếp."
- Phản biện bố cục: "Bố cục của trang chi tiết sản phẩm theo thứ tự: ảnh, tên, giá, nút thêm vào giỏ, mô tả, đánh giá. Người dùng chính là khách lần đầu mua, chưa tin cửa hàng. Chỉ ra ba điểm yếu của thứ tự này và hai cách sắp xếp khác, kèm lý do."
- Viết nhãn và thông báo: "Viết năm phương án thông báo lỗi khi khách nhập mã giảm giá đã hết hạn, mỗi phương án dưới mười hai chữ, giọng lịch sự, nói rõ khách có thể làm gì tiếp."
- Soát ảnh chụp màn hình: "Đây là ảnh chụp một màn hình ứng dụng đặt lịch. Chỉ ra các chỗ chữ có thể quá nhỏ trên điện thoại, nút đặt quá sát nhau, biểu tượng không có nhãn, và chỗ người dùng có thể không biết bấm vào đâu. Không nhận xét về màu sắc thẩm mỹ."
Câu lệnh tốt luôn có ba thứ: bối cảnh (màn hình gì, cho ai), việc cụ thể (liệt kê, chỉ ra, viết), và giới hạn (bao nhiêu mục, dài bao nhiêu, không làm gì). Thiếu giới hạn, AI sẽ trả về một bài giảng chung chung về trải nghiệm người dùng.
Che dữ liệu khi đưa màn hình của khách vào AI
Làm giao diện khác làm poster ở một điểm: bạn thường được xem dữ liệu thật của khách. Bảng quản trị có tên khách mua hàng, số điện thoại, địa chỉ; ứng dụng nội bộ có doanh thu theo chi nhánh; bản thiết kế chưa ra mắt là bí mật kinh doanh. Chụp nguyên màn hình đó dán vào chatbot để nhờ soát bố cục là đưa dữ liệu của khách cho một bên thứ ba mà khách chưa đồng ý.
Cách làm an toàn hơn là thay toàn bộ dữ liệu thật bằng dữ liệu mẫu trước khi chụp: tên "Khách A", số điện thoại toàn số không, địa chỉ chung chung. Nhiều công cụ thiết kế có tiện ích điền dữ liệu giả, hoặc bạn tự soạn một bộ dữ liệu mẫu dùng cho mọi dự án. Lưu ý giữ độ dài tương đương dữ liệu thật, vì mục đích là thử bố cục.
Với bản thiết kế chưa công bố, hỏi khách trước khi dùng bất kỳ công cụ AI nào, và ghi điều đó vào hợp đồng hoặc biên bản trao đổi. Nếu khách không đồng ý, bạn vẫn dùng AI được ở những khâu không cần ảnh: liệt kê trạng thái, viết nháp nhãn, đặt câu hỏi phản biện bằng mô tả chữ đã lược bỏ tên thương hiệu. Kiểm cài đặt lưu lịch sử trò chuyện và mục dùng dữ liệu để huấn luyện của công cụ bạn dùng, vì những cài đặt này thay đổi theo phiên bản.
Ba thói quen của dân đồ hoạ cần đổi khi làm giao diện
Thiết kế cho trạng thái đẹp nhất. Poster chỉ có một trạng thái, nên người làm in quen chăm chút từng chi tiết của một khung hình. Giao diện thì trạng thái xấu nhất mới là phép thử: tên sản phẩm bốn dòng, danh sách trống, ảnh khách tải lên bị mờ. Tập thói quen vẽ trạng thái xấu nhất trước, rồi mới làm đẹp trạng thái bình thường.
Căn chỉnh bằng mắt. Trên ấn phẩm, xê dịch vài điểm ảnh cho cân thị giác là tay nghề. Trên giao diện, mọi khoảng cách nên rơi vào một thang cố định, ví dụ bội số của bốn hoặc tám điểm, để lập trình viên dựng nhất quán. Chỗ nào thật sự cần ngoại lệ thì ghi chú rõ.
Coi chữ là hình. Người làm poster hay chọn chữ theo dáng, chấp nhận chữ nhỏ, mảnh, đặt trên nền ảnh. Chữ trong giao diện phải đọc được ở khoảng cách tay cầm, trên màn hình rẻ, với người mắt kém; cỡ chữ thân bài, độ đậm và độ tương phản là chuyện chức năng trước khi là chuyện thẩm mỹ.
Giao một tệp là xong. Ấn phẩm in xong là hết việc. Giao diện còn sống: thêm tính năng, đổi nội dung, thêm người làm. Thói quen đặt tên lớp, tổ chức thành phần và ghi chú ngay từ đầu quyết định ba tháng sau dự án còn làm tiếp được hay phải vẽ lại.
Câu hỏi thường gặp
Có công cụ AI nào biến một câu mô tả thành giao diện hoàn chỉnh không?
Đã có công cụ sinh bản nháp giao diện từ câu mô tả, và một số phần mềm thiết kế tích hợp tính năng tương tự. Kết quả thường đủ để thảo luận ý tưởng nhưng chưa đủ để giao: thiếu trạng thái, thiếu nhất quán, chữ tiếng Việt hay lỗi. Tính năng thay đổi nhanh, nên kiểm phiên bản hiện hành trước khi dựa vào.
Người chưa học UI có nên nhận dự án giao diện cho khách không?
Nên bắt đầu bằng dự án nhỏ, ít màn hình, khách sẵn lòng thử nghiệm, và nói rõ kinh nghiệm của bạn. Học trước các phần nền tảng: lưới, thang khoảng cách, trạng thái thành phần, cỡ chữ cho điện thoại, khả năng tiếp cận. AI giúp bạn bớt sót, không giúp bạn hiểu thay.
Dùng ảnh giao diện do AI tạo để trình khách xem hướng phong cách có được không?
Được, nếu bạn nói rõ đó là ảnh tham khảo phong cách, không phải bản thiết kế. Cũng nên tránh để khách bám vào chi tiết trong ảnh, vì nhiều chi tiết không dựng được hoặc không phù hợp nội dung thật của họ. Ghi chú bên cạnh những điểm bạn định giữ và những điểm sẽ bỏ.
AI có thay được việc thử giao diện với người dùng thật không?
Không. AI có thể chỉ ra lỗi phổ biến như chữ nhỏ hay nút thiếu nhãn, nhưng không biết khách hàng cụ thể của bạn hiểu từ nào, quen thao tác nào, dùng điện thoại gì. Thử với vài người dùng thật vẫn là cách đáng tin nhất để biết giao diện có dùng được hay không.
Có nên nói với khách rằng mình dùng AI khi thiết kế giao diện không?
Nên nói ở mức quy trình: bạn dùng AI để liệt kê, soát và viết nháp, còn quyết định thiết kế do bạn chịu trách nhiệm. Đặc biệt cần hỏi khách trước khi đưa dữ liệu hay bản thiết kế chưa công bố của họ vào bất kỳ công cụ nào. Minh bạch từ đầu tránh hiểu lầm về sau.
Làm giao diện có bắt buộc phải biết code không?
Không bắt buộc, nhưng hiểu cách giao diện được dựng giúp bạn thiết kế thứ dựng được: hiểu đơn vị đo, cách nội dung co giãn, vì sao thành phần phải tái dùng. Phần viết code thuộc chuyên môn lập trình; việc của bạn là bàn giao rõ ràng để lập trình viên không phải đoán.