Thiết kế web chia đôi đặt nội dung ở một bên và hình ảnh ở bên kia, để một lợi ích rõ ràng nằm ngay cạnh ảnh sản phẩm hoặc dịch vụ. Phong cách Chia đôi cân đối thường hợp với doanh nghiệp có thể nói mỗi ý bằng một câu ngắn và có ảnh minh chứng cho câu đó.
Bố cục chia đôi đặt nội dung và hình ảnh thành từng cặp để khách dễ đối chiếu. Câu hỏi cần trả lời trước khi chọn là: khi hai nửa chồng lên nhau trên điện thoại, nửa nào nên đi trước? Bạn có thể đối chiếu với mẫu trong thư viện giao diện Mạnh An AI trong lúc đọc.
Mẫu gốc được chia như thế nào?
Bảng dưới ghi lại những gì nhìn thấy trên ảnh tĩnh, theo thứ tự từ trên xuống. Mẫu không chia đôi mọi khối, nhưng các khối chính đều có thể đọc thành hai vế.
| Vế thứ nhất | Vế thứ hai |
|---|---|
| Đầu trang: khối navy, tiêu đề trắng, bốn lợi ích có biểu tượng, một nút cam | Ảnh xe container và hai nhân viên tại cảng, chiếm phần rộng hơn |
| Dịch vụ: ba thẻ đường bộ, đường biển, đường hàng không | Khung bản đồ tuyến vận chuyển Bắc vào Nam |
| Giới thiệu (đảo chiều): ảnh nhân viên cầm máy tính bảng trong kho | Tiêu đề, đoạn mô tả, bốn con số minh họa và một nút |
| Vì sao chọn: tiêu đề và bốn lý do ngắn | Câu trích trong khung navy cạnh ảnh nhân viên |
| Dải kêu gọi: lời mời và nút trắng | Số điện thoại cỡ lớn |
Theo nhận định của ban biên tập, điểm hợp lý nhất là chữ không nằm đè lên ảnh, nên độ dễ đọc của tiêu đề không phụ thuộc vào bức ảnh. Điểm cần lưu ý là đầu trang không chia đúng một nửa: phần ảnh rộng hơn phần chữ. Vì vậy, “cân đối” ở đây nên hiểu là cân về vai trò, không nhất thiết bằng nhau về chiều rộng.
Thiết kế web chia đôi so với ba hướng gần nhất
Ba phong cách sau cũng có ảnh lớn hoặc nhiều khối, nên dễ bị nhầm. Khác biệt chính nằm ở chỗ chữ đứng đâu so với ảnh.
| Chia đôi cân đối | Phong cách được so sánh |
|---|---|
| Một lợi ích đứng cạnh một ảnh, khách đọc từng cặp | Lưới thẻ gọn gàng: một ô lớn và nhiều ô dịch vụ, khách quét để chọn |
| Chữ có nền riêng, tách khỏi ảnh | Ảnh lớn, ấn tượng: chữ nằm trên ảnh toàn khổ, cần ảnh có vùng yên để đặt chữ |
| Ít khối tra cứu, nhịp đi theo các cặp lớn | Đơn giản, dễ tìm thông tin: nhiều bảng giá, thẻ và hỏi đáp để tìm nhanh |
Bên chữ giữ gì, bên ảnh giữ gì?
Mỗi nhóm nội dung nên có một vai trò rõ, chẳng hạn giới thiệu lợi ích, trình bày dịch vụ hoặc dẫn sang phần liên hệ. Cách phân vai sau giúp hai bên bổ sung cho nhau thay vì lặp lại nhau.
| Bên chữ | Bên ảnh |
|---|---|
| Nêu một lợi ích trong một tiêu đề | Cho thấy lợi ích đó đang diễn ra |
| Giải thích bằng hai đến ba dòng hoặc danh sách ngắn | Chứa một chủ thể chính, không dàn trải nhiều cảnh |
| Có một nút chính dẫn sang bước tiếp theo | Không gắn thêm nút hoặc chữ cạnh tranh với nút đó |
| Có nền đồng nhất, đủ tương phản với chữ | Được cắt để chủ thể hướng về phía bên chữ, nếu có thể |
Chia bằng nhau hay chia lệch?
Không có tỉ lệ đúng cho mọi trường hợp. Lựa chọn thường phụ thuộc vào việc ảnh hay câu chữ đang mang nhiều thông tin hơn.
| Chia bằng nhau | Chia lệch |
|---|---|
| Hai bên có sức nặng gần như nhau | Một bên được ưu tiên rõ, thường là ảnh |
| Hợp với dịch vụ cần giải thích, chữ có đủ chỗ | Hợp với sản phẩm cần xem chi tiết hoặc không gian rộng |
| Cảm giác điềm tĩnh, trật tự | Có điểm nhấn mạnh hơn, nhưng phần chữ dễ bị chật |
| Cần chú ý để trang không đều đến mức đơn điệu | Cần giữ cùng một tỉ lệ ở các khối cùng vai trò |
Nên và không nên khi dựng từng khối
| Nên | Không nên |
|---|---|
| Thống nhất kích thước khối và khoảng cách để khách dễ so sánh | Mỗi khối dùng một tỉ lệ và một lề khác nhau |
| Đảo chiều có chủ đích để tạo nhịp | Lặp đúng một kiểu chữ trái, ảnh phải từ đầu đến cuối trang |
| Xen khối chia đôi với dải quy trình hoặc hàng thẻ | Chia đôi cả những nội dung vốn là danh sách dài |
| Giữ một màu nhấn cho nút và thông tin quan trọng | Đặt nút nổi ở cả hai nửa của cùng một khối |
| Dùng ảnh gắn với đúng lợi ích đang nói | Dùng ảnh chung chung chỉ để lấp đầy nửa còn lại |
Thứ tự xếp trên điện thoại: phần quyết định của phong cách
Trên màn hình hẹp, hai nửa thường phải chồng lên nhau. Ảnh mẫu là bản máy tính nên không cho biết bản điện thoại, và đây là phần cần tự quyết định khi dựng. Phong cách này có một lỗi riêng: nếu các khối đảo chiều và được xếp nguyên theo thứ tự trái rồi phải, trang có thể thành ảnh, chữ, chữ, ảnh. Hai đoạn chữ dính vào nhau, rồi hai ảnh đi liền nhau, trong khi khách không còn biết ảnh nào thuộc ý nào.
| Trên máy tính | Gợi ý trên điện thoại |
|---|---|
| Đầu trang: chữ một bên, ảnh một bên | Tiêu đề và nút chính đi trước, ảnh theo sau; nếu ảnh là lý do mua hàng, có thể cân nhắc ảnh gọn đặt trước |
| Khối đảo chiều: ảnh trái, chữ phải rồi chữ trái, ảnh phải | Mọi khối xếp cùng một trật tự, ví dụ luôn ảnh rồi chữ |
| Bốn lợi ích nằm ngang | Lưới hai cột hoặc danh sách dọc có biểu tượng |
| Hai thẻ so sánh đặt cạnh nhau | Xếp dọc, cùng thứ tự mục để vẫn so sánh được |
| Dải kêu gọi chia hai phần | Lời mời ở trên, nút bấm đủ lớn và số điện thoại ở dưới |
Khi đổi thứ tự hiển thị bằng CSS, thứ tự trong mã HTML vẫn nên hợp lý, vì người dùng phím hoặc trình đọc màn hình thường đi theo thứ tự đó. Cách kiểm tra nhanh là thu hẹp trình duyệt rồi đọc liên tục từ đầu trang: mỗi ảnh phải nằm sát đúng đoạn chữ của nó.
Ba cách chia cho ba ngành
Ba giao diện sau được tạo riêng để minh họa, với các tên giả định Da An, Nhịp Việc và Sổ Nhanh. Đây không phải dự án đã bàn giao; tên người, số điện thoại ví dụ và nội dung trong ảnh đều là minh họa.
Phòng khám da liễu: chữ trái, ảnh phải
Nửa trái nền xanh lá nhạt đặt câu “Hiểu làn da trước khi chọn cách chăm sóc.”, kèm hai nút. Nửa phải là ảnh bác sĩ soi da cho người bệnh. Sau đó có bốn thẻ vấn đề về da, khối “Khám kỹ rồi mới tư vấn”, bốn bước khám, đội ngũ, cẩm nang, rồi hỏi đáp nền xanh đậm cạnh ảnh quầy tiếp đón. Với lĩnh vực y tế, mô tả về tác dụng cần được chuyên môn của phòng khám kiểm tra trước khi đăng.
Nội thất văn phòng: ảnh trái, chữ phải
Trật tự đảo lại so với ví dụ trên: ảnh văn phòng nhiều nắng chiếm phần rộng bên trái, khối than chì giữ tiêu đề “Chỗ ngồi tốt, ngày làm việc nhẹ hơn.” bên phải. Phía dưới có năm nhóm sản phẩm, khối bố trí theo nhóm, mặt bằng cạnh bốn bước trên nền vân gỗ, cặp “Văn phòng mở” và “Phòng riêng”, không gian mẫu và mẫu chất liệu. Cặp so sánh này tận dụng đúng cách đọc hai vế của phong cách.
Phần mềm bán hàng: nửa chữ, nửa giao diện
Nửa còn lại không phải ảnh chụp mà là màn hình phần mềm trên nền chàm, gồm danh sách hàng, giỏ hàng và một khung cỡ điện thoại. Các giá trị được để thành vạch xám. Tiếp theo là bốn loại cửa hàng, khối tính tiền tại quầy, khối danh sách hàng với nhãn “Sắp hết”, dải năm nơi bán, cặp “Chủ cửa hàng xem gì” và “Nhân viên làm gì”. Website thật nên dùng ảnh chụp đúng phần mềm và chỉ nói về tính năng đã có.
12 ngành khác, đọc theo hai vế
Ngoài ba minh họa trên, đây là 12 ngành khác. Mỗi dòng cho thấy lợi ích có thể đặt bên chữ và thứ nên đặt bên ảnh. Bạn cần điều chỉnh theo điều doanh nghiệp thực sự làm được.
| Ngành và lợi ích bên chữ | Bên ảnh nên có |
|---|---|
| Logistics: tuyến và loại hàng nhận chở | Phương tiện đang xếp hàng, bản đồ tuyến |
| Máy lọc nước: cách lắp và bảo trì | Thợ lắp đặt trong bếp |
| Trung tâm ngoại ngữ: lộ trình theo trình độ | Lớp học đang trao đổi |
| In ấn bao bì: chất liệu và kiểu hộp | Cận cảnh hộp đã gấp |
| Năng lượng mặt trời: khảo sát mái nhà | Kỹ thuật viên trên mái |
| Bảo hiểm: quyền lợi diễn giải dễ hiểu | Tư vấn viên trò chuyện cùng gia đình |
| Thiết bị bếp nhà hàng: bố trí theo quy trình | Khu bếp đã lắp hoàn chỉnh |
| Vệ sinh công nghiệp: hạng mục nhận làm | Đội ngũ làm việc tại tòa nhà |
| Xe điện: dùng cho nhu cầu đi lại nào | Xe trong bối cảnh sử dụng |
| Rèm và sàn gỗ: chọn theo căn phòng | Căn phòng đã hoàn thiện |
| Dịch vụ kế toán: công việc được nhận trọn | Buổi làm việc với chứng từ |
| Nông cụ: loại máy theo diện tích và cây trồng | Máy đang làm việc ngoài đồng |
Trong thiết kế web chia đôi, nút chính thường nằm trên nền màu của một nửa, nên cần đủ nổi so với nền đó. Tiêu chí 1.4.11 của WCAG nêu mức tương phản tối thiểu 3:1 cho thành phần giao diện so với màu liền kề. Vì vậy, khi duyệt một bản thiết kế web chia đôi, bạn nên kiểm tra nút ở từng nửa thay vì chỉ xem một khối.
Nếu trang có nhiều cặp nội dung thay vì một cặp chính, hãy xem phong cách ảnh và chữ đan xen để giữ nhịp cho cả trang.
Khi nào phong cách này không phù hợp?
Chia đôi cần một ý và một ảnh tương ứng. Nếu nhu cầu chính khác đi, các hướng sau có thể phù hợp hơn.
| Nếu nhu cầu của bạn là | Có thể cân nhắc |
|---|---|
| Giới thiệu nhiều dịch vụ ngang hàng trên một màn hình | Bố cục lưới thẻ |
| Khách chủ yếu tìm giá, khu vực phục vụ hoặc câu trả lời | Trang ưu tiên tìm thông tin |
| Có một bức ảnh rất mạnh, muốn tạo ấn tượng toàn khổ | Ảnh tràn màn hình |
| Chưa có ảnh riêng cho từng lợi ích | Bố cục chuyên nghiệp, rõ ràng, ít phụ thuộc vào ảnh hơn |
Câu hỏi thường gặp về thiết kế web chia đôi
Có bắt buộc chia đúng 50:50 không?
Không. Mẫu gốc dành phần rộng hơn cho ảnh ở đầu trang. Điều nên giữ là tỉ lệ thống nhất giữa các khối có cùng vai trò.
Nửa còn lại có nhất thiết phải là ảnh chụp không?
Không nhất thiết. Bản đồ, sơ đồ mặt bằng hoặc màn hình phần mềm đều có thể dùng, miễn là chúng làm rõ điều bên chữ đang nói.
Trên điện thoại nên đặt chữ hay ảnh lên trước?
Thường đặt tiêu đề và nút trước ở đầu trang. Ở các khối sau, điều quan trọng hơn là giữ cùng một trật tự để ảnh luôn nằm cạnh đúng đoạn chữ.
Quản trị trên WordPress có khó thay ảnh không?
Thường không khó nếu mỗi khối có khung ảnh cố định. Khi thay ảnh, bạn nên kiểm tra chủ thể còn nằm trong khung ở cả bản máy tính và điện thoại.
So hai cột của chính bạn trước khi quyết định
Hãy kẻ một tờ giấy thành hai cột. Cột trái ghi ba đến năm lợi ích, mỗi lợi ích một câu. Cột phải ghi ảnh bạn đang có cho từng câu. Nếu nhiều dòng bên phải còn trống, bạn cần chuẩn bị ảnh hoặc cân nhắc hướng khác.
Khi hai cột đã khá đầy, 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 để chọn 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 lợi ích và ảnh hiện có để 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
