# Phong Cách Thiết Kế Web Thẻ ngang, xem nhanh.

Nguồn: https://manhan.ai.vn/thiet-ke-web-the-ngang-xem-nhanh/

Ngày đăng: 2026-11-06
Chuyên mục: Phong cách thiết kế website

**Thiết kế web thẻ ngang** xếp ảnh, đặc điểm và nút trên cùng một hàng, để khách xem nhanh nhiều lựa chọn mà không phải bấm vào từng mục. Phong cách **Thẻ ngang, xem nhanh** hợp với doanh nghiệp có nhiều lựa chọn tương tự nhau, mỗi lựa chọn cần ảnh, đặc điểm và nút liên hệ riêng.

Một chiếc thẻ ngang có thể tháo ra thành từng bộ phận để kiểm tra như một thiết bị. Hãy kiểm tra lần lượt ảnh, phần thông tin, đặc điểm và nút, rồi so với thẻ dọc. Mẫu tham chiếu nằm trong [thư viện giao diện Mạnh An AI](https://manhan.ai.vn/#giao-dien).

**Biên soạn:** Ban biên tập Mạnh An AI, dịch vụ thiết kế website của Công Ty TNHH Mạnh An Service, phục vụ khách hàng trên toàn quốc. **Cập nhật:** 06/11/2026.

[![Mẫu thiết kế web thẻ ngang cho dịch vụ thuê xe](https://manhan.ai.vn/wp-content/uploads/2026/10/phong-cach-thiet-ke-website-the-ngang-xem-nhanh.webp)](https://manhan.ai.vn/wp-content/uploads/2026/10/phong-cach-thiet-ke-website-the-ngang-xem-nhanh.webp)

Mẫu minh họa dịch vụ thuê xe Xe Việt. Tên, giá, số lượng khách, lời khách, địa chỉ, email và số điện thoại trong ảnh đều là nội dung minh họa, không phải dữ liệu thật.

## Một thẻ ngang gồm những bộ phận nào?

Một thẻ ngang gồm ba vùng: ảnh bên trái, thông tin ở giữa và nút hành động bên phải. Mẫu Xe Việt có hai thẻ như vậy, “Xe 7 chỗ” và “Xe 16 chỗ”, xếp chồng ngay dưới banner.

| Bộ phận | Tỉ lệ ước lượng trên mẫu | Nhiệm vụ | Hỏng khi |
| --- | --- | --- | --- |
| Ảnh | Khoảng 30% bề ngang | Cho khách nhận ra lựa chọn | Ảnh các thẻ khác góc chụp |
| Thông tin và đặc điểm | Khoảng 45% | Cho khách so sánh | Thẻ nào cũng ghi đặc điểm giống nhau |
| Nút hành động | Khoảng 25% | Cho khách bước tiếp | Nút không cùng vị trí giữa các thẻ |

Các tỉ lệ trên được ước lượng bằng mắt từ ảnh mẫu, không phải thông số đo trên trang thật. Vùng nút của mẫu còn có một mức giá minh họa ngay trên nút và một mũi tên ở mép phải.

## Bộ phận ảnh: vì sao cần cùng góc chụp?

Cùng góc chụp giúp khách so sản phẩm thay vì so cách chụp. Trong mẫu, hai xe cùng được chụp chéo từ đầu xe, tuy màu xe và khung cảnh khác nhau.

Vùng ảnh thường là hình chữ nhật ngang và thấp, vì vậy chủ thể phải nằm giữa khung, không để mất phần quan trọng khi cắt. Trên điện thoại, ảnh thường chuyển lên trên chữ, nên cần thử xem chủ thể còn rõ không.

## Bộ phận đặc điểm: nên ghi gì để so sánh được?

Hàng đặc điểm chỉ nên ghi những thứ thực sự khác nhau giữa các lựa chọn, mỗi đặc điểm là một biểu tượng kèm vài chữ. Nếu cả cột đều giống nhau, hàng đó chiếm chỗ mà không giúp khách quyết định.

Mẫu Xe Việt làm tốt hai ô đầu: số khách tối đa và lượng hành lý thay đổi giữa hai dòng xe. Hai ô sau gần như chỉ là lời khen. Khi làm thật, hãy giữ từ ba đến bốn đặc điểm, đúng thứ tự giữa các thẻ, và chỉ ghi điều doanh nghiệp xác nhận được.

Biểu tượng cũng không nên đứng một mình, vì khách chưa chắc hiểu ngay ý nghĩa. Chữ đi kèm giúp đọc nhanh hơn và giúp thiết kế web thẻ ngang dễ tiếp cận hơn với người dùng trình đọc màn hình.

## Bộ phận nút: đặt thế nào để bấm nhanh?

Nút nên nằm cùng một cột dọc ở mọi thẻ, để khách đã so xong là có thể bấm ngay. Tên nút cần cho biết hành động và đối tượng, nhất là khi nhiều nút giống nhau xếp liền nhau.

Theo [tiêu chí về mục đích liên kết của WCAG](https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html), mục đích của một liên kết cần hiểu được từ chữ của nó hoặc ngữ cảnh đi kèm. Vì vậy, nút “Xem” lặp lại nhiều lần nên có thêm tên ẩn cho công nghệ hỗ trợ, ví dụ “Xem Xe 7 chỗ”.

Trên điện thoại, nút chuyển xuống dưới thân chữ và nên giữ đủ lớn. Đặt thẻ theo thứ tự ưu tiên, với kích thước và khoảng cách thống nhất để khách vẫn so sánh được khi cuộn.

## Thẻ ngang và thẻ dọc khác nhau ở điểm nào?

Thẻ ngang dễ so sánh theo hàng, còn thẻ dọc có ảnh lớn hơn và xếp được nhiều mục trên một hàng. Chính mẫu Xe Việt có cả hai: hai thẻ ngang cho dòng xe, bốn thẻ dọc cho dịch vụ.

| Tiêu chí | Thẻ ngang | Thẻ dọc |
| --- | --- | --- |
| Ảnh | Nhỏ, thấp | Lớn hơn trên từng thẻ |
| Đặc điểm | Đọc được theo cột | Phải đọc từng thẻ |
| Số lựa chọn trên một hàng | Một | Ba đến bốn |
| Trên điện thoại | Phải đổi bố cục hoặc thu gọn | Giữ gần như nguyên |
| Phù hợp khi | Lựa chọn cùng loại, có đặc điểm so được | Nhóm khác loại, ảnh là chính |

## Ba ngành dùng thiết kế web thẻ ngang thế nào?

Khi áp dụng thiết kế web thẻ ngang, thẻ căn hộ cần ảnh lớn hơn, thẻ việc làm cần nhiều dòng trên một màn hình, còn thẻ khóa học cần câu mô tả. Cả ba đều là thương hiệu giả định, số 0987.654.321 chỉ là số ví dụ, không phải dự án đã bàn giao.

### Cho thuê căn hộ: ảnh được nhường phần lớn hơn

[![Thiết kế web thẻ ngang cho dịch vụ thuê căn hộ giả định](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-the-ngang-xem-nhanh-can-ho-chi-tiet.webp)](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-the-ngang-xem-nhanh-can-ho-chi-tiet.webp)

Giao diện giả định Nhà Thuê An Cư: thanh lọc ở banner, bốn thẻ căn hộ, bốn nhu cầu, bốn bước thuê, năm tiện ích tòa nhà và bốn câu hỏi.

Dịch vụ giả định Nhà Thuê An Cư cho vùng ảnh rộng khoảng một phần ba thẻ, vì khách thuê nhà cần thấy căn phòng. Có nhãn “Còn trống” trên nút “Hẹn xem”. Điểm yếu nằm ở hàng đặc điểm: cả bốn thẻ đều ghi cùng bốn mục, kể cả ban công và thang máy. Khi làm thật, mỗi căn cần đặc điểm đúng của nó.

### Tuyển dụng: thẻ thấp để thấy nhiều việc

[![Giao diện thẻ ngang cho trang tuyển dụng giả định](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-the-ngang-xem-nhanh-tuyen-dung-chi-tiet.webp)](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-the-ngang-xem-nhanh-tuyen-dung-chi-tiet.webp)

Giao diện giả định Việc Gần: ô tìm việc, tám nhóm ngành, năm thẻ việc mới, sáu nhà tuyển dụng, gợi ý hồ sơ, ba bước và ba mục cẩm nang.

Trang giả định Việc Gần xếp năm thẻ rất thấp, ảnh nhỏ và tên công việc đậm. Nhãn vàng “Tuyển gấp” chỉ có ở hai thẻ nên dễ thấy. Trang chưa có mức lương; khi làm thật, đây là ô nên có nếu doanh nghiệp cung cấp số thật.

### Khóa học online: câu mô tả đứng cạnh tên khóa

[![Giao diện thẻ ngang cho trang khóa học trực tuyến giả định](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-the-ngang-xem-nhanh-khoa-hoc-chi-tiet.webp)](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-the-ngang-xem-nhanh-khoa-hoc-chi-tiet.webp)

Giao diện giả định Học Tối: học viên bên máy tính lúc tối, năm thẻ khóa học, sáu chủ đề, bốn phần của buổi học, bốn giảng viên và bốn câu hỏi.

Trang giả định Học Tối đặt nút phát trên ảnh, để khách biết đây là video. Mỗi thẻ có tên khóa, một câu nói người học sẽ làm gì, rồi tới nút “Xem khóa”. Nhãn “Mới mở” màu xanh chanh nằm ngay cạnh tên ở hai thẻ. Cả ba đặc điểm ở mọi thẻ đều giống nhau, nên khi làm thật cần đổi.

## 12 ngành khác nên ghi gì trên thẻ ngang?

Ngành bán cùng loại sản phẩm nên ghi thông số so được, ngành dịch vụ nên ghi phạm vi, còn ngành có lịch nên ghi thời gian. Đây là 12 ngành khác cùng ba đặc điểm gợi ý, mỗi đặc điểm cần có dữ liệu thật mới đưa lên.

- **Khách sạn nhỏ:** loại giường, hướng phòng, bữa sáng.
- **Bất động sản bán:** diện tích, số phòng, pháp lý.
- **Xe máy cũ:** đời xe, số km, tình trạng giấy tờ.
- **Vé xe khách:** giờ chạy, loại ghế, điểm đón.
- **Tour ngắn ngày:** thời lượng, nơi khởi hành, cỡ đoàn.
- **Gói bảo dưỡng ô tô:** hạng mục, thời gian làm, loại xe.
- **Cho thuê văn phòng:** sức chứa, phòng họp, giờ mở cửa.
- **Dịch vụ dọn nhà:** phạm vi, số người, dụng cụ mang theo.
- **Thuê thiết bị sự kiện:** loại thiết bị, số lượng, lắp đặt.
- **Lớp học ngoại ngữ:** trình độ, sĩ số, lịch học.
- **Phòng họp theo giờ:** sức chứa, màn chiếu, đồ uống.
- **Gói internet:** tốc độ, loại thiết bị, khu vực phục vụ.

## Khi nào không nên chọn thiết kế web thẻ ngang?

Không nên chọn thiết kế web thẻ ngang khi sản phẩm được quyết định chủ yếu qua ảnh, hoặc khi các lựa chọn khác loại, không có đặc điểm chung để so. Thẻ ngang lúc đó làm ảnh nhỏ đi mà chẳng đổi lại được gì.

Nếu các hạng mục ngang hàng và ảnh là chính, [kiểu lưới thẻ gọn gàng](https://manhan.ai.vn/thiet-ke-web-luoi-the-gon-gang/) phù hợp hơn. Nếu khách cần duyệt theo nhóm trước khi xem chi tiết, hãy so với [cách tổ chức danh mục ngăn nắp](https://manhan.ai.vn/thiet-ke-web-danh-muc-ngan-nap/). Còn khi muốn nêu một vài công việc tiêu biểu, [bố cục dự án làm điểm nhấn](https://manhan.ai.vn/thiet-ke-web-du-an-diem-nhan/) kể được nhiều hơn.

## Câu hỏi thường gặp về thiết kế web thẻ ngang

Số thẻ trong thiết kế web thẻ ngang không cố định, nhưng danh sách dài cần bộ lọc hoặc chia nhóm. Giá chỉ hiện khi rõ ràng, và trên điện thoại thẻ thường phải đổi bố cục.

**Một trang nên có bao nhiêu thẻ ngang?**

Không có số cố định, miễn là khách vẫn so sánh được. Khi danh sách dài, nên thêm bộ lọc hoặc chia nhóm để khách không phải cuộn quá lâu.

**Thẻ ngang có cần hiện giá không?**

Nên hiện nếu giá là yếu tố so sánh và doanh nghiệp có giá thật rõ ràng. Nếu giá phụ thuộc từng trường hợp, hãy ghi rõ cách báo giá và đừng đưa con số ước đoán.

**Thẻ ngang có dùng được trên điện thoại không?**

Có, nhưng thường phải đổi bố cục. Có thể đưa ảnh lên trên, rút còn hai hoặc ba đặc điểm và đặt nút ở cuối thẻ với kích thước đủ lớn.

## Nên làm gì trước khi chọn thiết kế web thẻ ngang?

Hãy lập một bảng gồm các lựa chọn của bạn và ba đặc điểm khác nhau rõ nhất giữa chúng. Nếu không tìm được ba đặc điểm thật sự khác nhau, thiết kế web thẻ ngang có lẽ chưa phải hướng phù hợp.

Khi đã có bảng đặc điểm, bạn có thể đọc [các bước Mạnh An AI thiết kế và bàn giao website](https://manhan.ai.vn/quy-trinh-thiet-ke-website/) và xem [bảng giá thiết kế website AI](https://manhan.ai.vn/bao-gia-thiet-ke-website/). Mạnh An AI phục vụ khách hàng trên toàn quốc; bạn có thể [gửi bảng đặc điểm và ảnh sản phẩm để trao đổi](https://manhan.ai.vn/lien-he-thiet-ke-website/) trước khi bắt đầu.

### Thông tin đơn vị

**Đơn vị:** Công Ty TNHH Mạnh An Service
 **Dịch vụ:** Mạnh An AI – Thiết kế website
 **Phạm vi phục vụ:** Khách hàng trên toàn quốc
 **Địa chỉ văn phòng:** Thanh Dương 2, Phường Đông Tiến, Thanh Hóa
 **Điện thoại:** [083.5431.678](tel:0835431678)
 **Email:** [info@manhan.vn](mailto:info@manhan.vn)