Màu xanh lá cây, vàng và đỏ không thể đi cùng nhau? Người dân Ethiopia phải bị xúc phạm ghê gớm. Google cho hình ảnh màu xanh lá cây, vàng và đỏ và tôi nghĩ rằng bạn tìm thấy một số ví dụ hấp dẫn (cùng với những hình ảnh xấu xí).
Bất kỳ tập hợp màu nào kết hợp với nhau tùy thuộc vào tọa độ màu chính xác và vị trí, hình dạng tương đối, kích thước của các đối tượng màu và hiệu ứng bạn muốn có (ví dụ: làm dịu so với thú vị, vui vẻ so với nghiêm túc, táo bạo so với tinh tế ). Tôi không có bất kỳ quy tắc cứng và nhanh nào cho bạn, nhưng đây là một số điều cần thử nghiệm.
Đánh đổi kích thước bão hòa
Để tránh hiệu ứng chói tai (giả sử bạn không muốn điều đó), kích thước của vật thể màu phải tỷ lệ nghịch với độ bão hòa màu của nó. Ví dụ của bạn có độ bão hòa khá cao, vì vậy hãy thử độ bão hòa màu thấp hơn (ví dụ: phấn màu) hoặc tô màu thứ gì đó khác với nền. Ví dụ: bạn có thể tô màu văn bản và để nền trung tính hoặc bạn có thể tô màu một hình dạng hoặc biểu tượng nhỏ bên cạnh văn bản. Loại thứ hai sẽ cung cấp cơ hội sử dụng hình dạng để mã hóa dự phòng trận đấu kỹ năng cho mục đích tiếp cận và in đen trắng (dấu kiểm màu xanh lá cây cho thỏa mãn, dấu chấm than màu vàng cho Shortfall và màu đỏ không nhập biểu tượng không tốt cho đủ) .
khoảng cách
Màu sắc trông như thế nào phụ thuộc vào sự gần gũi của chúng với nhau. Màu sắc hơn đụng độ khi liền kề trông ổn với một sự tách biệt nhỏ. Hãy thử đặt một đường viền trung tính xung quanh mỗi ô để phân tách các màu nhiều hơn (như bạn có trong các tiêu đề của mình), trừ khi có một số ý nghĩa đối với các ô cùng màu hòa trộn với nhau để được coi là một đối tượng. Hãy thử độ dày khác nhau. Hãy thử tách từng ô với các viền trắng , để có một cái nhìn lát gạch.
Mẫu
Màu sắc kết hợp với nhau cũng thay đổi theo mẫu mà màu sắc tạo ra, vì vậy hãy chắc chắn rằng bạn đang đánh giá các mockup với tỷ lệ và vị trí điển hình của màu sắc. Ví dụ: nếu hầu hết thời gian mọi thứ đều có màu xanh lá cây và điều quan trọng nhất là người dùng phải tham gia vào những điểm nổi bật về màu vàng màu đỏ xuất hiện để ngồi trên đỉnh trên đỉnh (ví dụ: độ bão hòa cao hơn, tối hơn). Hãy xem xét rằng tính thẩm mỹ của mẫu cũng có thể giao tiếp và thúc đẩy người dùng. Nếu người dùng có một bộ kỹ năng đặc biệt không phù hợp hoặc mất cân bằng, có thể bạn muốn có một mô hình xấu xí. Mẫu hấp dẫn nhất phải tương ứng với trạng thái có lợi nhất cho người dùng.
Khả năng sử dụng
Câu hỏi của bạn liên quan đến tính thẩm mỹ, nhưng lựa chọn mã màu cũng có ý nghĩa về khả năng sử dụng chính. Lựa chọn màu sắc của bạn nên là:
Trực quan khác biệt với nhau, đặc biệt nếu được sử dụng trong điều kiện thị giác xuống cấp (ví dụ, trên điện thoại di động dưới ánh sáng mặt trời).
Cung cấp độ tương phản tốt với nền (nếu nền trước của nó) hoặc với nền trước (nếu nền của nó). Ví dụ, văn bản màu đen trên màu đỏ là không tốt. Nói chung, tiền cảnh và hậu cảnh cần mức độ sáng khác nhau.
Hãy chắc chắn rằng màu sắc xếp hạng phù hợp với những gì họ mã. Ví dụ, những thứ người dùng nên tham dự cần tương phản nhiều hơn với nền và các màu khác.
Cung cấp khả năng tiếp cận và khả năng in, trong đó mỗi màu cũng có một mức độ tối khác nhau, với bóng tối được chia theo cấp bậc (màu đỏ nhiều hơn màu vàng nhiều hơn màu xanh lá cây). Làm cho màu xanh của bạn hơi xanh và / hoặc màu đỏ của bạn hơi cam để người dùng mù màu đỏ-xanh lá cây (loại mù màu phổ biến nhất) vẫn có thể thấy sự khác biệt về màu sắc.
Sử dụng mã màu cho chỉ một biến. Tôi không biết bạn sử dụng màu xám và màu cam để làm gì, nhưng nó có thể gây nhầm lẫn và khiến người dùng khó sử dụng màu xanh lá cây và màu vàng hơn. Bất cứ khi nào bạn có nhiều hơn ba màu, thật khó để giữ mọi thứ có thể sử dụng được. Tìm một cách khác để mã hóa bất kỳ mã màu xám và màu cam nào (ví dụ: sử dụng kích thước hoặc trọng lượng phông chữ hoặc sử dụng các đường đứt nét cho viền ô; xem Đưa G vào GUI ).
Trong một dự án tôi đã thực hiện, các màu tôi đi kèm là # E00000, # FF8400 và # C0FFE0 (không phải là màu vàng rất vàng, nhưng nó vẫn hoạt động).
Tôi có nhiều hơn về việc chọn mã màu, bao gồm cả cách tính màu tương phản và độ sáng ở Breaking the Color Code .
