[Article] How Did We Come Up With Tini Icon Library


System Icon là gì?

Thông qua quá trình trải nghiệm sản phẩm, giao diện web/app hay các bảng chỉ dẫn, chắc hẳn bạn đã nhận ra những biểu tượng này. Mặc dù đơn giản, nhỏ nhắn nhưng Icon có thể truyền đạt ý nghĩa nhanh chóng, dễ hiểu và ngắn gọn và đã trở thành 1 thành phần thiết kế quen thuộc trong cuộc sống.


System icon là những biểu tượng, ký hiệu thường gặp trên giao diện, dùng để bổ sung ý nghĩa cho các hành động, chức năng, lệnh phổ biến, v.v…

Mục đích cần tạo ra thư viện Tini Icon

Tini Design system ban đầu sử dụng hệ thống icon của Nucleo App để team thiết kế sử dụng phát triển sản phẩm. Tuy nhiên khi định hướng của Tini Design system trở thành một bộ thư viện mở, dành cho tất cả mọi người và phục vụ cho mọi sản phẩm. Nucleo không thể đáp ứng được nhu cầu đa dạng này, cũng như về yếu tố bản quyền. Đó là lúc bọn mình nhận ra sự cần thiết của một thư viện icon dành riêng cho Tini App.


Thư viện icon của Tini App, hiện đang có hơn 200 icon và vẫn đang cập nhật từng tháng.

Concept

Ngoài việc truyền tải đúng tính năng, bọn mình cũng xem xét cân bằng các cá tính thương hiệu của Tini App như Resourceful, Reliable, Organized, và Creative trong quá trình định hình phong cách phù hợp nhất cho bộ icon.

  • Resourceful - Informative, flexible: Mỗi icon đều bao gồm 2 loại Line và Filled để có thể sử dụng cho nhiều mục đích khác nhau
  • Reliable - Transparent: Thiết kế rõ ràng, dễ hiểu, cô đọng, sử dụng các hình ảnh và ngôn ngữ phổ biến
  • Organized - Structural, consistent: Để đảm bảo tính nhất quán, các icon đều được vẽ trên 1 frame 24px với các Key Shape được định hình sẵn
  • Creative - Open-minded: Các chi tiết được bo góc để trở nên mềm mỏng và thân thiện với người dùng hơn.

Nền tảng

Sau đây, bọn mình sẽ đi sâu hơn vào những nền tảng cơ bản nhất của Tini Icon

Type

Như đã giới thiệu trước, mỗi icon của Tini đều có 2 dạng Line và Filled nhằm phục vụ cho nhiều mục đích sử dụng khác nhau như active state, dark theme, v.v…


2 dạng của Tini Icon

Đặc điểm của icon dạng Line là được bao bọc bởi 1 stroke và phía trong có không gian trống, vì thế phần nhìn tổng quan trông chi tiết, sắc nét hơn; trong khi đó icon dạng Filled sẽ khái quát được “silhoutte” (phần bóng) bao quát của một vật thể.


Icon Bubble-chat dễ nhìn hơn ở dạng Line vì khoảng âm lớn. Icon Phone dễ nhìn hơn ở dạng Filled vì khái quát được tổng quan.

Thư viện Tini Icon cung cấp 2 dạng icon để người dùng có thể lựa chọn được phiên bản nào phù hợp hơn cho mục đích sử dụng và đồng thời trình bày được sự khác nhau của action đó ở dạng active/inactive.


Ứng dụng Icon trên Bottom bar

Grid

Tini Design system áp dụng hệ 4px và 8px grid system, vì thế để việc sử dụng icon trong thiết kế trở nên dễ dàng và nhất quán, tất cả các icon đều được vẽ dựa trên 1 khung lưới 24x24 pixel. Icon được vẽ sẽ nằm trong vùng an toàn 20x20px.


Lưới 24 pixel, padding và vùng an toàn

Key shape

Dựa trên khung lưới 24px, các shape cơ bản như hình tròn, hình vuông, hình chữ nhật dọc và ngang giúp đồng bộ hoá các Icon có shape tương tự nhau.


Các shape cơ bản được định hình sẵn


Các icon trên tổng quan có cùng shape nên cần sử dụng hình tròn làm nền tảng để đồng bộ các icon

Cấu trúc hình học

Các icon nên được cấu thành bởi những yếu tố hình học cơ bản như đường thẳng, hình tròn, hình định hướng thay vì vẽ tự do.

Stroke size & Vector point

Bọn mình đã thử nghiệm nhiều kích thước stroke khác nhau cho icon. Mỗi kích thước đều có những ưu khuyết điểm riêng biệt. Trong đó 1.5 px và 2 px có độ dày vừa đủ để hiển thị trên giao diện, so với độ dày 1px khá mỏng.

Ngoài vấn đề thẩm mỹ, icon còn cần đảm bảo được chất lượng rõ nét nhất khi hiển thị, responsive và phù hợp với nhiều thiết bị khác nhau. Vì thế nên độ dày của stroke cần nằm vừa vặn trên khung lưới pixel.


Nếu icon không snap vào khung lưới, khi rasterize sẽ giảm chất lượng sắc nét so với icon snap vào khung lưới.

Độ dày 1.5 px

Khi sử dụng stroke size là 1.5px, các vị trí toạ độ của vector point sẽ nằm ở số thập phân để đảm bảo được việc vector không bị off pixel.

Độ dày 2 px

Khi sử dụng stroke size là 2px, các vị trí toạ độ của từng vector point sẽ nằm ở số nguyên, đồng thời cũng giống với kích thước padding 2px đã quy định cho khung lưới. Bọn mình quyết định sử dụng stroke size 2px để giúp cho việc vẽ icon nhanh chóng và hiệu quả hơn. Về mặt thẩm mỹ, stroke size 2px đem lại cảm giác mạnh mẽ, nổi bật và cũng phù hợp với tính cách của Tini App.

Corner radius

Các chi tiết được bo góc để đem lại cảm giác mềm mỏng và thân thiện với người dùng.

Chủ đề

Ngoài những icon tổng quát để phục vụ cho các lĩnh vực kinh doanh khác nhau

Team cũng đã cho ra mắt các icon riêng, đặc thù cho lĩnh vực e-commerce

Không những vậy, trong lần cập nhật tiếp theo, bọn mình sẽ cho ra mắt thêm các icon phục vụ cho các hệ thống dashboard.

Để lại comment dưới bài post này nếu bạn có bất kì thắc mắc nào, và đừng quên follow tụi mình để cập nhật nhanh nhất những bài viết tiếp theo nhé.


Thông tin liên quan

Design library

Standard flows

  • Tini Checkout flows: Figma

Template

10 Likes

@Huyen_TOP_Dang_Le_Di fyi :muscle::muscle:

3 Likes

Bravo :clap: :clap: :clap: Cảm ơn chị về chia sẻ bổ ích

4 Likes

Icon xinh ạ, sẽ sử dụng trong những ứng dụng của mình :smiling_face_with_three_hearts:

3 Likes