Cách chọn màu và xác định sắc thái cho các trạng thái khác nhau: Di chuột, Hoạt động, Nhấn, Tắt

Quá trình chọn màu cho giao diện có thể phức tạp, đặc biệt khi xem xét các trạng thái nút, phông chữ và các thành phần giao diện người dùng khác. Trong bài viết này, tôi sẽ chia sẻ các phương pháp và nguyên tắc giúp bạn chọn thành công bảng màu cho dự án của mình.

1. Xác định màu chính

Khi thiết kế một trang web, việc lựa chọn bảng màu thường là điều cần thiết. Đôi khi, khách hàng đã có sẵn màu thương hiệu chính. Trong trường hợp này, nhiệm vụ của bạn là chọn các màu và sắc thái bổ sung sẽ bổ sung cho màu chính. Ngoài màu chính, các màu bổ sung được sử dụng trên trang web cho nhiều mục đích khác nhau như biểu thị trạng thái lỗi, liên kết, hình minh họa, biểu tượng hoặc để sử dụng trong đồ họa và trang tổng quan.

2. Sử dụng màu sắc hài hòa

Để đảm bảo màu sắc hài hòa tốt, nên sử dụng nhiều cách phối màu hài hòa khác nhau như đơn sắc, bổ sung, hình tam giác, v.v. Họ có thể giúp tạo ra một bảng màu hài hòa bổ sung cho màu cơ bản của dự án. Chúng ta hiện đang sống trong một thế giới nơi công nghệ phát triển nhanh chóng và có những dịch vụ đặc biệt giúp dễ dàng tạo ra bảng màu. Ví dụ: tôi sử dụng color.adobe.com.

Đây là cách tôi làm điều đó:

một. Chọn sơ đồ mong muốn từ danh sách thả xuống.

hai. Nhập giá trị màu được yêu cầu vào trường được chỉ định làm màu cơ bản

ba. Xác định màu sắc phù hợp với nhu cầu của tôi.

bốn. Chuyển chúng vào không gian làm việc của tôi, trong trường hợp của tôi là sử dụng Figma.

3. Lựa chọn âm sắc

Tiếp theo, chúng ta cần xác định sắc thái cho từng màu đã chọn. Để chọn sắc thái cho màu đã chọn, bạn có thể sử dụng các dịch vụ cụ thể có thể hỗ trợ quá trình này. Có hai cách để xác định sắc thái cho màu của bạn:

Phương pháp đầu tiên liên quan đến một công thức phức tạp hơn:

1. Chọn màu tiêu đề của bạn (không nhất thiết phải là màu đen).
2. Chuyển sang chế độ HLS.
3. Bỏ qua ô đầu tiên, giảm giá trị 2 cho ô thứ hai và tăng 5 cho ô thứ ba.

Cách thứ hai là sử dụng dịch vụ (dễ dàng và nhanh chóng)

màu sắc.dopely.top

một. Nhập giá trị của màu bạn muốn.

hai. Chọn sắc thái và số bước (tôi đã sử dụng 5).

ba. Chọn sắc thái và số bước.

bốn . Kết quả là, với một màu, tôi đã tạo bảng sau

P = Sơ cấp,

P 60 = đây là màu cơ bản của chúng tôi,

từ P 10 đến P 50 = đây là những tông màu sáng chúng tôi đã thu thập trong Tints,

từ P 60 đến P 100 = đây là những sắc thái tối mà chúng tôi đã thu thập trong bảng Shades.

4. Kiểm tra khả năng tiếp cận màu sắc

Điều quan trọng là đảm bảo rằng tất cả người dùng đều có thể truy cập được màu đã chọn, kể cả những người có khả năng hạn chế. Có các nguyên tắc, chẳng hạn như Nguyên tắc truy cập nội dung web ( WCAG ), có thể được tuân theo khi tạo giao diện. Để kiểm tra khả năng tiếp cận của màu sắc, bạn có thể sử dụng các công cụ cụ thể như plugin hoặc dịch vụ web sẽ xác minh độ tương phản và khả năng tiếp cận của các màu đã chọn.

Plugin Figma – Độ tương phản

Dịch vụ web – Máy làm mát

5. Xác định màu sắc cho các trạng thái giao diện khác nhau

Trong giai đoạn cuối cùng của việc thiết kế bảng màu cho dự án web của bạn, cần xác định số bước cần thiết cho các trạng thái thành phần cụ thể. Thông thường, chúng tôi xác định bốn trạng thái chính:

• Đã bật (trạng thái bình tĩnh và bình thường của phần tử)
• Di chuột (di chuột qua)
• Hoạt động (nhấp vào nút hoặc điều khiển khác)
• Đã tắt (phần tử bị chặn)

Để xác định số bước, chúng tôi sử dụng bảng màu, nơi chúng tôi cố định giá trị màu chính (nguyên tố). Sau đó, chúng tôi đếm số bước cho trạng thái di chuột và trạng thái hoạt động. Sau đó, chúng tôi kiểm tra các trạng thái khác nhau về khả năng truy cập để đảm bảo rằng các nút và văn bản bên trong chúng có thể dễ dàng đọc được.

Ví dụ: hướng dẫn của IBM mô tả cách tiếp cận sau: trạng thái di chuột cách màu ban đầu một bước rưỡi, trong khi trạng thái hoạt động cách màu chính hai bước. Tương tự, trạng thái được chọn sẽ cách màu chính một bước. Phương pháp này cho phép chúng tôi xác định bảng màu và đảm bảo khả năng truy cập của nó cho nhiều đối tượng, bao gồm cả những người dùng có khả năng hạn chế. Cách tiếp cận tương tự được áp dụng cho văn bản, trong đó trạng thái di chuột và trạng thái hoạt động được xác định.

Trạng thái di chuột

Nếu màu chính của bạn nằm trong khoảng từ đen đến 70 – bạn nên tăng nửa bước lên các màu sáng hơn.

Nếu màu chính của bạn nằm trong khoảng từ 60 đến trắng, bạn nên giảm nửa bước sang tông màu tối hơn.

Nhấn / Trạng thái hoạt động

Đối với các giá trị từ 100 đến 70, trạng thái hoạt động trở nên nhẹ hơn hai bước

Đối với các giá trị từ 60 đến 10, trạng thái hoạt động trở nên tối hơn hai bước

Các tiểu bang đã chọn

Đối với các giá trị từ 100 đến 70, trạng thái được chọn sẽ nhẹ hơn một bước

Đối với các giá trị từ 60 đến 10, trạng thái đã chọn sẽ tối hơn một bước

Điều quan trọng nữa là kiểm tra thiết kế và văn bản của bạn để đảm bảo chúng có thể đọc được và hiển thị chính xác. Sau khi hoàn thành công việc, hãy đảm bảo rằng các trạng thái giao diện và văn bản khác nhau trông và hoạt động bình thường.

Việc lựa chọn đúng bảng màu đóng một vai trò quan trọng trong việc tạo ra giao diện người dùng thân thiện và hấp dẫn. Bằng cách làm theo các bước đơn giản này và sử dụng các công cụ có sẵn, bạn sẽ có thể chọn và tối ưu hóa màu sắc cho dự án của mình.

Tôi hy vọng bạn thích bài viết của tôi. Nếu bạn có thắc mắc hoặc cần thêm thông tin, vui lòng để lại nhận xét.