Cách tạo dựng và sử dụng icon trong Design System

Theo kinh nghiệm cá nhân của mình thường làm, thì mình thực hiện icon theo 3 bước chính:

Bước 1: Xác định ý nghĩa, chức năng của icon.

Bước 2: Vẽ/Thiết kế

Trong bước vẽ/ thiết kế này sẽ bao gồm các phần như:

• Công cụ vẽ/ thiết kế icon.
• Kích thước của icon.
• Và các mẹo khi thiết kế icon.

Bước 3: Đóng gói.

Bước 1: Xác định chức năng, ý nghĩa của icon

Đầu tiên bạn cần xác định ý nghĩa, chức năng của icon. Ta thử suy nghĩ xem icon đó có phải là một quy ước phổ biến không?
Ví dụ: khi được yêu cầu vẽ icon về "Private" thì mình tìm trên google, kết quả phổ biến nhất vẫn là hình ảnh ổ khóa. Vậy ta không nên sử dụng những hình ảnh mang tính “đánh đố” người dùng như hình emoticon bị bịt miệng như hình nhé.

Icon này chỉ để trang trí hay trực tiếp tác động vào chức năng của elements?
Icon trang trí thì không có cũng không sao nhưng những icon tác động trực tiếp vào chức năng của elements thì cần lựa chọn phù hợp với ý nghĩa mà nó bổ trợ.

Bước 2: Vẽ / Thiết kế

Công cụ Vẽ / Thiết kế icon

Tùy các bạn quen sử dụng cái nào rồi thì cứ sử dụng tiếp thôi, miễn sao là vẽ được vector. Với mình, nếu:

• Icon theo dạng biểu tượng hoặc hướng nhiều về chức năng: vẽ trực tiếp trên Figma.
• Icon theo hướng minh họa: dùng Adobe Illustrator.

Kích thước icon

Icon nên được đặt trong hình vuông, cạnh chia hết cho 8 khi ứng dụng lên web/ app (hoặc bất khả kháng lắm cũng phải là số chẵn) → do đó, kích thước thông thường là 8×8, 16×16, 24×24, 32×32, 40×40, 48×48, 96×96, 128×128.

Các mẹo nhỏ thiết kế icon

Áp dụng nguyên lý thị giác (Optical Effects) ứng dụng vào việc vẽ icons.

Alignment: Cần xác định xem các icons sẽ được đặt theo hàng dọc theo hàng ngang, để tạo nhịp điệu hài hòa giữa các icons

Consistency: Icons trong cùng 1 bộ phải đảm bảo đồng nhất đường nét, mảng hình học và khoảng cách.

Difference: Các icons theo hướng ảnh hưởng chức năng, cần được vẽ có “cá tính riêng”, dễ phân biệt để tăng tính nhận diện tương tác cho người dùng.

Bước 3: Đóng gói icon

Mình dùng Figma là chính, nên cách đóng gói icons dưới đây được mình ví dụ để minh họa từ dự án thực tế trên Figma nhé.

• Đặt tên phải thống nhất để team sau này tái sử dụng dễ dàng, ưu tiên đặt tên theo vật thể chứ không nên đặt theo chức năng vì sau này mình sẽ không nhớ để tái sử dụng như thế nào hết. Với hệ thống lớn thì team StayLab bên mình mới đặt tên theo 4 cấp độ icon/size/object/action, chứ bình thường, mình đặt 3 cấp độ là đủ rồi.
• Các bạn nhớ sắp xếp icon theo thứ tự size và bảng chữ cái alphabet để dễ phân biệt.
• Đóng gói component theo trạng thái của icon (default, active, inactive) trên Figma, nhớ có rectangle rỗng để tạo holder.

Một vài ghi chú nhỏ về trải nghiệm cá nhân khi làm icon

1. Về icon font.

Mình không dùng icon font, vì khó tùy chỉnh cho hợp với UI cho nên mình sẽ dùng các icons miễn phí có sẵn, và modify lại, hạn chế thời gian “draw from scratch”.

2. Tìm icon ở đâu?

Nucleo hoặc FlatIcon nè.

3. Icon phải được xuất dưới dạng SVG.

Icon được tạo từ vector, thì khi xuất file phải đúng định dạng vector là SVG.

4. Icon phải xài đúng chỗ.

Vẫn ưu tiên dùng ảnh chụp để tăng tính nhận diện cho người dùng tương tác nhanh hơn.

5. Nếu chưa có đủ thời gian để vẽ icon, hãy dùng emoji.

Trong các bản thử nghiệm đem đi test nhanh với người dùng, emoji đặc biệt hiệu quả vì tính đa dạng và dễ nhận diện của nó, và về cơ bản nó được định nghĩa là 1 dạng nội dung, các anh dev sẽ khỏe lắm vì không cần phải xuất hình cực khổ như đối với icon.

---

Bài viết được biên soạn & tổng hợp bởi GV Nguyễn Thúy An, phát hành độc quyền tại Keyframe. Thiết kế minh họa bởi Keyframe.

Nếu bạn đang tìm kiếm một khóa học thiết kế UI từ cơ bản đến nâng cao thì khóa học Figma UI Design tại Keyframe sẽ là phù hợp với bạn: https://keyframe.vn/khoa-hoc-offline/khoa-hoc-figma-ui-design-80.html

Ngoài ra, để hoàn thiện quy trình và tư duy thiết kế Product, bạn cũng nên tham gia một khóa học thiên hướng về UX như khóa Web/ Mobile App Product Design, xem chi tiết tại link sau: https://keyframe.vn/khoa-hoc-offline/khoa-hoc-thiet-ke-uxui-web-mobile-app-product-design-82.html