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 đó:    Chọn sơ đồ mong muốn từ danh sách thả xuống.  một.    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  hai.    Xác định màu sắc phù hợp với nhu cầu của tôi. ba.    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. bốn.  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:  Chọn màu tiêu đề của bạn (không nhất thiết phải là màu đen).  Chuyển sang chế độ HLS.  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    Nhập giá trị của màu bạn muốn.  một.    Chọn sắc thái và số bước (tôi đã sử dụng 5).  hai.    Chọn sắc thái và số bước.  ba.    . Kết quả là, với một màu, tôi đã tạo bảng sau bốn    = Sơ cấp, P    = đây là màu cơ bản của chúng tôi, P 60    = đây là những tông màu sáng chúng tôi đã thu thập trong Tints, từ P 10 đến P 50    = đây là những sắc thái tối mà chúng tôi đã thu thập trong bảng Shades.  từ P 60 đến P 100  Lặp lại quy trình tương tự cho các màu, văn bản và trạng thái lỗi khác!  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 (   ), 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. WCAG  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ụ:   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. hướng dẫn của IBM   Trạng thái di chuột  Nếu màu chính của bạn nằm   – bạn nên tăng nửa bước lên các màu sáng hơn.  trong khoảng từ đen đến 70  Nếu màu chính của bạn nằm   đến trắng, bạn nên giảm nửa bước sang tông màu tối hơn.  trong khoảng từ 60   Nhấn / Trạng thái hoạt động  Đối với các giá trị từ   trạng thái hoạt động trở nên nhẹ hơn hai bước 100 đến 70,  Đối với các giá trị từ   trạng thái hoạt động trở nên tối hơn hai bước  60 đến 10,   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.  Hãy nhớ rằng đây là những mẹo dựa trên kinh nghiệm của tôi, bạn có thể thêm các bước của riêng mình, thay đổi trình tự, nhưng đừng quên thực hiện kiểm tra khả năng truy cập để bất kỳ người dùng nào cũng có thể đọc rõ độ tương phản của văn bản và các trạng thái giao diện khác nhau.  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.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The writer was physically present in relevant location(s) to this story. The location is also a prevalent aspect of this story be it news or otherwise.

Read my Articles 

Read My Stories

Coveted Careers: Mastering the Art of Securing Top UI/UX Design Roles in 2024

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

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

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

85 Stories To Learn About Productivity Hacks

85 Stories To Learn About Travel

145 Stories To Learn About Book

179 Stories To Learn About Reading

85 Stories To Learn About Productivity Hacks

85 Stories To Learn About Travel

145 Stories To Learn About Book

179 Stories To Learn About Reading

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps