Wireframe là bản phác khung của một màn hình giao diện: chỉ có các khối xám, đường kẻ và chữ ghi chú, cho thấy nội dung nào nằm ở đâu và theo thứ tự nào, chưa có màu, ảnh hay kiểu chữ thương hiệu. Nó giống bản vẽ mặt bằng của căn nhà trước khi chọn gạch, chọn sơn: mục đích là chốt bố cục và luồng thao tác khi sửa còn rẻ.
Với người làm đồ hoạ, wireframe thường bị bỏ qua vì trông "chưa có gì". Đó là lý do nhiều dự án web nhỏ bị sửa đi sửa lại ở giai đoạn đã lên màu: khách đổi ý về thứ tự nội dung, và mỗi lần đổi là dựng lại cả trang. Bài này giải thích wireframe khác gì mockup và prototype, cách chuẩn bị nội dung trước khi vẽ khung, cách dùng AI để phác nhanh nhiều phương án, và cách trình wireframe để khách góp ý đúng chỗ.
Wireframe, mockup và prototype khác nhau thế nào
Ba từ này hay bị dùng lẫn trong các cuộc trao đổi với khách. Phân biệt rõ giúp bạn báo đúng việc, tính đúng công và hỏi khách đúng câu ở từng giai đoạn.
| Wireframe | Mockup | Prototype | |
|---|---|---|---|
| Trông như thế nào | Khối xám, đường kẻ, chữ ghi chú | Giống ảnh chụp sản phẩm thật: màu, chữ, ảnh | Bấm được, chuyển màn hình được |
| Trả lời câu hỏi | Có những gì, nằm ở đâu, theo thứ tự nào | Trông ra sao, cảm giác thương hiệu | Dùng có trôi không, thao tác có hiểu không |
| Thời gian làm | Nhanh nhất, sửa trong vài phút | Lâu, mỗi lần sửa tốn công | Tuỳ độ chi tiết, có thể dựng trên wireframe hoặc mockup |
| Nên hỏi khách | Thứ tự này đã đúng ưu tiên chưa, thiếu nội dung gì | Màu, chữ, ảnh có đúng tinh thần thương hiệu chưa | Thử làm việc này xem có vướng chỗ nào không |
| Không nên hỏi khách | Thích màu gì | Có nên đổi thứ tự cả trang không | Chi tiết màu của từng nút |
Prototype không phải bước bắt buộc sau mockup. Bạn có thể nối các wireframe thành một prototype thô để thử luồng thao tác trước khi lên màu, và đó thường là cách rẻ nhất để phát hiện người dùng bị lạc ở đâu.
Độ chi tiết thấp hay cao: chọn theo câu hỏi cần trả lời
Wireframe có nhiều mức chi tiết. Mức thấp là phác tay trên giấy hoặc bảng trắng: hình chữ nhật, gạch ngang thay cho dòng chữ, dấu chéo thay cho ảnh. Mức trung bình dựng trên phần mềm với kích thước gần thật, dùng chữ thật cho tiêu đề và nhãn nút. Mức cao gần như mockup chỉ thiếu màu, có cỡ chữ, lưới và khoảng cách cụ thể.
Chọn mức nào phụ thuộc vào câu hỏi bạn đang cần trả lời. Khi còn đang chọn giữa hai cách tổ chức trang, ví dụ trang chủ nên dẫn bằng sản phẩm hay bằng câu chuyện thương hiệu, phác tay mười phút cho mỗi phương án là đủ. Khi đã chốt hướng và cần biết nội dung thật có vừa không, ví dụ mô tả sản phẩm có đẩy nút mua xuống quá xa hay không, bạn cần mức trung bình với chữ thật.
Sai lầm hay gặp là nhảy thẳng lên mức cao vì muốn khách thấy "chuyên nghiệp". Wireframe càng đẹp, khách càng góp ý vào chi tiết thẩm mỹ thay vì cấu trúc, và bạn càng tiếc công khi phải bỏ. Một quy tắc đơn giản: chỉ thêm chi tiết khi câu hỏi ở mức hiện tại đã được trả lời xong.
Chuẩn bị nội dung trước khi vẽ khung
Wireframe vẽ trên nội dung giả gần như luôn phải vẽ lại. Trước khi đặt khối đầu tiên, bạn nên có danh sách nội dung của màn hình, và đây là khâu AI giúp được nhiều.
- Xin khách nội dung thật hoặc mẫu sát thật: tiêu đề, đoạn mô tả, số lượng ảnh, các thông tin bắt buộc theo ngành. Nếu khách chưa có, ghi rõ giả định của bạn.
- Viết ra mục tiêu chính của màn hình trong một câu, và một hai mục tiêu phụ.
- Nhờ AI liệt kê nội dung thường có trên loại màn hình này. Ví dụ câu lệnh: "Liệt kê các khối nội dung thường có trên trang giới thiệu dịch vụ của một phòng khám nha khoa nhỏ, chia thành bắt buộc, nên có, có thể bỏ. Không cần giải thích dài."
- Đối chiếu danh sách của AI với nội dung khách đưa. Khối nào AI gợi ý mà khách không có thì hỏi khách; khối nào khách có mà không phục vụ mục tiêu thì cân nhắc chuyển sang trang khác.
- Đánh số thứ tự ưu tiên cho từng khối. Người quyết định thứ tự là bạn và khách, dựa trên câu hỏi: người dùng cần biết gì trước để làm được mục tiêu chính.
- Ghi độ dài thực tế của từng khối, ví dụ tiêu đề dài nhất bao nhiêu chữ, danh sách nhiều nhất bao nhiêu mục. Con số này quyết định khối đó chiếm bao nhiêu chỗ.
Khi dán nội dung của khách vào AI, bỏ tên thương hiệu, tên người, số liệu kinh doanh không cần thiết. Để liệt kê khối nội dung, AI chỉ cần biết loại hình kinh doanh và mục tiêu trang, không cần biết khách là ai.
Dùng AI phác bố cục bằng lời trước khi vẽ
AI tạo ảnh có thể vẽ wireframe, nhưng kết quả thường lẫn chi tiết thừa và khó sửa. Cách hiệu quả hơn là nhờ chatbot mô tả bố cục bằng lời, theo thứ tự từ trên xuống, rồi bạn tự vẽ. Vài cách hỏi cho ra kết quả dùng được:
- "Với danh sách khối nội dung sau [dán danh sách], đề xuất ba cách sắp xếp cho màn hình điện thoại rộng khoảng 390 điểm. Mỗi cách mô tả từ trên xuống, mỗi khối một dòng, ghi khối nào chiếm hết bề ngang, khối nào chia cột."
- "Cách sắp xếp thứ hai ở trên: nếu người dùng chỉ cuộn tối đa hai màn hình rồi bỏ đi, họ đã thấy những gì? Có khối nào quan trọng nằm dưới hai màn hình không?"
- "Chuyển cách sắp xếp này sang màn hình máy tính rộng 1.280 điểm. Khối nào nên đặt cạnh nhau, khối nào giữ nguyên một cột, và vì sao."
- "Đóng vai một khách hàng lớn tuổi lần đầu vào trang này để đặt lịch. Đọc mô tả bố cục và nói chỗ nào có thể làm họ lúng túng."
Kết quả của AI là nguyên liệu để bạn so sánh, không phải đáp án. Thường bạn sẽ lấy một ý từ phương án này, một ý từ phương án khác, cộng với hiểu biết về khách mà AI không có. Nếu dùng công cụ thiết kế có tính năng AI sinh khung tự động, nguyên tắc vẫn vậy: xem như bản nháp, kiểm lại từng khối với danh sách nội dung, và kiểm phiên bản hiện hành vì tính năng này đổi khá nhanh.
Ví dụ giả định: wireframe trang sản phẩm của một xưởng gốm ở Vĩnh Long
Ví dụ giả định: một xưởng gốm nhỏ ở Vĩnh Long muốn bán bộ ấm chén qua trang web, khách chủ yếu xem trên điện thoại từ quảng cáo mạng xã hội. Mục tiêu chính của trang sản phẩm là giúp khách quyết định thêm vào giỏ; mục tiêu phụ là tin rằng hàng đóng gói cẩn thận, không vỡ khi gửi xa.
Danh sách nội dung sau khi đối chiếu gồm: ảnh sản phẩm (năm đến tám ảnh), tên, giá, lựa chọn màu men, nút thêm vào giỏ, mô tả ngắn, kích thước và dung tích, cách đóng gói và chính sách đổi khi vỡ, câu chuyện xưởng, đánh giá của khách, sản phẩm liên quan. Khi hỏi AI, nó gợi ý thêm khối "hướng dẫn chăm sóc men" — khách xác nhận đây là câu khách hay hỏi qua tin nhắn, nên được giữ lại.
Phương án được chọn đặt khối đóng gói và đổi khi vỡ ngay dưới nút thêm vào giỏ, dạng hai dòng ngắn có thể mở rộng, thay vì để ở cuối trang như mẫu thông thường. Lý do không đến từ AI mà từ chủ xưởng: phần lớn khách hỏi qua tin nhắn đều hỏi chuyện vỡ trước khi hỏi giá. Câu chuyện xưởng được rút xuống cuối, vì khách từ quảng cáo chưa quan tâm tới nó ở lần xem đầu.
Cả quá trình mất khoảng một buổi: một giờ thu thập nội dung, nửa giờ phác ba phương án, một giờ thảo luận với khách trên wireframe mức trung bình. Nếu làm thẳng bản màu, mỗi lần đổi thứ tự khối là một lần dựng lại ảnh, chữ, khoảng cách.
Những lỗi wireframe hay gặp
Dùng chữ giả cho mọi thứ. Đoạn chữ giả có độ dài đều đặn làm mọi khối trông vừa khít. Ít nhất tiêu đề, nhãn nút và mục danh sách nên dùng chữ thật, độ dài thật, vì đó là chỗ bố cục hay vỡ nhất.
Chỉ vẽ màn hình máy tính. Với nhiều trang bán hàng nhỏ ở Việt Nam, phần lớn khách đến từ điện thoại. Vẽ bản điện thoại trước giúp bạn buộc phải chọn thứ tự ưu tiên, vì không còn cột bên để nhét thêm.
Không ghi chú hành vi. Một khối xám không cho biết bấm vào thì chuyện gì xảy ra. Ghi chú ngắn bên cạnh, như "bấm mở ảnh lớn, vuốt để xem ảnh tiếp", giúp khách và lập trình viên hiểu cùng một điều.
Vẽ quá đẹp quá sớm. Thêm màu thương hiệu, ảnh thật, kiểu chữ chính thức vào wireframe làm khách chuyển sang góp ý thẩm mỹ. Giữ màu xám và một kiểu chữ trung tính cho tới khi cấu trúc đã chốt.
Bỏ qua trạng thái khác. Wireframe chỉ có trạng thái đầy đủ dữ liệu sẽ bỏ sót trang trống, trang lỗi, trang đang tải. Không cần vẽ hết, nhưng nên có ít nhất một khung cho trạng thái trống của những khối quan trọng.
Trình wireframe cho khách mà không bị chê "xấu quá"
Khách lần đầu thấy wireframe thường phản ứng theo hai kiểu: thất vọng vì "chưa có gì", hoặc bắt đầu góp ý màu sắc trên một bản không có màu. Cả hai đều do khách không biết mình đang được hỏi gì. Vì vậy trước khi mở tệp, nói rõ trong một hai câu: đây là bản khung, chỉ để chốt nội dung và thứ tự, màu và hình sẽ làm ở bước sau.
Khi trình, đi theo câu chuyện của người dùng thay vì theo từng khối. Ví dụ: "Một khách thấy quảng cáo, bấm vào, việc đầu tiên họ thấy là ảnh và giá, cuộn xuống một chút thấy ngay chuyện đóng gói chống vỡ…" Cách kể này giúp khách đánh giá thứ tự có hợp lý không, thay vì đánh giá từng khối đẹp hay xấu.
Chuẩn bị sẵn hai ba câu hỏi cụ thể để khách trả lời, như "khối nào khách của anh chị hỏi nhiều nhất" hay "có thông tin bắt buộc nào theo ngành mà bản này còn thiếu". Ghi lại góp ý ngay trên wireframe, kèm ngày, để tránh tranh cãi sau này về việc ai đã đồng ý thứ tự nào. Nếu dùng AI để tóm tắt biên bản cuộc họp, che tên người và thông tin kinh doanh trước khi dán.
Câu hỏi thường gặp
Wireframe nên vẽ bằng giấy hay bằng phần mềm?
Giai đoạn chọn hướng, giấy và bút nhanh hơn và khiến bạn không sa vào chi tiết. Khi cần thử nội dung thật, chia sẻ với khách ở xa hoặc nối thành bản bấm thử, phần mềm thiết kế giao diện tiện hơn. Nhiều người làm cả hai: phác tay vài phương án rồi dựng lại phương án được chọn trên máy.
Một trang web nhỏ năm trang có cần wireframe không?
Có, nhưng không cần cầu kỳ. Một wireframe mức thấp cho trang chủ và trang quan trọng nhất, thường là trang sản phẩm hoặc trang đặt lịch, đủ để chốt thứ tự nội dung với khách. Các trang còn lại nếu dùng chung khung thì có thể đi thẳng sang bản chi tiết.
Có nên gửi wireframe cho khách tự xem thay vì họp?
Có thể, nếu kèm ghi chú rõ ràng và vài câu hỏi cụ thể. Tuy vậy, lần trình đầu tiên nên có trao đổi trực tiếp hoặc qua cuộc gọi, vì khách chưa quen đọc wireframe thường hiểu sai mục đích. Từ lần thứ hai trở đi, gửi tệp kèm ghi chú thường đủ.
AI tạo ảnh có vẽ wireframe được không?
Vẽ được hình trông giống wireframe, nhưng thường thiếu logic: khối không khớp danh sách nội dung, chữ vô nghĩa, kích thước không theo lưới. Dùng làm cảm hứng thì được; làm bản để trao đổi với khách thì nên tự dựng lại từ danh sách nội dung đã chốt.
Wireframe có cần đúng kích thước màn hình thật không?
Mức phác tay thì không. Từ mức trung bình trở lên nên dựng trên khung có bề rộng gần với màn hình phổ biến của người dùng, để biết nội dung thật chiếm bao nhiêu chỗ và cái gì nằm dưới phần phải cuộn. Kích thước khung phổ biến thay đổi theo đời máy, nên kiểm số liệu hiện hành.
Khách muốn xem bản màu ngay từ đầu thì làm sao?
Giải thích ngắn rằng chốt cấu trúc trước giúp tiết kiệm số lần sửa và thời gian của chính khách. Nếu khách vẫn muốn, bạn có thể gửi kèm một bảng cảm hứng màu và chữ để họ yên tâm về hướng thẩm mỹ, trong khi vẫn bàn thứ tự nội dung trên wireframe.