# Phong Cách Thiết Kế Web Ghi xám, hiện đại.

Nguồn: https://manhan.ai.vn/thiet-ke-web-ghi-xam-hien-dai/

Ngày đăng: 2026-11-06
Chuyên mục: Phong cách thiết kế website

**Thiết kế web ghi xám** dùng màu trung tính, ảnh sắc nét và bố cục thoáng để sản phẩm nổi bật mà không cần nhiều màu. Phong cách **Ghi xám, hiện đại** hợp với sản phẩm mà khách muốn xem kỹ cấu tạo, chất liệu và độ hoàn thiện trước khi quyết định.

Một trang ghi xám tốt dẫn mắt khách đi từ xa lại gần, giống như khi xem một sản phẩm thật: toàn cảnh, cấu tạo, chất liệu rồi chi tiết. Mẫu tham chiếu nằm trong [thư viện giao diện Mạnh An AI](https://manhan.ai.vn/#giao-dien).

**Biên soạn:** Ban biên tập Mạnh An AI, dịch vụ thiết kế website của Công Ty TNHH Mạnh An Service, phục vụ khách hàng trên toàn quốc. **Cập nhật:** 06/11/2026.

[![Mẫu thiết kế web ghi xám cho công ty nhôm kính](https://manhan.ai.vn/wp-content/uploads/2026/10/phong-cach-thiet-ke-website-ghi-xam-hien-dai.webp)](https://manhan.ai.vn/wp-content/uploads/2026/10/phong-cach-thiet-ke-website-ghi-xam-hien-dai.webp)

Mẫu minh họa công ty Nhôm Kính Việt. Tên, địa danh công trình, địa chỉ, email và số điện thoại trong ảnh đều là nội dung minh họa, không phải dữ liệu thật.

## Mẫu ghi xám cho thấy sản phẩm ở những khoảng cách nào?

Là một ví dụ thiết kế web ghi xám, mẫu Nhôm Kính Việt cho thấy rõ khoảng cách xa, với ảnh nhà kính lúc hoàng hôn và bốn ảnh công trình. Ở khoảng cách gần, mẫu chỉ có một ảnh mặt cắt thanh nhôm, nên hành trình nhìn gần chưa trọn vẹn.

Từ trên xuống, trang có đầu trang trắng, banner toàn khổ, năm thẻ hệ sản phẩm, dải nền ghi với bốn công trình, bốn lý do ngăn bằng đường kẻ mảnh, bốn bước làm việc, khối liên hệ trên ảnh nội thất và chân trang xanh than. Màu rực chỉ đến từ ảnh: đèn vàng, cây xanh và bầu trời.

Ảnh mặt cắt ở thẻ thứ tư là chi tiết giá trị nhất nhưng lại nằm ngang hàng với ảnh toàn cảnh và không có chú thích bộ phận. Đây là điểm đáng sửa nhất khi áp dụng, dựa trên quan sát ảnh tĩnh chứ chưa đo trên trang thật.

## Mỗi khoảng cách nhìn cần ảnh và thông tin gì?

Mỗi khoảng cách nhìn trả lời một câu hỏi riêng của khách, vì vậy cần một loại ảnh riêng. Hãy chuẩn bị đủ các mục trong bảng trước khi dựng trang.

| Khoảng cách | Khách đang hỏi | Loại ảnh | Thông tin đi kèm |
| --- | --- | --- | --- |
| Toàn cảnh | Sản phẩm hợp với mình không? | Sản phẩm trong không gian dùng thật | Một câu nêu đối tượng dùng |
| Cấu tạo | Bên trong có gì? | Mặt cắt hoặc ảnh tách lớp | Tên bộ phận và công dụng |
| Chất liệu | Bề mặt ra sao? | Ảnh cận, ánh sáng xiên | Tên vật liệu, cách lau chùi |
| Chi tiết | Chỗ hay hỏng có chắc không? | Ảnh sát một khớp, một mối nối | Cách dùng và cách thay thế |

## Nhìn từ xa: toàn cảnh cần nói điều gì?

Từ xa, khách chỉ cần nhận ra sản phẩm là gì và dành cho ai, nên một ảnh sắc nét cùng một câu ngắn là đủ. Thông số chưa cần xuất hiện ở khoảng cách này.

Nền ghi nhạt giúp đường viền sản phẩm hiện rõ, miễn là ảnh có độ tương phản tốt. Nên đặt sản phẩm trong đúng không gian sử dụng, có ánh sáng tự nhiên, để màu trung tính không biến trang thành catalogue lạnh. Ảnh phải phản ánh đúng sản phẩm doanh nghiệp đang bán, không phải một ảnh đẹp mượn về.

## Nhìn vào cấu tạo: vì sao cần ảnh mặt cắt?

Ảnh mặt cắt cho khách thấy phần bên trong mà họ không thể tự mở ra xem, nên cần có khi sản phẩm có cơ chế hoặc lớp cấu tạo đáng nói. Mỗi bộ phận được đánh dấu cần một tên ngắn và một câu về công dụng.

Khối này nên có đường kẻ mảnh nối từng điểm tới chú thích, đặt trên nền ghi trung để tách khỏi phần còn lại. Bốn điểm chú thích thường là đủ. Khi làm thật, hãy nhờ kỹ thuật viên soát từng dòng, vì sai một tên bộ phận sẽ làm mất ngay sự tin cậy mà khối này đang xây dựng.

## Nhìn sát chất liệu: làm sao để bề mặt không nhạt?

Bề mặt trông rõ nhất khi chụp bằng ánh sáng xiên, vì vân, độ xước và độ bóng chỉ hiện lên khi có bóng đổ nhẹ. Giao diện càng ít màu thì ảnh chất liệu càng phải tốt, vì không còn gì che lỗi.

Các ảnh chất liệu cần cùng ánh sáng và cách xử lý màu để trông như một bộ, kèm một chú thích ngắn cho biết vật liệu đó là gì. Cũng cần chú ý độ ám của màu xám: xám ngả xanh tạo cảm giác kỹ thuật, xám ngả nâu tạo cảm giác ấm hơn. Chọn một hướng và giữ từ nền, đường kẻ tới chữ.

## Tới từng chi tiết: chữ nhỏ có đọc được không?

Trong thiết kế web ghi xám, ở khoảng cách gần nhất, thông tin thường nằm trong chú thích nhỏ, nên chữ phải đủ tương phản dù trang chỉ dùng màu xám. Xám nhạt trên nền ghi nhìn tinh tế nhưng là lỗi dễ gặp nhất của phong cách này.

Tính theo công thức của [tiêu chí tương phản tối thiểu của WCAG](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), chữ xám #8C939A trên nền #F4F5F6 chỉ đạt khoảng 2,85:1, thấp hơn mức 4,5:1 cho chữ thường. Đổi sang #5F666E được khoảng 5,33:1, còn #4A5058 được khoảng 7,46:1. Đây là mã đề xuất để tham khảo, không phải mã đo từ ảnh mẫu.

Trên điện thoại, nên giữ đúng thứ tự từ xa lại gần, đặt nút tư vấn sau phần cấu tạo và chất liệu. Ảnh mặt cắt có nhiều chú thích không nên bị thu nhỏ: hãy chuyển chú thích thành danh sách đánh số dưới ảnh.

## Ba sản phẩm đi từ xa lại gần theo cách nào?

Khi áp dụng thiết kế web ghi xám, máy pha cà phê tập trung vào cấu tạo bên trong, vali cao cấp tách rời các lớp vỏ, còn thiết bị phòng tắm nhấn vào lớp hoàn thiện. 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.

### Máy pha cà phê: mở thân máy cho khách xem

[![Thiết kế web ghi xám cho thương hiệu máy pha cà phê giả định](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-ghi-xam-hien-dai-may-pha-ca-phe-chi-tiet.webp)](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-ghi-xam-hien-dai-may-pha-ca-phe-chi-tiet.webp)

Giao diện giả định Mộc Đen: banner máy đang pha, bốn lựa chọn theo nhu cầu, mặt cắt bốn bộ phận, ba ảnh chất liệu và bốn bước.

Thương hiệu giả định Mộc Đen đi đúng bốn khoảng cách: máy đang pha trong bếp, bốn thẻ theo nhu cầu, mặt cắt với nồi hơi, bơm, đầu pha và khay nước, rồi ba ảnh cận thép xước, tay cầm gỗ và núm vặn. Màu gỗ và đồng trong ảnh đủ ấm, nên nút tư vấn chỉ cần thêm một sắc nâu đồng.

### Vali cao cấp: tách từng lớp của vỏ

[![Giao diện ghi xám cho thương hiệu vali cao cấp giả định](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-ghi-xam-hien-dai-vali-chi-tiet.webp)](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-ghi-xam-hien-dai-vali-chi-tiet.webp)

Giao diện giả định Hành Trình Xám: banner ba vali có chú thích bộ phận, ba cỡ, ảnh tách lớp vỏ, năm ảnh chi tiết và bốn kiểu chuyến đi.

Thương hiệu giả định Hành Trình Xám đưa chú thích cần kéo, khóa số và bánh xoay vào ngay banner, nên khách nhìn gần sớm hơn. Ảnh tách vỏ đặt trên nền ghi đậm, kèm bốn dòng đánh số. Sau năm ảnh chi tiết, bốn ảnh người đi công tác, nghỉ dưỡng, về quê và khám phá thành phố đưa sản phẩm trở lại đời thường.

### Thiết bị phòng tắm: để khách so lớp hoàn thiện

[![Giao diện ghi xám cho thương hiệu thiết bị phòng tắm giả định](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-ghi-xam-hien-dai-thiet-bi-phong-tam-chi-tiet.webp)](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-ghi-xam-hien-dai-thiet-bi-phong-tam-chi-tiet.webp)

Giao diện giả định Thủy Mộc: banner ô ghép, sáu dòng sản phẩm, mặt cắt chiếc vòi, ba lớp hoàn thiện, ba phòng tắm đã phối và bốn bước.

Thương hiệu giả định Thủy Mộc mở đầu bằng khối xám đậm cạnh bốn ảnh ghép, rồi chia nhỏ thành sáu dòng sản phẩm. Mặt cắt chiếc vòi chú thích tay gạt, thân vòi, lõi van và đầu lọc. Ba ô xám súng, đồng mờ và đen nhám giúp khách so bề mặt ngay trên trang, còn ba phòng đã phối đưa thiết bị về lại khoảng cách xa.

## 12 ngành khác nên làm kỹ khoảng cách nào của thiết kế web ghi xám?

Ngành có cơ chế phức tạp nên làm kỹ cấu tạo, ngành bán vật liệu đẹp nên làm kỹ chất liệu, còn ngành lắp đặt nên làm kỹ toàn cảnh. Dưới đây là 12 ngành khác cùng khoảng cách nhìn nên đầu tư nhiều nhất.

- **Cửa nhôm kính:** cấu tạo, với mặt cắt thanh nhôm có chú thích.
- **Máy lọc nước:** cấu tạo, với các lớp lõi lọc được gọi đúng tên.
- **Xe đạp thể thao:** cấu tạo, với khung và bộ truyền động.
- **Loa và tai nghe:** cấu tạo, với ảnh tách lớp thân loa.
- **Đá ốp bếp:** chất liệu, với ảnh vân đá chụp sát.
- **Đồng hồ đeo tay:** chi tiết, với ảnh sát mặt số và khóa dây.
- **Dao bếp:** chi tiết, với ảnh sát lưỡi và điểm nối cán.
- **Đèn trang trí:** toàn cảnh, với ảnh đèn bật trong căn phòng thật.
- **Bếp từ âm:** toàn cảnh, với bếp đặt trong gian bếp đã hoàn thiện.
- **Tủ quần áo lắp ghép:** toàn cảnh trước, rồi ảnh bản lề và ray trượt.
- **Thiết bị văn phòng:** chi tiết, với ảnh các nút và cổng kết nối.
- **Xe điện:** cấu tạo, chỉ nêu thông số đã có tài liệu của hãng.

## Khi nào không nên chọn thiết kế web ghi xám?

Không nên chọn thiết kế web ghi xám khi doanh nghiệp chưa có ảnh sản phẩm đủ nét, hoặc khi thương hiệu cần tạo cảm giác vui và thân tình. Không có ảnh tốt, nền xám chỉ còn lại cảm giác lạnh và thiếu sức sống.

Nếu sản phẩm cần không khí và sự kịch tính, [lối nền tối với điểm sáng](https://manhan.ai.vn/thiet-ke-web-nen-toi-diem-sang/) tạo ấn tượng mạnh hơn. Khi chỉ có vài thông tin cần nói, [phong cách tối giản, trắng thoáng](https://manhan.ai.vn/thiet-ke-web-toi-gian-trang-thoang/) gọn nhẹ hơn. Còn khi một ảnh lớn đã đủ để thuyết phục, hãy xem [hướng ảnh lớn, ấn tượng](https://manhan.ai.vn/thiet-ke-web-anh-lon-an-tuong/).

## Câu hỏi thường gặp về thiết kế web ghi xám

**Trang chỉ có màu xám có bị nhàm chán không?**

Dễ bị, nếu ảnh nhạt và các khối cùng một sắc xám. Hãy dùng ba bốn cấp xám rõ khác nhau, ảnh có màu thật và một màu nhấn duy nhất cho nút chính.

**Không có ảnh mặt cắt thì làm thế nào?**

Có thể chụp sản phẩm khi tháo rời, hoặc dùng bản vẽ kỹ thuật được kỹ thuật viên soát lại. Nếu chưa có, hãy mô tả cấu tạo bằng danh sách ngắn thay vì dùng ảnh không đúng với sản phẩm thật.

**Màu nhấn nào hợp với nền ghi xám?**

Nên lấy màu nhấn từ chính sản phẩm, như đồng, gỗ hoặc xanh than. Một màu lấy từ sản phẩm sẽ làm trang liền mạch hơn một màu chọn riêng cho giao diện.

## Nên làm gì trước khi chọn thiết kế web ghi xám?

Hãy đặt sản phẩm lên bàn và chụp đủ bốn khoảng cách: toàn cảnh, cấu tạo, chất liệu, chi tiết. Khoảng cách nào chưa có ảnh tốt thì chụp bổ sung trước, vì với thiết kế web ghi xám, chất lượng ảnh quyết định phần lớn cảm giác của trang.

Khi đã có bộ ảnh đầu tiên, bạn có thể đọc [các bước Mạnh An AI thiết kế và bàn giao website](https://manhan.ai.vn/quy-trinh-thiet-ke-website/) và xem [bảng giá thiết kế website AI](https://manhan.ai.vn/bao-gia-thiet-ke-website/). Mạnh An AI phục vụ khách hàng trên toàn quốc; bạn có thể [gửi ảnh sản phẩm ở bốn khoảng cách để trao đổi](https://manhan.ai.vn/lien-he-thiet-ke-website/) 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](tel:0835431678)
 **Email:** [info@manhan.vn](mailto:info@manhan.vn)