Những hướng dẫn về sử dụng màu sắc pptx

Những hướng dẫn về sử dụng màu sắc Những hướng dẫn về việc sử dụng màu, ứng dụng cách phối màu Về mặt thị giác các trang web đòi hỏi một cách phối màu nhất quán.. Hãy chú ý đến cách mắt

Những hướng dẫn về sử dụng màu sắc

Những hướng dẫn về việc sử dụng màu, ứng dụng cách phối màu

Về mặt thị giác các trang web đòi hỏi một cách phối màu nhất quán Không có màu sắc, trang web thiếu đi nét riêng Với cách phối màu cân xứng và nhất quán, trang web có thể có một nét hài hoà và kiên định Nếu

có quá nhiều màu hoặc lạc màu thì trang web đó mang tính gượng gạo Cách phối màu thường dựa vào hệ thống nhất quán từ sự phù hợp màu sắc Nó có thể là cách lựa chọn sử dụng màu mà không cần phụ thuộc đến một nhóm màu

Ví dụ, Apple.com sử dụng các màu khác nhau cho những bài mục khác nhau, nhưng các màu được sử dụng theo cách như nhau Trong trường hợp này, sự nhất quán lấy từ sự nghiên cứu và ứng dụng

Ví dụ về sự thiếu màu

Trang chủ của Starbucks đang thiếu sự phối màu

Nền màu xám của trang chủ thiếu hấp dẫn Nhãn hiệu này gợi nhiều đến phong cách vì kho hàng của Starbuck có những thiết kế sinh động nhưng website hoàn toàn thiếu nét riêng

Hãy sử dụng đủ màu

Việc sử dụng màu quá ít khiến cho giao diện trở nên nhàm chán hoặc trơ trọi Màu sắc là một cách tin cậy cho việc nhận biết, tập hợp hoặc phân biệt các yếu tố Nó ít tốn tiền hơn ( đặc biệt khi được ứng dụng qua CSS – Cascading Style Sheets) Nếu bạn sử dụng quá ít màu thì bạn phải dùng những cách khác để thu hút mắt, để phân biệt và đưa ra ý nghĩa cho các yếu tố

Hãy để lại khoảng trắng

Màu trắng là sắc thái tốt nhất cho việc đọc bản text tương phản Người ta quy ước đặt nội dung trên nền màu trắng (hoặc màu rất nhẹ) Những vùng màu trắng làm nổi bật các vùng nội dung

Hãy sử dụng nội dung chính trên nền màu sáng

Tôi sẽ dính đề mục của tôi ở đây và thấy rõ rằng; Màu trắng là màu tốt nhất để đặt nội dung chính Vùng màu sáng nhất trên trang web của bạn

sẽ là vùng nội dung, bởi vì đó là qui ước và là những điều người ta mong đợi

Ví dụ

Hãy xem trang pixelgraphix.de Với stylesheet mặc đinh thì đoạn text chính được hiển thị trong các hộp màu xám rất nhẹ tương phản với nền trắng Hãy chú ý đến cách mắt của bạn không muốn tập trung vào các hộp màu xám - nó muốn nhìn vào màu trắng vì một số lý do

Nguyên bản

Thay đổi

Trang chủ của nhà cung cấp dịch vụ dải tần rộng Ailen HEAnet sử dụng các vùng mặt màu trắng, nhưng không dùng cho vùng nội dung Nội dung tương phản với màu nền xanh dương không đủ nhạt cho lắm Điều này làm nó thực sự rất khó khăn để tập trung vào nội dung

Hãy giữ các màu mạnh để thu hút mắt

Màu mạnh thu hút mắt và vùng này càng lớn thì càng thu hút nhiều sự chú ý Quá nhiều màu mạnh sẽ phân tán sự tập trung của mắt và phương pháp kỹ thuật này làm mất đi hiệu quả tiềm năng của nó

collegeclub.com sử dụng quá nhiều màu mạnh và sự tương phản nên gây

ra mắt không tập trung

Phạm vi vùng màu vàng cam mạnh ở giữa trang là yếu tố thu hút nhất nhưng không bao gồm nội dung có giá trị cao Đây lại là một bản thiết kế lỗi

Bố cục và màu sắc chưa hợp lý khi xét ở một số khía cạnh

Hệ thống màu lộn xộn: Khu vực logo bên trái phía trên bắt đầu kết hợp tốt các tông màu xanh lục Phần còn lại của trang chủ yếu lại là màu đỏ Màu này không hài hòa được với màu xanh

Rồi màu vàng đậm trên thanh điều hướng đầu tiên bổ sung thêm một màu

cơ bản Vấn đề là các màu cơ bản này lại không dễ dàng ăn nhập với nhau

Màu sắc tương phản và khó chịu nhất là màu nền của thanh điều hướng thứ hai Điều này thu hút mắt trước tiên vào nhân tố ít có giá trị thậm chí trước cả logo của site hoặc bất cứ nội dung nào

Tránh đặt màu sắc rất giống nhau liền kề với ảnh

Trang này dành cho sòng bạc của Harrah sử dụng màu tía mạnh gần kề

với ảnh chụp Sắc độ của màu tía không hợp với các màu tinh tế trong bức ảnh làm cho các màu dường như xám xịt và có vẻ gì đó hơi bẩn

Tránh sử dụng quá nhiều màu sắc khác nhau

Nhiều màu có thể trông có vẻ lòe loẹt hoặc sặc sỡ thái quá

Tất nhiên một số màu hài hòa với nhau, một số màu lại không ăn nhập với nhau, đặc biệt khi đặt liền kề nhau, tạo nên những hiệu quả rất xấu khi hiển thị

Sự kết hợp của các màu xung đột nhau khiến chữ khó đọc, tồi tệ hơn nữa lại gồm font chữ nhỏ xíu

Việc đặt các khu vực màu liền kề cạnh các khu vực màu xám hay ít sẫm màu có thể trông rất thông minh

Các hệ thống màu theo tự nhiên

Luke Wrobleski cho rằng nhiều các website doanh nghiệp sử dụng hệ thống màu an toàn tương tự mà chúng trông giống nhau Anh ta thấy nên

sử dụng sáng tạo hơn về màu sắc trên những trang web

Anh ta nói rằng, nếu chúng ta chấp nhận các lợi ích làm việc với các quy ước bố cục và những hạn chế vốn có của nó, màu sắc sẽ trở thành một cách thu hút và hữu dụng hơn nhằm làm khác biệt các thiết kế

Luke cũng đề xuất một cách rất hay trong việc tìm hệ thống màu sắc bổ sung: tận dụng cảm hứng từ Tự Nhiên

Website của các doanh nghiệp trông giống nhau

(HP, IBM, Dell, Microsoft)

Hệ thống màu phỏng theo thảm cỏ mẫu

Các hạn chế của màu sắc: Sự mù màu

Một số người (chủ yếu là đàn ông) không có khả năng phân biệt các màu riêng rẽ nhất định Có vài loại mù màu, phổ biến nhất tác động đến màu

đỏ và màu xanh lá cây (chúng dường như xuất hiện rất giống nhau)

Hàm ý của điều này là: Bạn không nên sử dụng màu sắc (đặc biệt màu đỏ

và màu xanh lá cây) để đánh dấu các yếu tố khi một người sử dụng cần để phân biệt các màu sắc để sử dụng giao diện Các hướng dẫn có thể bị ảnh hưởng của W3C tuyên bố ưu tiên số 1 như sau (ví dụ: bạn cần tuân theo những yêu cầu này để tuyên bố sự tuân thủ ANY W3CAG):

+ Đảm bảo rằng tất cả các thông tin được truyền đạt bằng màu sắc cũng

có sẵn khi không có màu sắc, ví dụ từ ngữ cảnh hoặc sự đánh dấu

+ Đảm bảo rằng sự kết hợp màu sắc nền phía sau và phía trước cung cấp

sự tương phản hiệu quả khi được xem bởi ai đó không phân biệt được màu sắc hoặc khi được hiển thị trên một màn hình đen trắng