Thiết kế web cam trắng dùng màu cam ấm trên nền trắng để khách nhận ra ngay nút liên hệ và các nội dung quan trọng. Phong cách Cam trắng, nổi bật hợp với thương hiệu muốn cảm giác tích cực và một đường liên hệ dễ thấy.
Cách dễ hiểu nhất là đi theo chính chiếc nút cam, từ đầu trang xuống chân trang, xem nó nói gì ở mỗi chặng và lúc nào nó nên vắng mặt. Mẫu tham chiếu nằm trong thư viện giao diện Mạnh An AI.
Nút cam của mẫu Nắng Việt xuất hiện ở đâu?
Mẫu Nắng Việt đặt nút cam đặc ở ba chỗ: đầu trang, banner và dải liên hệ cuối trang. Đây là một ví dụ thiết kế web cam trắng dễ quan sát. Khoảng giữa dài không có nút cam đặc nào, các thẻ chỉ dùng mũi tên cam.
Từ trên xuống, trang có banner thợ lắp máy cạnh tiêu đề đen rất đậm, ba thẻ nền kem với vòng tròn cam, hai ảnh dự án cạnh ba bước lắp đặt, bốn thẻ sản phẩm, khối giới thiệu có số liệu và ba lời khách. Cuối trang là dải cam nhạt có số điện thoại, nút và nhân viên đeo tai nghe.
Cam còn nằm ở vòng tròn thẻ, gạch dưới tiêu đề, số bước, biểu tượng và số liệu. Vì vậy chiếc nút không phải vật cam duy nhất, dù vẫn là mảng đặc dễ thấy nhất nhờ chữ trắng. Đây là nhận xét từ ảnh tĩnh, chưa phải kết quả đo hành vi khách.
Nút liên hệ nên đổi lời thế nào qua từng chặng?
Nút nên nói đúng điều khách sẵn sàng làm ở chặng đó: đầu trang nói ngắn, banner nói rõ việc, giữa trang chỉ mời xem tiếp, cuối trang mời liên hệ hẳn. Hãy đối chiếu từng chặng với trang của bạn.
| Chặng | Khách đang nghĩ | Nút trông thế nào | Lời nút ví dụ |
|---|---|---|---|
| Đầu trang | Đây là ai? | Nhỏ, cam đặc | Đặt lịch |
| Banner | Có đúng việc mình cần không? | Lớn nhất màn hình | Đặt lịch dọn nhà |
| Thẻ dịch vụ | Mình cần phần nào? | Viền cam, nền trắng | Chọn việc này |
| Khối giải thích | Họ làm thế nào? | Vắng mặt | Không có |
| Cuối trang | Liên hệ thôi | Đảo màu trên dải cam | Đặt lịch dọn nhà |
Ở đầu trang, nút chỉ cần nhỏ và đứng yên
Ở đầu trang, nút chỉ cần một hai từ và luôn ở cùng một góc, để ai đã quyết định có thể bấm ngay. Bạn chưa thuyết phục được gì ở đây, nên đừng để nó tranh chỗ với tên thương hiệu.
Đặt số điện thoại ngay cạnh nút là cách hay, vì có người muốn gọi và có người muốn để lại yêu cầu. Mẫu Nắng Việt để số điện thoại trong ô cam nhạt, cạnh đó là nút cam đặc, nên hai cách liên hệ vẫn phân biệt được mức ưu tiên.
Đến banner, nút được lớn nhất và nói rõ việc
Trong banner, nút nên là mảng cam lớn nhất và nêu tên việc cụ thể, như “Đặt lịch dọn nhà” thay vì “Xem ngay”. Khách vừa đọc tiêu đề, nên câu trên nút chỉ cần nối tiếp câu đó.
Nếu cần nút thứ hai, hãy hạ nó xuống thành một liên kết chữ hoặc nút viền. Hai nút cam đặc đứng cạnh nhau khiến khách phải dừng lại chọn, và cả hai cùng mất sức nổi. Kiểm tra thêm chữ trên nền cam: tính theo tiêu chí tương phản tối thiểu của WCAG, chữ thường cần ít nhất 4,5:1.
Với mã cam đề xuất #F26A1B, chữ trắng chỉ đạt khoảng 3,06:1, nên chỉ hợp với chữ lớn và đậm. Đổi nền nút sang #C2500F được khoảng 4,72:1, còn giữ cam tươi và dùng chữ than #23272E thì được khoảng 4,89:1. Đây là mã để tham khảo, không phải mã đo từ ảnh mẫu.
Giữa trang, khi nào nút nên nhỏ lại hoặc vắng mặt?
Giữa trang, nút nên nhỏ lại ở các thẻ lựa chọn và vắng mặt ở những khối chỉ để giải thích. Khách đang tìm hiểu, nên một nút cam đặc ở mỗi khối sẽ giống như đang bị giục.
Hãy để phần còn lại giữ màu dịu: nền trắng, kem rất nhạt, chữ xám đậm. Mỗi khối cần làm rõ một lợi ích và kèm một ví dụ đúng với năng lực thật, chẳng hạn ảnh công trình đã làm. Trang đủ dẫn chứng thì lúc nút quay lại, khách đã sẵn sàng hơn.
Trên điện thoại, các khối xếp chồng nên nút dễ xuất hiện dày hơn trên màn hình lớn. Hãy giữ thứ tự thông tin mạch lạc và đặt lời mời tư vấn sau phần tìm hiểu, thay vì lặp nút sau mỗi khối.
Cuối trang, nút cần đổi màu với nền
Ở cuối trang, cho nền nhận màu cam và nút chuyển sang trắng, hoặc giữ nền nhạt với nút cam thật lớn. Sự đổi này báo cho khách biết đã đến chặng cuối, chứ không phải thêm một khối nữa.
Câu trên dải nên là một câu hỏi về khách, và lời nút lặp lại đúng lời ở banner để khách không phải hiểu lại. Chân trang phía dưới chỉ cần số điện thoại rõ ràng, không thêm một nút cam nào nữa.
Ba ngành đưa chiếc nút đi theo ba đường ra sao?
Cùng là thiết kế web cam trắng, nút của dịch vụ dọn nhà mời chọn việc, nút của lớp kỹ năng mời chọn lớp, còn nút của thợ sửa máy mời gọi ngay. 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.
Dọn nhà theo giờ: nút đi cùng từng việc
Dịch vụ giả định Nhà Gọn mở bằng nút nhỏ “Đặt lịch”, rồi nút lớn “Đặt lịch dọn nhà” cạnh ảnh người làm với vòng tròn cam phía sau. Bốn thẻ phòng khách, nhà bếp, phòng tắm và sau sửa nhà đều có nút viền “Chọn việc này”. Khối sáu việc được làm, ảnh trước sau và bốn câu hỏi không có nút, để dải cam cuối trang có lý do xuất hiện.
Lớp kỹ năng cho trẻ: nút hỏi cha mẹ về con
Lớp giả định Bé Tự Tin ghép ba cấp học và nút “Chọn lớp cho con” vào cùng một thanh ngay dưới tiêu đề, nên cha mẹ chọn trước rồi mới bấm. Ba lớp sắp mở dùng nút viền “Xem lớp”. Khối về nhà con làm gì và ba câu phụ huynh hỏi chỉ để đọc, rồi thẻ trắng trên nền cam mời “Đăng ký học thử”.
Sửa máy tính: nút đến sau một câu hỏi
Dịch vụ giả định Máy Lành Lại hỏi “Máy bạn đang bị gì?” bằng sáu ô triệu chứng, một ô tô cam làm mẫu cho trạng thái đang chọn. Ảnh tách lớp laptop trên nền than có chú thích quạt, ổ cứng, bàn phím và pin, không có nút, vì khối này chỉ để khách hiểu máy của mình. Cuối trang, dải cam đề nghị mô tả lỗi và có nút trắng “Gọi thợ”.
12 ngành khác đặt nút cam ở đâu trước?
Ngành có việc gấp đặt nút gọi lên trước, ngành cần chọn gói đặt nút ở thẻ, còn ngành cần tìm hiểu lâu thì để nút về cuối. Dưới đây là 12 ngành khác cùng chỗ nên ưu tiên.
- Sửa điện lạnh: nút gọi ở banner, kèm danh sách lỗi hay gặp.
- Giao nước đóng bình: nút đặt ngay đầu trang cho khách quen.
- Diệt côn trùng: nút gọi sau ô chọn loại côn trùng.
- Chuyển nhà trọn gói: nút ở thẻ theo cỡ nhà.
- Giặt ủi lấy tận nơi: nút ở thẻ theo loại đồ.
- Cho thuê xe tự lái: nút ở thẻ từng dòng xe.
- Trông trẻ theo giờ: nút sau phần giới thiệu người trông.
- Lớp vẽ cuối tuần: nút ở thẻ từng lớp sắp mở.
- Lắp điện mặt trời: nút về cuối, sau ảnh công trình và các bước.
- Sửa nhà trọn gói: nút về cuối, sau ảnh trước và sau.
- Đồ ăn nhanh gia đình: nút đặt món trên từng thẻ món.
- Cửa hàng thú cưng: nút hẹn tắm tỉa ở banner, phần sản phẩm giữ nền trắng.
Khi nào không nên chọn thiết kế web cam trắng?
Không nên chọn thiết kế web cam trắng khi thương hiệu cần sự trầm lắng hoặc sang trọng kín đáo, hay khi khách cần đọc rất lâu trước khi liên hệ. Cam gợi sự vui và nhanh, nên dễ tạo cảm giác đang bán hàng ở những nơi cần sự riêng tư.
Nếu nhận diện mang màu khác, cách chọn một màu nhấn nổi bật cho bạn cùng cách làm mà không phải đổi sang cam. Khi khách hàng là học sinh và cần nhiều sắc độ, lối tươi sáng, trẻ trung sẽ hợp hơn. Còn nếu muốn sự thân thiện nằm ở hình khối hơn là màu, hãy so với phong cách bo tròn, thân thiện.
Câu hỏi thường gặp về thiết kế web cam trắng
Một trang nên có bao nhiêu nút cam đặc?
Không có con số cố định. Mẫu Nắng Việt dùng ba nút ở đầu trang, banner và cuối trang; bạn có thể bắt đầu như vậy rồi bỏ bớt nếu hai nút lọt chung một màn hình điện thoại.
Số điện thoại có nên tô cam giống nút không?
Nên để nhẹ hơn nút chính, ví dụ biểu tượng cam và chữ đậm. Riêng dịch vụ gấp thì số điện thoại có thể chính là nút cam lớn nhất.
Logo đã có màu cam khác thì sao?
Giữ màu logo cho biểu tượng, rồi chọn sắc cam gần đó nhưng đậm hơn cho nền nút. Sau đó kiểm tra lại độ tương phản với chữ trên nút.
Nên làm gì trước khi chọn thiết kế web cam trắng?
Hãy in trang hiện có hoặc bản phác thảo, rồi khoanh mọi chỗ đang có nút và ghi lời nút bên cạnh. Chỗ nào khách chưa đủ thông tin để bấm thì bỏ nút, chỗ nào đã đủ thì viết lại lời cho cụ thể.
Khi đã có bản khoanh đầu tiên, 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 bản khoanh nút để 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
