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).
- 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.
- 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 Station D
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.
Floating action button (FAB)
Nút action button nổi (FAB) là phần cần được nổi bật nhất trên app của bạn.
Sử dụng thêm màu để tạo contrast giữa FAB và các yếu tố xung quanh, ví dụ như thanh app bar. Màu baseline cho FAB sẽ là màu phụ. Nếu canva của bạn sử dụng quá nhiều màu, thì FAB nên sử dụng màu đơn sắc để nổi bật hơn phần content.
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.
Typographic hierarchy
Màu sắc giúp tăng độ rõ ràng cũng như độ nổi bật của text.
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.
Headlines and tabs
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.
Độ dễ đọc của 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.
Station D via material.io
