Thiết kế web căn giữa đặt tiêu đề và lời mời hành động ở trung tâm, tạo một điểm nhìn rõ rồi dẫn khách xuống nội dung phía dưới. Phong cách Nội dung tập trung giữa trang mạnh ở màn hình đầu, nhưng không phải khối nào cũng nên đứng giữa.
Câu hỏi hay nhất là khối nào nên căn giữa, khối nào nên căn trái. Mỗi hiệp dưới đây là một khối trên trang, hai cách căn lần lượt đưa lý lẽ, rồi có kết luận theo tình huống. Mẫu tham chiếu nằm trong thư viện giao diện Mạnh An AI.
Mẫu Khởi Sự Việt căn giữa những gì?
Mẫu căn giữa phần giới thiệu chung và căn trái phần cần đọc kỹ. Nhãn cam, tiêu đề, hai dòng mô tả và một nút cam đứng trên cùng một trục, ngay dưới là ảnh hội trường có người nói đứng đúng giữa.
Bốn tiêu đề khu cũng căn giữa, nhưng chữ trong ba thẻ chương trình lại căn trái. Bốn chuyên gia có ảnh trái tên phải, ba câu chuyện có ảnh trái chữ phải, còn bốn bước quy trình quay lại căn giữa vì mỗi bước rất ngắn.
Điểm hay là trục giữa dẫn mắt từ tiêu đề qua nút xuống người nói. Điểm cần cân nhắc là các tiêu đề khu đều giống nhau nên nhịp hơi đều, và dải cuối trang có hai nút thay vì một. Đây là nhận xét từ ảnh tĩnh, chưa đo hành vi khách.
Hiệp 1, banner: phe căn giữa thắng khi thông điệp ngắn
Banner là sân nhà của thiết kế web căn giữa, với điều kiện chỉ có một câu ngắn và một lời mời chính. Phe căn giữa nói rằng cả màn hình chỉ có một việc phải nhìn, nên khách biết ngay cần làm gì.
Phe căn trái đáp lại rằng căn trái để chừa được nửa màn hình cho ảnh sản phẩm, và mắt người đọc tiếng Việt vốn bắt đầu từ trái. Lập luận này đúng khi ảnh là thứ phải thấy ngay.
Kết luận: dịch vụ có một thông điệp rõ thì căn giữa, còn sản phẩm cần nhìn trước đọc sau thì căn trái cạnh ảnh.
Hiệp 2, tiêu đề khu: hòa, miễn là nhất quán
Tiêu đề khu căn giữa hay căn trái đều được, miễn là cả trang theo một cách. Điều gây rối không phải là hướng căn, mà là đổi hướng liên tục không có lý do.
Phe căn giữa nói tiêu đề giữa tạo cảm giác mỗi khu là một chương mới. Phe căn trái nói khi lướt nhanh, mắt chạy dọc lề trái sẽ gặp đủ các tiêu đề. Cả hai đều có lý, nên hãy chọn theo độ dài trang: trang ngắn có thể căn giữa, trang rất dài nên cân nhắc căn trái.
Hiệp 3, đoạn văn dài: phe căn trái thắng rõ
Đoạn từ ba dòng trở lên nên căn trái, vì đầu dòng so le buộc mắt phải tìm lại điểm bắt đầu ở mỗi dòng. Đây là hiệp phe căn giữa gần như không có lập luận đủ mạnh.
Nếu vẫn muốn khối chữ nằm giữa trang, hãy đặt cả khối vào giữa nhưng để chữ bên trong căn trái. Cũng nên giữ dòng chữ vừa phải: hướng dẫn về trình bày văn bản của WCAG nêu mức không quá 80 ký tự mỗi dòng ở tiêu chí AAA.
Hiệp 4, thẻ và quy trình: tùy lượng chữ trong đó
Thẻ có một đến hai dòng ngắn thì căn giữa vẫn đẹp, còn thẻ có nhiều dòng hoặc danh sách thì căn trái. Nên đo bằng số dòng thực tế chứ không theo cảm tính.
- Biểu tượng kèm vài chữ: căn giữa dễ nhìn và cân đối.
- Các bước quy trình ngắn: căn giữa, có mũi tên nối.
- Thẻ có mô tả hai dòng trở lên: căn trái để so sánh đầu dòng.
- Lời giới thiệu, câu chuyện dài: căn trái, cạnh ảnh.
- Hỏi đáp: khối đứng giữa trang, câu hỏi căn trái.
Hiệp 5, điện thoại: ranh giới gần như biến mất
Trên điện thoại, mọi thứ đã nằm trong một cột, nên khác biệt chỉ còn ở việc chữ canh theo lề hay canh giữa. Tiêu đề ngắn và nút có thể ở giữa, các đoạn văn nên canh trái.
Bố cục điện thoại cần giữ thứ tự thông tin mạch lạc, với lời mời tư vấn đặt ở nơi thuận tiện sau khi khách đã tìm hiểu. Với thiết kế web căn giữa, hãy kiểm tra tiêu đề không bị ngắt thành một từ mỗi dòng, vì lúc đó trục giữa trông rất xiêu vẹo.
Phán quyết theo tình huống là gì?
Hãy căn giữa khi trang có một mục tiêu và ít chữ, căn trái khi khách cần đọc, so sánh hoặc tra cứu. Phần lớn trang tốt là kết hợp, như cách mẫu gốc đã làm.
| Tình huống | Bên thắng ở màn hình đầu | Khối nội dung phía dưới |
|---|---|---|
| Tải ứng dụng, đăng ký sự kiện | Căn giữa | Thẻ ngắn căn giữa, hỏi đáp căn trái |
| Kêu gọi chung tay một việc | Căn giữa | Câu chuyện dài căn trái |
| Công ty dịch vụ nhiều mảng | Tùy, thường căn trái cạnh ảnh | Căn trái để dễ đối chiếu |
| Cửa hàng nhiều sản phẩm | Căn trái hoặc lưới sản phẩm | Căn trái để so sánh |
Dù chọn bên nào, mỗi phần vẫn cần làm rõ một lợi ích và kèm dẫn chứng đúng với năng lực thực tế. Một câu đẹp đứng giữa trang không thay được thông tin thật.
Ba ngành căn giữa những gì?
Khi áp dụng thiết kế web căn giữa, ứng dụng đặt sản phẩm ngay trên trục, hội thảo đặt sân khấu phía sau trục, còn gây quỹ để dải ảnh con người dưới trục. 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.
Ứng dụng di động: ba điện thoại dưới một nút
Ứng dụng giả định Gọn Việc xếp nhãn, tiêu đề, một dòng mô tả và nút cam theo một trục, rồi đặt điện thoại lớn ngay dưới nút cùng hai máy nghiêng hai bên. Dải tính năng nền tím lặp lại ý đó: một máy ở giữa, hai bên là bốn tính năng có đường chỉ. Hỏi đáp cũng nằm giữa, nhưng câu hỏi được canh trái.
Sự kiện hội thảo: chữ trên sân khấu
Hội thảo giả định Ngày Hội Nhịp Số đặt tiêu đề “Một ngày, một sân khấu.” và nút hồng ngay trước màn hình sân khấu, phía dưới là hàng người xem. Năm diễn giả có tên giả định căn giữa thành hàng, chương trình chia ba buổi không ghi giờ. Sơ đồ khu triển lãm là chỗ dễ nhìn lại trên nền sáng.
Gây quỹ cộng đồng: trục giữa dẫn tới con người
Quỹ giả định Chung Tay chỉ có một nút vàng “Cùng góp sách” dưới tiêu đề, phía dưới là dải năm ảnh với tấm giữa lớn nhất. Giao diện không có số tiền hay thanh tiến độ, vì đây là ví dụ, không phải một đợt gây quỹ có thật. Khối hỏi đáp cho thấy câu trả lời canh trái ngay trên từng hàng.
12 ngành khác nên căn giữa khối nào?
Ngành một mục tiêu nên ngả về căn giữa, ngành nhiều lựa chọn nên ngả về căn trái. Dưới đây là 12 ngành khác cùng khối nên đứng giữa.
- Phần mềm kế toán nhỏ: một câu và nút dùng thử.
- Khóa học trực tuyến: tên khóa và nút đăng ký.
- Sách mới phát hành: bìa sách trên trục giữa.
- Hội chợ việc làm: tên sự kiện và nút đăng ký.
- Giải chạy cộng đồng: tên giải và đường đua.
- Tiệc cưới: tên cô dâu chú rể và nút xác nhận.
- Ra mắt sản phẩm: một sản phẩm trên nền đơn giản.
- Trường tuyển sinh: tên đợt tuyển, chi tiết để căn trái.
- Hội từ thiện địa phương: việc đang làm và lời mời chung tay.
- Trang đăng ký nhận tin: một lời mời và một nút.
- Nhà hàng theo chủ đề: tên quán và nút đặt bàn.
- Luật sư tư vấn: câu hỏi chính giữa, nội dung dài căn trái.
Khi nào không nên chọn thiết kế web căn giữa?
Không nên chọn thiết kế web căn giữa làm bố cục chính khi trang có nhiều dịch vụ ngang hàng hoặc nhiều nội dung cần đọc. Một trục giữa chỉ chứa được một điều quan trọng ở mỗi lúc.
Nếu vấn đề của bạn là một dòng thông điệp thật mạnh, kiểu tiêu đề lớn có thể đặt ở bất kỳ phía nào. Khi cái cần là sự yên tĩnh hơn là trục giữa, lối tối giản, trắng thoáng sẽ hợp hơn. Còn với nhiều nội dung cần đọc, hãy so với trang cô đọng, dễ đọc.
Câu hỏi thường gặp về thiết kế web căn giữa
Banner nên có một nút chính, menu không bắt buộc căn giữa, và nên xen khu căn trái để tránh đơn điệu.
Có nên đặt hai nút ở giữa banner không?
Nên có một nút chính. Nếu cần nút thứ hai, hãy để nó dạng viền, nhẹ hơn hẳn, để khách vẫn biết việc nên làm trước.
Menu có cần căn giữa theo không?
Không bắt buộc. Logo bên trái và nút bên phải vẫn hợp với nội dung căn giữa, vì đầu trang là thanh công cụ, không phải thông điệp.
Trang căn giữa có bị đơn điệu không?
Có thể, nếu mọi khu cùng một dáng. Hãy xen một khu căn trái cạnh ảnh hoặc đổi nền để trang có nhịp.
Nên làm gì trước khi chọn thiết kế web căn giữa?
Hãy viết một câu duy nhất bạn muốn khách đọc đầu tiên, kèm một việc duy nhất muốn họ làm. Nếu chưa thể rút xuống một câu và một việc, trục giữa sẽ chật, nên chọn bố cục khác.
Khi đã có câu và việc ấy, bạn có thể đọc các bước Mạnh An AI thiết kế và bàn giao website và xem bảng giá thiết kế website AI. Mạnh An AI phục vụ khách hàng trên toàn quốc; bạn có thể gửi câu thông điệp và việc chính để 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
