Iconography – Cách tạo dựng và sử dụng icon trong hệ thống thiết kế

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.

Vậy 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.
Sử dụng icon với mục đích giải nghĩa
  • Decorative icon: dùng để trang trí
Sử dụng icon với mục đích trang trí

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

  • Lineal icon: chỉ dùng nét
Sử dụng icon với dạng nét lineal
  • Glyph icon: chỉ dùng mảng
Sử dụng icon với dạng mảng shape
  • 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
Thiết kế icon với sự kết hợp nhiều yếu tố

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

>>> 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.

Quy trình thực hiện icon

Bước 1: 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ư thế này nhé:

Một ví dụ hơi “mean” của ông chú Pablo Stanley về icon hambuger thông dụng 😂

💭 Icon này chỉ để trang trí (hướng về minh họa) 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, trang web sẽ nhìn chán thôi, 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ế

1. Về công cụ

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 (muôn năm 🙌)
  • Icon theo hướng minh họa: dùng Adobe Illustrator

2. Về 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.

3. Các mẹo nhỏ thiết kế icon của team StayLab

  • 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. Ví dụ: Ứng dụng gọi xe này cần vẽ icon để phân biệt về xe 4 chỗ, 7 chỗ và 16 chỗ. Kích thước của icon được đặt trên ứng dụng là như nhau, ở trường hợp này team StayLab đã vẽ thêm cửa sổ để phân biệt được xe 4 chỗ với 1 cửa sổ, 7 chỗ là 2 cửa sổ và 16 chỗ là 3 cửa sổ → người dùng dễ dàng nhận biết được vì nhìn vào có thể thấy sức chứa đang tăng dần.

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

StayLab dùng Figma là chính, nên cách đóng gói icons dưới đây được StayLab 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 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ừ bạn Mỹ Linh – Trợ giảng khóa Digital Production Design 101 tại Keyframe

Xem thêm slide bài giảng từ cô An Neko: http://bit.ly/34OTzVN

Leave a Reply

Your email address will not be published. Required fields are marked *