Rate this post

Màu sắc là một trong những công cụ mạnh mẽ nhất để giao tiếp bằng hình ảnh. Nó có thể ảnh hưởng đến cảm xúc, tâm trạng và hành vi của chúng ta. Đó là lý do tại sao điều quan trọng đối với các nhà thiết kế sản phẩm là phải lựa chọn màu sắc cẩn thận.

Trong bài viết này, chúng ta sẽ khám phá những kiến thức cơ bản về lý thuyết màu sắc dành cho các nhà thiết kế và cung cấp thông tin để giúp bạn thiết kế các cách phối màu hiệu quả và thú vị về mặt thị giác.

Tóm tắt nội dung

Lý thuyết màu sắc là gì?

Màu sắc là một phần thiết yếu của sự tương tác giữa con người và máy tính, và tương tự như các yếu tố khác như kiểu chữ, các nhà thiết kế nên lựa chọn màu sắc một cách cẩn thận. Phối màu là một thuật ngữ mà các nhà thiết kế sử dụng để mô tả sự kết hợp màu sắc mà họ sử dụng trong thiết kế GUI. Vì có vô số sự kết hợp màu sắc ngoài kia, nên thật khó để quyết định cách phối màu nào phù hợp nhất cho sản phẩm của bạn. May mắn thay, chúng ta có lý thuyết về màu sắc, một môn học giúp chúng ta lựa chọn các kết hợp màu cân bằng và hiệu quả.

Dưới đây là một số đề xuất thực tế từ lý thuyết màu sắc sẽ giúp bạn chọn các kết hợp màu sắc mạnh mẽ cho hệ thống thiết kế của mình.

Giới hạn tổng số màu

Đạt được sự hài hòa trong kết hợp màu sắc là một trong những nguyên tắc chính của lý thuyết màu sắc. Khi bạn tạo một lược đồ mới, bạn có thể muốn thêm hàng tá màu vào đó. Nhưng tốt hơn hết là bạn nên tránh sự cám dỗ đó. Tại sao? Vì bạn thực sự khó đạt được sự cân bằng về thị giác khi sử dụng quá nhiều màu sắc. Bạn cũng có thể dễ dàng áp đảo người dùng của mình.

Vì vậy, làm thế nào để bạn tránh điều này? Giữ cho bảng màu của bạn đơn giản, với tối đa hai hoặc ba màu. Một số nhà thiết kế nghĩ rằng hai hoặc ba màu sẽ hạn chế khả năng sáng tạo của họ, nhưng điều đó không đúng. Có thể tạo ra các kết hợp hình ảnh thú vị bằng cách chơi với các sắc thái của những màu đó. Các chương trình đơn giản cũng hoạt động tốt nhất cho người dùng của bạn.

Ví dụ về một bảng màu được tạo chỉ với một màu đỏ.

Sử dụng bánh xe màu để chọn màu

Bước tiếp theo là hiểu cách chọn màu sắc thực tế. Các nhà thiết kế thường dựa vào bánh xe màu để giải quyết vấn đề này. Bánh xe màu bao gồm các màu cơ bản (đỏ, vàng, xanh lam), các màu thứ cấp (hỗn hợp các màu cơ bản; cam, xanh lục và tím) và các màu cấp ba (các màu được tạo ra bằng cách trộn các phần bằng nhau của một màu chính và một màu phụ; citron, russet, buff).

Mâm xe 12 chấu màu sắc.

Dưới đây là ba kiểu phối màu phổ biến mà bạn có thể tạo bằng bánh xe màu:

Đơn sắc. Các lược đồ đơn sắc sử dụng một màu duy nhất, nhưng với các biến thể của sắc thái, sắc thái và tông màu của màu. Đề án này rất dễ nhìn; vì các màu sắc kết hợp với nhau một cách tự nhiên, chúng tạo ra hiệu ứng nhẹ nhàng.

Ví dụ về cách phối màu đơn sắc.

Tương tự. Các cách phối màu tương tự sử dụng một số màu có liên quan — một màu là màu chủ đạo, trong khi các màu khác hỗ trợ nó. Màu sắc hỗ trợ làm phong phú thêm sơ đồ và làm cho nó hấp dẫn hơn về mặt thị giác.

Ví dụ về sơ đồ tương tự được tạo từ ba màu gần nhau trên bánh xe màu.

Bổ túc. Ở dạng cơ bản nhất, các sơ đồ bổ sung chỉ bao gồm hai màu tương phản (ví dụ: màu xanh lá cây chủ đạo và màu đỏ nhấn). Đề án này hoạt động tốt nếu bạn muốn thu hút sự chú ý.

Ví dụ về phối màu bổ sung.

Adobe Color là một công cụ tuyệt vời để tạo các lược đồ màu, vì nó cho phép bạn tự do sửa đổi các lược đồ hiện có. Mỗi màu trên bảng màu có thể được sửa đổi riêng lẻ với một vài cú nhấp chuột đơn giản.

Ví dụ về cách tạo một lược đồ đơn sắc bằng Adobe Color. Tín dụng hình ảnh Adobe Color.

Hiểu tâm lý của màu sắc

Tập trung vào các khía cạnh tâm lý của màu sắc là một phần thiết yếu của việc hiểu lý thuyết màu sắc. Khi bạn chọn bảng màu UX cho sản phẩm của mình, bạn thường sẽ nghĩ về cách mọi thứ sẽ trông như thế nào, nhưng điều quan trọng không kém là nghĩ về cảm giác của chúng. Màu sắc có ảnh hưởng tâm lý mạnh mẽ đến não bộ con người, với mỗi màu sắc đại diện cho những ý nghĩa và cảm xúc khác nhau cho người dùng của bạn.

Mặc dù không có ý nghĩa nào được chấp nhận rộng rãi, nhưng đây là một số cảm giác chung mà màu sắc gợi lên cho hầu hết mọi người:

Màu đỏ: nguy hiểm, quan trọng, tình yêu. Màu đỏ được gọi là màu của năng lượng — chỉ cần nhìn vào nó có thể làm tăng mạch, nhịp tim và sự trao đổi chất của một người. Đây là một màu sắc tuyệt vời để thu hút sự chú ý của khách truy cập; hãy thử sử dụng nó để làm nổi bật các yếu tố quan trọng nhất trên trang của bạn.
Màu cam: năng lượng, lạc quan, vui vẻ. Màu cam có một sự rung cảm tích cực về năng lượng. Nó cũng liên kết với các sản phẩm rẻ tiền, làm cho nó trở thành một màu sắc phù hợp cho các cửa hàng thương mại điện tử nếu bạn muốn làm nổi bật mức giá tốt nhất.
Màu vàng: hạnh phúc, sự quan tâm, ấm áp. Màu vàng biểu thị tính cách nhiều nắng; khi kết hợp với màu đen, nó sẽ nhanh chóng chỉ huy sự chú ý. (Hãy nghĩ về những chiếc taxi màu vàng ở NYC chẳng hạn.)
Màu xanh lá cây: tăng trưởng, thành công, thiên nhiên. Màu xanh lá cây là điều tuyệt vời cho những sản phẩm gần gũi với thiên nhiên. Nó cũng là một màu phổ biến để sử dụng trí thông minh giao diện người dùng, cho người dùng tín hiệu rằng một thao tác đã hoàn tất thành công.
Màu xanh lam: sự tin tưởng, thoải mái, bình tĩnh. Màu xanh dương tượng trưng cho sự thư thái và thoải mái. Các thương hiệu yêu thích màu sắc này vì nó tạo cho khách hàng ấn tượng về sự an toàn bên trong.
Màu tím: sang trọng, sáng tạo, thông thái. Màu tím thường được liên kết với hoàng gia cũng như các sản phẩm xa xỉ.
Màu đen: quyền lực, tinh tế, bí ẩn. Hầu hết các thương hiệu giới hạn màu đen cho văn bản và điểm nhấn. Là màu chính, màu đen có thể nổi bật trên các trang web thời trang để truyền tải cảm giác sang trọng.
Màu trắng: sạch sẽ, khỏe mạnh, ngây thơ. Màu trắng thường khiến chúng ta liên tưởng đến sức khỏe và sự sạch sẽ. Các nhà thiết kế thường chọn màu này để gợi ý về độ an toàn của sản phẩm, đặc biệt là đối với thiết bị y tế và các sản phẩm công nghệ cao.

Giới tính và màu sắc

Giới tính có ảnh hưởng đến sở thích về màu sắc không? Trong một nghiên cứu, nhà nghiên cứu Joe Hallock đã tìm thấy một số khác biệt lớn.

Kết quả nghiên cứu về màu sắc yêu thích nhất và ít nhất của nam giới và phụ nữ.

Dưới đây là tóm tắt nhanh về nghiên cứu:

Màu xanh là màu phổ biến nhất cho cả nam và nữ.
Mặc dù được nhiều người tin tưởng, màu hồng không phải là màu yêu thích của phụ nữ.
Màu cam, nâu và vàng là những màu không được ưa chuộng nhất đối với cả nam và nữ.
Nam giới thường thích những gam màu sáng, tương phản, trong khi phụ nữ thích những gam màu nhẹ nhàng hơn.

Tuổi và màu sắc

Tuổi tác cũng đóng một vai trò trong sở thích về màu sắc. Faber Birren, tác giả của Tâm lý học Màu sắc và Liệu pháp Màu sắc, phát hiện ra rằng những người trẻ tuổi có xu hướng thích những màu có bước sóng dài hơn (chẳng hạn như đỏ và cam), trong khi những người lớn tuổi thích những màu có bước sóng ngắn hơn (chẳng hạn như xanh lam). Nghiên cứu tương tự của Joe Hallock về giới tính và sở thích màu sắc đã xác nhận những phát hiện của Birren, nhưng cũng cho thấy rằng nhiều nhóm tuổi thích màu tím hơn.

Biểu đồ các màu yêu thích theo nhóm tuổi; các nghiên cứu phát hiện ra rằng những người trẻ tuổi có xu hướng thích những màu có bước sóng dài hơn (chẳng hạn như đỏ và cam), trong khi những người lớn tuổi thích những màu có bước sóng ngắn hơn (chẳng hạn như xanh lam).

Mẹo thực tế để sử dụng màu sắc

Bây giờ chúng ta đã biết lý thuyết màu sắc là gì, đã đến lúc khám phá một số mẹo thực tế để sử dụng màu sắc trong thiết kế giao diện người dùng.

Sử dụng mood board để tìm màu sắc phù hợp

Mood board là bộ sưu tập của cảm hứng thị giác. mood board có thể rất hữu ích để lựa chọn hầu hết mọi quyết định thiết kế trực quan, bao gồm cả màu sắc. Nếu bạn tìm thấy một hình ảnh hoặc bức ảnh ưng ý, bạn có thể sử dụng một công cụ như Coolors để tạo bảng phối màu ngay từ nó.

Ví dụ về một mood board.

Tạo điểm nhấn bằng cách sử dụng màu sắc

Khả năng quét tốt là điều cần thiết cho thiết kế web. Khách truy cập sẽ có thể tìm thấy thông tin họ cần trong nháy mắt. Màu sắc bạn sử dụng có thể hỗ trợ điều này, vì chúng có thể giúp hướng mắt người dùng. Ví dụ: bạn có thể sử dụng màu tương phản cho nút kêu gọi hành động để tạo cho nó nhiều hình ảnh hơn và do đó, làm cho nó nổi bật hơn.

Chúng ta càng muốn thứ gì đó nổi bật, chúng ta càng nên dựa vào độ tương phản màu sắc để đạt được mục tiêu này. Ví dụ: Mailchimp sử dụng các màu tương phản để hướng sự chú ý vào nút kêu gọi hành động.

Quyết định thời điểm và cách sử dụng màu sắc rực rỡ và dịu nhẹ

Hầu hết các màu sẽ thuộc một trong hai loại: rực rỡ hoặc dịu nhẹ. Tùy thuộc vào bản chất của dự án của bạn, bạn có thể dựa nhiều hơn vào nhóm thứ nhất hoặc thứ hai.

Màu sắc rực rỡ là màu nổi bật trên nền và xung với năng lượng. Những màu này rất tốt để tạo ra một sự rung cảm tràn đầy năng lượng và là một lựa chọn tốt cho các công ty muốn thể hiện mình theo phong cách phi truyền thống.

Một trang chủ sôi động, có màu hồng và xanh lam, tạo ra một bầu không khí tràn đầy năng lượng.

Mặt khác, màu sắc nhẹ nhàng hòa hợp với thiết kế và giúp truyền tải cảm giác yên bình giúp người dùng cảm thấy thoải mái.

Các trang bộ sưu tập sản phẩm sử dụng cách phối màu pastel nhẹ nhàng và màu đất.

Cuối cùng, bạn nên lựa chọn màu sắc dựa trên những gì bạn muốn khách hàng cảm nhận khi họ tương tác với sản phẩm của bạn.

Đừng quên về khả năng tiếp cận

Thiết kế không chỉ là về thẩm mỹ; nó cũng là về chức năng và khả năng sử dụng. Khi thiết kế giao diện người dùng, giao diện người dùng phải được tiếp cận với những người có khả năng khác nhau. Một thách thức đặc biệt mà các nhà thiết kế phải đối mặt khi họ làm việc với màu sắc là xem xét cách những người bị mù màu hoặc suy giảm thị lực màu (CVD) sẽ tương tác với sản phẩm.

Các bánh xe màu này cho biết màu sắc trông như thế nào đối với những người có thị lực bình thường (ngoài cùng bên trái) và màu sắc giống với những người bị thiếu màu xanh lục đỏ (giữa và phải). Hình ảnh phỏng theo Sakurambo.

Dưới đây là hai điều cần nhớ khi thiết kế với màu sắc:

Đừng bao giờ chỉ sử dụng màu sắc để truyền đạt ý nghĩa. Sử dụng nhiều dấu hiệu trực quan để truyền đạt các trạng thái thiết yếu trong sản phẩm của bạn. Ví dụ: khi bạn hiển thị thông báo lỗi, không sử dụng màu đỏ dọc theo văn bản cho biết “Các trường bắt buộc có màu đỏ.” Thay vào đó, hãy thêm một dấu hiệu hiển thị (chẳng hạn như dấu hoa thị) và nói, “Các trường bắt buộc có màu đỏ và được đánh dấu bằng dấu *.”

Một số người dùng khiếm thị không thể nhìn thấy các ký tự màu đỏ hoặc xanh lục, vì vậy hãy tránh chỉ sử dụng những màu này để truyền tải thông tin.

Tránh văn bản có độ tương phản thấp. Đặt hai màu có độ tương phản có giá trị thấp cạnh nhau có thể khiến bản sao của bạn rất khó đọc. Nguyên tắc hỗ trợ tiếp cận nội dung web (WCAG) khuyến nghị rằng tỷ lệ tương phản giữa nền và văn bản ít nhất là 4,5: 1. Hãy ghi nhớ điều này khi bạn thiết kế văn bản cũng như các yếu tố chức năng, chẳng hạn như các nút.

Văn bản có độ tương phản thấp có thể khó đọc, dẫn đến trải nghiệm người dùng kém.

Khi nói đến các công cụ trợ năng, chúng tôi khuyên bạn nên sử dụng Trình kiểm tra độ tương phản màu và trình mô phỏng tầm nhìn NoCoffee dành cho Chrome. Công cụ đầu tiên sẽ giúp bạn kiểm tra sự kết hợp màu sắc của mình theo hướng dẫn của WCAG, trong khi công cụ thứ hai cho phép bạn tự trải nghiệm chứng mù màu trong khi thiết kế.

Việc sử dụng một công cụ như NoCoffee cho bạn thấy cách người dùng có protanopia — những người không thể phân biệt màu đỏ và xanh lá cây — xem các trang web khác nhau như thế nào.

Phần kết luận

Màu sắc chỉ là một trong những công cụ mà các nhà thiết kế thích sử dụng. Đồng thời, đây là một trong những công cụ có thể khó thành thạo. Các quy tắc được đề cập ở trên sẽ tạo nền tảng tốt cho các nhà thiết kế trực quan, nhưng cách duy nhất để cải thiện là thành thạo kỹ năng tạo ra sự kết hợp màu sắc tuyệt vời. Tập luyện giúp hoàn hảo hơn.

User experience

Màu sắc trong thiết kế website