Cơ chế phối màu trong UX/UI (Phần 2)

Tiếp nối Phần 1…

Các button, chip và phần quản lý selection

Button, chip và bảng quản lý selection sẽ nổi bật hơn nếu bạn apply màu chủ đạo hoặc màu phụ vào nó.

Bảng màu 

• Màu baseline cho phần text và các nút ngoài sẽ là màu chủ đạo.
• Màu baseline color cho các nút action nổi và các nút action nổi bản mở rộng sẽ là màu phụ.
• Màu baseline color phần selection control sẽ là màu phụ.

Cơ chế màu cho app này bao gồm màu chủ đạo (Tím 500) kèm theo tông tối (Tím 600) và màu phụ (Xanh teal 200).

1. Nó dùng màu chủ đạo (Tím 500) vào bottom app bar và màu phụ (Xanh teal 200) để tạo điểm nhấn cho nút action nổi floating và phần điều khiển selection.
2. Nó dùng màu phụ (Xanh teal 200) cho phần Danh sách các item đã chọn.

Xem tin tuyển dụng UI UX designer lương cao trên TopDev

Các button, chip và phần quản lý selection

App dùng màu chủ đạo (Hồng 100) cho nút action nổi chính và chip. Còn phần thanh kéo thả thì dùng màu (Hồng 900).

 

Nên                                                              Không nên

Phần quản lý selection nên được apply            Không nên dùng một trong các màu content màu phụ.                                                     làm phần Lưu ý, sẽ không được nổi bật.

FAB dùng màu phụ của app này (Cam 500), tương phản với UI ở ngoài.

App này sử dụng chủ yếu tông Trắng và Đen cho tất cả các nút, phần quản lý selection và icon. Các component sẽ nổi lên hẳn vì chúng tương phản với phần content nhiều màu.

Typography and iconography 

Màu có thể hiển thị cho text được lớn hơn, nhỏ hơn, tương ứng với các text khác. Màu sắc cũng đảm bảo việc text dễ đọc khi chèn trên ảnh hoặc trên background, những cái thuường làm cho text trở nên khá khó đọc.

App này sử dụng màu chủ đạo (Tím 500) và màu ohuj (Cam 600). Màu cam làm nổi bật phần headline lên và màu tím được áp dụng cho các tab và button.

Bạn nên dùng màu chủ đạo hoặc màu phụ cho những phần text quan trọng như tab và headline.

App này sử dụng mày phụ (Cam 800) làm nổi và thu hút sự chú ý vào các headline.

App này thì sử dụng màu chủ đạo (Xanh lá 800) cho các tab, có hiển thị sự khác biệt giữa phần được chọn và không được chọn.

NÊN.                                                                 NÊN. 

Dùng màu chủ đạo hoặc màu phụ để làm            Bạn cũng có thể dùng màu chủ đạo hoặc nổi phần text ngắn, ví dụ phần headline.             màu phụ cho phần có back link.

CẨN TRỌNG. 

Tránh sử dụng màu chủ đạo tone sáng hoặc màu phụ cho phần body text.

Icon giúp định hướng được các action cũng như cung cấp thêm thông tin. Màu sắc của chúng thường nên tương phản với màu nền để đảm bảo rằng chúng dễ thấy và dễ đọc.

App này dùng cả màu chủ đạo (Xanh lá 800) và màu phụ (Cam 800) cho phần icon.

Shrine sử dụng màu chủ đạo tone tối (Hồng 900) cho phần icon.

TopDev via material.io