Các màu sắc tương phản, trong đó có các cặp màu như xanh lá cây – đỏ hoặc vàng – xanh lục. Hiển thị các yếu tố trong một màu sắc tương tự để trình bày[r]
(1)HUỲNH ĐỨC VIỆT
KHOA CÔNG NGHỆ THÔNG TIN – TRƯỜNG ĐẠI HỌC DUY TÂN
(2)MÀU SẮC
(3)Mục tiêu
Nắm khái niệm về:
Màu sắc
Các hệ màu
Nắm cách sử dụng vấn đề thường
gặp màu sắc
Nắm vấn đề lựa chọn thiết kế:
Ý nghĩa sử dụng màu Chọn màu
Các trường hợp nên tránh
(4)Màu sắc
4
Màu sắc sở hữu thuộc tính:
Màu (Hue) bước sóng quang phổ cấu tạo màu sắc,
cái mà gán với nghĩa xanh hay đỏ
Chroma độ bão hòa độ tinh khiết màu sắc
trong phạm vi từ màu xám đến hầu hết độ sặc sỡ màu sắc Màu sắc bão hịa cao, dễ nhìn thấy khoảng cách xa
Giá trị (Value) cường độ cân đối sáng tối
(5)Màu sắc (tt)
5
(6)Màu sắc (tt)
6
Các màu ánh sáng có màu đỏ, xanh xanh
nước biển
Các bước sóng kết hợp theo cặp để tạo màu đỏ tươi, lục
lam, màu vàng tất màu khác quang phổ
Những màu sắc có bước sóng dài (đỏ) thường gọi ấm
(7)Màu sắc (tt)
7
Màu sắc kết hợp màu, sắc độ
và cường độ
Các đo lường xác màu
được báo cáo tài liệu Chúng ta gọi màu xanh thực hàng ngàn màu xanh
Màu sắc xuất hình máy
tính phần nhỏ so với màu sắc hiển thị mắt người
Tái tạo màu sắc xác giới
(8)Hệ màu (tt)
8
Hệ màu RGB
Nhiều hình màu sử dụng
3 màu sắc ánh sáng, với kết hợp khác để tạo nhiều màu sắc nhìn thấy hình
Bằng cách điều chỉnh ánh
sáng màu đỏ (Red), xanh (Green), xanh nước biển (Blue) trình bày pixel, hàng triệu màu sắc tạo
(9)Hệ màu (tt)
9
Hệ màu HSV
Một số bảng màu sử
dụng quy ước dựa vào phương pháp ký hiệu màu Munsell gọi HSV, với tham số màu (Hue), độ bão hòa (Saturation) giá trị (Value)
Hoặc HSL cho màu
(Hue), độ bão hòa
(10)Hệ màu (tt)
10
Sự pha màu
Mắt không ổn định, thay vào
có chút rung nhìn
Nếu hai điểm ảnh màu khác
được đặt cạnh nhau, rung kết hợp với hai màu tạo màu thứ ba
Quá trình pha trộn màu sắc máy
(11)Ý nghĩa màu sắc
11
Hỗ trợ định dạng
Là hỗ trợ định dạng, màu sắc cung cấp
cấu trúc tốt ý nghĩa cho hình
Màu sắc giúp cho người dùng hiểu
là khơng Nó có ảnh hưởng mạnh mẽ so với nhóm gần khơng gian
Màu sắc đặc biệt hữu ích có số lượng lớn thơng
tin cần hiển thị hình Màu sắc sử dụng để tạo bật nhằm gây ý
Màu sắc linh hoạt nhiều so với sử dụng phương
(12)Ý nghĩa màu sắc (tt)
12
Mã hóa trực quan
Một mã màu cho biết loại thông tin trình
bày với nó, có nghĩa cho sử dụng hình
Một màu sắc lựa chọn mã cho phép người
dùng xác định mục thông tin liên quan nhanh hơn, mà khơng cần đọc nội dung trước
Để có hiệu quả, màu sắc phải hình ảnh có liên
(13)Ý nghĩa màu sắc (tt)
13
Các ý nghĩa khác
Màu sắc sử dụng để mô tả chân thực
các đối tượng giới xung quanh để hiển thị hình
Người ta thấy việc hiển thị màu
(14)Một số vấn đề thường gặp
14
Gây ý cao
Màu sắc có khả gây ý cao Đặc tính làm cho
các thành phần hình nhóm kết hợp lại theo màu giống Người dùng tìm kiếm mối quan hệ khác biệt tồn không
Ảnh hưởng sử dụng hình khác nhau
Khơng phân biệt sử dụng màu sắc số
(15)Một số vấn đề thường gặp (tt)
15
Sự nhạy cảm mắt dẫn đến màu sắc khác nhau
Tất màu sắc không cân mắt người xem
Mắt nhạy cảm với màu hình ảnh quang phổ (màu vàng xanh cây), xuất mờ với hình ảnh cực (xanh đỏ)
Một số kết hợp màu sắc làm thay đổi chế
(16)Một số vấn đề thường gặp (tt)
16
Sự thiếu hụt màu
Một bất lợi màu sắc có khoảng phần trăm nam
giới 0.4 phần trăm phụ nữ bị mù màu thiếu cảm nhận màu sắc
Đối với người bị hạn chế màu sắc, tất
(17)Một số vấn đề thường gặp (tt)
17
Ý nghĩa sử dụng màu
Con người phản ứng với màu sắc hình thành từ nhiều
cách Có thể họ học thời gian khứ màu sắc thống sử dụng cho thực thể môi trường xung quanh
Ý nghĩa màu sắc sử dụng cho người tình
huống định, cho quy luật riêng, văn hóa
Màu sắc sử dụng bất ngờ gây nhầm lẫn
Cùng màu sắc có ý nghĩa khác tùy
(18)Sử dụng màu sắc
18
Chọn màu cho mục thông tin
Màu sắc sử dụng để tổ chức, trình bày cho mục
thơng tin hình phải hỗ trợ chuyển thơng tin từ hình đến người sử dụng Điều địi hỏi hiểu biết rõ ràng cách thông tin lựa chọn sử dụng
Không dựa vào màu sắc cách để xác
định yếu tố hình trình
Khi phát triển màu chiến lược, xem xét làm
(19)Sử dụng màu sắc (tt)
19
Chọn màu cho mục thông tin (tt)
Nếu phần khác hình thu hút
riêng biệt, mã màu sử dụng khác để gây ý
Nếu định thực dựa tình trạng
thơng tin, màu sắc trạng thái thơng tin có
Nếu hình tìm kiếm thực để xác định vị trí
thơng tin, mã màu sử dụng mang tính tương phản
Nếu thơng tin hiển thị hình phân
(20)Sử dụng màu sắc (tt)
20
Màu cho văn cảnh
Màu sắc tác dụng theo ngữ cảnh Kích thước
một vùng màu, màu sắc liền kề với nó, ánh sáng mơi trường xung quanh, tất ảnh hưởng đến nhận thức thực
Ở khoảng cách xem bình thường hình, độ nhạy
màu tối đa khơng đạt đến kích thước khu vực vượt inch diện tích vng
Ngồi khác biệt nhỏ màu sắc khơng nhận
(21)Sử dụng màu sắc (tt)
21
Màu cho văn cảnh (tt)
Một hình ảnh lân cận xuất để mắt pha
trộn Ví dụ màu xanh màu đỏ xuất sau màu vàng
Hình ảnh lân cận ảnh hưởng đến màu sắc cảm
nhận Một màu sắc tối xem nhẹ sáng màu sáng
Nhìn vào hình ảnh bão hòa khoảng thời
(22)Sử dụng màu sắc (tt)
22
Phân biệt hài hòa màu sắc
Số lượng màu đo lên đến khảng 7.5 triệu màu Do
số lượng màu nhiều, mắt khơng phân biệt hiệu với số lượng khác biệt
Không chọn nhiều 4-5 màu sắc đặt xa dọc theo
quang phổ màu sắc Lựa chọn khoảng cách màu đủ rộng tối đa khả xác định chúng xác
Sự lựa chọn tốt có màu đỏ, vàng, xanh cây, xanh
(23)Sử dụng màu sắc (tt)
23
Phân biệt hài hòa màu sắc (tt)
Tất màu dễ dàng nhận trừ màu xanh Do thận
trọng sử dụng màu xanh để trình bày liệu, văn hình ảnh nhỏ hình
Nếu thực so sánh phân biệt màu sắc, chọn không
6 hoặc7 màu sắc xếp xa quang phổ
Màu sắc hài hòa làm việc tốt tương
phản sắc nét Hài hòa dễ dàng đạt với bảng màu đơn sắc
(24)Sử dụng màu sắc (tt)
24
Nhấn mạnh (tt)
Để nhấn mạnh thu hút ý, sử dụng màu sắc tươi
sáng
Độ cảm nhận ánh sáng màu từ nhiều đến trắng,
vàng, xanh cây, đỏ xanh lục Ngoài ra, theo mức độ ánh sáng xung quanh cao, màu sắc thường vỡ khơng bão hịa
Sử dụng màu sắc tương phản để nhấn mạnh phân biệt
Các màu sắc tương phản, có cặp màu xanh – đỏ vàng – xanh lục
Hiển thị yếu tố màu sắc tương tự để trình bày
(25)Chọn màu thiết kế
25
Lựa chọn chung
Các màu sắc ấm áp đỏ, vàng, da cam sử dụng cho
các hành động tình nhằm thu hút ý
Những màu sắc thoáng mát xanh cây, xanh lục,
xanh tím, tím sử dụng cho màu thơng tin trạng thái
Sử dụng màu sắc phù hợp với mong muốn người
(26)Chọn màu thiết kế (tt)
26
Một số kết hợp màu sắc phổ biến gồm:
Đỏ: dừng, lửa, nóng, nguy hiểm
Vàng: chậm, cảnh cáo, thử nghiệm
Xanh cây: thực thi, chấp nhận, rõ ràng, an toàn, thực vật
Xanh lục: lạnh, nước, bình tĩnh, bầu trời, trung lập
Trắng: trung lập
Xám: trung lập
Màu sắc ấm: hành động, đáp ứng yêu cầu, không gian gần
gũi
(27)Chọn màu thiết kế (tt)
27
Vị trí sử dụng
Vị trí trung tâm: mắt nhạy cảm với màu xanh
và màu đỏ vị trí trung tâm, vùng biên mắt không nhạy cảm với màu sắc
Vị trí ngoại vi: sử dụng màu xanh lục, vàng, đen,
màu trắng Vùng ngoại vi mắt nhạy cảm với màu sắc
Vị trí liền kề: màu sắc xuất liền kề với nên
(28)Chọn màu thiết kế (tt)
28
Thứ tự
Nếu thứ tự màu sắc cần thiết, chẳng hạn cao hay
thấp, mức độ, chiều sâu… nên xếp theo thứ tự quang phổ chúng
Trình tự quang phổ đỏ, da cam, vàng, xanh cây, xanh
lục, chàm tím
Nền trước
Màu trước nên khác nhiều tốt so với màu
nền Mức độ khác lớn làm tăng mức độ dễ đọc
Các màu sắc bão hịa màu trắng, vàng, xanh
(29)Chọn màu thiết kế (tt)
29
Nền sau
Màu sau nên tổ chức thành thể thống nhất, cách
ly khỏi phần cịn lại hình
Sử dụng màu sắc không cạnh tranh với tiền cảnh Đối với
nền tối, nên sử dụng màu lạnh, chúng cung cấp độ tương phản tốt
Màu xanh sử dụng tốt cho màu chúng nhạy cảm
cho mắt
Theo khuyến cáo, màu tối theo thứ tự ưu tiên gồm
(30)Chọn màu thiết kế (tt)
30
(31)Chọn màu thiết kế (tt)
31
Màu sắc cho văn (tt)
Khi lựa chọn màu, nên chọn màu sau trước, sau
đó chọn màu cho tiền cảnh.
Hạn chế số lượng màu sắc không bốn màu
Thanh công cụ nên trình bày với màu sắc
dễ dàng cho việc đọc phân biệt với phần màn hình
Ln ln thử nghiệm màu sắc bước
(32)Chọn màu thiết kế (tt)
32
Màu sắc cho hình thống kê
Màu sắc nhấn mạnh nên tập trung vào khu vực liệu
như số, văn
Không sử dụng màu sắc lúc, nên sử dụng
một màu với mức độ sáng khác
Sử dụng màu trung lập
Kích thước đủ lớn để khơng làm biến dạng
Để trạng thái, dùng màu xanh xanh để
(33)Chọn màu thiết kế (tt)
33
Chọn màu cho trang web
Mục đích: màu sắc nên ln ln sử dụng cho mục
đích có ý nghĩa
Bảng màu: sử dụng màu sắc phổ biến tảng
hoặc trình duyệt Có 216 màu 256 màu ln giống hình
Trình bày: màu sắc nên lựa chọn cẩn thận để cung cấp cho
người dùng hiểu biết, để giữ trạng thái cân đồ họa đơn giản
Liên kết: sử dụng màu sắc khác cho trạng thái
(34)Các trường hợp sử dụng màu nên tránh
34
Dựa hoàn toàn vào màu sắc Quá nhiều màu sắc lúc
Màu sắc bão hòa cao, phân cực
Độ sáng thấp cho người xem lớn tuổi Cân màu sắc
Thiếu màu sắc tương phản Bão hịa hồn toàn
(35)Các trường hợp sử dụng màu nên tránh
35
Khu vực màu sắc nhỏ
Màu không bật
Màu đỏ xanh vùng biên
Các màu lân cận khác thành phần màu
xanh
Màu sắc khác biệt nhất
Sử dụng màu sắc bất ngờ
Dùng màu sắc để nâng cao mức độ dễ đọc
(36)