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

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

Bởi MikeHuynh vào 15:25, 13/8/18
  1. MikeHuynh

    MikeHuynh QT

    Đã được thích:
    104
    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.

    [​IMG]

    • 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

    [​IMG]

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

    [​IMG]

    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

    [​IMG]

    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

    [​IMG]

    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

    [​IMG]

    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

    [​IMG]
    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
    [​IMG]

    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)

    [​IMG]

    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ị)

    [​IMG]

    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.

    [​IMG]

    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 .

    [​IMG]

    • Windows 10: 32 × 32
    • Windows 8: 16 × 16, 24 × 24, 32 × 32
    Dialogs và Wizards

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

    [​IMG]




      • 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


    [​IMG]

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


    [​IMG]


    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.

    [​IMG]

    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.

    [​IMG]

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

    Nguồn: icon8
     
    1 ♥
    Có thể bạn thích
Thiết kế phải thật đem đến sức thu hút, cụ thể, và có lẽ điều quan trọng hơn là gợi lên cảm xúc từ người nhìn.

Bình luận

Thảo luận trong 'Kiến thức' bắt đầu bởi MikeHuynh, 13/8/18.

Chia sẻ trang này