Một chủ cửa hàng từng cho tôi xem analytics của trang web và chỉ vào một mô hình kỳ lạ: người dùng lướt qua các mục navigation nhiều lần—đôi khi 5 hoặc 6 lần trên cùng một liên kết—trước khi nhấp. Trạng thái hover có ở đó, về mặt kỹ thuật. Nhưng thay đổi màu sắc rất tinh tế (từ #333333 đến #444444, một sự thay đổi hầu như không thể nhận thấy) khiến người dùng không thể biết liệu họ đang chỉ vào một mục có thể nhấp được hay chỉ là di chuyển chuột qua trang.
Họ thay đổi trạng thái hover để bao gồm một dòng gạch dưới rõ ràng và thay đổi màu sắc thành cam của thương hiệu. Thời gian trung bình đến lần nhấp đầu tiên giảm 4 giây. Nhấp qua navigation tăng 28%. Cùng các mục menu. Cùng cấu trúc. Điều duy nhất khác biệt là sự rõ ràng về các trạng thái tương tác.
Navigation có nhiều trạng thái—mặc định, hover, active, focus, visited—và hầu hết các cửa hàng chỉ thiết kế cẩn thận trạng thái mặc định. Kết quả là các menu nơi người dùng không thể tự tin biết được nơi họ đang chỉ, những gì họ đã nhấp, hay nơi họ hiện tại ở đâu. Khắc phục điều này không phải về việc thêm nhiều màu sắc hơn. Đó là định nghĩa một hệ thống nhất quán hoạt động trên mọi trạng thái.
- Người dùng cần nhận ra ngay lập tức liệu một phần tử navigation có thể nhấp được, đang lướt qua, hiện tại active, hay đã được truy cập—màu sắc không nhất quán tạo ra sự nhầm lẫn
- Mỗi trạng thái cần phân biệt rõ về mặt hình ảnh: hướng tới ít nhất 3:1 tương phản giữa mặc định và hover, và duy trì tương phản 7:1+ với nền ở tất cả các trạng thái
- Các trạng thái hover nên thêm nhấn mạnh (gạch dưới, chuyển nền, in đậm) thay vì giảm tương phản hoặc thay đổi màu sắc đột ngột
- Trạng thái focus (để điều hướng bàn phím) phải rõ ràng mà không bị quá sáng—một đường viền màu sắc là tiêu chuẩn và có thể truy cập được
- Các chỉ báo trang hiện tại/active nên sử dụng màu sắc và mô hình nhất quán trên toàn trang web để người dùng luôn biết họ ở đâu
Tại sao trạng thái navigation quan trọng cho khả năng sử dụng
Trên desktop, người dùng dựa vào phản hồi hover để xác định những gì có thể nhấp được. Trên mobile, không có hover—vì vậy trạng thái mặc định phải rõ ràng báo hiệu tính tương tác. Ở cả hai, trạng thái active cho thấy người dùng hiện tại ở đâu, và trạng thái focus (để điều hướng bàn phím) cung cấp khả năng tiếp cận và độ chính xác.
Khi những trạng thái này có màu sắc không nhất quán, người dùng trải qua vi nhầm lẫn: “Hover của tôi đã đăng ký chưa? Cái này có thể nhấp được không? Tôi có đang ở trang này hay trang kia không?” Mỗi khoảnh khắc nghi ngờ tăng tải nhận thức và làm chậm điều hướng. Theo thời gian, nó tích lũy thành sự bực bội và bỏ cuộc.
Nielsen Norman Group phát hiện ra rằng người dùng dựa vào phản hồi tương tác nhất quán để xây dựng mô hình tinh thần về cách hoạt động của một trang web. Nếu trạng thái hover của bạn là gạch dưới trên trang chủ nhưng thay đổi màu nền trên các trang danh mục, người dùng phải học lại navigation của bạn trên mỗi trang. Đó là nỗ lực tinh thần lãng phí mà thay vào đó nên dành cho việc đánh giá sản phẩm.
Năm trạng thái navigation bạn cần thiết kế
Hầu hết navigation có ít nhất năm trạng thái phân biệt. Mỗi cái cần xử lý màu sắc riêng.
1. Mặc định (trạng thái nghỉ)
Đây là cách mục navigation xuất hiện trước bất kỳ tương tác nào. Nó phải có tương phản cao (7:1+ với nền) và dễ phân biệt từ văn bản không thể nhấp được.
Chiến lược màu sắc: Sử dụng màu sắc văn bản navigation chính của bạn—thường là đen, xám rất tối hoặc màu thương hiệu có tương phản cao.
Sai lầm phổ biến: Sử dụng xám trung bình trông hiện đại trong Figma nhưng không đạt kiểm tra tương phản và trộn lẫn với trang.
2. Hover (di chuyển chuột qua)
Khi người dùng chỉ vào một mục navigation, trạng thái hover xác nhận rằng nó có tính tương tác. Thay đổi cần phải được nhận thấy ngay lập tức—không tinh tế.
Chiến lược màu sắc: Ba cách tiếp cận đáng tin cậy:
- Chuyển sang màu nhấn mạnh: Mặc định là đen, hover chuyển sang cam thương hiệu (với gạch dưới hoặc nền)
- Làm tối hoặc làm sáng: Mặc định là #2a2a2a, hover trở thành #000000 (với gạch dưới thêm)
- Thêm nền: Mặc định là văn bản tối trên nền sáng, hover thêm nền màu sáng sau văn bản
Quy tắc: Trạng thái hover phải có ít nhất tương phản 3:1 với trạng thái mặc định (để người dùng có thể nhận ra sự khác biệt) và duy trì tương phản 7:1+ với nền (để nó vẫn có thể đọc được).
Sai lầm phổ biến: Trạng thái hover giảm tương phản. Mặc định là đen (#000000), hover trở thành xám nhạt (#cccccc)—người dùng không thể đọc được những gì họ đang chỉ vào.
3. Active (hiện tại đang được nhấp)
Trạng thái active cung cấp phản hồi tức thì rằng nhấp đã được đăng ký. Nó là tương đương hình ảnh của một nút bị nhấn. Hầu hết người dùng sẽ không chú ý đến nó một cách có ý thức, nhưng sự thiếu vắng của nó tạo cảm giác tinh tế rằng giao diện không phản ứng.
Chiến lược màu sắc: Nhấn mạnh hình ảnh ngắn—hơi tối hơn hover, hoặc chớp nền nhanh chóng. Trạng thái này chỉ kéo dài một phần nghìn giây, vì vậy nó không cần phải đẹp—chỉ cần chú ý.
Sai lầm phổ biến: Không có trạng thái active nào cả, hoặc một cái giống với hover (để người dùng không nhận được xác nhận nhấp).
4. Focus (điều hướng bàn phím)
Khi người dùng điều hướng bằng bàn phím (phím Tab), trạng thái focus cho thấy phần tử nào hiện tại có focus bàn phím. Điều này được yêu cầu bởi luật pháp về khả năng tiếp cận (WCAG 2.1) và rất cần thiết cho người dùng nâng cao.
Chiến lược màu sắc: Một đường viền màu sắc (thường 2-3px solid) với màu nhấn mạnh của thương hiệu của bạn. Đường viền phải rõ ràng nhìn thấy đối với nền navigation lẫn văn bản liên kết.
Quy tắc: Đường viền focus phải có tương phản 3:1 với nền. Đừng đặt outline: none trong CSS của bạn trừ khi bạn thay thế nó bằng chỉ báo focus tùy chỉnh có khả năng hiển thị tương đương.
Sai lầm phổ biến: Xóa hoàn toàn đường viền focus vì chúng “không trông tốt”. Điều này phá vỡ điều hướng bàn phím cho người dùng khả năng tiếp cận và người dùng nâng cao thích phím tắt bàn phím.
5. Hiện tại (chỉ báo trang active)
Trạng thái hiện tại cho người dùng biết họ đang ở trang nào. Người dùng xem “Sản phẩm” nên thấy mục navigation “Sản phẩm” khác biệt về mặt hình ảnh với các mục khác—thường thông qua màu sắc, trọng lượng đậm, hoặc gạch dưới.
Chiến lược màu sắc: Sử dụng màu nhấn mạnh chính của bạn và/hoặc trọng lượng đậm. Trạng thái này phải phân biệt về mặt hình ảnh nhất sau hover, vì nó cung cấp phản hồi định hướng liên tục.
Sai lầm phổ biến: Làm cho trạng thái hiện tại quá tinh tế (văn bản hơi tối hơn) để người dùng không thể biết phần nào họ đang ở. Hoặc làm cho nó không nhất quán—gạch dưới trên một số trang, đậm trên các trang khác.
Xây dựng hệ thống trạng thái màu sắc nhất quán
Đây là một khung thực tế để xác định màu sắc trạng thái navigation hoạt động cùng nhau.
Bước 1: Bắt đầu với trạng thái mặc định của bạn
Văn bản navigation mặc định của bạn phải có tương phản cao với nền. Giả sử nền navigation của bạn là trắng (#ffffff) và văn bản mặc định của bạn là xám rất tối (#1a1a1a)—đó là tương phản 16.1:1, cao hơn nhiều so với mục tiêu 7:1.
Bước 2: Xác định trạng thái hover của bạn
Trạng thái hover của bạn cần phải khác biệt rõ ràng nhưng vẫn có tương phản cao. Ba tùy chọn:
Tùy chọn A: Chuyển màu + gạch dưới
- Mặc định: #1a1a1a (xám tối)
- Hover: #ff6b35 (cam thương hiệu) + viền dưới 2px cùng cam
- Tương phản với nền: 4.7:1 (qua WCAG AA, gần AAA)
Tùy chọn B: Làm tối + gạch dưới
- Mặc định: #1a1a1a
- Hover: #000000 (đen tinh khiết) + viền dưới 2px
- Tương phản với nền: 21:1 (tối đa)
Tùy chọn C: Chuyển nền
- Mặc định: #1a1a1a văn bản trên trắng
- Hover: #1a1a1a văn bản trên nền đào nhạt (#fff4f0)
- Tương phản: Văn bản-nền vẫn 16.1:1; chuyển nền tinh tế nhưng rõ ràng
Chọn cách tiếp cận phù hợp với phong cách hình ảnh thương hiệu của bạn, sau đó áp dụng nó một cách nhất quán trên tất cả các phần tử navigation.
Bước 3: Xác định trạng thái active của bạn
Với hầu hết các trang web, active có thể là phiên bản hơi tối hoặc bão hòa hơn của hover. Nếu hover là cam với gạch dưới, active là cam tối hơn với cùng gạch dưới. Nó chỉ cần phân biệt rõ ràng trong một phần của một giây.
Bước 4: Xác định trạng thái focus của bạn
Sử dụng đường viền 2-3px solid với màu thương hiệu chính của bạn. Kiểm tra nó đối với nền navigation lẫn màu văn bản để đảm bảo nó có thể nhìn thấy. Hầu hết các trình duyệt hiện đại mặc định là một đường viền xanh, nhưng bạn nên tùy chỉnh nó để phù hợp với thương hiệu của bạn.
Ví dụ CSS:
a:focus {
outline: 2px solid #ff6b35; /* cam thương hiệu */
outline-offset: 2px; /* khoảng cách giữa văn bản và đường viền */
}
Bước 5: Xác định chỉ báo trang hiện tại của bạn
Trạng thái hiện tại nên sử dụng màu nhấn mạnh chính của thương hiệu của bạn và phân biệt về mặt hình ảnh mà không cạnh tranh với hover. Các mô hình phổ biến:
- Đậm + màu nhấn mạnh: Văn bản đậm và sử dụng cam thương hiệu thay vì xám mặc định
- Gạch dưới + màu nhấn mạnh: Văn bản có gạch dưới liên tục với cam thương hiệu
- Nền + nhấn mạnh: Nền nhạt với màu thương hiệu sau văn bản
Chọn một mô hình và sử dụng nó một cách nhất quán. Người dùng nên có thể nhìn vào navigation của bạn và phát hiện ngay tức thì chỉ báo trang hiện tại.
Những sai lầm phổ biến về trạng thái màu sắc gây nhầm lẫn cho người dùng
Sai lầm 1: Trạng thái hover vô hình
Vấn đề: Màu hover thay đổi từ #3a3a3a sang #4a4a4a—tương phản 1.1:1 mà người dùng không thể nhận thấy. Họ lướt và không có gì xuất hiện.
Cách khắc phục: Hướng tới ít nhất tương phản 3:1 giữa các trạng thái mặc định và hover. Thêm gạch dưới hoặc chuyển nền nếu chỉ màu sắc không đủ.
Sai lầm 2: Trạng thái hover giảm khả năng đọc
Vấn đề: Mặc định là văn bản đen (#000000) trên nền trắng (tương phản 21:1). Hover thay đổi văn bản thành xám nhạt (#cccccc) trên trắng (tương phản 1.6:1). Người dùng không thể đọc liên kết họ đang lướt qua.
Cách khắc phục: Hover nên duy trì hoặc tăng tương phản với nền. Nếu bạn muốn sử dụng một màu nhạt hơn trên hover, hãy thêm nền tối sau nó.
Sai lầm 3: Chỉ báo trang hiện tại không nhất quán
Vấn đề: Trên trang chủ, mục navigation hiện tại là đậm. Trên các trang danh mục, nó được gạch dưới. Trên các trang sản phẩm, nó là một màu sắc khác. Người dùng không có cách nhất quán để định hướng bản thân.
Cách khắc phục: Chọn một xử lý hình ảnh cho trạng thái hiện tại (đậm + màu nhấn mạnh là phổ biến) và áp dụng nó ở khắp mọi nơi. Tính nhất quán tạo ra sự nhận biết.
Sai lầm 4: Không có trạng thái focus (hoặc trạng thái focus vô hình)
Vấn đề: CSS bao gồm a:focus { outline: none; } để “làm sạch” đường viền mặc định của trình duyệt, nhưng không có kiểu focus tùy chỉnh thay thế nó. Người dùng bàn phím không thể biết liên kết nào có focus.
Cách khắc phục: Không bao giờ xóa đường viền focus mà không thay thế. Sử dụng đường viền màu sắc hoặc chuyển nền rõ ràng nhìn thấy.
Sai lầm 5: Trạng thái mobile không dịch
Vấn đề: Trên desktop, trạng thái hover hoàn hảo—chuyển màu rõ ràng, gạch dưới xuất hiện, mọi thứ hoạt động. Trên mobile, không có hover. Trạng thái mặc định không rõ ràng báo hiệu những gì có thể nhấp được, và người dùng nhấn do dự.
Cách khắc phục: Trạng thái mặc định trên mobile nên nhấn mạnh hơn một chút so với desktop. Cân nhắc thêm một biểu tượng tinh tế (mũi tên, chevron) hoặc làm cho văn bản hơi đậm hơn để tính tương tác rõ ràng mà không cần hover.
Xác định trạng thái cho các thành phần navigation khác nhau
Các phần tử navigation khác nhau cần xử lý trạng thái hơi khác nhau.
Mục menu cấp cao nhất (thanh nav ngang)
Đây là các danh mục chính của bạn: “Mua sắm”, “Về chúng tôi”, “Liên hệ”. Họ cần xử lý năm trạng thái đầy đủ: mặc định, hover, active, focus, hiện tại.
Mô hình được đề xuất: Mặc định trong xám tối, hover với màu thương hiệu + gạch dưới, trang hiện tại đậm + màu thương hiệu.
Mục dropdown/mega menu
Mục trong dropdown là điều hướng thứ cấp. Họ nên sử dụng cùng hệ thống màu sắc với các mục cấp cao nhất nhưng có thể nhấn mạnh hơi ít (văn bản nhỏ hơn, không đậm trên trạng thái mặc định).
Mô hình được đề xuất: Mặc định trong xám trung bình tối, hover chỉ với gạch dưới (không cần chuyển màu), trang hiện tại giống như cấp cao nhất.
Nút CTA trong navigation
Nút “Mua sắm ngay” hoặc “Đăng ký” của bạn trong navigation là khác biệt về mặt hình ảnh—nó đã là một nút có nền. Trạng thái của nó nên nhất quán với mô hình nút trên toàn trang web.
Mô hình được đề xuất: Mặc định với nền màu thương hiệu, hover nền hơi tối hơn hoặc quy mô/bóng nhẹ, focus với đường viền ngoài nút.
Hamburger mobile và mục tab bar
Navigation mobile thường sử dụng biểu tượng với nhãn. Hệ thống trạng thái nên thích ứng với mô hình hình ảnh này trong khi duy trì tính nhất quán.
Mô hình được đề xuất: Biểu tượng mặc định + nhãn trong xám tối, nhấn thay đổi nền trong một phần của một giây (trạng thái active), trang hiện tại sử dụng màu nhấn mạnh cho cả biểu tượng lẫn nhãn.
Kiểm tra hệ thống trạng thái màu sắc của bạn
Bài kiểm tra hover
Mở navigation của bạn trên desktop và di chuyển chuột từ từ qua từng mục. Bạn có thể ngay lập tức biết khi bạn đang lướt không? Bạn bao giờ nghi ngờ liệu hover của bạn đã đăng ký không? Nếu có bất kỳ sự do dự nào, trạng thái hover của bạn không đủ phân biệt.
Bài kiểm tra trang hiện tại
Điều hướng đến ba trang khác nhau trên trang web của bạn. Trên mỗi trang, hãy nhìn vào navigation trong một giây. Bạn có thể ngay lập tức biết bạn đang ở trang nào không? Nếu bạn phải nghiên cứu navigation để tìm ra, trạng thái hiện tại của bạn không đủ rõ ràng.
Bài kiểm tra bàn phím
Tháo chuột của bạn. Điều hướng toàn bộ trang web của bạn chỉ sử dụng phím Tab và Enter. Bạn có thể luôn biết mục navigation nào có focus không? Nếu bạn mất dấu nơi bạn ở, trạng thái focus của bạn cần công việc.
Bài kiểm tra nhấn mobile
Trên mobile, nhấn vào một mục navigation và quan sát cẩn thận. Bạn nhận được phản hồi hình ảnh ngay lập tức rằng nhấn của bạn đã được đăng ký? Hoặc có một khoảnh khắc nghi ngờ nơi bạn tự hỏi liệu bạn có cần nhấn lại không? Trạng thái active mobile rất quan trọng cho khả năng phản ứng cảm nhận.
Bài kiểm tra tính nhất quán
Điều hướng trên nhiều trang và nhiều phần của trang web của bạn. Các hover colors luôn hoạt động theo cùng một cách? Các chỉ báo trang hiện tại luôn sử dụng cùng một mô hình hình ảnh? Bất kỳ sự không nhất quán nào tạo ra sự nhầm lẫn.
Kiểm tra nhanhMở navigation của bạn trong Chrome DevTools, nhấp chuột phải vào một liên kết và kiểm tra CSS cho `:hover`, `:active`, `:focus`, và `.active` (hoặc bất kỳ cách nào mà chủ đề của bạn đánh dấu các trang hiện tại). Có bốn trạng thái nào được xác định không? Họ có đáp ứng các yêu cầu tương phản không? Nếu bất kỳ thiếu hoặc tương phản thấp, thêm chúng ngay bây giờ sẽ ngay lập tức cải thiện khả năng sử dụng.
Tài liệu trạng thái màu sắc bạn cần
Khi bạn đã xác định trạng thái màu sắc navigation của bạn, hãy ghi lại chúng. Điều này ngăn chặn các nhà thiết kế hoặc nhà phát triển trong tương lai từ việc phá vỡ hệ thống.
Tạo một tài liệu tham khảo đơn giản như thế này:
Trạng thái màu sắc navigation
| Trạng thái | Xử lý | Ví dụ |
|---|---|---|
| Mặc định | Văn bản #1a1a1a trên trắng | Mua sắm |
| Hover | Văn bản #ff6b35 + viền dưới 2px #ff6b35 | Mua sắm |
| Active | #e55a25 (cam tối) + viền | Mua sắm |
| Focus | Đường viền solid 2px #ff6b35, offset 2px | Mua sắm |
| Hiện tại | Trọng lượng đậm + văn bản #ff6b35 | Mua sắm |
Bao gồm mã hex, trọng lượng, kiểu viền—tất cả cần thiết để tái tạo các trạng thái một cách nhất quán.
Đối với các cửa hàng sử dụng trình tạo navigation như Navi+, bạn có thể lưu những trạng thái này dưới dạng một cài đặt và áp dụng chúng trên tất cả các thành phần navigation mà không cần viết mã thủ công từng trạng thái. Điều này khóa tính nhất quán và làm cho các bản cập nhật (như thay đổi màu thương hiệu) lan truyền tự động đến tất cả năm trạng thái trên desktop và mobile.
Dòng cuối cùng
Người dùng không thể điều hướng tự tin nếu họ không thể biết nơi họ đang chỉ, những gì họ đã nhấp, hay nơi họ hiện tại ở đâu. Trạng thái màu sắc navigation giải quyết điều này bằng cách cung cấp phản hồi nhất quán, có tương phản cao ở mọi điểm tương tác.
Xác định tất cả năm trạng thái—mặc định, hover, active, focus, hiện tại—sử dụng một cách tiếp cận hệ thống. Làm cho trạng thái hover phân biệt rõ ràng (tương phản 3:1 với mặc định). Duy trì tương phản cao với nền ở mọi trạng thái (tối thiểu 7:1+). Sử dụng cùng một mô hình hình ảnh cho các chỉ báo trang hiện tại trên toàn bộ trang web của bạn.
Kiểm tra trạng thái của bạn bằng cách thực sự sử dụng navigation của bạn: lướt, điều hướng bàn phím, chuyển trang và kiểm tra mobile. Nếu bao giờ có một khoảnh khắc nghi ngờ liệu một phần tử có tương tác hay bạn đang ở trang nào, trạng thái của bạn cần tinh chỉnh.
Tính nhất quán của trạng thái màu sắc không phải là trang trí. Đó là khả năng sử dụng cơ bản trực tiếp ảnh hưởng đến tốc độ và sự tự tin mà người dùng điều hướng cửa hàng của bạn.
Bài viết này là một phần của hướng dẫn lớn hơn về Tâm lý học màu sắc trong navigation: những màu sắc nào thúc đẩy hành động?.