Mối quan hệ giữa màu sắc và con người trong thiết kế ui

Do đó, sự hài hòa màu sắc là yếu tố quan trọng để đáp ứng mong muốn của bộ não về tổ chức và hình Hiểu cách kết hợp các màu sắc cũng quan trọng như việc chúng tự hoạt động như thế nào

Tổng quan về màu sắc

Khái niệm về màu sắc trong UI Tầm quan trọng của sự hài hòa màu sắc trong UI

CHƯƠNG:

Màu sắc là một vấn đề của

nhận thức, là một phần thiết yếu

của sự tương tác giữa con người

và điện thoại di động Tương tự

các yếu tố khác như kiểu chữ,

người thiết kế nên lựa chọn màu

sắc một cách cẩn thận Mỗi màu

đại diện cho một bước sóng xác

định khác nhau, nhưng mỗi chúng

ta cảm nhận màu sắc khác nhau

tùy thuộc vào khả năng cảm nhận

của chúng ta Hơn nữa, tất cả

chúng ta đều có các liên tưởng

văn hóa hoặc ngữ cảnh khác nhau

mà chúng ta gắn với màu sắc

Việc lựa chọn màu sắc dựa trên

một số lý thuyết và tâm lý học về

2 Tầm quan trọng của sự

hài hoà màu sắc trong UI

Vậy phải làm thế nào

để có được trải nghiệm thị giác tốt nhất?

Trong trải nghiệm thị giác, sự

hài hòa là thứ dễ làm hài lòng mắt

Nó thu hút người xem và nó tạo ra

một cảm giác trật tự bên trong,

một sự cân bằng trong trải nghiệm

thị giác Khi một cái gì đó không

hài hòa, nó hoặc là nhàm chán

hoặc rối mắt Ở một mức độ nào

đó là trải nghiệm hình ảnh nhạt

nhoà đến mức người xem không bị

thu hút Bộ não của con người sẽ

từ chối những thông tin kém kích

thích Ở một khía cạnh khác là trải

nghiệm hình ảnh quá trớn, hỗn

loạn đến mức người xem không

thể đứng nhìn Bộ não con người

có thể hiểu được chúng Sự hài hòa màu sắc cung cấp cấu trúc đó Bản thân sự hài hòa chỉ đơn giản là một

sự sắp xếp hài lòng của những thứ khác nhau Do

đó, sự hài hòa màu sắc được định nghĩa dễ dàng là

sự kết hợp các màu sắc để tạo ra một hiệu ứng đẹp mắt Do đó, sự hài hòa màu sắc là yếu tố quan trọng để đáp ứng mong muốn của

bộ não về tổ chức và hình

Hiểu cách kết hợp các màu sắc cũng quan trọng như việc chúng tự hoạt động như thế nào

sẽ là một trong những yếu tố hình thành nên một thiết kế tốt Như bạn biết trong thiết kế, một

số màu sắc phù hợp với nhau, trong khi những màu khác sẽ xung đột Tuy nhiên, điều bạn chưa thể nắm bắt được là có những quy tắc rõ ràng về cách chúng sẽ tương tác

mà có thể được quan sát tốt nhất trên bánh xe màu:

Tâm lý học màu sắc thực sự là một

nhánh của ngành tâm lý học hành vi Màu

sắc là một công cụ giao tiếp mạnh mẽ và

có thể được sử dụng trong tâm lí để

báo hiệu hành động, ảnh hưởng đến tâm

trạng và thậm chí ảnh hưởng đến các phản

ứng sinh lý của con người Đặc biệt với

thiết kế giao diện người dùng thì màu sắc

là một phần không thể thiếu trong việc

truyền tải thương hiệu và góp phần điều

-Nhóm 4

Chính vì vậy, trong thiết kế UI để đạt hiệu quả về trải nghiệm người dùng thì trên một màn hình chúng ta không nên kết hợp xanh lam với màu

đỏ hoặc xanh lá cây với màu đỏ Đặc biệt là không nên kết hợp văn bản có màu xanh lam hoặc xanh lá trên nền

đỏ và ngược lại, điều này sẽ ảnh hưởng đến khả năng đọc của người dùng

Việc kết hợp văn bản màu đỏ trên

nền xanh lam ảnh hưởng đến khả

năng đọc của người dùng

?

Ví dụ 1

Tại sao lại có hiện tượng này?

Cơ mắt sẽ điều khiển thủy tinh thể để

nhận các bước sóng ánh sáng lên võng mạc,

màu đỏ có bước sóng lớn hơn nhiều so với

xanh lá hay hơn nữa là xanh lam Điều này

cho thấy, nếu kết hợp màu sắc có bước sóng

chênh lệch cao với nhau sau đó truyền tới

mắt người dùng thì những hình ảnh thu trực

tiếp lên võng mạng thay đổi liên tục, làm tăng

khả năng mỏi mắt và mất tập trung cho người

sử dụng giao diện, nó có thể được hình thành theo nhiều cách khác nhau Việc sử dụng màu sắc bừa bãi trong thiết kế UI có thể gây nhầm lẫn cho người dùng, từ đó sản phẩm thiết kế

Sử dụng màu sắc để tạo sự chú ý như kêu gọi người dùng hành động bằng button trên giao diện người dùng Kết hợp màu sắc nổi bật hoặc sử dụng màu gradient để tạo độ nổi của nút bấm, làm cho người dùng cảm giác muốn tương tác với nút bấm

Điều này không ngoại lệ với các yếu tố như icon, hình

Màu sắc trong UI có thể được sử dụng để tác động đến những gì mọi người nhìn thấy hoặc

Khi truyền tải thông điệp trên màn hình, nếu thông điệp sử dụng màu sắc nổi bật hơn các nội dung khác thì bằng cách nhìn người dùng sẽ dễ dàng chú ý đến thông điệp đó Hoặc các nội dung có cùng mối quan hệ, cùng nhóm được thiết kế cùng màu sắc và bố trí hợp lý sẽ tạo

“STOP PEACE, WAR NOW” ?

Ví dụ 2

Khả năng tương tác trải nghiệm người dùng

Người mù màu hầu hết không mù hết tất

cả các màu mà chỉ một số màu, nhưng thực

sự bị thiếu màu khiến họ khó để xem sự khác

biệt giữa một số màu Có nhiều dạng mù màu

nhưng phổ biến nhất là khó phân biệt giữa

giữa màu đỏ, vàng và xanh lá Nếu đối tượng

chúng ta hướng đến là những người mù màu

hoặc có người mù màu thì cần tìm hiểu và sử

dụng các màu sắc phù hợp với tất cả mọi

Trong thiết kế UI màu sắc cũng

được cẩn thận xem xét theo giới

tính, đặc biệt là những giao diện

hay dịch vụ dành riêng theo giới

tính Nam giới thường thích các

màu tương phản, tươi sáng,

trong khi phụ nữ thích các sắc

thái nhẹ nhàng hơn Cả nam giới

và phụ nữ đều thích xanh lam và

xanh lá cây, nhưng nhiều phụ nữ

lại yêu thích màu tím trong khi

màu này lại hạn chế ở nam giới

của họ, tùy vào mục tiêu chúng ta hướng tới cần thiết kế phù hợp Ví dụ, trong hầu hết các nền văn hóa phương Tây, màu trắng nói đến với khát vọng, sự ngây thơ, trong trắng và hy vọng Nhưng ở một số nơi ở châu Á, màu trắng có liên quan đến xui xẻo, chết chóc và tang tóc Điều quan trọng đối với những người thiết kế UI là phải xem xét đối tượng thiết kế để chọn màu phù hợp Để ngăn chặn hàm ý tiêu cực về văn hóa, khi hướng đến khán giả toàn cầu, cần có sự cân bằng giữa màu sắc và

Khi nghiên cứu người dùng, lứa tuổi quyết định đến nhận thức của họ về giao diện họ đang sử dụng, đặc biệt rằng màu sắc và sở thích thay đổi tùy theo độ tuổi Màu xanh lam luôn được ưa chuộng trong suốt cuộc đời trong khi vàng được ưa thích trong thời thơ ấu, sở thích này có xu hướng giảm dần khi chúng ta già đi Khi con người trưởng thành, họ ưa chuộng các màu có bước sóng ngắn hơn (xanh lam, xanh lục, tím) hơn là các màu có bước sóng dài hơn (đỏ, cam, vàng).

Nhóm 4

Khi lựa chọn màu sắc để

hiển thị, cần phải xem xét

tiêu chính của việc sử dụng

màu sắc là giao tiếp, để hỗ

trợ việc truyền thông tin từ

thước của vùng màu vượt quá khoảng 3 inch hình vuông Các hình ảnh nhỏ hơn sẽ bị khử bão hoà và thay đổi một chút về màu sắc.Ngoài ra, một vài sự khác biệt nhỏ về màu sắc đôi khi

có thể không rõ ràng Các hình ảnh nhỏ có màu liền kề xuất hiện trước mắt dễ bị hợp nhất hoặc trộn lẫn Hình ảnh liền kề

có thể ảnh hưởng đến cảm nhận màu sắc Một màu trên nền tối trông sẽ nhạt hơn và sáng hơn so với màu tương tự trên nền sáng Nhìn vào một màu bão hòa trong một khoảng thời gian cũng có thể tạo ra dư ảnh bổ sung Màu sắc cũng thay đổi khi mức độ ánh sáng thay đổi Mức độ ánh sáng xung quanh cao hơn có xu hướng khử bão hòa màu sắc

2.1.3 Màu sắc trong các loại ngữ cảnh

Màu nền trước phải càng

khác màu nền sau càng tốt

Nền trước hoàn toàn khác

biệt sẽ tối đa hóa tính dễ

đọc của văn bản Với màn

hình có độ phân giải cao,

màu văn bản được đề xuất

nhiều nhất là màu đen và

được trình bày trên nền màu

màu trung tâm quang phổ

không bão hòa, chẳng hạn

như trắng, vàng hoặc xanh

lục, trên nền tối cũng hoạt

hơn của màu nền trước

Khi thiếu sáng, phải duy trì độ tương phản đủ mạnh với cả nền và phần

tử không được chiếu sáng để có thể dễ đọc và phân biệt hình ảnh Nên tránh sử dụng đồng thời highlight và lowlight Sử dụng chúng cùng nhau có thể gây nhầm lẫn cho người xem Ngoài ra, cần thận trọng trong việc sử dụng highlighting và lowlighting để duy trì sự đơn giản và rõ ràng Lý thuyết màu sắc cũng đề xuất sử dụng các màu

ấm hơn, năng động hơn cho nền trước Màu sắc

ấm hơn tăng lên, buộc phải chú ý Tuy nhiên, hãy thận trọng khi sử dụng màu đỏ và cam bão hòa

Màu sắc cần được phối thống nhất và hài hòa tạo nên được sự khác biệt giữa các element với độ contrast hợp

để thông qua đó truyền tải ý nghĩa mà brand

Màu sắc cần được phối thống nhất và hài hòa tạo nên được sự khác biệt giữa các element với độ contrast hợp

để thông qua đó truyền tải ý nghĩa mà brand

Màu nền nên được tạo bằng một nhóm các phần tử như một thể thống nhất, tách biệt chúng 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 nền trước Nền sau phải tinh tế và phù hợp với dữ liệu, văn bản hoặc ký hiệu trên đó Như đã đề cập ở trên, với các màn hình có độ phân giải cao ngày nay, màu nền được đề xuất nhiều nhất là màu trắng hoặc xám cường độ thấp với văn bản màu đen Đối với nền tối, hãy

sử dụng màu tối, mát

mẻ Các màu tối, mát

mẻ sẽ mang lại độ tương phản tốt với các màu nền trước, sáng

Nhóm 4

2.1.4 Sử dụng màu xám

2.1.5 Sử dụng màn hình đơn sắc

Đối với những thành phần thiết

kế cần phân biệt rõ ràng, sử dụng

các màu đen, xám, trắng Các

giá trị được đề xuất là trắng, xám

nhạt, xám trung bình, xám đậm,

đen Khả năng người dùng nhận

biết các chi tiết nhỏ với màu sắc

kém Phân giải chi tiết tốt trên

Màu trắng: Nền màn hình màu

trắng hoặc văn bản màu trắng

Xám nhạt: Vùng nền các nút

Xám trung bình: Vùng nền các

Icon, trong thiết kế Icon, Menu

drop shadow, Window drop

shadow, các thanh lựa chọn trên

Xám đậm: Sử dụng cho các

Đen: Màu văn bản, nền các thanh

tiêu đề, viền và thiết kế Icon, các

Màn hình đơn sắc hoặc một màu vẫn được sử dụng trong Màn hình thiết bị hiển thị để bàn đơn sắc trắng, cam và xanh lá cây được đánh giá

về hiệu suất và khả năng đọc

ở các khoảng cách xem

Ở khoảng cách xem tiêu chuẩn, không có sự khác biệt về hiệu suất đáng kể nào đối với trắng, cam hoặc xanh lá cây Tất cả đều có thể dùng Sở thích chủ quan

có thể khác nhau, vì vậy có thể cung cấp cho người xem

Sử dụng ít nhất 5 màu hoặc

Top shadow, Botton shadow

để tạo giao diện 3D trên màn hình.

Sử dụng kết hợp foreground/background hiệu quả.

Chọn màu nền trước

Hiển thị không quá bốn màu cùng một lúc

Sử dụng màu sắc trong thanh công cụ một cách tối ưu

Để hiển thị dữ liệu, văn bản và ký hiệu trên màn hình đồ họa dạng văn bản màu sắc được chọn phải

có đủ khả năng hiển thị, ý nghĩa, độ tương phản và

Phần lớn các kết hợp tốt có màu sáng hoặc cường độ cao làm màu nền trước.

Phần lớn các kết hợp kém là những kết hợp có độ tương phản thấp

Màu tổng thể tốt nhất là màu đen

Màu tổng thể kém nhất là màu nâu.Tính linh hoạt và đa dạng tối đa trong việc chọn màu nền trước với nền đen hoặc xanh lam (Những nền tảng này chiếm gần một nửa số kết hợp tốt.)Màu nâu và xanh lá cây là những lựa

Do đặc điểm của mắt, một số màu có

vẻ sáng hơn những màu khác các tông màu kết hợp tốt thường sở hữu màu tiền

Kết hợp foreground/background hiệu

Khi chọn màu để hiển thị, tốt nhất bạn nên chọn màu nền trước Sau đó, chọn màu

Hiển thị nhiều hơn bốn màu cùng một lúc trên một màn hình văn bản sẽ dẫn đến cảm giác

“quá nhiều” Việc sử dụng chỉ hai, hoặc đôi khi ba, màu thường thấy nhất Vì vậy, mặc dù hơn bốn màu có thể được hiển thị trong một khoảng thời gian hoặc trên một loạt màn hình, nhưng không hiển thị nhiều hơn bốn màu cùng một lúc trên một màn hình

Các biểu tượng trên

thanh công cụ thường có

chỉ khi màu sắc hỗ trợ cho

việc nhận dạng biểu tượng,

giúp dễ dàng phân biệt các

biểu tượng hoặc thêm ý

nghĩa

Sử dụng màu sắc trong

thanh công cụ một cách

cẩn trọng

Nhấn mạnh dữ liệu của

Điểm nhấn chính của

màu sắc trong màn hình

đồ họa thống kê phải nằm

trong vùng dữ liệu Màu

sắc sáng hơn và điểm nổi

có từ năm phân đoạn trở xuống bằng cách sử dụng một màu và hiển thị từng phân đoạn ở một giá trị hoặc độ đậm

Nhấn mạnh

Số lượng màu

Nhóm 4

Màu trung tính.Màu bổ sung cho

Nền trung tính sẽ giúp tạo ra một màu sắc đầy đủ Nền bằng màu bổ sung của hình ảnh chính sẽ Hình ảnh xung quanh

Cung cấp hình ảnh có kích

Nếu hình ảnh thay đổi kích

thước, hãy sử dụng các màu

thể hiện sự thay đổi tối thiểu

về sắc độ hoặc độ đậm nhạt

Màu trắng, vàng và đỏ trên

Khi các vùng màu giảm

kích thước, chúng dường như

thay đổi về độ đậm nhạt và độ

bão hòa Các màu tương tự có

thể trông khác nhau và các

màu khác nhau có thể trông

giống nhau Tương tác với

Thận trọng: Màu vàng hoặc vàng kim

Để biểu thị trạng thái, hãy sử dụng màu xanh lá cây,

trắng hoặc xanh lam để biểu thị OK; vàng cho thận trọng

và màu đỏ cho trường hợp khẩn cấp hoặc bất thường

Việc sử dụng màu đỏ, vàng và xanh lá cây là những quy

Trạng thái

Nhóm 4

Kích thước:

Lớn hơn: Sử dụng màu sáng hoặc bão hòa

Nhỏ hơn: Sử dụng màu tối hoặc không bão hòa

Để tạo ấn tượng về chiều cao, hãy sử dụng màu sáng, không

Để truyền đạt ấn tượng về chiều sâu, hãy sử

Mức độ tập trung:

Để truyền đạt ấn tượng về mức độ tập trung, hãy sử dụng

Cao: Màu bão hòa

Tầm quan trọng của sự thay đổi:

Để truyền đạt ấn tượng về mức độ thay đổi, hãy sử dụng

Thấp nhất: Các màu có bước sóng ngắn (xanh lam)

Tính trung lập:

Để truyền đạt ấn tượng về sự trung tính, hãy

Những ấn tượng vật lý

Xu hướng thiết kế đã thay đổi nhanh chóng trong những năm gần đây, với một số thứ biến mất trong một thời gian

và sau đó quay trở lại dần dần Đó là trường hợp của gradient Gradients đang trở lại và các hiệu ứng đa tông đang thúc đẩy thiết kế hiện đại một cách đáng

Có thể dễ dàng nhận thấy xu hướng này xuất hiện trên nhiều các app hơn Phong cách màu này làm cho các đối tượng nổi bật bằng cách tạo được chiều sâu cho đối tượng Tuy nhiên đừng lạm dụng nó, cách tốt nhất để tạo ra gradients là chỉ nên sử dụng không quá 3 màu và tránh

Trong UI nên sử dụng một gradient

tuyến tính cho một khu vực hình vuông

hoặc đa giác Sử dụng một gradient

xuyên tâm cho các vùng tròn Màu

gradient đang có xu hướng là những

màu sáng Những gam màu sáng không

chỉ mang lại kích thước và chiều sâu cho

giao diện người dùng, mà nó còn tạo ra

những cảm giác tích cực cho họ Hơn

nữa, gradient cũng hướng tới phong

2.4

Xu hướng màu sắc

trong thiết kế UI

Nhóm 4

Pastel là những màu nhạt tạo cảm giác dịu

mắt Sự xuất hiện của gam màu pastel trên bất

kỳ nơi nào cũng đem đến hình ảnh rất đỗi tinh

khiết và nhẹ nhàng Những gam màu pastel có xu

hướng được yêu thích nhiều nhất thường là hồng,

Phối màu tương đồng dựa vào các màu bên cạnh

nhau trên bảng màu Điều này tạo ra một thiết kế

hấp dẫn hơn, dễ nhìn

Màu pastel thường được sử dụng ở background, logo, icon Background màu pastel, khi được sử dụng đúng cách, có thể tạo nên nội dung chủ đạo cho cả app mà không làm chìm

Mẹo