thiest ke gd

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (625.33 KB, 36 trang )

HUỲNH ĐỨC VIỆT

KHOA CÔNG NGHỆ THÔNG TIN – TRƯỜNG ĐẠI HỌC DUY TÂN

</div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=2>

<b>MÀU SẮC</b>

</div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=3>

Mục tiêu



Nắm được các khái niệm về:



Màu sắc



Các hệ màu



Nắm được cách sử dụng và các vấn đề thường

gặp về màu sắc



Nắm được các vấn đề trong 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

</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=4>

Màu sắc



Màu sắc sở hữu 3 thuộc tính:

 Màu (Hue) là bước sóng quang phổ cấu tạo một màu sắc,

cái mà chúng ta gán với một nghĩa như là xanh hay đỏ

 Chroma hoặc độ bão hòa là độ tinh khiết của màu sắc

trong một phạm vi từ màu xám đến hầu hết các độ sặc sỡ
của màu sắc. Màu sắc bão hòa càng cao, càng dễ nhìn
thấy ở khoảng cách xa

 Giá trị (Value) hoặc cường độ là sự cân đối sáng tối của

</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=5>

Màu sắc (tt)

</div>
<span class='text_page_counter'>(6)</span><div class='page_container' data-page=6>

Màu sắc (tt)

 Các màu cơ bản của ánh sáng có màu đỏ, xanh lá cây và xanh

nước biển.

 Các bước sóng kết hợp theo cặp để tạo ra màu đỏ tươi, lục

lam, màu vàng và tất cả các màu khác trong quang phổ.

 Những màu sắc có bước sóng dài (đỏ) thường được gọi là ấm

</div>
<span class='text_page_counter'>(7)</span><div class='page_container' data-page=7>

Màu sắc (tt)

 Màu sắc là sự kết hợp của màu, sắc độ

và cường độ

 Các đo lường chính xác một màu ít khi

được báo cáo trong các tài liệu. Chúng
ta gọi là màu xanh nhưng thực sự nó
chỉ là một trong hàng ngàn màu xanh

 Màu sắc xuất hiện trên màn hình máy

tính chỉ là một phần nhỏ so với màu
sắc hiển thị trong mắt người

 Tái tạo màu sắc chính xác của thế giới

</div>
<span class='text_page_counter'>(8)</span><div class='page_container' data-page=8>

Hệ màu (tt)



Hệ màu RGB

 Nhiều màn hình màu sử dụng

3 màu sắc cơ bản của ánh

sáng, với sự kết hợp khác
nhau để tạo ra nhiều màu sắc
nhìn thấy trên màn hình

 Bằng cách điều chỉnh ánh

sáng màu đỏ (Red), xanh lá
cây (Green), xanh nước biển
(Blue) trình bày trong một
pixel, hàng triệu màu sắc có
thể được tạo ra

</div>
<span class='text_page_counter'>(9)</span><div class='page_container' data-page=9>

Hệ màu (tt)



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 là HSV,
với tham số màu (Hue),
độ bão hòa (Saturation)
và giá trị (Value)

 Hoặc là HSL cho màu

(Hue), độ bão hòa

</div>
<span class='text_page_counter'>(10)</span><div class='page_container' data-page=10>

Hệ màu (tt)



Sự pha màu

 Mắt không bao giờ ổn định, thay vào là

có một chút rung khi chúng ta nhìn

 Nếu hai điểm ảnh màu khác nhau

được đặt cạnh nhau, sự rung này kết
hợp với hai màu sẽ tạo ra màu thứ ba

 Quá trình pha trộn màu sắc của máy

</div>
<span class='text_page_counter'>(11)</span><div class='page_container' data-page=11>

Ý nghĩa của màu sắc



Hỗ trợ định dạng

 Là một hỗ trợ định dạng, màu sắc có thể cung cấp các

cấu trúc tốt hơn và ý nghĩa hơn cho một màn hình

 Màu sắc có thể giúp cho người dùng hiểu được những gì

là khơng đi cùng nhau. Nó có ảnh hưởng mạnh mẽ hơn
so với các nhóm gần nhau về không gian

 Màu sắc đặc biệt hữu ích khi có số lượng lớn các thông

tin cần hiển thị trên màn hình. Màu sắc cũng có thể sử
dụng để tạo sự nổi bật nhằm gây sự chú ý

 Màu sắc linh hoạt hơn nhiều so với sử dụng các phương

</div>
<span class='text_page_counter'>(12)</span><div class='page_container' data-page=12>

Ý nghĩa của màu sắc (tt)



Mã hóa trực quan

 Một mã màu cho biết những loại thông tin nào được trình

bày với nó, nó có nghĩa cho sử dụng màn hình

 Một màu sắc được lựa chọn đúng mã sẽ 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 của nó trước

 Để có hiệu quả, màu sắc phải như một hình ảnh có liên

</div>
<span class='text_page_counter'>(13)</span><div class='page_container' data-page=13>

Ý nghĩa của màu sắc (tt)



Các ý nghĩa khác

 Màu sắc có thể được sử dụng để mô tả chân thực hơn

các đối tượng trong thế giới xung quanh để hiển thị trên
màn hình

 Người ta cũng thấy rằng việc hiển thị các màu trên màn

</div>
<span class='text_page_counter'>(14)</span><div class='page_container' data-page=14>

Một số vấn đề thường gặp



Gây chú ý cao

 Màu sắc có khả năng gây chú ý cao. Đặc tính này làm cho

các thành phần màn hình có thể được nhóm hoặc kết hợp
lại theo các màu giống nhau. Người dùng có thể tìm kiếm
các mối quan hệ và sự khác biệt tồn tại hoặc không



Ảnh hưởng sử dụng màn hình khác nhau

 Khơng phân biệt hoặc sử dụng kém màu sắc trên một số

</div>
<span class='text_page_counter'>(15)</span><div class='page_container' data-page=15>

Một số vấn đề thường gặp (tt)



Sự nhạy cảm của mắt dẫn đến màu sắc khác nhau

 Tất cả các màu sắc không cân bằng trong mắt người xem.

Mắt nhạy cảm hơn với những màu ở giữa hình ảnh quang
phổ (màu vàng và xanh lá cây), xuất hiện mờ hơn với hình
ảnh ở cực (xanh và đỏ)

 Một số kết hợp của màu sắc có thể làm thay đổi cơ chế của

</div>
<span class='text_page_counter'>(16)</span><div class='page_container' data-page=16>

Một số vấn đề thường gặp (tt)



Sự thiếu hụt màu

 Một bất lợi của màu sắc là có khoảng 8 phần trăm nam

giới và 0.4 phần trăm phụ nữ bị mù màu do thiếu cảm
nhận về màu sắc

 Đối với những người bị hạn chế về màu sắc, tất cả những

</div>
<span class='text_page_counter'>(17)</span><div class='page_container' data-page=17>

Một số vấn đề thường gặp (tt)



Ý nghĩa sử dụng màu

 Con người phản ứng với màu sắc được hình thành từ nhiều

cách. Có thể là do họ học được trong thời gian quá khứ hoặc
màu sắc như thế nào đã được thống nhất sử dụng cho các
thực thể trong môi trường xung quanh chúng ta

 Ý nghĩa màu sắc được sử dụng cho con người trong các tình

huống nhất định, hoặc cho một quy luật riêng, một nền văn
hóa

 Màu sắc được sử dụng bất ngờ có thể gây nhầm lẫn

 Cùng một màu sắc cũng có những ý nghĩa khác nhau tùy

</div>
<span class='text_page_counter'>(18)</span><div class='page_container' data-page=18>

Sử dụng màu sắc



Chọn màu cho mục thông tin

 Màu sắc được sử dụng để tổ chức, trình bày cho mục

thơng tin trên màn hình phải hỗ trợ chuyển thơng tin từ
màn hình đến người sử dụng. Điều này đòi hỏi sự hiểu
biết rõ ràng về cách thông tin được lựa chọn và sử dụng

 Không bao giờ dựa vào màu sắc là cách duy nhất để xác

định các yếu tố màn hình hoặc q trình

 Khi phát triển một màu chiến lược, ln xem xét làm thế

</div>
<span class='text_page_counter'>(19)</span><div class='page_container' data-page=19>

Sử dụng màu sắc (tt)



Chọn màu cho mục thông tin (tt)

 Nếu các phần khác nhau của màn hình được thu hút

riêng biệt, các mã màu sử dụng khác nhau để gây sự chú
ý lần lượt.

 Nếu quyết định được thực hiện dựa trên tình trạng của

thơng tin, màu sắc của các trạng thái thơng tin có thể có.

 Nếu màn hình tìm kiếm được thực hiện để xác định vị trí

thơng tin, mã màu được sử dụng mang tính tương phản.

 Nếu thơng tin được hiển thị trên màn hình được phân

</div>
<span class='text_page_counter'>(20)</span><div class='page_container' data-page=20>

Sử dụng màu sắc (tt)



Màu cho văn cảnh

 Màu sắc có thể tác dụng theo ngữ cảnh. Kích thước của

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 cả đều ảnh hưởng đến nhận thức
thực sự

 Ở khoảng cách xem bình thường đối với màn hình, độ nhạy

màu tối đa khơng đạt đến kích thước của một khu vực vượt
q 3 inch diện tích vng.

 Ngồi ra sự khác biệt nhỏ về màu sắc có thể khơng nhận

</div>
<span class='text_page_counter'>(21)</span><div class='page_container' data-page=21>

Sử dụng màu sắc (tt)



Màu cho văn cảnh (tt)

 Một hình ảnh lân cận có thể xuất hiện để mắt có thể pha

trộn. Ví dụ màu xanh lá cây hoặc màu đỏ có thể xuất
hiện sau màu vàng

 Hình ảnh lân cận có thể ảnh hưởng đến màu sắc cảm

nhận. Một màu sắc trên nền tối sẽ xem nhẹ hơn và sáng
hơn cùng màu trên nền sáng

 Nhìn vào một hình ảnh bão hòa trong một khoảng thời

</div>
<span class='text_page_counter'>(22)</span><div class='page_container' data-page=22>

Sử dụng màu sắc (tt)



Phân biệt và hài hòa màu sắc

 Số lượng màu đo được lên đến khảng 7.5 triệu màu. Do

số lượng màu nhiều, mắt có thể không phân biệt hiệu
quả với số lượng khác biệt ít

 Khơng chọn nhiều hơn 4-5 màu sắc đặt xa nhau dọc theo

quang phổ màu sắc. Lựa chọn khoảng cách màu đủ rộng
sẽ tối đa khả năng xác định chúng chính xác

 Sự lựa chọn tốt có màu đỏ, vàng, xanh lá cây, xanh

</div>
<span class='text_page_counter'>(23)</span><div class='page_container' data-page=23>

Sử dụng màu sắc (tt)



Phân biệt và hài hòa màu sắc (tt)

 Tất cả các màu dễ dàng nhận ra trừ màu xanh. Do vậy thận

trọng sử dụng màu xanh để trình bày dữ liệu, văn bản và
hình ảnh nhỏ trên màn hình

 Nếu thực hiện so sánh phân biệt màu sắc, chọn không quá

6 hoặc7 màu sắc xếp xa nhau trong quang phổ

 Màu sắc hài hòa là những cái làm việc tốt ngoài sự tương

phản sắc nét. Hài hòa dễ dàng đạt được với một bảng màu
đơn sắc

</div>
<span class='text_page_counter'>(24)</span><div class='page_container' data-page=24>

Sử dụng màu sắc (tt)



Nhấn mạnh (tt)

 Để nhấn mạnh hoặc thu hút sự chú ý, sử dụng màu sắc tươi

sáng.

 Độ cảm nhận về ánh sáng màu từ nhiều đến ít là trắng,

vàng, xanh lá cây, đỏ và xanh lục. Ngoài ra, theo mức độ
ánh sáng xung quanh cao, màu sắc thường vỡ ra hoặc khơng
bão hịa

 Sử dụng màu sắc tương phản để nhấn mạnh sự phân biệt.

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

</div>
<span class='text_page_counter'>(25)</span><div class='page_container' data-page=25>

Chọn màu trong thiết kế



Lựa chọn chung

 Các màu sắc ấm áp như đỏ, vàng, da cam sử dụng cho

các hành động hoặc tình huống nhằm thu hút sự chú ý.

 Những màu sắc thoáng mát như xanh lá cây, xanh lục,

xanh tím, tím sử dụng cho màu nền hoặc thơng tin trạng
thái

 Sử dụng màu sắc phù hợp với mong muốn của người

</div>
<span class='text_page_counter'>(26)</span><div class='page_container' data-page=26>

Chọn màu trong thiết kế (tt)



Một số 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 lá 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

</div>
<span class='text_page_counter'>(27)</span><div class='page_container' data-page=27>

Chọn màu trong thiết kế (tt)



Vị trí sử dụng

 Vị trí trung tâm: mắt nhạy cảm nhất với màu xanh lá cây

và màu đỏ ở vị trí trung tâm, các vùng biên của mắt không
nhạy cảm với màu sắc này

 Vị trí ngoại vi: sử dụng các màu xanh lục, vàng, đen, hoặc

màu trắng. Vùng ngoại vi của mắt nhạy cảm với màu sắc
này

 Vị trí liền kề: các màu sắc xuất hiện liền kề với nhau nên

</div>
<span class='text_page_counter'>(28)</span><div class='page_container' data-page=28>

Chọn màu trong thiết kế (tt)

 Thứ tự

 Nếu thứ tự của màu sắc là cần thiết, chẳng hạn như cao hay

thấp, mức độ, chiều sâu… thì nên xếp theo thứ tự quang phổ
của chúng.

 Trình tự của quang phổ là đỏ, da cam, vàng, xanh lá cây, xanh

lục, chàm và tím

 Nền trước

 Màu nền trước nên khác nhau càng nhiều càng tốt so với màu

nền. Mức độ khác nhau càng lớn càng làm tăng mức độ dễ đọc

 Các màu sắc ít bão hịa như màu trắng, vàng, xanh lá cây cũng

</div>
<span class='text_page_counter'>(29)</span><div class='page_container' data-page=29>

Chọn màu trong thiết kế (tt)



Nền sau

 Màu nền sau nên tổ chức thành một thể thống nhất, cách

ly khỏi phần cịn lại của màn 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, vì chúng cung cấp độ
tương phản tốt

 Màu xanh sử dụng tốt cho màu nền vì chúng ít nhạy cảm

cho mắt.

 Theo khuyến cáo, màu nền tối theo thứ tự ưu tiên gồm các

</div>
<span class='text_page_counter'>(30)</span><div class='page_container' data-page=30>

Chọn màu trong thiết kế (tt)

</div>
<span class='text_page_counter'>(31)</span><div class='page_container' data-page=31>

Chọn màu trong thiết kế (tt)



Màu sắc cho văn bản (tt)



Khi lựa chọn màu, nên chọn màu nền sau trước, sau

đó mới chọn màu cho tiền cảnh.



Hạn chế số lượng màu sắc khơng q bốn màu



Thanh cơng cụ nên được trình bày với các màu sắc

dễ dàng cho việc đọc và phân biệt với các phần

màn hình



Ln ln thử nghiệm màu sắc như là một bước

</div>
<span class='text_page_counter'>(32)</span><div class='page_container' data-page=32>

Chọn màu trong thiết kế (tt)



Màu sắc cho màn hình thống kê

 Màu sắc nhấn mạnh nên tập trung vào khu vực dữ liệu

như số, văn bản

 Không sử dụng quá 6 màu sắc cùng lúc, nên sử dụng

một màu với 5 mức độ sáng khác nhau

 Sử dụng màu nền trung lập

 Kích thước đủ lớn để không làm biến dạng

 Để chỉ trạng thái, dùng màu xanh lá cây hoặc xanh để

</div>
<span class='text_page_counter'>(33)</span><div class='page_container' data-page=33>

Chọn màu trong thiết kế (tt)



Chọn màu cho trang web

 <i>Mục đích:</i> màu sắc nên ln ln được sử dụng cho một mục

đích có ý nghĩa

 <i>Bảng màu:</i> sử dụng màu sắc phổ biến trên các nền tảng

hoặc trình duyệt. Có 216 màu trên 256 màu là luôn giống
nhau trên bất kỳ màn hình

 <i>Trình bày:</i> màu sắc nên lựa chọn cẩn thận để cung cấp cho

người dùng trong sự hiểu biết, để giữ ở trạng thái cân bằng
và đồ họa đơn giản

 <i>Liên kết:</i> sử dụng màu sắc khác nhau cho các trạng thái

</div>
<span class='text_page_counter'>(34)</span><div class='page_container' data-page=34>

Các trường hợp sử dụng màu nên

tránh



Dựa hoàn toàn vào màu sắc



Quá nhiều màu sắc cùng 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 bằng các màu sắc



Thiếu màu sắc tương phản



Bão hịa hồn tồn

</div>
<span class='text_page_counter'>(35)</span><div class='page_container' data-page=35>

Các trường hợp sử dụng màu nên

tránh



Khu vực màu sắc nhỏ



Màu không nổi bật



Màu đỏ và xanh lá cây ở vùng biên



Các màu lân cận chỉ khác nhau thành phần màu

xanh



Màu sắc khác biệt duy 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

</div>
<span class='text_page_counter'>(36)</span><div class='page_container' data-page=36></div>