# Phong Cách Thiết Kế Web Thẻ nội dung gập mở.

Nguồn: https://manhan.ai.vn/thiet-ke-web-gap-mo/

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

**Thiết kế web gập mở** xếp các nhóm thông tin thành thẻ, khách chọn phần nào thì ảnh và nội dung phần đó hiện rõ. Phong cách **Thẻ nội dung gập mở** gom được nhiều dịch vụ, đổi lại khách có thể bỏ sót những gì đang đóng.

Vì vậy, câu hỏi đúng không phải là thẻ gập có đẹp không, mà là gập thứ gì thì được nhiều hơn mất. Dưới đây là từng việc được đặt lên cân. Mẫu tham chiếu có 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 gập mở cho dịch vụ nhân sự và vận hành](https://manhan.ai.vn/wp-content/uploads/2026/10/phong-cach-thiet-ke-website-the-noi-dung-gap-mo.webp)](https://manhan.ai.vn/wp-content/uploads/2026/10/phong-cach-thiet-ke-website-the-noi-dung-gap-mo.webp)

Mẫu minh họa thương hiệu Hợp Lực. Tên, số liệu, logo khách 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ẫu Hợp Lực đang gập điều gì?

Mẫu Hợp Lực gập năm dịch vụ cùng cấp thành năm hàng đánh số, và mở sẵn hàng thứ ba. Khách vẫn đọc được tên và một dòng mô tả của cả năm dịch vụ, nên trang gọn mà phạm vi không bị giấu.

Hàng đang mở chuyển sang nền xanh đậm, gồm ảnh, tiêu đề, bốn dòng đánh dấu và nút vàng. Các hàng đóng giữ biểu tượng và nút cộng, hàng mở đổi sang dấu trừ. Ảnh chỉ ghi lại một trạng thái tĩnh, nên chưa nói được thẻ mở nhanh hay chậm khi bấm.

## Nên gập: các dịch vụ ngang hàng mà khách chỉ cần một

Đây là trường hợp gập có lợi rõ nhất. Khách dịch vụ kế toán thường đến vì một việc cụ thể, như kê khai thuế hoặc tiền lương. Họ không cần đọc đủ năm việc còn lại.

Điều kiện là các thẻ phải ngang hàng. Nếu thẻ thứ hai chỉ hiểu được sau khi đọc thẻ đầu, đó là một chuỗi bước và nên trải ra.

### Dịch vụ kế toán: mở đúng một việc

[![Thiết kế web gập mở cho dịch vụ kế toán giả định](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-gap-mo-ke-toan-chi-tiet.webp)](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-gap-mo-ke-toan-chi-tiet.webp)

Giao diện minh họa dịch vụ giả định Sổ Sáng: sáu hàng đánh số, hàng thứ hai đang mở, bốn lý do, bốn bước, năm nhóm hồ sơ và ba thẻ công việc.

Dịch vụ giả định Sổ Sáng có sáu hàng, từ Kê khai thuế tới Rà soát hồ sơ. Hàng Sổ sách hằng tháng đang mở với ảnh, bốn việc đánh dấu và nút Xem cách làm. Năm hàng đóng vẫn có một dòng mô tả, nên chủ doanh nghiệp đọc lướt vẫn biết nơi này nhận việc gì.

## Nên gập: chi tiết sâu mà chỉ một phần khách cần

Thiết kế web gập mở hợp với phần chi tiết chỉ có ích sau khi khách đã quan tâm. Nội dung bài học, đặc điểm sản phẩm hay danh sách giấy tờ đều thuộc nhóm này.

Thử tự hỏi: khách chưa mở thẻ có còn quyết định được là sẽ tìm hiểu tiếp không? Nếu khách vẫn quyết định được khi chưa mở thẻ, phần chi tiết đó có thể gập lại.

### Khóa kỹ năng: thẻ mở chiếm cả hàng

[![Giao diện thẻ gập mở cho khóa kỹ năng giả định](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-gap-mo-ky-nang-chi-tiet.webp)](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-gap-mo-ky-nang-chi-tiet.webp)

Giao diện minh họa lớp giả định Tập Nói: thẻ Thuyết trình mở ngang trang, năm thẻ đóng, ba hình thức học, bốn chặng học, ba ảnh và bốn câu hỏi.

Lớp giả định Tập Nói xếp năm thẻ đóng thành hai cột, còn Thuyết trình mở ngang toàn bộ. Bên trong có ảnh lớp, ba nội dung tập và nút Xem lịch học. Kiểu chiếm cả hàng cho thẻ mở nhiều chỗ, nhưng các thẻ phía dưới sẽ bị đẩy xuống mỗi khi có thẻ khác mở.

## Nên gập: các nhóm sản phẩm có cùng dạng thông tin

Nhóm sản phẩm có cùng cấu trúc rất dễ gập, vì khách học cách đọc ở nhóm đầu rồi dùng lại cho các nhóm sau. Kích thước khối và khoảng cách nên thống nhất để việc so sánh dễ hơn.

### Thiết bị văn phòng: nhóm bên trái, nội dung bên phải

[![Thiết kế web gập mở cho thiết bị văn phòng giả định](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-gap-mo-thiet-bi-van-phong-chi-tiet.webp)](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-gap-mo-thiet-bi-van-phong-chi-tiet.webp)

Giao diện minh họa cửa hàng giả định Bàn Gọn: sáu nhóm bên trái, nhóm Máy in mở ở bảng bên phải, bốn khu vực văn phòng, bốn dịch vụ, ba bước và bốn câu hỏi.

Cửa hàng giả định Bàn Gọn đặt sáu nhóm thành cột. Nhóm Máy in đang chọn mở thành bảng lớn bên phải, có ảnh, ba đặc điểm và ba ảnh nhỏ. Cách này gần với thẻ chuyển ngang hơn là thẻ gập dọc, và nó chỉ ổn trên màn hình rộng. Trên điện thoại, bảng nội dung cần nằm ngay dưới nhóm vừa chọn.

## Nên gập: câu hỏi thường gặp và danh sách dài

Hỏi đáp là chỗ gập được khách quen thuộc nhất, vì tiêu đề thẻ đã là câu hỏi. Khách đọc lướt các câu và chỉ mở câu của mình.

Danh sách giấy tờ hoặc điều khoản dài cũng vậy, với điều kiện tiêu đề thẻ nói rõ bên trong có gì. “Hồ sơ cần chuẩn bị” dùng được, còn “Thông tin thêm” khiến khách không có lý do để mở.

## Không nên gập: giá, điều kiện và điều khoản bất lợi

Thông tin ảnh hưởng trực tiếp tới quyết định mua không nên nằm sau một cú bấm. Giấu chúng có thể khiến khách thấy mình bị dẫn dắt khi phát hiện ra về sau.

- **Giá hoặc cách tính giá:** để mở, kể cả khi chỉ là khoảng giá hay yếu tố làm giá thay đổi.
- **Điều kiện hủy, đổi trả:** để gần nút đặt, không gập cùng các chi tiết phụ.
- **Giới hạn của dịch vụ:** nói rõ những gì không nhận làm.
- **Lời cảnh báo an toàn:** luôn hiện, nhất là với ngành y tế và thiết bị điện.

## Không nên gập: thông điệp chính và các bước phải đọc theo thứ tự

Trong thiết kế web gập mở, thông điệp chính phải hiện ngay, vì khách dựa vào nó để đọc tiếp. Một trang gập gần hết phần đầu sẽ chỉ còn danh sách tiêu đề, và người mới vào chưa hiểu doanh nghiệp làm gì.

Quy trình nhiều bước cũng không nên gập, vì khách cần thấy toàn bộ đường đi. Với nội dung cuộn liền mạch, [cách viết cô đọng](https://manhan.ai.vn/thiet-ke-web-co-dong-de-doc/) thường có lợi hơn thẻ gập. Nếu lựa chọn cần được so sánh cùng lúc, [bố cục lưới thẻ](https://manhan.ai.vn/thiet-ke-web-luoi-the-gon-gang/) cho khách thấy tất cả. Khi chỉ có vài ý, [trang trắng tối giản](https://manhan.ai.vn/thiet-ke-web-toi-gian-trang-thoang/) không cần gập gì.

## Gập nội dung có ảnh hưởng đến tìm kiếm không?

Nội dung gập nên nằm sẵn trong HTML khi trang tải, không đợi khách bấm mới gọi về. Như vậy, công cụ tìm kiếm thu thập được nội dung, và công cụ đọc màn hình đọc được cho người dùng.

Điều này không có nghĩa thiết kế web gập mở giúp tăng thứ hạng. Nó chỉ tránh việc nội dung bị thiếu khi được thu thập. Ý quan trọng nhất vẫn nên nằm ở phần luôn hiện, vì người đọc lướt dễ thấy hơn.

Mẫu [accordion của W3C](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) mô tả cách làm dễ tiếp cận: tiêu đề là nút bấm thật, có báo trạng thái đang mở hay đóng, và dùng được bằng bàn phím. Có thể dùng thẻ HTML `details` để tạo nội dung mở và đóng.

## Người đọc được và mất gì khi thẻ mở ra?

Người đọc được một trang ngắn hơn, nhưng phải tự chọn và tự nhớ phần đã xem. Thiết kế web gập mở chỉ có lợi khi tiêu đề thẻ đủ rõ để họ chọn đúng ngay lần đầu.

| Quyết định | Được | Mất, và cách giảm |
| --- | --- | --- |
| Mở sẵn một thẻ | Khách hiểu ngay thẻ mở ra trông thế nào | Thẻ đó như được ưu tiên, nên chọn dịch vụ khách hỏi nhiều nhất |
| Chỉ mở một thẻ một lúc | Trang luôn gọn | Khó đối chiếu hai thẻ, nên cho phép mở nhiều nếu cần so sánh |
| Thẻ có ảnh bên trong | Nội dung rõ hơn | Ảnh làm trang nặng, nên đặt tải chậm cho ảnh của thẻ đang đóng |
| Mở thẻ khi đang ở giữa trang | Không phải chuyển trang | Trang có thể nhảy vị trí, nên giữ tiêu đề thẻ trong tầm nhìn |

Trên điện thoại, cả hàng tiêu đề nên bấm được chứ không chỉ riêng dấu cộng. Nút cần đủ lớn, nội dung xếp theo thứ tự ưu tiên. Lời mời tư vấn nằm sau danh sách thẻ, không nằm sâu trong một thẻ.

## 12 ngành khác nên gập phần nào?

Thiết kế web gập mở hợp với ngành có nhiều nhóm việc ngang hàng. Dưới đây là 12 ngành khác, mỗi ngành kèm một phần nên gập và một phần nên để mở.

| Ngành | Nên gập | Nên để mở |
| --- | --- | --- |
| Công ty luật | Từng mảng tư vấn | Cách tính phí tư vấn |
| Nha khoa | Mô tả từng dịch vụ | Cách đặt lịch |
| Bảo hiểm | Quyền lợi chi tiết | Điều khoản loại trừ chính |
| Du học | Từng nước, từng chương trình | Phạm vi hỗ trợ |
| Sửa chữa nhà | Từng hạng mục | Cách khảo sát và báo giá |
| Phần mềm | Chi tiết từng tính năng | Sản phẩm làm được gì |
| Khách sạn | Từng loại phòng | Quy định nhận và trả phòng |
| Vận tải | Từng loại hàng | Khu vực phục vụ |
| Trường học | Từng khối lớp | Cách đăng ký |
| Cơ khí | Từng năng lực gia công | Loại vật liệu nhận làm |
| Tổ chức sự kiện | Từng hạng mục | Loại sự kiện đã nhận |
| Nông sản | Từng dòng sản phẩm | Nguồn gốc chung |

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

Ba câu dưới đây là những băn khoăn hay gặp khi chọn cách trình bày này.

**Nên có bao nhiêu thẻ trong một nhóm?**

Không có con số cố định. Khi khách không còn đọc lướt nổi các tiêu đề, hãy chia thành vài nhóm nhỏ có tên riêng.

**Có nên mở sẵn thẻ đầu tiên không?**

Thường là nên, vì khách thấy ngay cách thẻ hoạt động. Mẫu Hợp Lực mở sẵn thẻ thứ ba, nên bạn có thể chọn thẻ khách hỏi nhiều thay vì thẻ đầu.

**Thẻ gập khác gì thanh chuyển ngang?**

Thẻ gập mở ngay dưới tiêu đề và hợp với điện thoại. Thanh chuyển ngang đổi nội dung ở một vùng cố định, hợp hơn khi các nhóm rất ít và tên ngắn.

## Bắt đầu cân nội dung từ đâu?

Hãy ghi mọi khối của trang ra giấy, rồi đánh dấu khối nào khách bắt buộc phải thấy để quyết định. Phần còn lại mới được cân nhắc gập.

Sau đó, bạn có thể tìm hiểu [quy trình Mạnh An AI triển khai website](https://manhan.ai.vn/quy-trinh-thiet-ke-website/) và [các gói thiết kế hiện có](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 danh sách nội dung để trao đổi](https://manhan.ai.vn/lien-he-thiet-ke-website/).

### 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)