25 Ví Dụ Bố Cục Website (Kèm Wireframe Có Chú Thích)
25 ví dụ bố cục website từ thư viện mẫu We.Inc, mỗi ví dụ có wireframe hộp thể hiện cấu trúc trang, bản xem trước thiết kế, lý do hiệu quả và loại doanh nghiệp phù hợp. Bao gồm hướng dẫn chọn bố cục.
Bố cục website là thứ tự và cách sắp xếp các phần trong một trang: phần nào xuất hiện trước, phần nào đặt cạnh nhau và nơi đặt nút chính. Dưới đây là 25 bố cục, mỗi bố cục được minh họa bằng wireframe hộp đơn giản và bản xem trước thiết kế đầy đủ. Cả 25 đều là thiết kế mẫu We.Inc, không phải website khách hàng, được phân nhóm theo loại doanh nghiệp phù hợp. Hộp màu xanh trong mỗi wireframe là nút kêu gọi hành động chính.
Cách đọc wireframe
Mỗi hàng hộp là một dải của trang, từ trên xuống dưới khi bạn cuộn. Các hộp đặt cạnh nhau hiển thị song song trên màn hình máy tính; trên điện thoại, chúng xếp chồng theo cùng thứ tự, vì vậy hộp bên trái hiển thị trước. Trang này nói về cách bố trí toàn trang. Cụ thể về phần đầu trang, xem ví dụ phần hero; về menu, xem ví dụ điều hướng.
Năm kiểu bố cục trong một bảng
| Kiểu | Thứ tự các phần | Tốt nhất khi | Ví dụ bên dưới |
|---|---|---|---|
| Kênh dịch vụ | Hero, dịch vụ, bằng chứng, biểu mẫu | Khách cần báo giá hoặc đặt lịch | 1-8 |
| Ghé thăm | Hero, menu, câu chuyện, giờ và bản đồ | Khách đến gặp trực tiếp | 9-14 |
| Đặt lịch hoặc tham gia | Hero, giá hoặc lịch, đặt lịch | Cuộc hẹn, lớp học, hội viên | 15-19 |
| Lưới | Hero, lưới mục, chi tiết, yêu cầu | Danh sách, sản phẩm, danh mục | 20-24 |
| Độc giả | Hero, tác phẩm, giới thiệu, đăng ký | Mục tiêu là độc giả trung thành | 25 |
Bố cục doanh nghiệp dịch vụ
1. Thương mại khẩn cấp: dải cấp bách dưới hero
Mẫu: Ironpeak Roofing (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Một dải màu toàn chiều rộng ngay dưới hero thu hút người có vấn đề khẩn cấp (thiệt hại do bão) trước khi họ cuộn qua. Dùng cho: Thợ lợp mái, phục hồi, thợ khóa, xe kéo.
2. Đa nghề với khối khu vực dịch vụ
Mẫu: Summit Trades (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Ba thẻ dịch vụ bằng nhau, sau đó danh sách khu vực phục vụ có tên, trả lời "bạn có làm điều này, ở đây không?" trong hai lần cuộn. Dùng cho: Bất kỳ doanh nghiệp nào có khu vực di chuyển xác định.
3. Danh sách dịch vụ với chuyên môn nổi bật
Mẫu: Voltline Electric (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Một dịch vụ giá trị cao có phần riêng, vì vậy trang quảng bá công việc bạn muốn nhất mà không che giấu phần còn lại. Dùng cho: Nghề với một chuyên môn sinh lợi.
4. Danh sách kiểm tra và báo giá ngay
Mẫu: Brightwell Cleaning (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Danh sách hiển thị những gì mỗi lần ghé thăm bao gồm trả lời lo lắng chính (tôi nhận được gì chính xác?) trước biểu mẫu giá. Dùng cho: Dọn dẹp, chăm sóc bãi cỏ, dịch vụ hồ bơi.
5. Câu chuyện thợ thủ công địa phương
Mẫu: Halden Woodworks (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Nêu tên thị trấn trong tiêu đề và hiển thị "quy trình công việc" xây dựng niềm tin cho các công việc lớn, một lần. Dùng cho: Thợ mộc, thợ xây, thợ cải tạo.
6. Công ty chuyên nghiệp: lĩnh vực hành nghề và con người
Template: Sterling & Vance LLP (a We.Inc template design, not a customer site).
Lý do hiệu quả: Người ta chọn công ty theo lĩnh vực pháp lý rồi mới đến con người; bố cục tuân theo thứ tự đó. Dùng cho: Luật, kế toán, tư vấn tài chính.
7. Tư vấn: bằng chứng trước tiên
Mẫu: Linden Consult (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Bằng chứng đặt ngay sau hero, rồi trang trình bày dịch vụ như các vấn đề người mua nhận ra. Dùng cho: Tư vấn viên, huấn luyện viên, dịch vụ B2B.
8. Trang kế toán ngắn gọn
Mẫu: Ledgerline CPA (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Bốn phần. Với người mua đã biết họ cần kế toán, ít hơn là nhanh hơn. Dùng cho: Bất kỳ dịch vụ nào mà người mua đã quyết định.
Bố cục ẩm thực và khách sạn
9. Quán cà phê: thực đơn, câu chuyện, ghé thăm
Template: Ember & Roast (a We.Inc template design, not a customer site).
Lý do hiệu quả: Thực đơn trước, ghé thăm sau: người ta kiểm tra bạn phục vụ gì, rồi mới đến ở đâu và khi nào. Dùng cho: Quán cà phê, tiệm bánh, quán bar.
10. Tiệm bánh với đặt hàng trước
Template: Flour & Fern (a We.Inc template design, not a customer site).
Lý do hiệu quả: Một phần đặt hàng riêng biến việc duyệt xem thành đơn đặt hàng trước. Dùng cho: Tiệm bánh, thợ thịt, chuẩn bị bữa ăn.
11. Nhà hàng cuộn dài
Mẫu: Azafran (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Với nhà hàng điểm đến, bầu không khí bán đặt bàn, vì vậy trang kể câu chuyện trước khi yêu cầu. Dùng cho: Ẩm thực cao cấp, thực đơn nếm thử, địa điểm tổ chức.
12. Nhà hàng ba phần
Mẫu: Crust (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Hero, thực đơn, ghé thăm. Số phần ít nhất một nhà hàng có thể có mà vẫn trả lời mọi câu hỏi. Dùng cho: Nhà hàng thông thường, đồ ăn mang về.
13. Lịch trình trước tiên
Mẫu: ROAM (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Khi địa điểm thay đổi hàng ngày, "hôm nay bạn ở đâu" là câu hỏi chính, vì vậy nó đặt ngay dưới hero. Dùng cho: Xe bán thức ăn, chợ, cửa hàng tạm thời.
14. Dịch vụ sự kiện với biểu mẫu yêu cầu
Template: Harvest & Vine (a We.Inc template design, not a customer site).
Lý do hiệu quả: Các loại sự kiện ở đầu giúp khách tự phân loại; thực đơn mẫu làm cho giá cảm thấy cụ thể. Dùng cho: Nhà cung cấp tiệc, người lập kế hoạch, địa điểm.
Bố cục đặt lịch và hội viên
15. Salon theo hướng đặt lịch
Template: Lumé Salon & Beauty Spa (a We.Inc template design, not a customer site).
Lý do hiệu quả: Danh sách giá và khối đặt lịch là tất cả những gì hầu hết khách thăm salon cần. Dùng cho: Salon, thợ cắt tóc, tiệm làm móng và mi.
16. Lịch lớp học và giá cả
Mẫu: Tidewater Yoga (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Lịch rồi giá rồi ưu đãi lần ghé đầu tiên theo quyết định của học viên mới. Dùng cho: Yoga, pilates, khiêu vũ, võ thuật.
17. Phòng gym với chương trình và gói
Mẫu: Iron (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Các gói hội viên đặt cạnh nhau giúp dễ so sánh; buổi đầu miễn phí giảm rào cản. Dùng cho: Phòng gym, câu lạc bộ, hội viên.
18. Phòng khám: chăm sóc, đội ngũ, địa điểm
Mẫu: Verdant Family Health (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Bệnh nhân muốn biết bạn điều trị gì, họ sẽ gặp ai và cách đến đó. Dùng cho: Phòng khám, nha sĩ, vật lý trị liệu.
19. Bác sĩ thú y với ghi chú khẩn cấp
Mẫu: Meadowpaw Veterinary (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Phần ghé thăm yêu cầu trường hợp khẩn gọi điện, vì vậy biểu mẫu đặt lịch không dùng cho khẩn cấp. Dùng cho: Bác sĩ thú y, chăm sóc khẩn cấp, bất kỳ dịch vụ có trường hợp khẩn.
Bố cục lưới: danh sách, cửa hàng và danh mục
20. Lưới danh sách
Mẫu: Keystone Realty (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Người mua nhận lưới; người bán nhận phần riêng và lời kêu gọi hành động riêng. Dùng cho: Bất động sản, cho thuê, đại lý xe.
21. Trang sản phẩm đơn lẻ
Mẫu: Verre Halo (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Giá nằm trong thanh menu và ở cuối; mọi thứ giữa trả lời "có đáng không?" Dùng cho: Thương hiệu một sản phẩm, ra mắt, sản phẩm gây quỹ cộng đồng.
22. Cửa hàng lô nhỏ
Template: Cellar & Rowan (a We.Inc template design, not a customer site).
Lý do hiệu quả: Sản phẩm trước, rồi câu chuyện biện minh cho giá, rồi đăng ký danh sách cho lô tiếp theo. Dùng cho: Nhà sản xuất, nến, gốm sứ, thực phẩm.
23. Ra mắt sản phẩm
Mẫu: Loop (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Phiên bản tiếp theo dẫn đầu; lưới cửa hàng phục vụ người muốn thứ gì đó ngay bây giờ. Dùng cho: Phiên bản giới hạn, quần áo, đồ sưu tầm.
24. Lưới danh mục đầu tiên
Mẫu: Drafthouse (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Sáu dự án ngay sau tiêu đề; tác phẩm tự bán hàng. Dùng cho: Kiến trúc sư, nhà thiết kế, nhiếp ảnh gia.
Bố cục cá nhân và nhà sáng tạo
25. Nhà văn với bản tin
Mẫu: Plume (thiết kế mẫu We.Inc, không phải website khách hàng).
Lý do hiệu quả: Tác phẩm, rồi đăng ký bản tin: mục tiêu là độc giả trở lại, không phải yêu cầu một lần. Dùng cho: Nhà văn, nhà sáng tạo, diễn giả.
Cách chọn bố cục
- Xác định một hành động bạn muốn hầu hết khách truy cập thực hiện (gọi, đặt lịch, mua, yêu cầu, đăng ký). Đó trở thành hộp xanh.
- Liệt kê ba câu hỏi khách truy cập hỏi trước khi thực hiện (ví dụ: bạn có phục vụ khu vực của tôi không, chi phí là bao nhiêu, tôi có thể tin tưởng bạn không). Mỗi câu có một phần, theo thứ tự đó.
- Chọn kiểu từ bảng trên phù hợp.
- Cắt bớt phần bạn không thể lấp đầy nội dung thực. Phần "Kết quả" trống hoặc đánh giá thay thế gây hại nhiều hơn trang ngắn hơn.
- Kiểm tra trên điện thoại. Các hộp cạnh nhau xếp chồng; đảm bảo nút chính vẫn xuất hiện sớm (xem thiết kế mobile-first).
Khi một trang trở nên dài, hãy chia thành nhiều trang. Cấu trúc website cho thấy cách các phần trên chuyển thành sơ đồ trang web.
Các lỗi bố cục phổ biến
- Đặt biểu mẫu liên hệ chỉ ở cuối trang dài, không có nút trong header.
- Ba cột văn bản cho đối tượng dùng điện thoại; hãy dùng thẻ xếp chồng gọn gàng.
- Giữ lại số liệu mẫu, đánh giá hoặc huy hiệu bạn không thể chứng minh.
- Thư viện ảnh trước khi khách truy cập biết bạn làm gì.
Sử dụng một trong các bố cục này
Mỗi bố cục ở đây là một mẫu trong thư viện mẫu We.Inc. Với gói miễn phí bạn có thể dùng tới 3 trang mẫu trên địa chỉ we.inc (không có tín chỉ AI, không có tên miền riêng). Starter với $20/tháng thêm khả năng xây dựng bằng AI, bạn có thể yêu cầu thay đổi như "di chuyển đánh giá lên trên dịch vụ", và tên miền riêng; xem pricing. Mock up your version first with the công cụ tạo mockup website, rồi kiểm tra kết quả bằng công cụ chấm điểm website.
Câu hỏi thường gặp
Bố cục website là gì?
Thứ tự và cách sắp xếp các phần trong một trang: phần nào xuất hiện trước, phần nào đặt cạnh nhau và nơi đặt nút kêu gọi hành động chính.
Bố cục tốt nhất cho website doanh nghiệp nhỏ là gì?
Với hầu hết dịch vụ: hero với một nút rõ ràng, dịch vụ, bằng chứng như đánh giá và biểu mẫu liên hệ hoặc báo giá, với nút lặp lại trong header.
Trang chủ nên có bao nhiêu phần?
Đủ để trả lời các câu hỏi chính của khách truy cập và không nhiều hơn. Các ví dụ ở đây dao động từ bốn đến tám phần.
Đây có phải website thực của khách hàng không?
Không. Cả 25 đều là thiết kế mẫu We.Inc, dùng để minh họa các kiểu bố cục.
Bố cục thay đổi thế nào trên điện thoại?
Các hộp nằm cạnh nhau sẽ xếp chồng theo chiều dọc theo cùng thứ tự, vì vậy hãy đặt mục quan trọng nhất bên trái và giữ nút chính gần đầu trang.
Sự khác biệt giữa bố cục và cấu trúc là gì?
Bố cục là cách sắp xếp một trang. Cấu trúc là cách các trang kết nối trong toàn bộ website: phân cấp, URL và liên kết nội bộ.
Bắt đầu miễn phí · Không cần thẻ tín dụng
Product
- AI Website Builder: Describe a site in plain English; it's live in minutes
- White Label Platform: Your brand, your domain, your margin
- Enterprise: SSO, custom SLAs, and dedicated support
- Developer API: Embed site generation into your SaaS
Who It's For
- For Agencies: Resell under your brand
- For Freelancers: Your own branded builder
- For Hosting Providers: Add a builder to your stack
- For SaaS Platforms: Embed site creation via API
- For Startups
- For Financial Services
- For Healthcare
Features
- Drag & Drop Editor
- Built-in SEO Tools
- Custom Branding
- Client Dashboard
- Reseller Billing (Stripe Connect)
Resources
- Blog
- Help Center
- Free Business Tools
- Website Templates
- Glossary & Guides
- Integrations
- Developers
- Benchmark
- Windows App