Màu và chữ là hai thứ khiến một trang trông “có gu” hoặc “như làm vội”. Điều hay là bạn không cần năng khiếu mỹ thuật, chỉ cần giới hạn số lựa chọn. Sau bài này bạn sẽ biết dựng một bảng màu và bộ chữ gọn để đưa cho AI.
Bảng màu: một màu chủ đạo, vài màu phụ
Hãy nhìn bao bì của một thương hiệu trà sữa quen thuộc. Thường chỉ có một màu thương hiệu, một màu nền và một màu chữ. Giao diện cũng nên thế. Một bảng màu thực dụng gồm:
- Màu chủ đạo (primary): dùng cho nút chính, liên kết, điểm nhấn.
- Màu trung tính (neutral): nền, viền, chữ phụ. Đây là nhóm xuất hiện nhiều nhất, thường là các mức xám.
- Màu trạng thái: xanh lá cho thành công, đỏ cho lỗi, vàng cam cho cảnh báo.
Một cách chia hay dùng là 60-30-10: khoảng sáu phần là nền trung tính, ba phần là màu phụ hoặc khối nội dung, một phần là màu nhấn. Đây là quy ước tham khảo để định hướng, không cần tuân thủ từng phần trăm.
Độ tương phản quyết định chữ có đọc được không
Chữ xám nhạt trên nền trắng nhìn tinh tế trong bản thiết kế, nhưng ra nắng ngoài đường thì không ai đọc nổi. Tiêu chuẩn tiếp cận web WCAG khuyên tỉ lệ tương phản giữa chữ thường và nền tối thiểu là 4,5 trên 1. Bạn không cần tự tính: các công cụ kiểm tra tương phản miễn phí trên mạng cho kết quả ngay, và Figma cũng có plugin làm việc đó.
Màu chọn tuỳ tiện
- Năm sáu màu rực cùng lúc
- Chữ xám nhạt trên nền kem
- Nút chính và nút phụ cùng màu
Màu có kỷ luật
- Một màu chủ đạo, còn lại là xám
- Chữ đủ tương phản với nền
- Nút chính nổi bật, nút phụ viền mỏng
Chữ: hai kiểu chữ là đủ
Một trang thường chỉ cần một kiểu chữ cho tiêu đề và một kiểu cho nội dung, thậm chí dùng chung một kiểu. Với tiếng Việt, hãy chọn font có hỗ trợ đầy đủ dấu. Rất nhiều font đẹp bên Latin bị lỗi dấu khi gõ “ắ”, “ữ”, “ộ”, nên bạn luôn phải gõ thử một câu tiếng Việt đủ dấu trước khi chốt. Google Fonts cho phép lọc theo bộ ký tự tiếng Việt.
Về kích thước, hãy dùng một thang chữ có bậc rõ ràng: chữ thường, chữ nhỏ, tiêu đề phụ, tiêu đề lớn. Nội dung dài nên dùng cỡ đủ lớn và dòng đủ thoáng để đọc thoải mái; dòng quá dài khiến mắt mỏi nên hãy giới hạn bề rộng cột chữ.
Ví dụ: tiệm hoa nhỏ
Tiệm hoa chọn màu chủ đạo hồng đất, nền kem rất nhạt, chữ nâu than. Tiêu đề dùng font có chân thanh lịch, nội dung dùng font không chân dễ đọc trên điện thoại. Chỉ ba nhóm màu, hai kiểu chữ, nhưng trang nhìn thống nhất ngay.
Lưu ý
Đừng tin hoàn toàn vào mắt mình trên một màn hình. Màu và độ tương phản có thể khác hẳn trên điện thoại giá rẻ hoặc khi ngoài nắng. Hãy xem thử trên ít nhất hai thiết bị.
Thử ngay
Nhờ AI dựng bảng thiết kế cơ bản cho dự án của bạn:
Tôi làm trang giới thiệu [loại cửa hàng của bạn].
Hãy đề xuất: 1 màu chủ đạo, 5 mức xám, 3 màu trạng thái (mã hex),
1 cặp font hỗ trợ tiếng Việt từ Google Fonts,
và thang cỡ chữ 5 bậc. Giải thích ngắn lý do chọn.Ghi nhớ
- Một màu chủ đạo, một dải xám, ba màu trạng thái là đủ cho đa số trang.
- Kiểm tra tương phản chữ và nền, đừng chỉ tin cảm giác.
- Gõ thử tiếng Việt đủ dấu trước khi chốt font.
- Ghi bảng màu và chữ thành văn bản để dặn AI nhiều lần.