Mở đầu — vì sao bài này quan trọng
Hãy tưởng tượng bạn được giao thiết kế màn hình thanh toán cho một ứng dụng ví điện tử. Bạn mở Figma, chọn màu thương hiệu, đổ bóng đẹp, bo góc tinh tế, chèn icon, căn chỉnh từng pixel. Sau ba ngày, bạn đem khoe sếp. Sếp nhìn vào và hỏi: "Tại sao bước xác nhận lại nằm sau bước nhập mã giảm giá? Logic này sai rồi." Và thế là ba ngày công sức của bạn — cùng với toàn bộ phần màu mè, bóng đổ, icon — bị xóa sạch.
Đây là cái bẫy kinh điển mà gần như designer nào cũng từng rơi vào ít nhất một lần: lao vào làm đẹp trước khi làm đúng. Wireframing tồn tại để chống lại chính cái bẫy đó. Wireframe là bộ khung xương của sản phẩm — nó trả lời câu hỏi "trên màn hình này có gì, đặt ở đâu, ưu tiên cái gì" trước khi ta tốn công trả lời câu hỏi "nó trông như thế nào".
Trong bài này, chúng ta sẽ đi sâu vào dải fidelity (mức độ chi tiết/hoàn thiện) của wireframe — từ bản sketch nguệch ngoạc trên giấy, đến low-fi wireframe đen trắng, rồi mid-fi wireframe gần với sản phẩm thật. Hiểu được khi nào dùng mức nào, và quan trọng hơn là biết dừng đúng lúc, sẽ giúp bạn tiết kiệm hàng chục giờ làm việc và tránh những cuộc tranh luận sai trọng tâm với sếp, với khách hàng, với team kỹ thuật.
Khái niệm cốt lõi
Fidelity là gì và tại sao nó là một dải liên tục
"Fidelity" dịch sát nghĩa là "độ trung thực" — tức là wireframe của bạn giống sản phẩm cuối cùng đến mức nào. Đây không phải một công tắc bật/tắt, mà là một dải liên tục (spectrum). Ở một đầu là tờ giấy với vài nét bút chì; ở đầu kia là bản thiết kế gần như không phân biệt được với sản phẩm thật. Giữa hai đầu đó có vô số mức độ, nhưng trong thực hành ngành, người ta thường gom thành ba mốc chính: sketch, low-fi, và mid-fi.
Điều quan trọng nhất cần khắc cốt ghi tâm: mức fidelity bạn chọn phải khớp với câu hỏi bạn đang muốn trả lời và đối tượng bạn đang muốn thuyết phục. Dùng sai mức là lãng phí — hoặc lãng phí thời gian (làm quá chi tiết khi chưa cần), hoặc lãng phí cơ hội phản hồi (làm quá sơ sài khi cần test với người dùng thật).
Sketch — bút chì và những nét nguệch ngoạc
Sketch là mức thấp nhất, nhanh nhất, rẻ nhất. Bạn cầm bút, lấy một tờ A4 hoặc một cuốn sổ, và vẽ ra ý tưởng dưới dạng hộp, mũi tên, vài chữ. Một màn hình sketch có thể vẽ xong trong 30 giây đến 2 phút.
Sketch không nhằm trình bày cho ai cả — nó là công cụ để tư duy bằng tay. Khi bạn vẽ nhanh năm bố cục khác nhau cho một trang chủ, bạn đang ép não mình so sánh các phương án thay vì dính chặt vào ý tưởng đầu tiên. Vì sketch xấu một cách "cố ý", không ai ngại chê nó, và bạn cũng không ngại vứt nó đi. Đó chính là sức mạnh: rẻ để tạo ra, rẻ để vứt bỏ.
Đặc điểm của sketch: vẽ tay, không thước, không màu, chữ viết tháu, ảnh thường ký hiệu bằng một hình chữ nhật có gạch chéo, nút bấm là một hộp với một từ bên trong. Đừng cố vẽ đẹp — đẹp là phản tác dụng ở giai đoạn này.
Low-fi wireframe — hộp, chữ, và sắc xám
Khi một vài ý tưởng sketch đã có vẻ hứa hẹn, ta nâng nó lên thành low-fidelity wireframe trên công cụ số (Figma, Balsamiq, hoặc thậm chí Google Slides). Low-fi là phiên bản "sạch sẽ" của sketch nhưng vẫn cố tình giữ độ trừu tượng cao:
- Chỉ dùng greyscale (đen, trắng, các sắc xám). Không màu thương hiệu.
- Hộp đại diện cho khối nội dung. Ảnh là hình chữ nhật có dấu X. Video cũng vậy.
- Chữ có thể là chữ thật hoặc placeholder, nhưng kích thước và thứ bậc (heading to, body nhỏ) đã được phân biệt rõ.
- Không icon thật, không font đặc trưng, không bóng đổ, không bo góc cầu kỳ.
Mid-fi wireframe — gần với thật hơn một bậc
Mid-fidelity wireframe là cầu nối giữa low-fi và bản thiết kế hoàn chỉnh. Ở mức này:
- Vẫn chủ yếu greyscale, nhưng có thể thêm một màu nhấn duy nhất để chỉ ra hành động chính (ví dụ: nút "Thanh toán" tô xám đậm hơn).
- Khoảng cách, kích thước, tỉ lệ đã chính xác hơn nhiều — gần với grid và spacing thật.
- Chữ là nội dung thật (real content) thay vì "Lorem ipsum", vì nội dung thật mới bộc lộ được vấn đề bố cục (một tiêu đề tiếng Việt có dấu thường dài hơn placeholder).
- Có thể dùng icon đơn giản, dạng đường nét cơ bản.
- Hệ thống phân cấp rõ ràng: người xem gần như cảm nhận được sản phẩm sẽ ra sao.
Bảng so sánh nhanh
| Tiêu chí | Sketch | Low-fi | Mid-fi |
|---|---|---|---|
| Thời gian/màn hình | 30s–2 phút | 10–30 phút | 30–90 phút |
| Công cụ | Giấy, bút | Figma, Balsamiq | Figma |
| Màu sắc | Không | Greyscale | Greyscale + 1 màu nhấn |
| Nội dung | Ký hiệu tháu | Placeholder/thật | Nội dung thật |
| Mục đích chính | Tư duy, brainstorm | Khóa bố cục & hierarchy | Test với người dùng, trình bày |
Tình huống thực tế
Ví dụ 1 — Tiki và màn hình giỏ hàng "vẽ lại từ giấy"
Giả định một team sản phẩm tại một sàn thương mại điện tử lớn của Việt Nam như Tiki cần thiết kế lại màn hình giỏ hàng vì tỉ lệ bỏ giỏ (cart abandonment) đang ở mức 68%. Designer phụ trách, thay vì mở Figma ngay, đã triệu tập một buổi sketch 45 phút với hai PM và một engineer.
Mỗi người vẽ tay 3 phương án bố cục giỏ hàng lên giấy A4 — tổng cộng 12 bản sketch trong vòng nửa tiếng. Cả nhóm dán hết lên tường, khoanh tròn những ý hay: có bản đặt nút "Mua ngay" cố định ở đáy màn hình (sticky), có bản gộp mã giảm giá vào ngay bước xem giỏ thay vì bước thanh toán. Họ chọn ra 2 hướng, rồi designer mới dựng thành low-fi wireframe đen trắng trong Figma để rà soát thứ bậc thông tin.
Bài học: Buổi sketch tốn vài tờ giấy và 45 phút nhưng giúp cả team đồng thuận về luồng trước khi một pixel nào được vẽ chính xác. Nếu designer mở Figma làm UI ngay từ đầu, engineer có lẽ đã không lên tiếng về việc nút sticky gây khó cho phần code cuộn trang — một ý kiến chỉ xuất hiện vì sketch đủ thô để ai cũng dám góp ý.
Ví dụ 2 — Startup fintech và bài học "đẹp quá hóa hại"
Một startup ví điện tử ở TP.HCM (gọi là PayGo) thuê một designer freelance làm màn hình onboarding. Designer này bỏ qua hoàn toàn low-fi, lao thẳng vào làm bản thiết kế full màu, đổ bóng, gradient tím rất bắt mắt và gửi cho founder.
Founder mê thẩm mỹ ngay, duyệt liền. Nhưng khi đưa cho 5 người dùng thử nghiệm, 4/5 người không hiểu phải làm gì ở bước "liên kết ngân hàng" vì nút quan trọng bị chìm giữa một rừng hiệu ứng đẹp đẽ. Vấn đề nằm ở hierarchy và bố cục — đúng thứ mà low-fi/mid-fi sinh ra để giải quyết. Đội ngũ phải quay lại làm mid-fi wireframe greyscale, test lại, rồi mới tô màu. Tổng thời gian đội lên gần gấp đôi.
Bài học: Màu sắc và hiệu ứng che giấu vấn đề cấu trúc. Khi mọi thứ đều "đẹp", mắt người xem (kể cả founder) bị đánh lừa, bỏ qua việc nút hành động chính có nổi bật hay không. Làm greyscale trước buộc bố cục phải tự đứng vững bằng spacing và kích thước, chứ không dựa dẫm vào màu.
Ví dụ 3 — Grab và mid-fi để test luồng đặt xe
Giả định team Grab cần thử một luồng đặt xe mới cho phép người dùng đặt trước (schedule) chuyến đi. Vì luồng này phức tạp và có nhiều trạng thái (chọn giờ, xác nhận, hủy), họ làm mid-fi wireframe với nội dung thật bằng tiếng Việt: "Đặt xe lúc 7:30 sáng mai", "Phí đặt trước: 10.000đ", có một màu nhấn cho nút xác nhận.
Họ dùng bản mid-fi này, gắn liên kết bấm chuyển màn hình (clickable) và đưa cho 8 tài xế lẫn hành khách thử. Nhờ nội dung thật, họ phát hiện chuỗi "Chuyến đi đã được lên lịch thành công" làm vỡ bố cục thẻ thông báo trên màn hình nhỏ — vấn đề mà "Lorem ipsum" sẽ không bao giờ lộ ra.
Bài học: Mid-fi với nội dung thật bằng tiếng Việt (có dấu, từ thường dài hơn tiếng Anh) là mức fidelity vàng để test luồng phức tạp. Đủ thật để người dùng phản ứng tự nhiên, đủ thô để sửa nhanh mà không tiếc.
Hướng dẫn từng bước
Dưới đây là quy trình thực hành để đi từ ý tưởng đến mid-fi wireframe một cách có kỷ luật.
Bước 1 — Xác định bạn đang muốn trả lời câu hỏi gì. Trước khi vẽ, viết ra một câu: "Màn hình này phải giúp người dùng làm được gì?". Nếu chưa rõ mục tiêu, đừng vẽ vội — bạn sẽ chỉ làm đẹp một thứ vô nghĩa.
Bước 2 — Sketch nhanh nhiều phương án trên giấy. Đặt hẹn giờ 10 phút, vẽ ít nhất 3–5 bố cục khác nhau cho cùng một màn hình. Cố tình vẽ xấu, vẽ nhanh. Đừng yêu phương án đầu tiên. Nếu làm việc nhóm, mỗi người vẽ riêng rồi mới chia sẻ để tránh ảnh hưởng lẫn nhau.
Bước 3 — Chọn 1–2 hướng và dựng low-fi trên công cụ số. Mở Figma. Dùng khung (frame) đúng kích thước thiết bị mục tiêu (ví dụ 390×844 cho iPhone). Chỉ dùng hộp xám, chữ đen, ô ảnh có dấu X. Khóa chặt bố cục và thứ bậc: cái gì quan trọng nhất phải to nhất và nằm ở vị trí mắt nhìn trước.
Bước 4 — Rà soát low-fi với người liên quan. Đưa cho PM, engineer, hoặc đồng nghiệp xem. Hỏi: "Luồng này có hợp lý không? Thiếu trạng thái nào không (rỗng, lỗi, đang tải)?". Sửa ngay trên low-fi vì lúc này sửa còn rẻ.
Bước 5 — Nâng lên mid-fi. Thay placeholder bằng nội dung thật bằng tiếng Việt. Căn chỉnh spacing theo lưới (grid) — ví dụ bội số của 8px. Thêm một màu nhấn duy nhất cho hành động chính. Dùng icon đường nét đơn giản nếu cần. Đảm bảo kích thước, tỉ lệ đã sát thật.
Bước 6 — Gắn liên kết và test với người dùng. Tạo các kết nối bấm-chuyển-màn-hình cơ bản trong Figma để mô phỏng luồng. Mời 5–8 người dùng đại diện thử. Quan sát họ vấp ở đâu. Mid-fi là điểm dừng hoàn hảo để thu phản hồi trước khi đầu tư vào UI hoàn chỉnh.
Bước 7 — Chốt và bàn giao lên giai đoạn high-fi. Khi luồng và bố cục đã được xác nhận qua test, đó mới là lúc chuyển sang làm giao diện chi tiết (màu, font, hiệu ứng) — phần thuộc về các bài sau.
Lỗi thường gặp & mẹo
Lỗi 1 — Làm low-fi quá đẹp. Nhiều bạn mới không kìm được, chèn màu, icon đẹp ngay từ low-fi. Hệ quả: người xem bàn về thẩm mỹ thay vì cấu trúc, và bản thân bạn ngại sửa vì "đã đẹp rồi". Mẹo: Tự đặt luật "greyscale-only" cho mọi low-fi. Tắt mọi cám dỗ màu mè bằng cách dùng đúng một bảng xám.
Lỗi 2 — Dùng Lorem ipsum cho đến tận mid-fi. Văn bản giả luôn vừa vặn một cách giả tạo. Nội dung tiếng Việt thật thường dài hơn, có dấu, dễ làm vỡ bố cục. Mẹo: Ngay từ mid-fi, hãy dùng nội dung thật hoặc gần thật để lộ vấn đề sớm.
Lỗi 3 — Bỏ quên các trạng thái phụ. Designer mới thường chỉ vẽ trạng thái "lý tưởng" (có dữ liệu đầy đủ, mọi thứ thành công). Mẹo: Với mỗi màn hình quan trọng, tự hỏi: trạng thái rỗng trông ra sao? Lỗi thì sao? Đang tải thì sao? (Các trạng thái này sẽ được đào sâu ở những bài sau, nhưng wireframe là nơi đầu tiên phải nghĩ đến chúng.)
Lỗi 4 — Nhảy cóc từ ý tưởng thẳng lên high-fidelity. Như câu chuyện PayGo, bỏ qua wireframe khiến vấn đề cấu trúc bị che lấp. Mẹo: Tự nhắc "đúng trước, đẹp sau". Luôn để wireframe đứng vững bằng bố cục trước khi cho phép bản thân tô màu.
Lỗi 5 — Mài giũa vô tận, không biết dừng. Wireframe có thể bị làm đi làm lại mãi. Mẹo: Gắn mỗi mức fidelity với một mục tiêu cụ thể. Khi mục tiêu đó đã đạt (ví dụ: "luồng đã được team đồng thuận"), dừng lại và bước tiếp.
Mẹo bổ sung: Đặt tên frame trong Figma theo luồng (ví dụ "01-Giỏ hàng", "02-Thanh toán") để khi bàn giao, ai cũng đọc được mạch câu chuyện. Một wireframe tốt phải tự kể được câu chuyện luồng người dùng mà không cần bạn đứng cạnh giải thích.
Bài tập thực hành
- Sketch 5 phương án (15 phút). Chọn một màn hình quen thuộc — ví dụ trang chủ một ứng dụng đặt đồ ăn. Đặt hẹn giờ và vẽ tay 5 bố cục khác nhau trên giấy. Ép mình vẽ đủ 5, kể cả những ý "kỳ cục". Quan sát: phương án thứ 4–5 thường sáng tạo hơn phương án đầu.
- Dựng 1 low-fi greyscale (30 phút). Chọn phương án sketch ưng ý nhất, dựng thành low-fi wireframe trong Figma. Luật bắt buộc: chỉ đen-trắng-xám, ảnh là hộp có dấu X, không icon thật. Tự kiểm tra: nhìn vào màn hình 3 giây, bạn có nhận ra ngay đâu là thông tin/hành động quan trọng nhất không?
- Nâng lên mid-fi với nội dung Việt thật (45 phút). Lấy bản low-fi, thay toàn bộ chữ bằng nội dung thật bằng tiếng Việt, căn spacing theo bội số 8px, thêm một màu nhấn cho nút chính. So sánh: bố cục có còn vững khi chữ tiếng Việt dài ra không? Ghi lại 2 chỗ phải điều chỉnh — đó chính là giá trị của việc dùng nội dung thật.
- (Nâng cao) Tự phê bình theo fidelity. Nhìn lại mid-fi của bạn và tự hỏi: "Mình đã thêm chi tiết nào không phục vụ mục tiêu test luồng chưa?". Nếu có (ví dụ đã đổ bóng, bo góc cầu kỳ), hãy gỡ bớt. Đây là kỹ năng "dừng đúng lúc".
Tóm tắt
Wireframing là nghệ thuật trả lời câu hỏi "có gì, ở đâu, ưu tiên cái gì" trước khi trả lời "trông thế nào". Cốt lõi nằm ở việc hiểu dải fidelity:
- Sketch — bút chì, nguệch ngoạc, rẻ để tạo và rẻ để vứt. Dùng để tư duy và brainstorm nhanh nhiều phương án.
- Low-fi — hộp, chữ, greyscale. Dùng để khóa chặt bố cục và thứ bậc thông tin mà không bị phân tâm bởi thẩm mỹ.
- Mid-fi — gần thật hơn, nội dung thật, một màu nhấn, spacing chính xác. Là mức vàng để test luồng với người dùng trước khi đầu tư vào UI hoàn chỉnh.