Nhảy tới nội dung

Hệ thống icon

Tini sử dụng thư viện icon của Nucleo để làm bộ icon hệ thống. Bởi các icon này có các thuộc tính mà chúng tôi mong muốn là gọn gàng, quen thuộc và đơn giản ẩn dụ và thiết kế chỉnh chu. Các icon của Tini đóng vai trò hỗ trợ trực quan để giúp mọi người trải nghiệm hiệu quả hơn.

Tuyên bố từ chối trách nhiệm: Theo giấy phép sử dụng của Nucleo, chúng tôi chỉ cung cấp bộ icon hệ thống như các icon điều hướng, icon trạng thái... Nếu bạn muốn đồng bộ với những icon đó trong Tini App, vui lòng mua thư viện icon của Nucleo.

Tổng quan về icon​

Kích thước tiêu chuẩn của Tini là 24px.

icon size

Vùng được thiết kế cho những icon dạng bình thường là 16 x 16px, cách Live area là 2px.

normal icon

Vùng được thiết kế cho những icon đặc biệt như hình tròn hoặc icon quan trọng là 20 x 20px, bằng với Live area của một icon.

normal icon

Các dạng icon​

Dạng nét​

line icon

Cách dùng​

Bộ icon dạng nét là bộ icon sử dụng chính trong Tini. Icon nét được sử dụng như:

  • Các yếu tố hỗ trợ cho nội dung.
  • Hành động điều hướng (Quay lại, Tìm kiếm, Thông tin, v.v.).
  • Trạng thái không hoạt động của icon dạng mảng.

Kỹ thuật​

  • Độ dày nét 2px.
  • Bo góc 2px khi có thể, bo góc có thể lớn hơn tùy từng icon
  • Bo tròn nét cuối.

Dạng mảng​

glyph icon

Cách dùng​

  • Gây sự chú ý
  • Trạng thái hoạt động của icon dạng nét.

Kỹ thuật​

  • Hình dạng phải rõ ràng, theo các khối hình học đơn giản.
  • Bo góc 2px khi có thể, bo góc có thể lớn hơn tùy từng icon

Kích thước icon​

Các icon đã được thiết kế để hoạt động ở bốn kích thước sau: 16px, 20px, 24px và 32px.

Icon có thể lớn hơn 32px nhưng hạn chế nhỏ hơn 16px

Cách dùng​

Nét của icon nên đồng nhất​