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

CHƯƠNG: Tổng quan màu sắc Khái niệm màu sắc UI Tầm quan trọng hài hòa màu sắc UI Chương I I Khái niệm màu sắc UI Màu sắc vấn đề nhận thức, phần thiết yếu tương tác người điện thoại di động Tương tự yếu tố khác kiểu chữ, người thiết kế nên lựa chọn màu sắc cách cẩn thận Mỗi màu đại diện cho bước sóng xác định khác nhau, cảm nhận màu sắc khác tùy thuộc vào khả cảm nhận Hơn nữa, tất có liên tưởng văn hóa ngữ cảnh khác mà gắn với màu sắc Việc lựa chọn màu sắc dựa số lý thuyết tâm lý học màu sắc Tầm quan trọng hài hoà màu sắc UI Trong trải nghiệm thị giác, hài hòa thứ dễ làm hài lịng mắt Nó thu hút người xem tạo cảm giác trật tự bên trong, cân trải nghiệm thị giác Khi khơng hài hịa, nhàm chán rối mắt Ở mức độ trải nghiệm hình ảnh nhạt nhồ đến mức người xem không bị thu hút Bộ não người từ chối thông tin kích thích Ở khía cạnh khác trải nghiệm hình ảnh trớn, hỗn loạn đến mức người xem khơng thể đứng nhìn Bộ não người từ chối khơng thể tổ chức, hiểu Vậy phải làm để có trải nghiệm thị giác tốt nhất? Trải nghiệm thị giác cần phải có cấu trúc logic để hiểu chúng Sự hài hịa màu sắc cung cấp cấu trúc Bản thân hài hòa đơn giản xếp hài lòng thứ khác Do đó, hài hịa màu sắc định nghĩa dễ dàng kết hợp màu sắc để tạo hiệu ứng đẹp mắt Do đó, hài hòa màu sắc yếu tố quan trọng để đáp ứng mong muốn não tổ chức hình thành mối quan hệ khách hàng với thiết kế Nhóm Hiểu cách kết hợp màu sắc quan trọng việc chúng tự hoạt động yếu tố hình thành nên thiết kế tốt Như bạn biết thiết kế, số màu sắc phù hợp với nhau, màu khác xung đột Tuy nhiên, điều bạn chưa thể nắm bắt có quy tắc rõ ràng cách chúng tương tác mà quan sát tốt bánh xe màu: CHƯƠNG: Màu sắc UI Mối quan hệ màu sắc người thiết kế UI Tầm quan trọng hài hòa màu sắc UI MÀU SẮC TRONG UI “ Màu sắc giống đặc tính, theo thay đổi cảm xúc ” - Pablo Picasso - 1.1 TÂM LÝ HỌC MÀU SẮC TRONG THIẾT KẾ UI Tâm lý học màu sắc thực nhánh ngành tâm lý học hành vi Màu sắc cơng cụ giao tiếp mạnh mẽ sử dụng tâm lí để báo hiệu hành động, ảnh hưởng đến tâm trạng chí ảnh hưởng đến phản ứng sinh lý người Đặc biệt với thiết kế giao diện người dùng màu sắc phần thiếu việc truyền tải thương hiệu góp phần điều hướng hành vi người dùng Nhóm 1.2 Trong lĩnh vực thiết kế giao diện người dùng (UI), người dùng trung tâm trình thiết kế Trong màu sắc yếu tố quan trọng để thu hút người dùng Màu sắc định đến nhận thức phản ứng người dùng họ sử dụng giao diện, hình thành theo nhiều cách khác Việc sử dụng màu sắc bừa bãi thiết kế UI gây nhầm lẫn cho người dùng, từ sản phẩm thiết kế khơng đạt hiệu cao MÀU SẮC TRONG UI VỚI MẮT NGƯỜI DÙNG Ví dụ Việc kết hợp văn màu đỏ xanh lam ảnh hưởng đến khả đọc người dùng ? Tại lại có tượng này? Cơ mắt điều khiển thủy tinh thể để nhận bước sóng ánh sáng lên võng mạc, màu đỏ có bước sóng lớn nhiều so với xanh hay xanh lam Điều cho thấy, kết hợp màu sắc có bước sóng chênh lệch cao với sau truyền tới mắt người dù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ả mỏi mắt tập trung cho người dùng Nhóm Chính vậy, thiết kế UI để đạt hiệu trải nghiệm người dùng hình khơng nên kết hợp xanh lam với màu đỏ xanh với màu đỏ Đặc biệt không nên kết hợp văn có màu xanh lam xanh đỏ ngược lại, điều ảnh hưởng đến khả đọc người dùng MÀU SẮC TRONG UI Tạo ý cho người dùng Màu sắc UI sử dụng để tác động đến người nhìn thấy nghĩ họ nhìn thấy Khi truyền tải thơng điệp hình, thơng điệp sử dụng màu sắc bật nội dung khác cách nhìn người dùng dễ dàng ý đến thông điệp Hoặc nội dung có mối quan hệ, nhóm thiết kế màu sắc bố trí hợp lý tạo thống nhất, từ người dùng nhanh chóng nhận dạng Ví dụ “STOP WAR, PEACE NOW” hay “STOP PEACE, WAR NOW” ? Sử dụng màu sắc để tạo ý kêu gọi người dùng hành động button giao diện người dùng Kết hợp màu sắc bật sử dụng màu gradient để tạo độ 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 không ngoại lệ với yếu tố ảnh, Nhóm icon, hình 13 2.1.4 Sử dụng màu xám Đối với thành phần thiết kế cần phân biệt rõ ràng, sử dụng màu đen, xám, trắng Các giá trị đề xuất trắng, xám nhạt, xám trung bình, xám đậm, đen Khả người dùng nhận biết chi tiết nhỏ với màu sắc Phân giải chi tiết tốt đen trắng Màu trắng: Nền hình màu trắng văn màu trắng đen Xám nhạt: Vùng nút bấm Xám trung bình: Vùng Icon, thiết kế Icon, Menu drop shadow, Window drop shadow, lựa chọn menu tệp Xám đậm: Sử dụng cho border đường viền Đen: Màu văn bản, tiêu đề, viền thiết kế Icon, dòng kẻ 2.1.5 Sử dụng hình đơn sắc Màn hình đơn sắc màu sử dụng thiết kế UI Màn hình thiết bị hiển thị để bàn đơn sắc trắng, cam xanh đánh giá hiệu suất khả đọc khoảng cách xem khác Ở khoảng cách xem tiêu chuẩn, khơng có khác biệt hiệu suất đáng kể trắng, cam xanh Tất dùng Sở thích chủ quan khác nhau, cung cấp cho người xem lựa chọn màu số Ở khoảng cách xem xa, màu trắng màu dễ đọc màu tốt lựa chọn Đối với khoảng cách xem, màu trắng lựa chọn tốt Màu trắng có xác suất tạo dư ảnh thấp Nhóm Sử dụng màu giá trị màu Background, Foreground Selected mode, Top shadow, Botton shadow để tạo giao diện 3D hình 14 MÀU SẮC TRONG UI 2.2 CHỌN MÀU CHO MÀN HÌNH ĐỒ HỌA VĂN BẢN Sử dụng kết hợp foreground/background hiệu Chọn màu trước Hiển thị không bốn màu lúc Sử dụng màu sắc công cụ cách tối ưu Kiểm tra màu chọn Nhóm Để hiển thị liệu, văn ký hiệu hình đồ họa dạng văn màu sắc chọn phải có đủ khả hiển thị, ý nghĩa, độ tương phản hài hòa 15 Kết hợp foreground/background hiệu Từ tập hợp màu gồm 16 khác khác nhau, 120 kết hợp màu đánh giá cho thời gian phản hồi để xác định ký tự sở thích chủ quan người dùng Phần lớn kết hợp tốt có màu sáng cường độ cao làm màu trước Phần lớn kết hợp kết hợp có độ tương phản thấp Màu tổng thể tốt màu đen Màu tổng thể màu nâu Tính linh hoạt đa dạng tối đa việc chọn màu trước với đen xanh lam (Những tảng chiếm gần nửa số kết hợp tốt.) Màu nâu xanh lựa chọn Do đặc điểm mắt, số màu sáng màu khác tông màu kết hợp tốt thường sở hữu màu tiền cảnh sáng cường độ cao Nhóm 16 MÀU SẮC TRONG UI Chọn trước tiên Khi chọn màu để hiển thị, tốt bạn nên chọn màu trước Sau đó, chọn màu foreground phù hợp Sử dụng tối đa màu Hiển thị nhiều bốn màu lúc hình văn dẫn đến cảm giác “quá nhiều” Việc sử dụng hai, ba, màu thường thấy Vì vậy, bốn màu hiển thị khoảng thời gian loạt hình, khơng hiển thị nhiều bốn màu lúc hình Sử dụng màu sắc cơng cụ cách cẩn trọng Các biểu tượng công cụ thường có kích thước nhỏ Trình bày chúng màu sắc hữu ích, hầu hết thường làm gián đoạn tính dễ đọc Sử dụng màu sắc biểu tượng công cụ cách đơn giản, 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 biểu tượng thêm ý nghĩa Nhóm 17 2.3 CHỌN MÀU CHO MÀN HÌNH ĐỒ HỌA THỐNG KÊ Biểu diễn trực quan, không gian vật lý thông tin - trái ngược với biểu diễn số, chữ số, văn ký hiệu - gọi đồ họa thống kê liệu Các loại đồ họa thống kê phổ biến bao gồm biểu đồ thanh, biểu đồ đường, biểu đồ phân tán biểu đồ hình trịn Màu sử dụng để hiển thị hình đồ họa thống kê dễ đọc có ý nghĩa Nhấn mạnh Nhấn mạnh liệu đồ họa Điểm nhấn màu sắc hình đồ họa thống kê phải nằm vùng liệu Màu sắc sáng điểm bật thu hút ánh nhìn vào liệu trình bày để nhanh chóng nhận xu hướng kết luận Văn hỗ trợ, số thích nhấn mạnh chút Hỗ trợ giải thích liệu chẳng hạn lưới nên nhận nhấn mạnh Số lượng màu Hiển thị nhiều sáu màu lúc hình đồ họa thống kê nhiều Tuy nhiên, năm sáu màu gây rối mắt khó hiểu chúng không chọn cách không hài hịa Cách xếp dễ chịu thường đạt đồ họa có từ năm phân đoạn trở xuống cách sử dụng màu hiển thị phân đoạn giá trị độ đậm nhạt khác Nhóm 18 MÀU SẮC TRONG UI Kích thước Cung cấp hình ảnh có kích thước phù hợp với u cầu Nếu hình ảnh thay đổi kích thước, sử dụng màu thể thay đổi tối thiểu sắc độ độ đậm nhạt Màu trắng, vàng đỏ tối Khi vùng màu giảm kích thước, chúng dường thay đổi độ đậm nhạt độ bão hịa Các màu tương tự trơng khác màu khác trông giống Tương tác với màu tăng lên Đối với hình ảnh thay đổi kích thước, sử dụng màu sắc thể thay đổi màu sắc độ đậm nhạt tối thiểu Backgrounds Trạng thái Để biểu thị trạng thái, sử dụng màu sau: Đúng, bình thường OK: Xanh lục, trắng xanh lam Thận trọng: Màu vàng vàng kim Khẩn cấp bất thường: Màu đỏ Để biểu thị trạng thái, sử dụng màu xanh cây, trắng xanh lam để biểu thị OK; vàng cho thận trọng màu đỏ cho trường hợp khẩn cấp bất thường Việc sử dụng màu đỏ, vàng xanh quy ước màu sắc thơng báo rõ ràng Nhóm Hình ảnh xung quanh Màu trung tính Màu bổ sung cho hình ảnh Nền trung tính giúp tạo màu sắc đầy đủ Nền màu bổ sung hình ảnh giảm thiểu dư ảnh 19 Những ấn tượng vật lý Kích thước: Lớn hơn: Sử dụng màu sáng bão hòa Nhỏ hơn: Sử dụng màu tối khơng bão hịa Tương tự: Sử dụng màu có độ đậm nhạt Nhấn mạnh: Nặng: Sử dụng màu tối, bão hòa Nhẹ: Sử dụng mà u sáng, khơng bão hịa Khoảng cách: Gần: Sử dụng màu bão hịa, sáng, bước sóng dài (đỏ) Xa: Sử dụng màu bão hòa, tối, bước sóng ngắn (xanh lam) Chiều cao: Để tạo ấn tượng chiều cao, sử dụng màu sáng, không bão hòa Chiều sâu: Để truyền đạt ấn tượng chiều sâu, sử dụng màu tối, bão hòa Mức độ tập trung: Để truyền đạt ấn tượng mức độ tập trung, sử dụng Cao: Màu bão hịa Thấp: Màu khơng bão hịa Tầm quan trọng thay đổi: Để truyền đạt ấn tượng mức độ thay đổi, sử dụng Thấp nhất: Các màu có bước sóng ngắn (xanh lam) Cao nhất: Các màu có bước sóng dài (đỏ) Tính trung lập: Để truyền đạt ấn tượng trung tính, sử dụng màu đen, xám trắng Nhóm 20 MÀU SẮC TRONG UI 2.4 Xu hướng màu sắc thiết kế UI Gradient Xu hướng thiết kế thay đổi nhanh chóng năm gần đây, với số thứ biến thời gian sau quay trở lại Đó trường hợp gradient Gradients trở lại hiệu ứng đa tông thúc đẩy thiết kế đại cách đáng kể Có thể dễ dàng nhận thấy xu hướng xuất nhiều app Phong cách màu làm cho đối tượng bật cách tạo chiều sâu cho đối tượng Tuy nhiên đừng lạm dụng nó, cách tốt để tạo gradients nên sử dụng không màu tránh màu xung đột với Trong UI nên sử dụng gradient tuyến tính cho khu vực hình vng đa giác Sử dụng gradient xuyên tâm cho vùng trịn Màu gradient có xu hướng màu sáng Những gam màu sáng không mang lại kích thước chiều sâu cho giao diện người dùng, mà cịn tạo cảm giác tích cực cho họ Hơn nữa, gradient hướng tới phong cách giản đơn tinh tế Nhóm 21 Pastel màu nhạt tạo cảm giác dịu mắt Sự xuất gam màu pastel nơi đem đến hình ảnh đỗi tinh khiết nhẹ nhàng Những gam màu pastel có xu hướng yêu thích nhiều thường hồng, xanh dương, xanh lá, vàng, cam Phối màu tương đồng dựa vào màu bên cạnh bảng màu Điều tạo thiết kế hấp dẫn hơn, dễ nhìn Mẹo Màu pastel thường sử dụng background, logo, icon Background màu pastel, sử dụng cách, tạo nên nội dung chủ đạo cho app mà khơng làm chìm văn bên Nhóm 22 MÀU SẮC TRONG UI Dark Mode Vào năm 2020, nhà thiết kế app dần thích nghi với thói quen người dùng tập trung vào chế độ tối Ở chế độ tối, chữ sáng màu tương phản lại với background tối màu Xem điện thoại chế độ tối không bảo vệ mắt bạn khỏi bị khô, mỏi nhắn tin “lướt face” nơi có ánh sáng kém, mà cịn giúp tiết kiệm pin cho điện thoại Trong thiết kế app năm 2020, số designer sử dụng màu neon glowing gradient để làm yếu tố bật lên tối đặc biệt số ứng dụng âm nhạc Nhóm 23 Future Color Một xu hướng hàng đầu công “branding” app vào năm màu sắc “cực độ” Có nhiều nhà thiết kế cho hết sắc cầu vồng vào app họ, có nhiều người khác, dụng Trái ngược với màu nâu xanh (màu tông đất) màu tím, xanh dương hồng mà thấy thống trị app màu thực tự nhiên, tạo người Chúng màu sắc bật background tối, tạo hiệu ứng rực rỡ, chí cảm giác “cyberpunk” (cái cảm giác mà phim khoa học viễn tưởng mang lại) Ngồi cịn có lý khác khiến nhà thiết kế định sử dụng màu sắc Trong thời đại công nghệ thiết bị điện thoại thơng minh phát triển hiển thị màu sắc sống động rực rỡ cách hồn hảo Nhóm 24 MÀU SẮC TRONG UI Retro Một xu hướng thiết kế app bật phong cách retro Cụ thể hơn, nói đến thiết kế gợi nhớ lại video game hình máy tính cuối năm 80 đầu năm 90, với kiểu chữ pixel đồ họa đơn giản, khối hộp Ở số app, app bên Jessica Alvaro, font chữ retro giữ cố định chỗ, thu hút ý người dùng đến nút start cách tương phản với font chữ đại nơi khác hình Nhóm 25 CHƯƠNG: Tổng kết Mẹo hữu ích TỔNG KẾT TỔNG KẾT 26 Màu sắc có độ sáng thấp để xem mở rộng người xem lớn tuổi Mắt thích ứng với màu sắc trình xem mở rộng Khả mắt giảm dần theo tuổi tác lượng ánh sáng qua giảm Tất màu trông tươi sáng màu bị mờ ban đầu không rõ ràng Màu sáng cần thiết để tránh vấn đề đọc Màu sắc thu hút ý thu hút mắt người nhìn Nếu sử dụng cách, nhấn mạnh thông tin, phân biệt thành phần hình, làm bật khác biệt phần tử làm cho hình hiển thị thú vị hấp dẫn Nếu sử dụng không cách, màu sắc gây tập trung gây mờ mắt mặt thị giác, làm giảm khả sử dụng hệ thống Ngày nay, công nghệ cải thiện, kiến thức cách tạo nên thiết kế đẹp phổ cập rộng rãi hơn, màu sắc hình sử dụng hiệu Tuy nhiên, khơng có nghĩa tất vấn đề giải Hai số vấn đề phổ biến hình thu hút ý liệu hình (là yếu tố quan trọng hình) lạm dụng màu sắc ngơn ngữ đồ họa Có độ bão hịa cao, màu cực phổ với Các hiệu ứng kết hợp phổ biến tạo vấn đề tiêu điểm mắt, ảo ảnh bóng sau ảnh Ngoài màu đỏ / xanh lam vàng / tím, kết hợp khác gây cố vàng / xanh dương, xanh / xanh lam đỏ / xanh Chỉ dựa vào màu sắc Xem xét nhu cầu người xem mù màu ảnh hưởng ánh sáng xung quanh đến cảm nhận màu sắc Đừng đánh giá thấp giá trị vai trò kỹ thuật khác, chẳng hạn định dạng không gian vị trí thành phần thiết kế hình tốt Màu sắc bão hịa hồn tồn cho thành phần hình cần đọc nhiều Màu sắc bão hịa hồn tồn kích thích mắt q mức, gây nhầm lẫn mệt mỏi cho thị giác Màu sắc tương đồng Các màu không đối lập, đỏ / vàng xanh / xanh lam, tạo hình ảnh Các màu đối lập, đỏ / xanh vàng / xanh lam màu kết hợp tốt để hiển thị đơn giản Màu sắc có độ sáng Khơng thể dễ dàng phân biệt màu có độ sáng Phải tồn khác biệt độ sáng màu liền kề Quá nhiều màu lúc Sử dụng nhiều màu lúc làm lợi ích màu sắc Thời gian phản hồi tăng lên, liên kết sai thực hiện, việc xử lý thông tin bị can thiệp tạo nhầm lẫn Sử dụng màu sắc vừa đủ để tạo hiệu giao tiếp Nhóm ... ràng cách chúng tương tác mà quan sát tốt bánh xe màu: CHƯƠNG: Màu sắc UI Mối quan hệ màu sắc người thiết kế UI Tầm quan trọng hài hòa màu sắc UI MÀU SẮC TRONG UI “ Màu sắc giống đặc tính, theo thay... CHƯƠNG: Tổng quan màu sắc Khái niệm màu sắc UI Tầm quan trọng hài hòa màu sắc UI Chương I I Khái niệm màu sắc UI Màu sắc vấn đề nhận thức, phần thiết yếu tương tác người điện thoại di... biến khó phân biệt giữa màu đỏ, vàng xanh Nếu đối tượng hướng đến người mù màu có người mù màu cần tìm hiểu sử dụng màu sắc phù hợp với tất người Nhóm 10 MÀU SẮC TRONG UI Màu sắc UI theo độ tuổi,