Thiết kế web nổi khối là cách dùng bóng đổ nhẹ và các lớp chồng nhau để cho khách biết thông tin nào đáng xem trước. Phong cách Nổi khối có chiều sâu phù hợp với trang có sản phẩm hoặc giải pháp cần được nhấn bằng lớp và bóng, có thể đi cùng một màu nhấn thay vì dựa hẳn vào màu hay chữ to.
Khi dựng giao diện kiểu này, câu hỏi đầu tiên không phải là bóng đậm bao nhiêu mà là mỗi thứ nằm ở tầng nào. Vì vậy, hãy đi từ dưới lên: tầng nền, tầng thẻ, tầng nổi và tầng trên cùng. Ở mỗi tầng, bạn sẽ thấy nên đặt gì và lỗi thường gặp khi lạm dụng. Mẫu gốc nằm trong thư viện giao diện Mạnh An AI.
Trước khi dựng: tách mẫu gốc thành từng tầng
Nhìn mẫu Nhà Thông Minh Việt theo độ cao, bạn có thể tách được bốn lớp. Nền trang gần như trắng và các dải ảnh toàn khổ nằm dưới cùng. Ba thẻ giải pháp, ba thẻ công trình và sáu thẻ sản phẩm là tầng thẻ. Thẻ đánh giá và tấm kính mờ trong dải kêu gọi cao hơn một bậc. Trong ảnh banner, các thiết bị ở tiền cảnh, gia đình ngồi phía sau, nên chiều sâu còn đến từ chính bức ảnh.
Ý quan trọng nhất của phong cách này là độ cao cũng là một thứ bậc thông tin. Nếu mọi thẻ cùng nổi như nhau, trang chỉ có thêm bóng chứ chưa có ưu tiên. Trong mẫu gốc, các hàng thẻ có vẻ dùng bóng khá giống nhau; khi dựng lại, bạn có thể phân cấp rõ hơn giữa thẻ thường và nội dung cần ưu tiên.
Tầng nền: nơi giữ yên để thẻ có chỗ nổi
Trong thiết kế web nổi khối, tầng nền là lớp làm nền cho nội dung, thường ít nổi bật và không dùng bóng để tạo độ cao. Lớp này quyết định bóng của các tầng trên có nhìn thấy được hay không.
Nên đặt:
- Màu nền hơi khác trắng, để thẻ trắng có thể tách ra khỏi nền.
- Ảnh toàn khổ và dải màu dùng để đổi nhịp giữa các nhóm nội dung.
- Tiêu đề khối và đoạn dẫn. Chữ đọc liền mạch thường không cần đặt trong thẻ.
Lỗi khi lạm dụng: nền có nhiều họa tiết, vệt mờ và màu chuyển sẽ tranh chỗ với thẻ. Một lỗi khác dễ thấy trong mẫu gốc: thẻ trắng đặt trên nền gần trắng làm ranh giới phụ thuộc gần như hoàn toàn vào bóng. Trên màn hình độ sáng cao hoặc chất lượng thấp, bóng rất nhạt có thể biến mất, nên hãy thử đổi nền đậm hơn một chút trước khi tăng bóng.
Tầng thẻ: phần lớn nội dung của thiết kế web nổi khối
Đây là tầng đông nhất và cũng nên là tầng ít gây chú ý nhất. Thẻ chỉ cần được nhận ra như một đơn vị riêng.
Nên đặt: thẻ sản phẩm, thẻ dịch vụ, thẻ công trình. Trong một hàng, các thẻ nên giống nhau về bóng, bo góc, tỉ lệ ảnh và vị trí nút để khách dễ so sánh. Bạn chốt một giá trị bóng cho cả tầng rồi dùng lại.
Lỗi khi lạm dụng:
- Thẻ lồng thẻ: bóng chồng bóng làm khách khó biết nhóm nào chứa nhóm nào. Bên trong thẻ nên dùng đường mảnh hoặc đổi nền.
- Đoạn văn bị chia vào quá nhiều thẻ: nội dung cần đọc nối tiếp nên trả về tầng nền.
Nếu trang chủ yếu là nhiều lối vào ngang hàng, không cần ưu tiên thẻ nào, cách tổ chức của lưới thẻ gọn gàng có thể hợp hơn.
Tầng nổi: chỗ để nói “xem cái này trước”
Tầng nổi là lý do chọn thiết kế web nổi khối. Nó thường có bóng rộng hơn, mềm hơn và có thể chồng lên mép của khối bên dưới, như tấm kính mờ trong dải kêu gọi của mẫu gốc.
Nên đặt: một sản phẩm chủ lực, một gói được đề xuất, một nhóm lợi ích muốn khách đọc trước các phần khác. Bạn nên chỉ nâng một vài nội dung thật sự cần ưu tiên trong mỗi khu vực màn hình.
Lỗi khi lạm dụng:
- Cả hàng thẻ đều được nâng lên, nên không còn thẻ nào nổi.
- Thẻ đè che chữ hoặc mặt người trong ảnh bên dưới.
- Kính mờ đặt trên ảnh nhiều chi tiết làm chữ khó đọc. Mức tương phản tối thiểu trong WCAG 1.4.3 là 4,5:1 với chữ thường, và bạn nên đo ở cả vùng sáng lẫn vùng tối của ảnh phía sau.
Tầng trên cùng: chỉ dành cho thứ đang được dùng
Tầng cao nhất dành cho những gì tạm thời xuất hiện theo thao tác: menu thả xuống, popup xem ảnh, thanh đầu trang khi đã cuộn, hộp xác nhận. Ảnh tĩnh của mẫu gốc không cho biết hành vi của các phần này, nên đây là đề xuất khi triển khai.
Nên đặt: mỗi thời điểm một lớp, có cách đóng rõ ràng. Bóng ở tầng này đậm nhất, có thể thêm lớp phủ tối phía sau để làm nổi nội dung đang mở và giảm chú ý vào phần còn lại.
Lỗi khi lạm dụng: popup chồng popup, thanh dính đầu trang cộng nút chat cộng thông báo cùng che nội dung, nhất là trên điện thoại. Hiệu ứng thẻ nhấc lên khi rê chuột cũng không có tác dụng trên màn hình cảm ứng, nên thông tin và nút không được phụ thuộc vào trạng thái đó.
Khi xuống điện thoại, các tầng thay đổi thế nào
Màn hình hẹp không có nhiều chỗ để chồng lớp. Với thiết kế web nổi khối, bản điện thoại nên được xử lý lại như sau:
- Thẻ đè lên ảnh được chuyển xuống dưới ảnh, chỉ giữ lại phần chồng nhẹ nếu không che nội dung.
- Thẻ tầng nổi được xếp lên đầu nhóm, vì trên một cột, thứ tự làm thay vai trò của độ cao.
- Bóng giảm bớt, khoảng cách giữa các thẻ giữ đều để khách không nhầm nhóm.
- Nút bấm giữ đủ lớn.
Thiết kế web nổi khối khác ba phong cách gần ra sao
| Phong cách | Chiều sâu đến từ đâu | Ranh giới khối | Chọn khi |
|---|---|---|---|
| Nổi khối có chiều sâu | Bóng và lớp chồng theo tầng | Bóng nhẹ, đổi nền | Cần nhấn một số nội dung trong nhiều thẻ |
| Công nghệ nổi bật | Đồ họa ba chiều trong banner | Nền tối, đường sáng | Giải pháp cần cảm giác kỹ thuật cao |
| Lưới thẻ gọn gàng | Không phải trọng tâm | Thẻ bo góc, nền nhạt | Nhiều lối vào ngang hàng |
| Góc vuông, đường nét chắc | Gần như không có | Đường kẻ rõ | Cần thể hiện độ chính xác |
Ba bản dựng theo ngành
Ba giao diện dưới đây được tạo riêng để minh họa, với tên giả định Hẹn Gọn, Trầm Vang và Trực An, không phải dự án đã bàn giao. Số điện thoại, tính năng và câu chữ trong ảnh đều là ví dụ.
Ứng dụng đặt lịch: chồng lớp thay cho ảnh banner
Hẹn Gọn không dùng ảnh nền. Bên phải tiêu đề “Lịch hẹn gọn trong một chạm.” là ba lớp giao diện: lịch tuần ở sau, thẻ nhân viên Chị Mai ở giữa, thẻ “Xác nhận lịch hẹn” viền san hô ở trước. Thứ tự lớp cũng chính là thứ tự thao tác, và nút chính nằm ở lớp cao nhất. Trong hàng thẻ ngành, thẻ Phòng tập được nâng cao hơn ba thẻ còn lại để minh họa cách ưu tiên, nhưng khi làm thật, thẻ được nâng nên là nhóm khách chính. Dải kêu gọi san hô chồng lên chân trang.
Thiết bị âm thanh: trên nền tối, độ cao là độ sáng
Bóng đổ khó thấy trên nền nâu đen, nên Trầm Vang tạo độ cao bằng mặt thẻ sáng hơn và viền sáng ấm. Mở đầu là đôi loa gỗ đặt giữa trang trên bệ đá, tiêu đề “Nghe thấy cả khoảng lặng.” ở phía trên, hai thẻ kính nhỏ hai bên. Trong “Sản phẩm nổi bật”, thẻ ampli đèn ở giữa lớn hơn, có viền hổ phách, đứng cao hơn thẻ mâm đĩa và loa kệ. Đây là ví dụ rõ nhất về tầng nổi trong bộ ảnh. Khi làm thật, bạn nên thay ảnh minh họa bằng ảnh thiết bị đang bán và kiểm tra lại độ đọc của chữ nhỏ trên nền tối.
Camera an ninh: thẻ đè lên ảnh thật của không gian
Trực An mở đầu bằng ảnh nhà phố lúc chiều tối. Một tấm trắng lớn đè lên bên trái giữ tiêu đề “Biết nhà vẫn ổn, dù bạn ở đâu.”, còn khung màn hình nhỏ ở góc phải cho thấy cảnh cổng nhà. Bốn thẻ biểu tượng nằm vắt qua mép giữa ảnh và dải xanh đậm. Ở “Camera phù hợp”, camera thân chiếm một thẻ lớn, ba thẻ nhỏ xếp cạnh bên. Thẻ “Quyền riêng tư” đè lên ảnh thợ lắp đặt là chi tiết đáng giữ với ngành này, nhưng nội dung phải khớp cách làm thật của đơn vị và quy định hiện hành.
12 ngành khác: nên nâng thứ gì lên tầng nổi
Ngoài ba bản dựng trên, 12 ngành dưới đây cũng có thể áp dụng thiết kế web nổi khối, xếp theo loại nội dung thường đáng đặt lên tầng nổi.
Nâng một sản phẩm hoặc giải pháp chủ lực
- Nhà thông minh: nâng gói theo loại nhà; thay công trình minh họa bằng công trình có thể xác minh.
- Điện gia dụng cao cấp: nâng dòng máy chính; ảnh sản phẩm cần cùng một hướng sáng với bóng của thẻ.
- Máy lọc nước: nâng dòng phù hợp với số đông khách; chỉ nêu thông số do nhà sản xuất cung cấp.
Nâng một gói hoặc một lựa chọn được đề xuất
- Phần mềm bán hàng: nâng gói đề xuất; nên có ảnh màn hình thật của phần mềm.
- Dịch vụ lưu trữ dữ liệu: nâng phương án phổ biến; điều kiện dịch vụ cần đọc được ngay trên thẻ.
- Khóa học trực tuyến: nâng lộ trình cho người mới; thẻ khác giữ nguyên để người học vẫn so sánh được.
Nâng một nhóm lợi ích hoặc thông tin cần chú ý
- Bảo hiểm: nâng nhóm câu hỏi về quyền lợi; nội dung phải khớp tài liệu chính thức.
- Sửa chữa máy tính: nâng khối nhận máy và cách theo dõi; thay lợi ích chung bằng quy trình cụ thể.
- Tư vấn du học: nâng các bước chuẩn bị hồ sơ; tránh đặt nhiều kêu gọi trên cùng một màn hình.
Nâng lối vào để khách làm việc tiếp theo
- Đặt sân thể thao: nâng khối chọn sân; bản điện thoại cần được xét trước vì khách thường đặt khi đang di chuyển.
- Trạm sạc và phụ kiện xe điện: nâng khối tìm theo loại xe; chỉ làm khi có dữ liệu tương thích thật.
- Nhà hàng nhận đặt bàn: nâng khối đặt bàn; ảnh món ăn thật giữ vai trò chính, bóng thẻ chỉ hỗ trợ.
Khi nào không nên dùng phong cách này
- Không có gì cần ưu tiên: nếu các hạng mục ngang hàng, thiết kế web nổi khối mất lý do tồn tại. Nên xem lại hướng lưới thẻ.
- Nội dung chủ yếu để đọc: bài dài, văn bản pháp lý hoặc hồ sơ cần đọc liên tục sẽ bị chia nhỏ. Bố cục đơn giản, dễ tìm thông tin thường phù hợp hơn.
- Ảnh là nhân vật chính: khi thẻ đè che mất bố cục ảnh đẹp, nên cân nhắc hướng ảnh lớn, ấn tượng.
- Không ai giữ quy ước sau bàn giao: nếu người quản trị tự thêm thẻ với bóng và kích thước khác nhau, các tầng có thể sớm lộn xộn.
Câu hỏi khi dựng thiết kế web nổi khối
Một trang nên có bao nhiêu mức bóng?
Không có con số cố định; thường chỉ cần vài mức bóng để phân biệt các tầng. Tầng nền không có bóng. Thêm nữa thường khó giữ thống nhất.
Nền tối có dùng được phong cách nổi khối không?
Có thể, nhưng bóng thường khó thấy trên nền tối. Bạn có thể làm mặt thẻ sáng dần theo tầng và thêm viền sáng mảnh, sau đó kiểm tra lại độ tương phản của chữ.
Thẻ có cần nhấc lên khi rê chuột không?
Không bắt buộc. Nếu dùng, chỉ nên áp dụng cho thẻ bấm được và giữ chuyển động nhỏ. Thông tin quan trọng không nên chỉ xuất hiện khi rê chuột vì điện thoại không có trạng thái này.
Dùng WordPress có giữ được các tầng không?
Có thể, nếu các mức bóng được khai báo chung trong giao diện thay vì chỉnh riêng từng khối. Khi bàn giao, nên ghi rõ loại nội dung nào được đặt ở tầng nổi.
Bắt đầu từ một câu: khách phải thấy gì trước
- Liệt kê các nội dung trên trang, chọn vài thứ thật sự cần ưu tiên cho tầng nổi.
- Xếp phần còn lại vào tầng nền hoặc tầng thẻ, đoạn cần đọc liền thì để ở tầng nền.
- Kiểm tra ảnh đang có: thẻ đè lên ảnh có che mặt người hoặc chi tiết chính không.
Khi đã rõ thứ tự ưu tiên, bạn có thể xem các bước Mạnh An AI thiết kế và bàn giao website hoặc bảng giá thiết kế website AI để xác định phạm vi. 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 cần ưu tiên để trao đổi 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
Email: info@manhan.vn
