Blog

Giới thiệu về lý thuyết về cách phân phối bảng màu dành cho các nhà thiết kế

Home / Blog / Giới thiệu về lý thuyết về cách phân phối bảng màu dành cho các nhà thiết kế

1 year ago Comment!

Hôm nay, chúng ta sẽ học về tầm quan trọng của bảng màu trong thiết kế web và cách nào để lựa chọn màu sắc dễ chịu nhất. Bài viết này là một phần trong một loại cơ bản của chúng tôi, nhằm cung cấp lời giải thích thực tế và ngắn gọn về các nguyên tắc thiết kế cho những người có ít kinh nghiệm về thiết kế. Chúng ta hãy bắt đầu .

Đối tượng hướng đến của bài này là những ai :

Bài viết này được viết cho những người mới bắt đầu tìm hiểu các nguyên tắc về thiết kế, không có nghĩa là phải nghiên cứu toàn diện làm thể nào để áp dụng các màu sắc trong thiết kế, nhưng đúng hơn, đó là một cái nhìn tổng quan cho những người muốn tìm những hướng dẫn thiết thực sẽ giúp cho họ tiếp cận về lý thuyết bảng màu trong bối cảnh của một dự án thiết kế web.

Tôi viết bài này vì tội luôn tìm thấy khó khăn để quyết định đưa màu sắc nào hoạt động tốt trong một dự án; có thể là mội trong những quyết định khó khăn nhất mà tôi phải thực hiện khi là một nhà thiết kế. Tuy nhiên, bằng cách học những điều cơ bản nhất về lý thuyết bảng màu và một số công cụ tuyệt vời có sẵn trên web, tôi đã có thể nâng cao thiết kế của tôi và lợi ích của tôi trong điểm yếu này

Một vài đề cử cho các mục tiêu đối tượng:

  • Một lập trình viên tìm kiếm lời khuyên để giúp họ tạo ra một nguyên mẫu trực quan hấp dẫn nhất.
  • Một nhà thiết kế đầy tham vọng đối với những ai muống có một cái nhìn tổng quan và ngắn gọn về chủ đề này.
  • Một người không hiểu sự khác nhau giữa phát triển web thiết kế web.

 Nói tóm lại, lý thuyết về bảng màu là gì ?

Lý thuyết về bảng màu thực ra bao gồm một số việc, nhưng ở cấp độ cơ bản nhất đó là sự tương tác của màu sác trong một thiết kế qua các bổ sung, tương phản và sự sống động.

Trong phần đầu của định  nghĩa này là khá dễ dàng ( và phải thừa nhận là nhạt nhẽo ). Đó là ba điều kiện cuối cùng trong đó xác định các lý thuyết cơ bản về bảng màu

Bổ trợ  ( complementation )

Sự bổ trợ nhầm vào cách chúng ta nhìn những màu sắc có quan hệ với nhau. Khi màu sắc chiếm hai màu đói diện của bảng phối màu, họ khiến cho mọi người xem xét một thiết kế trực quan hấp dẫn bằng cách thiết lập những khung hình trông bắt mắt. thay vì mệt mỏi để dành chỗ cho một khu vực cụ thể của bảng phối màu, sẽ được them vào một sự cân bằng hơn. Có hai cách sự dụng thông thường bổ trợ lẫn nhau : sự phối hợp bộ ba trong bảng màu và hỗn hợp màu sắc mà chúng ta sẽ thảo luận sau. Sự bổ trợ có thể đưa bạn lên một tầm cao mới của sự tinh tế trong thiết kế khi bạn bắt đầu làm chủ những chi tiết phức tạp trong cách phối hợp màu sắc.

Tương phản ( contrast )

Sự tương phản làm giảm thiểu bớt sự mỏi mắt và tập trung sự chú ý của người dùng bởi các thành phần phân chia rõ ràng trên một trang. Ví dụ rõ ràng nhất của sự tương phản là một lựa chọn hiệu quả của phông nền và màu chữ, như hình dưới đây :

1

Nếu bạn từng nghi ngờ, thực hành tốt nhất thường là chọn một màu sắc rất sáng cho phông nền, và một màu rất tối cho chính các văn bản. Đây là một lĩnh vực mà trong lý thuyết bảng màu rất quan trọng trong các tiện ích của một thiết kế web. Trong hầu hết các dự án, khu vực văn bản lớn không phải là một nơi để cố gắng trở thành nơi sáng tạo – vì vậy giữ cho nó đơn giản và dễ đọc.

Bên cạnh việc thiết lập văn bản có thể đọc, sự tương phản có thể gây sự chú ý của cho người xem đối với các yêu cầu cụ thể trong một trang. Hãy suy nghĩ làm sao làm nổi bật một cuốn sách giáo khoa: khi bạn muốn hướng sự chú ý của bạn đến một phần cụ thể của trang, bạn phải làm cho khu vực xung quanh trông khác so với phần còn lại của văn bản. Nguyên tắc trên cũng áp dụng cho thiết kế web: sử dụng một loạt các màu sắc tương phản có thể giúp tập trung sự chú ý của người xem vào các yếu tố của trang cụ thể.

Nếu trang web của bạn có phông nền tối, tập trung vào các nội dung chính với một màu sắc sáng hơn.

2

Sống động ( Vibrancy )

Không để âm thanh thừa thải, nhưng sự sống động sẽ áp đặt cảm xúc thiết kế của bạn. Màu sắc sáng hơn làm cho người dùng cảm thấy tràn đầy năng lượng hơn đó là kết quả thiết kế của bạn, đặc biệt có hiệu quả khi bạn đang cố gắng để quản cáo cho môt sản phẩm hoặc đáp ứng được cảm xúc. Màu tối hơn người sự dụng sẽ cảm thấy dễ chịu và thử giãn hơn, cho phép tâm trí của mình tập trung vào những vấn đề khác. MỘt ví dụ tuyệt vời của việc này là một sự so sánh 2 trang web CNN và Ars Technica:

3

Website của CNN có một biểu ngữ màu đỏ rõ rệt trên đầu, gây được sự thiện cảm cao từ người dùng và được kích thích bởi sự sống động của các thiết kế ( và sự tương phản giữa màu đỏ, trắng và đen là những màu cơ bản cùa trang web ).

4

Ars Technica sử dụng một bảng màu tối hơn cho nền và tiêu đề để nhẹ nhàng hơn cho người sử dụng và họ tập trung sự chú ý của họ trong phần nội dụng. Bằng cách làm như vậy, kỹ thuật và chi tiết trong văn bản của họ được coi là trọng tâm của trang web. Và quan trọng hơn, người dùng được phép bỏ qua sự chú ý với màu sắc rực rỡ để tập trung hơn vào nội dung của bài viết.

 

Làm thế nào để chọn một bảng màu hiệu quả

Dưới đây là ba trong những cấu trúc phổ biến trong một bảng màu: bộ ba, hợp chất và giống nhau.

Bộ ba bảng màu ( triadic color scheme )

5

Gồm ba màu ở hai đầu riêng biệt của bảng phối màu. Có một cách rất đơn giản để tạo ra một bảng màu bộ ba đó :

  1. Lấy một bảng màu, và chọn màu sắc cơ bản của bạn.
  2. Vẽ một tam giác đều từ điểm này.
  3. Ba điểm của tam giác sẽ hình thành bộ ba bảng màu của bạn.

Bằng cách sử dụng một tam giác đều, bạn có thể đảm bảo màu sắc sống động phải bằng nhau và hỗ trợ lẫn nhau sao cho đúng cách.

 

Bảng phối màu hỗn hợp ( compound color scheme )

6

Bảng phối màu hỗn hợp dựa vào việc cung cấp một loạt các màu sắc bổ sung : hai màu sắc được lựa chọn từ hai đầu đối diện của bảng phối màu sắc. Bằng cách làm như vậy, các nhà thiết kế được phép tự do hơn trong thiết kế của họ trong khi họ cũng được hưởng lợi từ sức hút trực quan của các màu bổ sung.

Giống nhau ( Analogous )

7

Một bảng màu giống nhau là dựa trên sự lựa chọn cẩn thận của màu sắc trong cùng một khu vực của bảng màu. Thông thường các màu sắc được phân biệt bởi sự sống độn và độ tương phản khi được so sánh với nhau.

Hai ví dụ về một bảng màu tương tự là :

  1. Các màu vàng và da cam
  2. Một lựa chọn đơn sắc ( các màu của màu cơ bản ).

 

Chỉ là bắt đầu

Vẻ đẹp chúng ta đang có được hưởng lợi rất nhiều từ nhiều thế kỷ trước của các nhà lý thuyết màu sắc khoa học và nghệ thuật. Đây là toàn bộ tin tức nhỏ về lý thuyết bảng màu, vì vậy tôi khuyến khích những người muốn thật sự chuyên sâu vào đề để tùm thấy trong những cuốn sách học tập có sẵn để khai thác một số khái niệm sâu sắc hơn. Chúng tôi sẽ đi chi tiết hơn về “ lý thuyết trong bảng màu  cho nhà thiết kế web trên trang web webdesigntuts .

Bây giờ chúng ta hãy nhìn vào một số công cụ tuyệt vời mà bạn có thể sử dụng để thử nghiệm theo ý của bạn :

 

Cách làm cuộc sống của bạn dễ dàng hơn ( Ways to make your life easier )

Thật may mắn, có một vài công cụ mà chúng ta có thể lựa chọn màu sắc cực kỳ dễ dàng khi sử dụng đúng cách. Và quan trọng nhất, họ sẽ tìm hiểu về lý thuyết bảng màu.

Bằng cách thử nghiệm trong một môi trường được sự hướng dẫn, chúng tôi có thể tìm hiểu làm thế nào để áp dụng những nguyên tắc này mà không chán nản khi mọi thứ làm việc không được hoàn hảo. nghĩ về những công cụ này là một loại “ mạng lưới an toàn trong lý thuyết bảng màu “, để giúp bạn khám phá sáng tạo cho riêng bạn mà không bao giờ phải đi lạc khỏi các quy tắc kết hợp màu sắc thật dễ nhìn.

Kuler

8

Một công cụ được phát triển bởi Adobe, kuler nhằm mục đích cung cấp một cách trực quan để tạo ra một bảng màu. Mỗi màu sắc trên bảng màu có thể được sửa đổi riêng rẻ, hoặc là chọn làm màu cơ bản, với vài cú nhấp chuột đơn giản. Bảng màu có thể được lưu lại và xuất bản và có được một cộng đồng lớn bài viết có sẵn trên web của họ. Dưới mỗi màu sắc, mã số được cung cấp (bao gồm cả hệ thập lục phân). Tuy nhiên, giao diện có thể có lúc hơi rườm rà, điều chỉnh sự sống động của một màu sắc nào đó có thể thay đổi toàn bộ bảng màu ( tôi mong học có một “ khóa “ tính năng để ngăn cản màu sắc khác đổi màu ). Nói chung, tôi muốn khuyên bạn nên sử dụng công cụ này cho những người ai nắm bắt khá các khái niệm và kiên nhẫn khi mọi thứ không chạy suôn sẽ như kỳ vọng.

Color scheme designer 3 ( Paletton)

9

Công cụ này nhanh chóng trở thành sự lựa chọn ưa thích cho người mới bắt đầu, những người có sự kiên nhẫn hoặc những người có thời hạn. Bằng cách cung cấp một bộ chọn rất đơn giản và được kiểm soát, bảng thiết kế màu sắc cung cấp một rào cản thấp nhất, và sự lựa chọn của các nguyên tắc màu sắc trình bày một loạt các sự lựa chọn. Trong khi không chỉ cho người sử dụng tại sao các màu sắc lại làm việc được tốt với nhau (bảng màu của Kuler hiệu quả hơn trong vấn đề đó, kết quả của nó là tuyệt vời như là một điểm khởi đầu hay kết thúc của một mẫu thử nghiệm.

Tùy chọn nâng cao của Paletton thực sự rất hữu ích: các tính năng như khả năng điều chỉnh độ bải hòa toàn bộ một bảng màu và độ tương phản, màu sắc lớp phủ mù và xem trước trang web mẫu là điều hy vọng Kuler thực hiện sớm. Tuy nhiên, tối cảm thấy công cụ này không nên là công cụ chính được sử dụng bởi những người muốn tìm hiểu về lý thuyết bảng màu, nó làm quá nhiều công việc cho người sử dụng và không chó phép họ trực tiếp thử nghiệm trong khi duy trì các nguyên tắc cơ bản của mỗi màu.

Vâng, có rất nhiều và rất nhiều các trang web khác, nơi mà bạn có thể tìm thấy các cách phối màu tuyệt vời.. và chúng tôi thực sự sẽ làm tốt các trang web này lên và phân tích chúng trong tương lai gần.

Trường hợp nghiên cứu: game thủ với nghề nghiệp

Để kết thúc bài này, chúng ta hãy xem xét một trang web bằng cách sử dụng một số nguyên tắc mà chúng ta đã thảo luận. Game thủ với nghề nghiệp là một trang web dành riêng cho phân tích của trò chơi điện tử thông qua các tính năng, ghi âm kỹ thuật số và các diễn đàn.

10

  • Nền màu xám với nền trắng nội dụng tập trung sự chú ý của người dùng về phía trung tâm của trang web.
  • Thanh tối qua trang ( thường dành cho quảng cáo ) “khung” nhìn của người dùng vào các nội dung.
  • Việc sử dụng loại màu cam-đỏ trong tiêu đề thu hút người dùng đến loại, tiêu đề chức năng và các khía cạnh của trang web.
  • Màu sắc trung tính sẽ cung cấp đủ cảm giác phấn khích để làm cho khán giả quan tâm, trong khi vẫn cho phép họ đủ tinh thần thoải mái để thưởng thức nội dung trang web.

Tóm lược

  • Chọn màu sắc trên hai đầu đối diện của bảng màu tạo ra một sự hòa hợp và dễ nhìn cho đôi mắt.
  • Một sự tương phản cao giữa các yếu tố làm cho văn bản dễ đọc và dẫn đến sự chú ý của người đọc.
  • Các màu sắc sáng hơn, sự gây chú ý sẽ nhiều hơn.
  • Đừng ngại sử dụng các công cụ như Kuler và màu sắc thiết kế 3 sẽ làm cho cuộc sống của bạn dễ dàng hơn và sẽ cản trở sự nản long trong quá trình học tập.
Categorised in:

Leave a Reply

Your email address will not be published.

*

*

Đang tải…