Mở đầu — vì sao bài này quan trọng
Hãy mở Shopee, Tiki, hay Lazada ra và nhìn thật kỹ màn hình điện thoại của bạn. Bạn sẽ thấy hàng loạt ô chữ nhật nhỏ, mỗi ô chứa một tấm hình sản phẩm, tên sản phẩm, giá tiền, và đôi khi là một cái nút "Mua ngay". Mở Facebook ra: mỗi bài đăng cũng nằm gọn trong một khối riêng. Mở app ngân hàng Techcombank hay VPBank: mỗi tài khoản, mỗi giao dịch cũng được bọc trong một khối có viền, có bo góc, có đổ bóng nhẹ.
Tất cả những khối đó đều là card — và đó chính là lý do tôi gọi card là "component phổ biến nhất của web". Không phải nói quá. Nếu bạn thống kê các thành phần giao diện trên một website thương mại điện tử trung bình, card sẽ chiếm phần lớn diện tích màn hình. Nó là đơn vị đóng gói thông tin cơ bản nhất mà chúng ta có.
Tại sao card lại thống trị như vậy? Vì bộ não con người thích những "khối thông tin có ranh giới rõ ràng". Khi bạn đặt một tấm hình, một tiêu đề và một đoạn mô tả nằm cạnh nhau mà không có ranh giới, mắt người đọc sẽ bối rối: đoạn mô tả này thuộc về tấm hình nào? Card giải quyết vấn đề đó bằng cách nói: "Mọi thứ bên trong khung này là một nhóm, thuộc về nhau, và đại diện cho một đối tượng duy nhất."
Trong bài này, chúng ta sẽ mổ xẻ giải phẫu (anatomy) của một card, hiểu vai trò từng bộ phận, và quan trọng nhất là học cách thiết kế card sao cho vừa đẹp vừa dễ dùng. Đây là kỹ năng nền tảng — khi bạn nắm vững card, bạn đã nắm được một phần lớn công việc thiết kế giao diện hằng ngày.
Khái niệm cốt lõi
Card là một container (khối chứa) gom một nhóm thông tin liên quan đến một đối tượng duy nhất — một sản phẩm, một bài viết, một người dùng, một khóa học — thành một đơn vị trực quan độc lập, có thể nhấn vào được, và thường lặp lại nhiều lần trên cùng một trang.
Hãy ghi nhớ ba đặc tính quan trọng nhất: một đối tượng, có ranh giới, và thường lặp lại. Nếu một khối chứa nhiều đối tượng không liên quan, đó không phải card. Nếu nó không có ranh giới trực quan, người dùng khó nhận ra nó là một nhóm.
Giải phẫu một card (Anatomy)
Một card đầy đủ thường gồm bốn lớp, đi từ ngoài vào trong:
1. Container — phần khung bao ngoài. Đây là phần định nghĩa ranh giới của card. Bốn thuộc tính tạo nên container:
- Border (viền): một đường viền mảnh, thường
1px solidvới màu xám rất nhạt như#E5E7EB. Viền giúp tách card khỏi nền. - Shadow (đổ bóng): thay vì viền, nhiều thiết kế hiện đại dùng đổ bóng nhẹ để card trông như "nổi" trên mặt phẳng. Ví dụ
box-shadow: 0 1px 3px rgba(0,0,0,0.1). Lưu ý: bóng càng đậm và càng lan rộng thì card càng trông "nổi cao", tạo cảm giác quan trọng hơn. - Padding (đệm trong): khoảng cách giữa viền card và nội dung bên trong. Đây là lỗi người mới hay quên nhất. Padding thường là 16px hoặc 24px. Không có padding, chữ sẽ dính sát viền và trông rất nghẹt thở.
- Border-radius (bo góc): độ bo tròn của bốn góc. Card hiện đại thường bo 8px–16px. Góc vuông sắc (0px) cho cảm giác nghiêm túc, kỹ thuật; góc bo nhiều cho cảm giác thân thiện, mềm mại.
3. Header — phần tiêu đề. Đây là dòng chữ quan trọng nhất, trả lời câu hỏi "Card này nói về cái gì?". Tiêu đề phải nổi bật nhất trong khối nội dung — to hơn, đậm hơn phần còn lại. Tên sản phẩm, tiêu đề bài viết, tên người dùng đều nằm ở đây.
4. Body — phần nội dung chính. Phần này chứa mô tả, metadata (như giá, ngày đăng, số lượt thích), và thường là footer/actions — các nút hành động như "Mua ngay", "Xem chi tiết", "Thêm vào giỏ".
Một quy tắc vàng: hệ thống phân cấp bên trong card
Bên trong một card cũng có visual hierarchy của riêng nó. Mắt người dùng nên đi theo thứ tự: media → tiêu đề → giá/thông tin nổi bật → mô tả → nút hành động. Bạn điều khiển thứ tự này bằng kích thước chữ, độ đậm và màu sắc. Một card mà mọi dòng chữ đều cùng cỡ, cùng màu là một card "phẳng" và khó đọc.
Toàn bộ card có nên nhấn được không?
Một câu hỏi thực tế: khi người dùng nhấn vào card, điều gì xảy ra? Có hai trường phái:
- Card nhấn được toàn bộ: cả khối là một liên kết lớn. Phù hợp khi card chỉ dẫn đến một đích duy nhất (ví dụ card bài viết dẫn tới trang đọc bài).
- Card có nhiều hành động riêng: khi bên trong có nút "Thêm giỏ hàng" và nút "Yêu thích" riêng biệt, bạn không nên để cả card nhấn được, vì sẽ xung đột với các nút con.
Tình huống thực tế
Ví dụ 1 — Card sản phẩm của Tiki và bài toán nhất quán media
Đội thiết kế của một sàn thương mại điện tử Việt Nam (tạm gọi giống mô hình Tiki) gặp một vấn đề kinh điển: nhà bán hàng tải ảnh sản phẩm đủ mọi tỉ lệ — có ảnh dọc, có ảnh ngang, có ảnh vuông. Khi hiển thị trên lưới card, mỗi card cao thấp khác nhau, làm cả trang trông lộn xộn như một mớ gạch xếp ẩu.
Giải pháp họ áp dụng: ép tất cả vùng media về tỉ lệ vuông 1:1 cố định, dùng kỹ thuật object-fit: cover để ảnh tự cắt cho vừa khung mà không méo. Phần tiêu đề được giới hạn tối đa 2 dòng (cắt bằng dấu "...") để mọi card có chiều cao tiêu đề bằng nhau. Giá tiền luôn nằm cùng một vị trí. Kết quả: tỉ lệ nhấp chuột vào card tăng rõ rệt vì mắt người dùng quét lưới nhanh hơn khi mọi card đều thẳng hàng.
Bài học: Với card hiển thị theo lưới, sự nhất quán về kích thước (media, tiêu đề, vị trí giá) quan trọng hơn vẻ đẹp của từng card riêng lẻ. Một lưới ngay ngắn luôn thắng một lưới đẹp nhưng lệch.
Ví dụ 2 — Card khóa học và lỗi "tải nhận thức" trên một nền tảng EdTech
Một nền tảng học trực tuyến (giả định tương tự nền tảng các bạn đang dùng) thiết kế card cho mỗi khóa học. Bản đầu tiên họ nhồi vào card: ảnh bìa, tên khóa, tên giảng viên, mô tả 4 dòng, số bài học, thời lượng, đánh giá sao, số học viên, giá gốc, giá khuyến mãi, badge "Bán chạy", và hai nút "Xem thử" + "Đăng ký". Card trở nên dày đặc đến mức người dùng nhìn vào thấy ngợp và bỏ qua.
Sau khi làm việc với mentor, họ cắt giảm theo nguyên tắc "card là để dẫn dắt, không phải để kể hết". Card mới chỉ giữ: ảnh bìa, tên khóa (đậm, 2 dòng), tên giảng viên (xám nhạt), đánh giá sao, và giá. Mọi chi tiết còn lại được dời sang trang chi tiết khi người dùng nhấn vào. Tỉ lệ người nhấn vào card để xem chi tiết tăng lên đáng kể.
Bài học: Card không phải nơi trình bày toàn bộ thông tin. Nhiệm vụ của card là gợi đủ để người dùng quyết định có nhấn vào hay không. Thông tin chi tiết thuộc về trang chi tiết. Mỗi dòng chữ bạn thêm vào card là một chút "tải nhận thức" cộng thêm cho người dùng.
Ví dụ 3 — Card giao dịch trong app ngân hàng và sức mạnh của ranh giới mềm
Một ngân hàng số tại Việt Nam (tương tự mô hình Cake hay TNEX) hiển thị lịch sử giao dịch. Bản đầu, mỗi giao dịch là một card riêng có viền đậm và đổ bóng. Khi cuộn danh sách 50 giao dịch, màn hình đầy những đường viền và bóng chồng chéo, trông rất nặng nề và "ồn".
Họ chuyển sang dạng card "mềm": bỏ viền, bỏ bóng, chỉ dùng một đường kẻ phân cách mảnh 1px màu xám rất nhạt giữa các giao dịch, cộng với padding rộng rãi. Mỗi mục vẫn được nhận diện là một đơn vị riêng nhờ khoảng trắng, nhưng màn hình nhẹ hẳn đi. Với danh sách dài, ranh giới mềm (khoảng trắng + đường kẻ mảnh) thường tốt hơn ranh giới cứng (viền + bóng).
Bài học: Mức độ "nổi" của card phải tỉ lệ nghịch với số lượng card trên màn hình. Vài card nổi bật thì dùng bóng đậm được; hàng chục card thì nên dùng ranh giới mềm để tránh nhiễu thị giác.
Hướng dẫn từng bước
Hãy cùng dựng một card sản phẩm hoàn chỉnh từ con số 0.
Bước 1 — Xác định đối tượng và thông tin tối thiểu. Trước khi vẽ pixel nào, trả lời: card này đại diện cho cái gì? Người dùng cần thấy gì để quyết định nhấn vào? Với card sản phẩm, tối thiểu là: ảnh, tên, giá. Viết danh sách này ra giấy trước.
Bước 2 — Dựng container. Tạo khung với nền trắng, bo góc 12px, và chọn một trong hai cách tạo ranh giới: viền nhạt 1px solid #E5E7EB hoặc đổ bóng nhẹ 0 1px 3px rgba(0,0,0,0.1). Đừng dùng cả hai cùng lúc trừ khi thật sự cần. Đặt padding 16px.
Bước 3 — Đặt media lên đầu. Thêm vùng ảnh với tỉ lệ cố định (ví dụ 1:1 hoặc 4:3). Dùng object-fit: cover để ảnh lấp đầy khung không méo. Nếu media chạm sát mép trên của card (full-bleed), nhớ rằng phần padding chỉ áp dụng cho khối chữ bên dưới.
Bước 4 — Thêm tiêu đề. Đặt tên sản phẩm với cỡ chữ lớn nhất trong card (ví dụ 16px, đậm 600). Giới hạn 2 dòng để đồng đều giữa các card.
Bước 5 — Thêm body và metadata. Mô tả ngắn (nếu cần) bằng chữ xám nhạt, cỡ nhỏ hơn. Giá tiền cho cỡ to và màu nổi bật (thường là màu thương hiệu hoặc đỏ cam cho khuyến mãi) — vì giá là yếu tố quyết định.
Bước 6 — Thêm actions (nếu có). Đặt nút hành động ở dưới cùng. Một nút chính rõ ràng tốt hơn ba nút ngang hàng gây phân tâm.
Bước 7 — Thiết kế trạng thái hover/nhấn. Trên desktop, khi rê chuột vào card nên có phản hồi: bóng đậm lên một chút, hoặc card nhích lên 2px (transform: translateY(-2px)). Điều này báo cho người dùng "card này nhấn được".
Bước 8 — Kiểm tra trên lưới. Đặt 6–8 card cạnh nhau với dữ liệu thật (tên dài ngắn khác nhau, có ảnh và thiếu ảnh). Đây là bài kiểm tra quan trọng nhất — card chỉ đẹp khi đứng một mình là chưa đủ.
Lỗi thường gặp & mẹo
Quên padding. Lỗi số một của người mới: chữ dính sát viền card. Luôn có padding tối thiểu 16px cho phần nội dung.
Dùng cả viền lẫn bóng đậm. Hai cách tạo ranh giới chồng lên nhau làm card trông nặng nề, "hai lớp khung". Chọn một.
Không lường dữ liệu thật. Bạn thiết kế với tên sản phẩm "Áo thun" (8 ký tự) nhưng thực tế là "Áo thun nam cổ tròn cotton 100% co giãn 4 chiều size XXL màu xanh navy" (70 ký tự). Card vỡ layout ngay. Luôn test với chuỗi dài nhất có thể và trường hợp thiếu dữ liệu (thiếu ảnh, thiếu giá).
Media lệch tỉ lệ. Ảnh mỗi card một tỉ lệ làm lưới gồ ghề. Ép tỉ lệ cố định bằng aspect-ratio và object-fit: cover.
Nhồi nhét quá nhiều. Như ví dụ card khóa học: card không phải trang chi tiết. Hỏi mỗi yếu tố "thông tin này có giúp người dùng quyết định nhấn vào không?". Nếu không, bỏ ra.
Vùng nhấn xung đột. Để cả card là link nhưng bên trong lại có nút riêng — người dùng nhấn nút mà lại bị điều hướng đi nơi khác. Tách rõ vùng nhấn.
Mẹo — đường cơ sở (baseline) đồng đều: trong một lưới, hãy cố định vị trí các phần tử then chốt (giá, nút) ở cùng một chiều cao bằng cách cho phần body co giãn lấp khoảng trống (dùng Flexbox với margin-top: auto cho footer). Khi đó nút "Mua" của mọi card sẽ thẳng một hàng dù mô tả dài ngắn khác nhau.
Mẹo — bóng theo độ cao (elevation): hãy nghĩ bóng như độ cao của card so với mặt phẳng. Card nghỉ: bóng nhẹ. Card đang hover: bóng đậm hơn (như được nhấc lên). Sự nhất quán này tạo ngôn ngữ thị giác mạch lạc.
Bài tập thực hành
- Mổ xẻ card có sẵn. Mở Shopee hoặc Tiki, chọn một card sản phẩm bất kỳ và chụp màn hình. Ghi chú lên ảnh: đâu là container, media, header, body, actions. Đo (ước lượng) padding, border-radius. Nhận xét: họ dùng viền hay bóng?
- Thiết kế card khóa học. Vẽ (trên giấy hoặc Figma) một card cho khóa học "Web Design Basics" này. Chỉ được dùng tối đa 5 yếu tố thông tin. Tự hỏi từng yếu tố: "Nó có giúp người học quyết định nhấn vào không?"
- Bài kiểm tra dữ liệu thật. Dựng 6 card cùng loại và cố tình cho dữ liệu cực đoan: một card tên rất dài, một card không có ảnh, một card không có giá. Quan sát card nào vỡ layout và sửa cho cả 6 đồng đều.
- So sánh ranh giới. Tạo cùng một danh sách 10 mục theo 2 cách: (a) mỗi mục là card có viền + bóng; (b) mỗi mục phân cách bằng đường kẻ mảnh + khoảng trắng. So sánh cảm giác thị giác và viết 3 câu kết luận khi nào nên dùng cách nào.
Tóm tắt
Card là đơn vị đóng gói thông tin phổ biến nhất trên web vì nó giúp não người nhận diện "một nhóm thông tin thuộc về một đối tượng" một cách tức thì. Một card đầy đủ gồm bốn lớp: container (border, shadow, padding, radius tạo ranh giới), media (hình/video/icon ở trên, phải nhất quán tỉ lệ), header (tiêu đề nổi bật nhất), và body (mô tả, metadata, actions).
Ba nguyên tắc cần khắc cốt ghi tâm: (1) Card đại diện cho một đối tượng và chỉ gợi đủ để người dùng quyết định nhấn vào — đừng nhồi nhét, chi tiết thuộc về trang chi tiết. (2) Trong một lưới, sự nhất quán (media, tiêu đề, vị trí giá/nút) quan trọng hơn vẻ đẹp của từng card riêng lẻ. (3) Mức độ "nổi" của card nên tỉ lệ nghịch với số lượng card trên màn hình — nhiều card thì dùng ranh giới mềm.
Cuối cùng, hãy nhớ: một card chỉ thực sự được kiểm chứng khi đứng cùng nhiều card khác với dữ liệu thật. Thiết kế đẹp một card là dễ; thiết kế một card đẹp trong mọi tình huống mới là tay nghề thật sự.