Color Theory for Non-Designers: A Practical Guide — pic0.ai

Sai lầm 50.000 USD đã thay đổi cách tôi suy nghĩ về màu sắc

Tôi vẫn nhớ ngày mà công ty khởi nghiệp của chúng tôi mất một khách hàng lớn vì một sự chọn lựa màu sắc. Đó là năm 2016, và tôi đang dẫn dắt thiết kế sản phẩm tại một công ty fintech ở San Francisco. Chúng tôi đã dành ba tháng để xây dựng một bảng điều khiển đẹp cho một nhà cung cấp dịch vụ chăm sóc sức khỏe, và mọi thứ đều hoàn hảo—trừ việc chúng tôi đã sử dụng màu đỏ tươi cho các nút hành động chính của họ. Khách hàng chỉ nhìn thoáng qua và nói: "Chúng tôi không thể sử dụng cái này. Màu đỏ có nghĩa là nguy hiểm trong chăm sóc sức khỏe. Các y tá của chúng tôi sẽ nghĩ rằng có điều gì đó sai sót mỗi khi họ cần lưu một hồ sơ bệnh nhân."

Sự sơ suất đơn lẻ đó đã khiến chúng tôi mất 50.000 USD doanh thu và dạy cho tôi bài học quý giá nhất trong 12 năm sự nghiệp thiết kế sản phẩm của tôi: màu sắc không chỉ là trang trí. Nó là giao tiếp, tâm lý học và chiến lược kinh doanh gói gọn trong một. Tôi là Marcus Chen, và tôi đã dành hơn một thập kỷ để giúp các nhà sáng lập không kỹ thuật, các quản lý sản phẩm và các nhóm giai đoạn đầu đưa ra quyết định tốt hơn về màu sắc mà không cần bằng cấp thiết kế. Hôm nay, tôi sẽ chia sẻ tất cả những gì tôi ước tôi đã biết vào thời điểm đó.

Dưới đây là những gì đa số mọi người hiểu lầm về màu sắc: họ nghĩ rằng nó là chủ quan, rằng nó chỉ liên quan đến sở thích cá nhân hoặc tài năng nghệ thuật. Nhưng sau khi làm việc với hơn 200 công ty và phân tích hàng nghìn giao diện người dùng, tôi có thể khẳng định rằng màu sắc tuân theo các mô hình. Có những quy tắc—không phải cứng nhắc, nhưng là những khuôn khổ hoạt động nhất quán trên các ngành công nghiệp, văn hóa và bối cảnh. Và phần tốt nhất? Bạn không cần phải là một nhà thiết kế để sử dụng chúng hiệu quả.

Hướng dẫn này được dành riêng cho bạn—nhà sáng lập đang xây dựng sản phẩm đầu tiên, quản lý sản phẩm đang cố gắng giao tiếp với các nhà thiết kế, lập trình viên cần đưa ra các quyết định giao diện người dùng nhanh chóng, hoặc nhà tiếp thị đang tạo các trang đích. Đến cuối bài viết này, bạn sẽ không chỉ hiểu được nên sử dụng màu gì, mà còn biết vì sao chúng hoạt động và cách áp dụng chúng một cách có hệ thống. Hãy bắt đầu với nền tảng đã thay đổi mọi thứ đối với tôi.

Quy tắc 60-30-10: Mạng lưới an toàn màu sắc của bạn

Sau thảm họa chăm sóc sức khỏe đó, tôi trở nên ám ảnh với việc tìm một hệ thống chọn màu không thể sai lầm. Tôi đã nghiên cứu thiết kế nội thất, thời trang và nghệ thuật truyền thống, và tôi cứ thấy nguyên tắc giống nhau mọi nơi: quy tắc 60-30-10. Tỷ lệ đơn giản này đã cứu tôi trong nhiều lần, và đó là điều đầu tiên tôi dạy bất kỳ ai hỏi về màu sắc.

Màu sắc không chỉ là trang trí—nó là giao tiếp, tâm lý học và chiến lược kinh doanh gói gọn trong một. Sự khác biệt giữa một trang đích có tỷ lệ chuyển đổi và một trang dễ bị thoát thường phụ thuộc vào việc lựa chọn màu sắc của bạn có phù hợp với mong đợi của người dùng và bối cảnh văn hóa hay không.

Dưới đây là cách nó hoạt động: trong bất kỳ thiết kế nào, 60% nên là màu sắc chính của bạn (thường là trung tính), 30% nên là màu sắc thứ cấp của bạn (hỗ trợ cho màu chính), và 10% nên là màu sắc nhấn mạnh của bạn (điểm nhấn thu hút sự chú ý). Hãy nghĩ về nó như một người ăn mặc đẹp: 60% là bộ vest, 30% là áo sơ mi, và 10% là cà vạt hoặc phụ kiện. Tỷ lệ này tạo ra sự cân bằng thị giác tự động, ngay cả khi bạn không chắc chắn về sự lựa chọn màu sắc của mình.

Để tôi đưa ra một ví dụ cụ thể từ một dự án mà tôi làm năm ngoái. Chúng tôi đang thiết kế một ứng dụng năng suất cho các nhóm làm việc từ xa. 60% của chúng tôi là một màu xám xanh nhẹ (#F5F7FA) bao phủ nền chính và các khu vực nội dung lớn. 30% của chúng tôi là một màu xanh đậm hơn (#2C3E50) được sử dụng cho các thanh bên, tiêu đề và các yếu tố thứ cấp. 10% của chúng tôi là màu cam rực rỡ (#FF6B35) được dành độc quyền cho các hành động chính như "Tạo nhiệm vụ" hoặc "Gửi tin nhắn." Kết quả? Người dùng hoàn thành nhiều hành động hơn 34% trong phiên đầu tiên của họ so với thiết kế trước đó của chúng tôi, điều mà đã sử dụng màu sắc một cách ngẫu nhiên hơn.

Điểm đẹp của quy tắc này là nó hoạt động bất kể bạn chọn màu sắc cụ thể nào. Bạn có thể sử dụng màu be, nâu và vàng. Bạn có thể sử dụng màu trắng, xanh navy và san hô. Tỷ lệ này tạo ra sự hài hoà. Nhưng đây là phần quan trọng mà hầu hết mọi người bỏ qua: màu sắc nhấn mạnh 10% của bạn đang đảm nhiệm công việc nặng. Đây là nơi mà mắt người dùng nhìn vào đầu tiên, vì vậy nó cần được dành cho các yếu tố quan trọng nhất của bạn. Tôi đã thấy các nhóm lãng phí màu sắc nhấn mạnh của họ vào các yếu tố trang trí hoặc sử dụng nó quá thoải mái, và điều đó luôn làm giảm sức mạnh của nó.

Khi tôi tư vấn cho các nhóm, tôi thường thấy họ đang sử dụng màu nhấn mạnh của mình trên 30-40% giao diện của họ. Điều đó không còn là màu nhấn mạnh nữa—đó là tiếng ồn thị giác. Tôi đã làm việc với một công ty khởi nghiệp thương mại điện tử đang sử dụng màu đỏ sáng trên logo, điều hướng, nút, nhãn giảm giá và thông báo lỗi của họ. Người dùng cảm thấy choáng ngợp và không thể xác định nơi để nhấp. Chúng tôi đã hạn chế màu đỏ chỉ vào nút "Thêm vào giỏ hàng" và nhãn giảm giá (sử dụng đúng 10%), và tỷ lệ chuyển đổi của họ đã tăng 23% trong vòng hai tuần. Quy tắc 60-30-10 không chỉ mang tính thẩm mỹ—nó còn có tính chức năng.

Hiểu biết về Nhiệt độ màu: Người tạo cảm xúc vô hình

Một trong những khái niệm mạnh mẽ nhất mà tôi học được từ việc làm việc với một nhà tâm lý học màu sắc vào năm 2018 là nhiệt độ. Mỗi màu sắc đều có nhiệt độ, và nhiệt độ đó ảnh hưởng đến cảm giác của con người khi họ tương tác với sản phẩm của bạn. Điều này không phải là huyền bí—nó gắn liền với tiến hóa của con người và sự định hình văn hóa. Màu sắc ấm (đỏ, cam, vàng) liên quan đến lửa, mặt trời, và năng lượng. Màu sắc lạnh (xanh, xanh lá cây, tím) liên quan đến nước, bầu trời và sự bình tĩnh.

Tôi đã thực hiện một thí nghiệm với hai phiên bản của cùng một trang đích cho một ứng dụng thiền. Phiên bản A sử dụng màu ấm: nền màu đào, điểm nhấn màu vàng, và văn bản màu xám ấm. Phiên bản B sử dụng màu lạnh: màu xanh nhạt, màu xanh bạc hà, và văn bản màu xám lạnh. Phiên bản B đã tốt hơn 41% so với phiên bản A về số lượng đăng ký. Tại sao? Bởi vì mọi người mong đợi thiền mang lại cảm giác mát mẻ và thư giãn. Phiên bản ấm tạo ra sự không nhất quán—nó trông năng động khi người dùng muốn thư giãn.

Nhưng đây là nơi trở nên thú vị: nhiệt độ không phải là tuyệt đối. Có một màu xanh ấm (hãy nghĩ đến màu xanh hoàng gia với sắc đỏ), và có một màu đỏ lạnh (hãy nghĩ đến màu đỏ thẫm với sắc xanh). Đó là lý do tại sao việc mua sơn trở nên khó hiểu—bạn nghĩ rằng bạn đang mua "trắng," nhưng có hàng trăm loại trắng, mỗi loại có các sắc nhiệt độ khác nhau. Trong thiết kế kỹ thuật số, điều này cực kỳ quan trọng. Tôi đã thấy các nhóm chọn một màu xanh mà cảm giác hơi ấm khi họ cần màu lạnh, và điều đó làm lệch tất cả giao diện.

Đây là khuôn khổ thực tiễn của tôi: nếu sản phẩm của bạn liên quan đến năng lượng, sự hồi hộp, sự khẩn trương hoặc sự thèm ăn (hãy nghĩ đến các ứng dụng thể dục, giao đồ ăn, hoặc nền tảng bán hàng), hãy nghiêng về màu ấm. Nếu sản phẩm của bạn liên quan đến sự tin cậy, sự bình tĩnh, tính chuyên nghiệp, hoặc sự tập trung (hãy nghĩ đến ngân hàng, chăm sóc sức khỏe, hoặc công cụ năng suất), hãy nghiêng về màu lạnh. Và nếu bạn ở giữa? Hãy sử dụng nhiệt độ một cách chiến lược trong bảng màu của bạn. Ví dụ, một công cụ quản lý dự án có thể sử dụng màu xanh lạnh cho giao diện chính (tập trung và bình tĩnh) nhưng màu cam ấm cho thông báo và thời hạn (khẩn trương và chú ý).

Tôi đã làm việc với một công ty tư vấn tài chính đang sử dụng một màu be vàng ấm trên toàn bộ cổng thông tin khách hàng của họ. Họ không thể hiểu vì sao khách hàng có vẻ chần chừ khi tương tác với nền tảng. Chúng tôi đã chuyển sang một màu xám lạnh, hơi nhạt xanh, và điểm số hài lòng của khách hàng đã tăng 28% trong quý tiếp theo. Chỉ sự thay đổi nhiệt độ cũng đã khiến nền tảng cảm thấy đáng tin cậy và chuyên nghiệp hơn. Nhiệt độ là điều tinh tế, nhưng nó là một trong những công cụ mạnh mẽ nhất trong arsenal màu sắc của bạn.

Đối lập: Đòi hỏi về khả năng tiếp cận mà bạn không thể bỏ qua

Năm 2019, tôi được thuê để kiểm tra một nền tảng SaaS lớn đang phải đối mặt với khả năng bị kiện về khả năng tiếp cận. Họ có những màu sắc đẹp—tinh tế, nhẹ nhàng, rất "theo thương hiệu"—nhưng văn bản của họ gần như không thể đọc được. Văn bản màu xám nhạt trên nền trắng. Liên kết màu xanh nhạt trên nền xanh nhạt. Họ đang vi phạm WCAG (Khả năng truy cập nội dung web).