Icon trong giao diện là biểu tượng nhỏ giúp người dùng nhận ra nhanh một chức năng hay một loại nội dung; một bộ icon tốt có chung lưới, chung độ dày nét, chung cách bo góc và chung mức chi tiết, để đặt cạnh nhau trông như do một người vẽ. Khác với minh hoạ, icon phải đọc được ở kích thước rất nhỏ, thường từ 16 đến 32 điểm, và phải được hiểu gần như tức thì.
Người làm đồ hoạ thường vẽ icon đẹp, nhưng hay gặp ba vấn đề khi đưa vào giao diện: bộ icon lệch nhau về độ đậm, icon tự vẽ khó hiểu hơn biểu tượng quen thuộc, và icon đứng một mình không có chữ khiến người dùng phải đoán. Bài này đi qua các thông số giữ bộ icon đồng nhất, khi nào icon bắt buộc phải có nhãn chữ, cách dùng AI để tìm ẩn dụ cho những chức năng khó vẽ, và vì sao icon AI sinh ra cần vẽ lại thành vector trước khi dùng.
Icon giao diện khác minh hoạ ở đâu
Minh hoạ được ngắm; icon được nhận ra. Một hình minh hoạ cái giỏ hàng có thể có đan mây, bóng đổ, vài món đồ thò ra ngoài. Icon giỏ hàng chỉ cần vài nét đủ để mắt nhận ra trong một phần giây, đứng cạnh icon tìm kiếm và icon tài khoản mà không cái nào nổi bật hơn cái nào.
Vì kích thước nhỏ, mỗi chi tiết thừa trong icon trở thành nhiễu. Một nét mảnh hơn một điểm ảnh có thể biến mất trên màn hình độ phân giải thấp; hai nét đặt quá sát nhau dính thành một khối. Người làm in quen làm việc ở độ phân giải cao nên dễ vẽ icon chỉ đẹp khi phóng to trên màn hình thiết kế, rồi bất ngờ khi thấy nó trên điện thoại thật.
Icon giao diện cũng phải theo quy ước. Biểu tượng ngôi nhà cho trang chủ, kính lúp cho tìm kiếm, ba gạch ngang cho menu, bánh răng cho cài đặt đã được người dùng học qua nhiều năm. Vẽ lại chúng theo phong cách riêng thì được, nhưng thay ẩn dụ khác chỉ để lạ mắt thường khiến người dùng phải học lại, và họ không có lý do gì để chịu học.
Thông số giữ bộ icon đồng nhất
Bảng dưới là các thông số nên chốt trước khi vẽ icon đầu tiên. Ghi chúng vào trang đầu của tệp icon để ai vẽ thêm sau này cũng theo.
| Thông số | Nên chốt gì | Lỗi hay gặp nếu bỏ qua |
|---|---|---|
| Khung và lưới | Một khung vuông cố định, ví dụ 24×24 điểm, có lưới và các hình khuôn (tròn, vuông, chữ nhật đứng, chữ nhật ngang) để icon có khối lượng thị giác tương đương | Icon tròn trông nhỏ hơn icon vuông dù cùng khung |
| Vùng an toàn | Một lề trong khung, ví dụ 2 điểm, không vẽ vào trừ ngoại lệ có ghi chú | Icon chạm mép, bị cắt khi đặt trong nút |
| Độ dày nét | Một độ dày duy nhất cho cả bộ, ví dụ 1,5 hoặc 2 điểm ở kích thước gốc | Icon vẽ ở các thời điểm khác nhau lệch độ đậm |
| Góc bo và đầu nét | Bo góc bao nhiêu, đầu nét tròn hay vuông | Bộ trông lổn nhổn dù từng icon đều đẹp |
| Kiểu nét hay khối | Nét viền, khối đặc, hay cả hai với quy tắc dùng (ví dụ khối đặc cho trạng thái đang chọn) | Trộn nét và khối ngẫu nhiên, người dùng tưởng có ý nghĩa |
| Mức chi tiết | Số nét tối đa, khoảng cách tối thiểu giữa hai nét | Icon phức tạp bị bết ở cỡ 16 điểm |
| Góc nhìn | Nhìn thẳng hay nghiêng, có phối cảnh hay không | Một icon ba chiều lạc giữa bộ phẳng |
Nếu dự án dùng bộ icon có sẵn rồi vẽ thêm vài cái còn thiếu, việc đầu tiên là đo bộ có sẵn để lấy đúng các thông số này. Icon tự vẽ chỉ cần lệch nửa điểm về độ dày nét là người dùng tinh mắt nhận ra ngay khi đặt cạnh nhau trên một thanh điều hướng.
Icon nào bắt buộc phải có nhãn chữ
Icon cho hành động không phổ biến. Ngoài một nhóm nhỏ icon quen thuộc, phần lớn icon không được hiểu giống nhau giữa các người dùng. Biểu tượng mũi tên cong có thể là chia sẻ, chuyển tiếp hay hoàn tác tuỳ ứng dụng. Với những hành động như vậy, đặt nhãn chữ ngắn ngay cạnh hoặc ngay dưới icon.
Thanh điều hướng chính. Các mục trên thanh điều hướng dưới của ứng dụng hay menu chính của trang web nên có nhãn chữ. Người dùng lớn tuổi, người mới dùng, người không quen ứng dụng nước ngoài đều đọc chữ nhanh hơn đoán hình.
Hành động có hậu quả. Xoá, huỷ đơn, gửi tiền, đăng công khai: icon thùng rác hay máy bay giấy đứng một mình là chưa đủ. Nhãn chữ rõ ràng và, khi cần, bước xác nhận giúp tránh bấm nhầm.
Icon trong nút chỉ có hình. Nếu vì chỗ hẹp mà nút chỉ có icon, vẫn phải có nhãn ẩn dành cho trình đọc màn hình và có chú thích hiện ra khi giữ hoặc di chuột. Ghi rõ nhãn này trong bản bàn giao để lập trình viên không bỏ sót.
Khi nào icon đứng một mình được. Một số icon đã gần như thành chữ: kính lúp, dấu nhân để đóng, ngôi nhà, giỏ hàng, mũi tên quay lại. Ngay cả khi đó, thêm nhãn cũng hiếm khi làm hại, chỉ tốn thêm chút chỗ.
Dùng AI tìm ẩn dụ cho chức năng khó vẽ
Khó nhất khi vẽ icon không phải là nét mà là ẩn dụ: vẽ gì cho "đồng bộ dữ liệu", "lịch sử đơn hàng" hay "điểm thưởng". Đây là chỗ AI giúp động não nhanh. Một số cách hỏi:
- "Liệt kê mười ẩn dụ hình ảnh có thể dùng làm icon cho chức năng xem lại lịch sử đơn hàng trong ứng dụng bán đồ gia dụng. Mỗi ẩn dụ ghi một câu về điểm mạnh và rủi ro bị hiểu nhầm."
- "Ẩn dụ chiếc đồng hồ có mũi tên vòng ngược thường được dùng cho những chức năng nào khác? Có nguy cơ người dùng nhầm với chức năng nào trong cùng ứng dụng không?"
- "Với người dùng Việt Nam lớn tuổi, những biểu tượng nào trong danh sách này có thể khó hiểu, và vì sao?"
- "Tả bằng lời ba phương án icon tối giản cho chức năng điểm thưởng, mỗi phương án tối đa bốn hình khối cơ bản, đọc được ở cỡ 20 điểm."
Câu trả lời của AI cho bạn danh sách để phác tay, không phải đáp án. Ẩn dụ tốt nhất thường là cái quen thuộc nhất với người dùng của bạn, và bạn chỉ biết chắc khi đưa hai ba phương án cho vài người dùng thật đoán xem icon nghĩa là gì mà không có nhãn.
Vì sao không đưa thẳng icon AI sinh ra vào sản phẩm
Công cụ tạo ảnh có thể vẽ ra cả một bảng icon trông khá đồng bộ. Nhưng kết quả là ảnh điểm, không phải hình vector: phóng to bị nhoè, thu nhỏ bị bết, không đổi màu theo trạng thái được, và mỗi icon có độ dày nét, góc bo lệch nhau vài phần trăm. Khi đặt vào thanh điều hướng ở cỡ thật, những lệch nhỏ đó lộ ra.
Một số công cụ có chức năng chuyển ảnh sang vector tự động. Kết quả thường có rất nhiều điểm neo thừa, đường cong răng cưa, nét không đúng độ dày quy định, và vẫn cần làm lại bằng tay để sạch. Với icon chỉ vài nét, vẽ lại từ đầu trên lưới thường nhanh hơn sửa một tệp vector tự động.
Còn chuyện quyền sử dụng. Ảnh do AI tạo có được bảo hộ hay không, và nếu nó vô tình giống một bộ icon có bản quyền thì sao, là những câu hỏi pháp lý còn đang được tranh luận ở nhiều nơi và quy định hiện hành mỗi nước một khác. Cách an toàn là dùng ảnh AI làm phác thảo ý tưởng, còn icon thật trong sản phẩm do bạn vẽ hoặc lấy từ bộ có giấy phép rõ ràng.
Quy trình vẽ một icon từ ý tưởng tới tệp bàn giao
Quy trình dưới đây giả định bạn đã chốt thông số lưới, nét, góc bo cho cả bộ.
- Viết tên chức năng và một câu mô tả việc người dùng làm khi bấm icon.
- Liệt kê ẩn dụ có thể dùng, tự nghĩ trước rồi nhờ AI bổ sung, gạch bỏ những ẩn dụ dễ nhầm.
- Phác tay ba phương án trên giấy kẻ ô, mỗi phương án nhỏ cỡ đốt ngón tay để buộc mình giản lược.
- Dựng phương án được chọn trên lưới trong phần mềm vector, đúng độ dày nét và góc bo đã chốt.
- Xem ở kích thước thật trên màn hình điện thoại, đặt cạnh các icon khác trong bộ. Chỉnh độ cân thị giác nếu icon trông to hoặc nhỏ hơn.
- Gộp nét thành hình nếu quy trình bàn giao yêu cầu, xoá điểm neo thừa, đặt tên tệp theo quy ước của dự án.
- Ghi nhãn chữ và nhãn cho trình đọc màn hình đi kèm, xuất SVG và kiểm lại bằng cách mở tệp trên trình duyệt.
Bước năm là bước hay bị bỏ và cũng là bước quyết định. Icon chỉ có ý nghĩa khi nằm giữa những icon khác, ở đúng cỡ, trên đúng thiết bị.
Dùng bộ icon có sẵn: đọc giấy phép trước khi tải
Với phần lớn dự án nhỏ, dùng một bộ icon có sẵn chất lượng tốt là lựa chọn hợp lý hơn tự vẽ trọn bộ. Có nhiều bộ icon mã nguồn mở và bộ đi kèm các hệ thống thiết kế phổ biến, đủ hàng trăm biểu tượng thông dụng, đã được tính toán lưới và nét cẩn thận. Bạn chỉ vẽ thêm những icon đặc thù còn thiếu, theo đúng thông số của bộ đó.
Điều cần làm trước khi tải là đọc giấy phép. Có giấy phép cho dùng thương mại tự do, có giấy phép yêu cầu ghi công, có giấy phép cấm chỉnh sửa hoặc cấm dùng trong logo. Giấy phép có thể thay đổi giữa các phiên bản của cùng một bộ. Lưu lại bản giấy phép tại thời điểm tải cùng tệp dự án và ghi tên bộ, phiên bản trong tài liệu bàn giao.
Không trộn nhiều bộ icon khác phong cách trong một giao diện chỉ vì mỗi bộ thiếu vài cái. Nếu thật sự phải trộn, chỉnh lại độ dày nét và góc bo cho đồng nhất, kiểm giấy phép có cho phép chỉnh sửa không. Bản quyền chuyên sâu về tài sản thiết kế có thể tham khảo thêm ở trang AI Bản Quyền.
Câu hỏi thường gặp
Icon nên vẽ ở kích thước nào?
Vẽ ở kích thước gốc thường dùng nhất trong giao diện, phổ biến là 24 điểm, rồi kiểm ở các cỡ nhỏ hơn và lớn hơn. Nếu icon cần hiện ở cỡ rất nhỏ như 16 điểm, có thể cần một phiên bản giản lược riêng thay vì thu nhỏ bản gốc.
Nên dùng icon nét viền hay icon khối đặc?
Cả hai đều phổ biến. Nhiều hệ thống dùng nét viền cho trạng thái thường và khối đặc cho trạng thái đang chọn, giúp người dùng biết mình đang ở mục nào. Quan trọng là chọn một quy tắc và giữ nó trong cả sản phẩm.
Có nên dùng emoji thay icon cho nhanh không?
Emoji hiển thị khác nhau giữa các hệ điều hành và phiên bản, không đổi màu theo trạng thái được, và trình đọc màn hình đọc tên emoji có thể gây khó hiểu. Dùng emoji trong nội dung trò chuyện thì hợp, làm icon chức năng trong giao diện thì nên tránh.
Icon có cần đổi màu khi người dùng chọn không?
Thường có, nhưng không nên chỉ dựa vào màu. Kết hợp đổi màu với một tín hiệu khác như chuyển sang khối đặc, thêm gạch dưới hoặc đổi độ đậm nhãn, để người khó phân biệt màu vẫn nhận ra mục đang chọn.
Dùng AI tạo icon cho bài thuyết trình nội bộ có được không?
Với tài liệu nội bộ không phát hành, rủi ro thấp hơn, nhưng vẫn nên kiểm độ rõ ở kích thước dùng và tránh những hình giống biểu tượng của thương hiệu khác. Với sản phẩm phát hành, nên vẽ lại hoặc dùng bộ có giấy phép rõ ràng.
Làm sao biết icon tự vẽ có dễ hiểu không?
Cách đơn giản là cho năm sáu người chưa biết sản phẩm xem icon không kèm chữ và hỏi họ nghĩ nó dùng để làm gì. Nếu quá nửa đoán sai, nên đổi ẩn dụ hoặc bắt buộc đi kèm nhãn chữ.