Màu sắc trong thiết kế web: cách khơi gợi cảm xúc phù hợp với người dùng

2024 Tác giả: Malcolm Clapton | [email protected]. Sửa đổi lần cuối: 2023-12-17 04:15

Màu sắc quyết định phản ứng cảm xúc của người dùng đối với trang web, ngay cả khi bản thân người đó không nhận thức được điều đó. Những màu nào để sử dụng cho nền và các yếu tố khác nhau của trang web để gợi lên những cảm giác nhất định và cách kết hợp chính xác các màu trong thiết kế web, hãy đọc phần bên dưới.

Trong suốt lịch sử loài người, các họa sĩ bậc thầy đã được công nhận rộng rãi về khả năng làm việc với màu sắc. Trong thế giới hiện đại, những chuyên gia biết cách kết hợp màu sắc cho mục đích thương mại và kinh doanh - trong quảng cáo và thiết kế web - đều được công nhận như nhau.

Khả năng sử dụng màu sắc có thể được bơm vô thời hạn. Đây là một vực thẳm thực sự về khả năng ảnh hưởng đến một người.

Chúng ta sẽ trình bày những điều cơ bản về lý thuyết màu sắc và cách phối màu, sau đó chúng ta sẽ nói về tác động cảm xúc của một số màu nhất định.

Lý thuyết màu sắc

Toàn bộ cuốn sách có thể được dành cho chủ đề màu sắc, vì vậy chúng tôi sẽ không sử dụng toàn bộ mà chỉ giới hạn ở những thông tin hữu ích có thể được sử dụng khi phát triển thiết kế giao diện.

Lý thuyết màu sắc có thể được chia thành ba phần:

Sự tương phản

Mỗi bóng râm có một sự đối lập, có thể nói là "kẻ thù không đội trời chung" của nó, tạo nên sự tương phản lớn nhất với màu này. Để tìm một màu như vậy, bạn có thể sử dụng bánh xe màu. Chỉ cần chọn một màu ở phía đối diện của vòng tròn.

Thêm vào

Những màu này không phải lúc nào cũng xung đột với nhau. Các màu bổ sung nhấn mạnh lẫn nhau, trái ngược với các màu tương phản. Trong bánh xe màu, các màu này nối tiếp nhau, ví dụ như các màu bổ sung của tử đinh hương - xanh lam và hồng.

cộng hưởng

Mỗi màu sắc đều gợi lên một tâm trạng nhất định. Màu sắc ấm áp tươi sáng (đỏ, cam, vàng) tràn đầy năng lượng, đánh thức người đó, và các sắc thái tối lạnh (xanh lá cây, xanh lam, tím), ngược lại, giúp thư giãn và làm dịu.

Ví dụ: họ sử dụng thanh điều hướng màu đỏ để đánh thức người đọc và nâng cao sự kích thích của họ. Xem xét tính cụ thể của trang web - tin tức giật gân - màu đỏ có vẻ là một quyết định hợp lý.

Lý thuyết màu sắc trong thiết kế web không chỉ là trang trí. Màu sắc có thể thay đổi nhận thức về trang web của bạn và đóng một vai trò quan trọng trong hoạt động kinh doanh của bạn.

Cảm nhận về màu sắc

Không ai có thể phủ nhận sự tương tác chặt chẽ của màu sắc và cảm xúc. Và tất nhiên, bất kỳ nhà thiết kế web nào cũng muốn sử dụng ảnh hưởng này để tạo ra sự rung cảm phù hợp cho mọi trang web.

Dựa trên một số nghiên cứu - phân tích được đăng trên trang web và một bài đăng về màu sắc - chúng tôi sẽ giải thích cách màu sắc ảnh hưởng đến cảm xúc và giúp tạo ra thiết kế UX.

Điều quan trọng cần nhớ là các nền văn hóa khác nhau trên thế giới nhìn nhận màu sắc khác nhau. Chúng tôi sẽ mô tả những liên tưởng cảm xúc đặc trưng của văn hóa phương Tây.

màu đỏ

Màu sắc kích thích nhất, tích điện đến mức có thể làm tăng huyết áp. Màu đỏ tượng trưng cho niềm đam mê và quyền lực và là màu thu hút sự chú ý nhất, đó là lý do tại sao nó thường được sử dụng cho các cảnh báo và thông báo quan trọng.

Ví dụ: màu đỏ rất thích hợp cho một trang web có mục đích cảnh báo về các mối đe dọa đã nhận biết được.

Sử dụng nhiều màu đỏ ở đầu trang là rất tốt vì nó thu hút sự chú ý đến thông tin quan trọng trong thông điệp của bạn. Đồng thời, mọi người có xu hướng nhanh chóng rời khỏi "vùng nguy hiểm" màu đỏ và cuộn xuống. Và điều này, đến lượt nó, cho phép bạn hiển thị cho người dùng nhiều nội dung hơn.

Nhưng màu này cũng có thể chống lại bạn, vì nó có thể gây ra sự hung hăng hoặc quá khích. Nếu bạn muốn tạo ra một bầu không khí thư giãn hơn, hãy cố gắng sử dụng màu đỏ có chừng mực và chọn những sắc độ đỏ nhẹ hơn.

quả cam

Là tông màu trầm ấm nhất, màu cam có khả năng khơi gợi nhiều cảm xúc đa dạng. Là màu chính, nó có thể khơi dậy sự quan tâm và tiếp thêm sinh lực, và là màu phụ, nó có thể giữ lại những đặc tính này, nhưng theo cách không phô trương hơn.

Ngoài ra, màu cam giúp tạo cảm giác chuyển động và tràn đầy năng lượng. Ví dụ: nó trông tuyệt vời trên trang web phim hoạt hình của công ty, gợi ý về tuổi trẻ và sự chuyển động. Màu sắc gắn liền với sự sáng tạo, đồng thời duy trì cảm giác thương hiệu quen thuộc.

Màu vàng

Nó là một trong những màu sắc linh hoạt nhất và cảm xúc mà nó gợi lên phụ thuộc nhiều hơn vào bóng râm.

Màu vàng tươi tiếp thêm năng lượng, nhưng không có sự sắc nét và sắc nét như màu đỏ. Các sắc thái trung bình của màu vàng gợi lên cảm giác thoải mái trong khi vẫn tiếp thêm sinh lực. Các sắc thái tối (bao gồm cả vàng) mang lại cảm giác cổ kính, lấp đầy không gian bằng sự vượt thời gian, trí tuệ và sự tò mò.

Ví dụ: trên trang chủ của cơ quan thiết kế web, tông màu vàng đậm hơn thể hiện năng lượng, sự tò mò và uy quyền. Màu này rất phù hợp cho các công ty kiếm tiền từ việc tư vấn và muốn nhấn mạnh tính chuyên nghiệp của họ.

Màu xanh lá cây

Màu xanh lá cây là cầu nối giữa các sắc thái ấm và lạnh, mặc dù nó có xu hướng lạnh hơn. Điều này có nghĩa là màu xanh lá cây có tác dụng thư giãn của màu xanh lam, nhưng cũng có một chút năng lượng từ màu vàng.

Kết quả là, nó tạo ra một bầu không khí rất cân bằng và ổn định. Màu xanh lá cây đậm hơn tạo ấn tượng về sự giàu có và dồi dào, giống như trang web.

Màu xanh da trời

Cũng như màu vàng, ảnh hưởng của màu xanh lam phụ thuộc nhiều vào màu sắc. Tất cả các sắc thái của màu xanh lam đều mang tính phổ quát về sự thư giãn và an toàn, nhưng tông màu sáng đi kèm với sự thân thiện và tông màu tối mang lại sự buồn bã.

Các mạng xã hội như Twitter và Facebook sử dụng các sắc độ xanh lam từ nhẹ đến trung bình, trong khi các trang web của công ty thích các sắc thái đậm hơn thể hiện độ mạnh và độ tin cậy.

Một công ty thiết kế sự kiện là một ví dụ tuyệt vời. Sử dụng hoa màu xanh lam làm nền, họ gợi ý trực quan về kiến thức và kỹ năng trồng hoa của họ, đồng thời cũng tạo ra cảm giác đáng tin cậy và đáng tin cậy.

Điều này rất quan trọng vì chúng làm việc với các sự kiện mà hình ảnh rất quan trọng, chẳng hạn như đám cưới.

Màu tía

Màu tím trong lịch sử gắn liền với sự hùng vĩ của hoàng gia, gợi ý đến sự sang trọng. Các sắc thái của màu tím phản ánh sự hào phóng và giàu có nói chung, khiến chúng trở thành một lựa chọn tuyệt vời cho hàng thời trang và hàng xa xỉ (thậm chí cả sô cô la cũng giống như lựa chọn màu sắc của thương hiệu).

Các sắc thái nhẹ hơn như hoa oải hương (màu tím pha chút hồng) gợi lên ý nghĩ về sự lãng mạn, trong khi các sắc thái đậm hơn có vẻ sang trọng và bí ẩn hơn.

Màu đen

Màu mạnh nhất trong số các màu trung tính, màu đen, xuất hiện trên hầu hết các trang web. Nó có thể gợi lên những liên tưởng khác nhau tùy thuộc vào màu sắc đi kèm hoặc lấn át chúng nếu được sử dụng quá mức.

Sức mạnh và tính trung lập của màu đen khiến nó trở thành một lựa chọn tuyệt vời cho các khối văn bản lớn, nhưng với tư cách là màu chính, nó có thể tạo ra cảm giác lo lắng hoặc thậm chí liên quan đến ma quỷ.

Đối với hầu hết các trang web, màu đen được sử dụng để tạo cảm giác tinh tế. Sự kết hợp giữa đen và trắng trong một thiết kế tối giản tạo ấn tượng về sự sang trọng và phong cách, giống như trên trang web của BOSE.

trắng

Trong văn hóa phương Tây, màu trắng gắn liền với sự thuần khiết, tốt bụng và ngây thơ. Màu này thường được sử dụng cho nền của các trang web tối giản và đơn giản.

Ngoài ra, không một màu duy nhất nào cho phép bạn chú ý nhiều đến các màu khác như màu trắng. Ví dụ, đối với người chiến thắng giải Awwwards, Kloin Toshev, tất cả các tác phẩm của anh ấy được đặt trên nền trắng, điều này chỉ làm cho các hình minh họa trở nên nổi bật và tạo ấn tượng về một phòng trưng bày trang nhã.

Màu xám

Mặc dù thực tế là trong một số tình huống, màu xám có thể tạo ra bầu không khí u ám và buồn bã, nó vẫn thường được các nhà thiết kế chuyên nghiệp sử dụng.

Đó là tất cả về các sắc thái: bằng cách xen kẽ chúng, bạn có thể có được tất cả các cảm xúc gây ra bởi cả màu đen và trắng. Nhìn chung, màu xám là một công cụ đắc lực trong tay phải.

Và kết hợp với màu sắc tươi sáng hơn trong thiết kế, ví dụ như nền màu xám có vẻ hiện đại và không u ám.

Be

Màu be bản thân nó khá buồn tẻ và không nổi bật, nhưng nó có một đặc tính đáng chú ý: màu be mang đặc điểm của những bông hoa bao quanh nó. Do đó, nếu không nhằm mục đích thể hiện sự kiềm chế, màu be đóng vai trò là màu nền hoặc màu thứ hai.

Màu be đậm hơn tạo cảm giác truyền thống và đất, cho cảm giác giống như giấy, trong khi các màu nhạt hơn có vẻ tươi tắn và hiện đại hơn.

Ví dụ: trên trang web của nhà hàng, màu be nhạt xung quanh tên và các cạnh tối hơn tạo ấn tượng rằng nhà hàng là một điểm mới về ẩm thực truyền thống.

Ngà voi

Màu trắng ngà cũng như màu kem gợi lên những cảm xúc gần giống như màu trắng. Tuy nhiên, ngà voi ấm hơn (hoặc ít vô trùng hơn) so với màu trắng, tạo cảm giác thoải mái hơn trong khi vẫn duy trì sự tối giản.

Bạn có thể sử dụng màu trắng ngà thay vì màu trắng để làm dịu sự tương phản giữa nó và các màu tối hơn. Ví dụ: trên trang web, các yếu tố màu cam nâu được đặt trên nền màu ngà (trông hơi xám) để duy trì cảm giác ấm áp.

Quang phổ màu

Mỗi trang web có một bảng màu sử dụng các màu chính để lấp đầy không gian hơn. Như chúng tôi đã nói trước đó, việc sử dụng những màu này ảnh hưởng đến tâm trí và tâm trạng của một người chủ yếu là tiềm thức. Vì vậy, hãy chọn chúng một cách cẩn thận.

Trong khi có nhiều cách để kết hợp màu sắc, chúng tôi sẽ tập trung vào ba trong số những cách thành công và được sử dụng phổ biến nhất.

Bộ ba (tam hợp, tam giác)

Bộ ba là hệ thống ba màu cơ bản và cân bằng nhất. Nó sử dụng sự cộng hưởng và bổ sung màu sắc, nhưng không có độ tương phản phức tạp, điều này làm cho bộ ba trở thành gam màu đáng tin cậy nhất.

Trên bánh xe 12 màu, chọn ba màu bất kỳ cách nhau 120 độ: một cho nền trước và hai cho nội dung và thanh điều hướng.

Hệ thống bổ sung kép

Phạm vi này khó thực hiện hơn, nhưng nó có thể là một giải pháp có lợi. Bốn màu được sử dụng: hai màu tương phản và hai màu bổ sung.

Kiểm tra trang Florida Flourish tuyệt vời trông như thế nào dựa trên bố cục này. Màu đỏ và xanh lá cây tương phản trong cây cối và khối văn bản, trong khi nền xanh lam và sa mạc màu cam bổ sung cho bức tranh một cách hiệu quả.

Tương tự (hệ thống nối tiếp)

Phạm vi các màu tương tự chủ yếu sử dụng các sắc thái bổ sung. Điều này cho phép bạn đặc biệt nhấn mạnh rõ ràng một số phẩm chất và gợi lên những cảm xúc nhất định.

Ví dụ, sự kết hợp của các màu đỏ, cam và vàng nhấn mạnh năng lượng và sức sống. Rất đơn giản để sử dụng các thang đo như vậy, nhưng rất khó để chọn màu nào sẽ được đưa vào kết hợp. Hiệu ứng của chúng sẽ được phóng đại, vì vậy bạn không thể sai.

Ví dụ, việc sử dụng các màu xanh lam, xanh ngọc và xanh lá cây trong thiết kế trang web đã tạo ra một bầu không khí yên bình và thanh thản. Lưu ý rằng màu vàng đã được sử dụng như thế nào để làm nổi bật những điểm quan trọng.

Đây chỉ là những kiến thức cơ bản về lý thuyết màu sắc có thể giúp bạn tạo ra các thiết kế tùy chỉnh ấn tượng và không có giới hạn về mức độ bạn có thể tiến xa về màu sắc trên trang web của mình.

Công cụ hỗ trợ công cụ chọn màu

May mắn thay, có một số công cụ có sẵn để giúp bạn áp dụng lý thuyết màu sắc vào thực tế. Hãy thử các bảng màu này để bạn không phải bắt đầu từ đầu để tạo bảng màu của riêng mình:

1. trước đây được gọi là Adobe Kuler. Nó là một trong những công cụ chọn màu đáng tin cậy nhất.
2. … Nếu bạn muốn một công cụ đơn giản để chọn màu càng nhanh càng tốt, thì Paletton là một lựa chọn tuyệt vời.
3. … Một công cụ tuyệt vời để chọn màu sắc của giao diện người dùng.

Và nếu những công cụ này không phù hợp với bạn, thì đây là những công cụ chọn màu khác nhau.

Mối quan hệ trực tiếp giữa màu sắc và cảm xúc

Hãy nhớ rằng: người dùng hiếm khi để ý và đánh giá cao màu sắc của nền, thanh điều hướng, các chi tiết riêng lẻ, nhưng điều này không có nghĩa là màu đó không ảnh hưởng đến họ. Nó chỉ xảy ra trong tiềm thức.

Người dùng có một số cảm xúc, phát triển thái độ đối với trang web hoặc thương hiệu, anh ta thực hiện các hành động nhất định: cuộn xuống, nhấp vào các nút gây ra hành động, hoặc ngược lại, không nhận thấy chúng. Và màu sắc đóng một vai trò rất lớn trong tất cả những điều này.

Nếu bạn có bất kỳ mẹo nào để sử dụng màu sắc trong thiết kế web, hãy chia sẻ trong phần bình luận.