Chọn kích thước và định dạng phù hợp cho thiết kế Icon

Chọn kích thước biểu tượng phù hợp cho các hệ điều hành khác nhau là quan trọng, nhưng nó cũng là nhiệm vụ rất khó khăn khi thiết kế. Nó có thể ảnh hưởng tiêu cực đến chi phí thiết kế và chất lượng của một sản phẩm nói chung. Infographic dưới đây có thể giúp bạn chọn kích thước và định dạng phù hợp cho thiết kế biểu tượng.

• iOS 9 58 × 58, 80 × 80, 120 × 120, 152 × 152, 180 × 180, 1024 × 1024
• Windows 10 16 × 16, 24 × 24, 32 × 32, 48 × 48, 256 × 256
• Android Lollipop, Marshmallow, Nougat, Oreo 24 × 24, 48 × 48, 192 × 192
• macOS X 16 × 16, 32 × 32, 64 × 64, 128 × 128, 256 × 256, 512 × 512, 1024 × 1024
• Hệ điều hành Unix 16 × 16, 24 × 24, 48 × 48, 96 × 96
• Windows Phone 62 × 62, 99 × 99, 173 × 173, 200 × 200

Hướng dẫn giao diện người dùng iOS rõ ràng và khá ngắn gọn. Họ đề xuất định dạng PNG và các kích thước sau cho biểu tượng:

Biểu tượng ứng dụng

Kích thước bắt buộc

iPhone 6s Plus và iPhone 6 Plus 180 × 180
iPhone 6s, iPhone 6 và iPhone SE 120 × 120
iPhone 5 và iPhone 4s 120 × 120
iPad Pro 167 × 167
iPad và iPad mini 152 × 152

Biểu tượng ứng dụng cho App Store​

Kích thước yêu cầu:

• 1024 × 1024

Biểu tượng kết quả tìm kiếm tiêu điểm

​

Kích thước bắt buộc

• iPhone 6s Plus và iPhone 6 Plus 120 × 120
• iPhone 6s, iPhone 6 và iPhone SE 80 × 80
• iPhone 5 và iPhone 4s 80 × 80
• iPad Pro 80 × 80
• iPad và iPad mini 80 × 80

Biểu tượng cài đặt

​

Kích thước bắt buộc

• iPhone 6s Plus và iPhone 6 Plus 87 × 87
• iPhone 6s, iPhone 6 và iPhone SE 58 × 58
• iPhone 5 và iPhone 4s 58 × 58
• iPad Pro 58 × 58
• iPad và iPad mini 58 × 58

Thanh công cụ và thanh điều hướng

​

Kích thước bắt buộc

• iPhone 6s Plus và iPhone 6 Plus Khoảng 66 × 66
• iPhone 6s, iPhone 6 và iPhone SE Khoảng 44 × 44
• iPhone 5 và iPhone 4s Khoảng 44 × 44
• iPad Pro Khoảng 44 × 44
• iPad và iPad mini Khoảng 44 × 44

Biểu tượng thanh tab

​

Kích thước bắt buộc

• iPhone 6s Plus và iPhone 6 Plus Khoảng 75 × 75
• iPhone 6s, iPhone 6 và iPhone SE Khoảng 50 × 50
• iPhone 5 và iPhone 4s Khoảng 50 × 50
• iPad Pro Khoảng 50 × 50
• iPad và iPad mini Khoảng 50 × 50

​

Kích thước yêu cầu:

• 16 × 16
• 32 × 32
• 64 × 64
• 128 × 128
• 256 × 256
• 512 × 512
• 1024 × 1024

Biểu tượng Thanh công cụ (được khuyến nghị ở định dạng PNG)

Kích thước yêu cầu:

• 32 × 32
• 32 × 32 @ 2x (64 × 64)

Biểu tượng thanh bên trong PDF (được khuyến nghị)

Kích thước yêu cầu:

• 16 × 16
• 18 × 18
• 32 × 32

Biểu tượng thanh bên trong PNG

Kích thước yêu cầu:

• 16 × 16
• 16 × 16 @ 2x
• 18 × 18
• 18 × 18 @ 2x
• 32 × 32
• 32 × 32 @ 2x

Windows và phông chữ biểu tượng được giới thiệu bởi Microsoft.

Biểu tượng ứng dụng và mục bảng điều khiển

Các biểu tượng phải ở định dạng tệp .ico.

Tập hợp đầy đủ phải bao gồm các kích thước biểu tượng sau:

• 16 × 16
• 32 × 32
• 48 × 48
• 256 × 256

Biểu tượng Thanh công cụ

Lưu ý rằng các biểu tượng trên thanh công cụ phải luôn bằng phẳng .

• Windows 10: 32 × 32
• Windows 8: 16 × 16, 24 × 24, 32 × 32

Dialogs và Wizards

Kích thước bắt buộc:

​

• 
  
  
  • 32 × 32
  • 48 × 48

Tải xuống các biểu tượng Windows 8

Tải xuống Windows 10 biểu tượng


Android bắt đầu với phiên bản 5 Lollipop sử dụng thông số kỹ thuật của Material design cho các biểu tượng.

Và giải thưởng cho hướng dẫn phong cách biểu tượng chi tiết nhất sẽ chuyển sang… Google! Họ đã kiên nhẫn mô tả mọi thứ: từ hình dạng góc đến kích thước bóng và độ mờ đục. Đây chỉ là một vài trong số những ý tưởng chính.

Biểu tượng ứng dụng

​

Android hy vọng các biểu tượng sản phẩm sẽ được cung cấp tại 48dp , với các cạnh ở 1dp . Khi bạn tạo biểu tượng, hãy duy trì thước đo 48 đơn vị, nhưng chia tỷ lệ thành 400% tại 192x192dp (cạnh sẽ trở thành 4dp).

​

Biểu tượng hệ thống

Các biểu tượng này tượng trưng cho lệnh, tệp, thiết bị, thư mục hoặc hành động phổ biến như thùng rác, in và lưu.

​

Biểu tượng hệ thống được hiển thị ở 24dp . Khi tạo biểu tượng, điều quan trọng là phải thiết kế ở tỷ lệ 100% cho độ chính xác pixel, trong khi phóng to cho độ chính xác.

​

Tải xuống biểu tượng tài liệu

Nguồn: icon8​