Thiết kế web góc vuông là cách dựng giao diện bằng khối không bo góc và đường kẻ rõ, để các nhóm thông tin được chia tách và căn thẳng hàng. Phong cách Góc vuông, đường nét chắc phù hợp với doanh nghiệp có nhiều hạng mục kỹ thuật và muốn thể hiện sự chính xác.
Có thể xem phong cách này như một bản quy chuẩn: phạm vi, quy ước, cấu hình tham chiếu, trường hợp loại trừ và danh sách nghiệm thu. Bạn có thể dùng trực tiếp danh sách đó để kiểm tra một bản thiết kế. Mẫu gốc nằm trong thư viện giao diện Mạnh An AI.
Điều 1. Phạm vi của thiết kế web góc vuông
Quy chuẩn này áp dụng cho trang chủ và trang dịch vụ của website có từ vài nhóm hạng mục trở lên, khi khách cần xem và so sánh thông tin. Nó không quy định bảng màu thương hiệu, nội dung pháp lý hay chức năng phần mềm.
Các nhận xét về mẫu dựa trên bố cục của ảnh tĩnh. Ảnh không cho biết tốc độ tải, bản điện thoại hay hành vi của người dùng thật, nên các phần đó được ghi là đề xuất.
Điều 2. Thuật ngữ
- Trục căn: đường thẳng tưởng tượng mà mép của chữ, ảnh và khối cùng dựa vào.
- Ô: một đơn vị nội dung có ranh giới rõ, chứa một hạng mục.
- Đường kẻ cấu trúc: đường kẻ dùng để chia ô, có chức năng phân nhóm.
- Đường kẻ trang trí: đường kẻ không phân chia thông tin nào. Quy chuẩn này hạn chế loại đó.
- Màu nhấn: màu dành cho nút hành động và thông tin quan trọng.
Điều 3. Quy ước lưới, viền và khoảng cách
Các mức dưới đây là định tính, vì giá trị cụ thể phụ thuộc vào cỡ chữ và độ rộng trang. Nhà thiết kế chốt giá trị một lần, rồi dùng lại trên toàn site.
| Thành phần | Quy ước | Sai lệch cần tránh |
|---|---|---|
| Lưới | Một hệ cột duy nhất; mọi khối bám trục căn của hệ đó | Mỗi khối dùng số cột và lề riêng |
| Góc | Không bo ở khối, ảnh, nút và ô nhập | Nút bo tròn nằm trong khối vuông |
| Viền | Hai cấp: viền mảnh chia ô, viền đậm hoặc đổi nền chia nhóm | Nhiều độ dày không có quy luật |
| Khoảng cách | Ba cấp: trong ô, giữa các ô, giữa các nhóm; cấp sau lớn hơn cấp trước | Khoảng cách nội bộ lớn hơn khoảng cách giữa nhóm |
| Bóng đổ | Không dùng làm ranh giới | Vừa kẻ viền vừa đổ bóng mềm |
| Ảnh | Cùng tỉ lệ trong một hàng, mép ảnh trùng mép ô | Ảnh cao thấp khác nhau trong cùng hàng |
| Biểu tượng | Một bộ, cùng độ dày nét và cùng khung kích thước | Trộn biểu tượng nét với biểu tượng đặc |
| Màu nhấn | Một màu, ưu tiên cho nút chính | Tiêu đề, số, liên kết và nút cùng một màu |
Ở phong cách này, sai lệch thẳng hàng thường dễ thấy hơn so với giao diện bo góc, vì đường kẻ dài làm lộ ngay hai mép không trùng nhau. Vì vậy lưới được xác định trước khi chọn ảnh.
Điều 4. Hồ sơ tham chiếu: mẫu Thép Việt
Bảng sau ghi lại các khối theo thứ tự trên ảnh và đề xuất điều chỉnh khi triển khai thật.
| Khối | Quan sát | Đề xuất |
|---|---|---|
| Đầu trang | Menu chia ô bằng đường kẻ dọc, khối liên hệ nền đỏ ở góc phải | Giữ nguyên cách chia ô |
| Banner | Chữ “Chính xác từng kết cấu.” tách khỏi ảnh kỹ sư, có một nút đỏ và ba thông điệp nhỏ kèm biểu tượng | Bỏ cột số liệu đè lên ảnh nếu chưa có dữ liệu thật |
| Quy trình | Bốn bước, số đỏ trong ô vuông, ảnh cùng kích thước | Giữ; đây là khối thể hiện phong cách rõ nhất |
| Dự án | Dải tối, ba thẻ viền mảnh | Chỉ đưa dự án và thông số có thể xác minh |
| Sản phẩm | Bốn thẻ nền trắng, ảnh trên, chữ dưới | Tăng cỡ chữ mô tả nếu cần đọc trên màn hình nhỏ |
| Lý do chọn | Tiêu đề trái, bốn ô biểu tượng nét đỏ | Thay câu chung bằng năng lực cụ thể |
| Tin tức, liên hệ | Ba tin ảnh ngang, dải tối có khối đỏ gọi điện | Giữ một hành động chính trong dải liên hệ |
Điểm cần xử lý nhất là màu đỏ: nó có mặt ở tiêu đề, số bước, biểu tượng, liên kết và nút. Khi triển khai, bạn nên đổi bảng màu theo nhận diện và giảm bớt các vị trí không phải hành động. Để kiểm tra cuối, WCAG 1.4.11 nêu mức 3:1 cho thành phần giao diện so với màu liền kề, áp dụng khi đường viền là dấu hiệu duy nhất để nhận ra một nút hoặc ô nhập.
Điều 5. So sánh với các phong cách gần
| Phong cách | Ranh giới khối | Yếu tố chính | Chọn khi |
|---|---|---|---|
| Góc vuông, đường nét chắc | Đường kẻ, đổi nền | Sự thẳng hàng | Cần thể hiện độ chính xác và nhiều hạng mục |
| Lưới thẻ gọn gàng | Thẻ bo góc, nền nhạt | Nhiều lối vào dịch vụ | Dịch vụ gia đình, cần sự gần gũi |
| Tương phản mạnh mẽ | Mảng màu đậm, đường chéo | Độ chênh màu | Thông điệp ngắn, cần hành động nhanh |
| Chuyên nghiệp, rõ ràng | Thẻ có bóng nhẹ, ảnh toàn khổ | Hình ảnh doanh nghiệp | Giới thiệu đơn vị kỹ thuật nói chung |
Điều 6. Ba cấu hình tham chiếu
Ba giao diện sau được tạo riêng để minh họa, với các tên giả định Tinh Cơ, Chuẩn Đo và Trục Kho, không phải dự án đã bàn giao. Số điện thoại, hạng mục và câu chữ trong ảnh đều là ví dụ. Ba cấu hình dùng chung quy ước ở Điều 3, chỉ khác cách mở đầu và bảng màu.
Cấu hình A: gia công cơ khí, mở đầu chia đôi
Nửa trái là mảng than chì có nét vẽ kỹ thuật một mặt bích và tiêu đề “Gia công đúng bản vẽ.”, nửa phải là ảnh cận dao phay. Tiếp theo là bốn ô công nghệ, bốn thẻ hạng mục, sáu mẫu vật liệu, bốn bước, khối thiết bị kiểm tra và sáu ảnh chi tiết. Hành động chính là gửi bản vẽ, nên màu cam gắn với hành động đó. Công nghệ và vật liệu cần sửa theo năng lực thật của xưởng.
Cấu hình B: kiểm định thiết bị, mở đầu bằng ô ghép
Banner là một lưới ô trên nền xanh đậm: ô lớn ở giữa giữ tiêu đề “Thiết bị rõ tình trạng. Hồ sơ rõ ràng.”, các ô quanh nó xen kẽ ảnh và biểu tượng thiết bị. Bên dưới là thanh chọn loại thiết bị, sáu nhóm thiết bị, thước quy trình năm bước, khối hồ sơ bàn giao và tài liệu kỹ thuật. Ảnh không có giấy chứng nhận hay con dấu. Danh mục thiết bị và nội dung hồ sơ trên website thật phải khớp với phạm vi mà đơn vị được phép thực hiện.
Cấu hình C: kho vận, mở đầu bằng ảnh toàn khổ
Ảnh lối đi trong kho với kệ hàng và xe nâng trải hết chiều ngang; một ô trắng cạnh trái giữ tiêu đề “Hàng vào đúng ô, ra đúng tuyến”. Các đường kẻ trong ảnh lặp lại đường kẻ của giao diện. Tiếp theo là dải bốn dịch vụ, nhóm thẻ theo loại hàng, sơ đồ kho bốn khu, năm bước đi của đơn hàng, đội xe và khối cho nhà bán hàng online. Sơ đồ chỉ thể hiện nguyên tắc; ảnh kho thật mới cho khách biết điều kiện thật.
Điều 7. Phạm vi áp dụng theo ngành
Ngoài ba cấu hình trên, phong cách còn 12 hướng ứng dụng. Mười hai ngành dưới đây được xếp theo đối tượng mà lưới cần sắp xếp, kèm điều chỉnh bắt buộc.
| Mã | Ngành | Đối tượng trong lưới | Điều chỉnh |
|---|---|---|---|
| N1 | Nhà thép tiền chế | Loại công trình | Ảnh công trình thật theo từng loại |
| N2 | Vật liệu xây dựng | Chủng loại, quy cách | Bảng quy cách do nhà sản xuất cung cấp |
| N3 | Thiết bị điện công nghiệp | Nhóm thiết bị | Tìm theo mã sản phẩm nếu có chức năng thật |
| N4 | Linh kiện, bu lông, ốc vít | Mã hàng | Ảnh nền đồng nhất, chữ thông số đủ lớn |
| N5 | Khuôn mẫu, in 3D công nghiệp | Công nghệ, vật liệu | Hướng dẫn định dạng tệp cần gửi |
| N6 | Máy công nghiệp | Dòng máy | Trang riêng cho từng dòng máy |
| N7 | Công ty xây dựng | Hạng mục thi công | Quy trình kèm ảnh tại công trình |
| N8 | Tư vấn thiết kế kỹ thuật | Bộ môn | Giảm ảnh, tăng mô tả phạm vi tư vấn |
| N9 | Điện năng lượng mặt trời | Loại mái, gói hạng mục | Chỉ nêu dữ liệu từ khảo sát thật |
| N10 | An toàn lao động | Nhóm thiết bị bảo hộ | Nêu rõ giấy tờ sản phẩm mà đơn vị thật có |
| N11 | Vận tải hàng nặng | Loại xe, loại hàng | Điều kiện nhận hàng rõ ràng |
| N12 | Bảo trì nhà máy | Hệ thống cần bảo trì | Danh mục công việc theo từng hệ thống |
Điều 8. Trường hợp loại trừ
- Thương hiệu cần sự mềm mại: dịch vụ gia đình, trẻ em hoặc chăm sóc cá nhân thường hợp với phong cách tươi sáng, trẻ trung.
- Sản phẩm bán bằng cảm xúc thị giác: khi ảnh lớn là lý do chính để khách ở lại, nên xem hướng ảnh lớn, ấn tượng.
- Ít hạng mục: nếu chỉ có một hoặc hai dịch vụ, lưới nhiều ô có thể trống. Bố cục đơn giản, dễ tìm thông tin thường gọn hơn.
- Chưa có ảnh thật: phong cách này đặt ảnh cạnh nhau cùng kích thước, nên ảnh không đồng nhất sẽ khó che. Nên chuẩn bị ảnh trước khi chốt số ô.
Điều 9. Danh sách nghiệm thu
Kiểm tra từng mục trên bản thiết kế hoặc bản dựng. Mục không đạt được ghi lại và sửa trước khi bàn giao.
- Mép trái của tiêu đề, ảnh và ô trong các khối trùng với trục căn đã chọn.
- Không có thành phần bo góc ngoài các ngoại lệ đã ghi lại.
- Mỗi đường kẻ trên trang đều chia một nhóm hoặc một ô.
- Trên một hàng, các ảnh có cùng tỉ lệ và các nút nằm trên cùng một đường ngang.
- Mỗi nhóm nội dung có một vai trò: giới thiệu lợi ích, trình bày dịch vụ hoặc dẫn sang liên hệ.
- Biểu tượng thuộc một bộ, cùng độ dày nét.
- Mỗi màn hình chỉ có một nút chính dùng màu nhấn.
- Đường viền của nút và ô nhập đạt tương phản với màu liền kề, đo trên từng nền.
- Trên điện thoại, các phần xếp theo thứ tự ưu tiên; nút đủ lớn; ô nhiều cột được chuyển sang một hoặc hai cột mà chữ không bị cắt.
- Số liệu, chứng nhận và dự án trên trang đều có nguồn từ doanh nghiệp, không còn nội dung minh họa.
Với doanh nghiệp có nhiều dữ liệu đo đạc, phong cách số liệu trực quan là hướng nên đối chiếu.
Điều 10. Câu hỏi kỹ thuật về thiết kế web góc vuông
Có được bo góc ở bất kỳ thành phần nào không?
Có thể, nếu có lý do và được ghi lại, ví dụ biểu tượng của mạng xã hội hoặc logo. Khối, ảnh và nút nên giữ một quy ước để trang không có hai ngôn ngữ hình khối.
Nên có bao nhiêu độ dày đường kẻ?
Thường hai cấp là đủ: mảnh để chia ô, đậm hơn hoặc đổi nền để chia nhóm. Thêm cấp thứ ba thường khiến người xem khó nhận ra quan hệ giữa các khối.
Lưới nhiều cột xử lý thế nào trên điện thoại?
Nên xếp theo thứ tự ưu tiên thay vì thu nhỏ. Hàng bốn ô biểu tượng có thể giữ hai cột, còn thẻ có mô tả dài nên chuyển thành một cột để chữ giữ đủ cỡ.
Quản trị trên WordPress có làm lệch lưới không?
Có thể, nếu ảnh tải lên có tỉ lệ khác nhau hoặc tiêu đề quá dài. Bàn giao nên kèm quy định tỉ lệ ảnh và độ dài tiêu đề của từng loại ô.
Điều 11. Bước tiếp theo
- Liệt kê toàn bộ hạng mục và nhóm chúng theo cách khách so sánh.
- Kiểm tra ảnh đang có: mỗi nhóm có đủ ảnh cùng tỉ lệ hay chưa.
- Chốt màu nhấn và hành động chính của website.
Khi đã có danh mục, 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 mục hạng mụ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
