Icon là gì? Icon trong UIUX và cách phân loại icon

Bạn sẽ nhận thấy chúng ta sử dụng icon rất nhiều trên giao diện web/ app của màn hình điện thoại, máy tính, ở bảng chỉ dẫn biển hiệu hay trên giao diện các trang mạng xã hội như Facebook, Zalo, Instagram… Icon từ lâu đã là một thành phần thiết kế thân thuộc, hiện hữu khắp nơi trong cuộc sống.

Icon là gì?

Icon được xuất hiện đầu tiên vào 1981 trên Xerox Star với biểu tượng thùng rác, thư mục và máy in. Nhưng mãi đến 1984, các thiết kế icon mới xuất hiện rộng rãi đến với công chúng nhờ Apple.

Dựa trên “Design system grammer” của Daniel Eden, thì mình định nghĩa icon chính là một thành phần dùng để tạo nên: link, button, navigation, description. Icon được cấu tạo bởi line, shape, space, meaning.

Phân loại icon như thế nào?

Mình chia làm 3 cách phân loại icon, theo chức năng, hình thức và ý nghĩa.

1. Phân loại icon theo chức năng

• Clarifying icon: dùng để giải nghĩa.
• Decorative icon: dùng để trang trí.

2. Phân loại icon theo hình thức

• Lineal icon: chỉ dùng nét
• Glyph icon: chỉ dùng mảng
• Flat icon: dùng nét, mảng, nhiều chi tiết hơn và tạo cảm giác minh họa.

3. Phân loại icon theo ý nghĩa

• Iconic icon: nghĩa hoán dụ (có nét gần gũi)

Ví dụ: Icon dành cho số điện thoại, mình không thể ngồi vẽ bàn phím điện thoại được vì nó khá chi chít, khó nhận diện, thay vào đó mình sẽ vẽ ống nghe điện thoại bàn vì nhìn vào người ta sẽ dễ liên tưởng đến việc gọi điện, phần này chúng ta cũng có thể thay thành hình ảnh điện thoại (mặc dù số di động)

• Symbolic icon: nghĩa ẩn dụ (có nét tương đồng)

Ví dụ: Cơ bản thì dấu tick không liên quan trực tiếp đến check mark, cũng không tồn tại ngoài đời thật nhưng đây là một biểu tượng đã được quy ước, cùng mang ý nghĩa hoàn thành việc gì đó, nên mình sử dụng dấu tick để biểu tượng cho icon check mark.

Do đó, tùy vào mục đích sử dụng icon, mình sẽ linh hoạt để kết hợp các loại icon với nhau để người dùng dễ dàng nhận biết và sử dụng.

Hết rồi, bài tiếp theo mình sẽ chia sẻ cách xây dựng và sử dụng icon trong design system. Bạn nhớ theo dõi nha.

---

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