020-29815005
预约专线时间:09:00-23:59

ICON设计规范之图标尺寸(下)

新闻来源:本站 日期:2021-04-21
接下来就来看各平台自身的尺寸规格。设计者通常只使用一个Appstore的图标(1024px1024px)进行设计,其他尺寸的可自动输出一组ios图标,小尺寸的图标可以单独调整细节。
    接下来就来看各平台自身的尺寸规格。


平面设计


    IOS应用程序图标。

    设计者通常只使用一个Appstore的图标(1024px1024px)进行设计,其他尺寸的可自动输出一组ios图标,小尺寸的图标可以单独调整细节。

    装置型号图标尺寸

    Apple手机180px×180px(60pt×60pt@3x)

    120磅×120磅(60磅×60磅@2x)

    pro167px×167px(83.5pt×83.5pt@2x)

    Ipad,ipad152px×152px(76pt×76pt@2x)

    存储区1024px×1024px(1024pt×1024pt@1x)

    Apple提供给我们的这套资源中包含了Template-AppIcons-iOS文件。开启此文件,将智能对象中的内容替换为我们自己设计的图标,就会产生我们自己的图标,隐藏背景,切出这些图标即可。



    斯波特利特(搜索页)

    开发设备Spotlighticonsize

    iphone120px×120px(40pt×40pt@3x)

    80px×80px(40pt×40pt@2x)

    ipad,iPadmini,80px×80px(40pt×40pt@2x)

    安装页面图标。

    设备设置、功能设置。

    iPhone87px×87px(29pt×29pt@3x)

    58px×58px(29pt×29pt@2x)

    ipad,iPadmini58px×58px(29pt×29pt@2x)

    邮件通知。

    设备导航导航功能。

    iphone60px×60px(20pt×20pt@3x)

    40px×40px(20pt×20pt@2x)

    ipad,iPadmini,40px×40px(20pt×20pt@2x)



    IOS系统图标。

    导航栏和工具栏的图标

    两者的图标大小相同,都是24x24pt,最大值为28x28pt。注意:@2x和@3x在逻辑像素单位是一样东西,如果用矢量工具设计,比如Sketch,AdobeXD,可以参考逻辑象素数字设计。

    最大目标值尺寸。

    24x24pt(72x72px@3x)28x28pt(84x84px@3x)

    24x24pt(48x48px@2x)28x28pt(56x56px@2x)

    标记栏图标

    在iOS中,Tab栏通常采用5个、4个、3个图标的形式,平均宽度为30x30pt左右,icon大小为60px。

    Apple给出了四种不同形状的标签栏图标尺寸,供大家设计时参考。这意味着不同形状的图标看起来差不多一样大,保证了图标的平衡。



    目的宽度和高度(圆形图标)

    最大目标值尺寸。

    24x24pt(72x72px@3x)28x28pt(84x84px@3x)

    24x24pt(48x48像素@2x)28x28pt(56x56px@2x)

    (方形图标)目标宽度和高度

    普通标签栏紧凑的标签栏

    17x17pt(51x51px@3x)23x23pt(69x69px@3x)

    17x17pt(34x34px@2x)23x23pt(46x46px@2x)

    对象宽度(宽图标)

    普通标签栏紧凑的标签栏

    31pt(93px@3x)23pt(69px@3x)

    31pt(62px@2x)23pt(46px@2x)

    目标高度(顶部图标)

    普通标签栏紧凑的标签栏

    30磅(84px@3x)20磅(60磅@3x)

    30磅(56磅@2x)20磅(40磅@2x)

    在iOS中定义的尺寸并非图标文件最后输出的尺寸,而是在给设计人员绘制不同图标形状的参考尺寸时,要使图标的视觉尺寸看起来一致。



    安卓应用程序图标

    放在mipmap-*dpi下面,文件名是ic_launcher.png。

    LDPI(LowDensityScreen,120DPI),36x36px的图标大小。

    mdpi(mediumDensityScreen,160DPI),48x48px为图标大小。

    一个72x72px图标大小的HighDensityScreen,240DPI)。

    XHDPI(Extra-highdensityscreen,320DPI),一个96x96px的图标。

    XXHDPI(xx-highdensityscreen,480DPI),图标尺寸为144x144px。

    xxx-highdensityscreen,640DPI),其图标尺寸为192x192px。

    以192x192dp为例,keyline(关键线)形状。

    安卓系统图标

    MaterialDesign对于图标尺寸有比iOS更详细的规范。

    缺省系统图标大小是24x24dp,周围是2dp的活动区域。关键线形状为圆形、正方形、垂直矩形和水平矩形提供了尺寸规格,以确保视觉比例一致。

    下一篇将详细介绍keyline的线描方法,敬请关注。

    Google对战应用程序图标

    大小:512x512px。

    格式化:32位PNG。

    色域:sRGB。

    档案大小上限:1024KB。

    形状:方形-GooglePlay将动态地处理覆盖部分。直径等于图标尺寸的20%。

    Mage:无-GooglePlay动态处理阴影。

    切片时不需要圆角和阴影,GooglePlay会动态地应用圆角来覆盖部分和阴影,确保所有应用/游戏图标的设计保持一致。

    图示尺寸的规格说明主要是为了保证其物理尺寸的一致性,至于视觉上如何统一,还需要自己多加练习,这篇文章后面也会讲到。选择具体项目的具体尺寸,如果你为iOS或Android设计了图标,在决定尺寸之前,你应该看看图标说明,苹果的HIG和Android的MaterialDesign是你的设计指南。

    此外,如果你是一名刚入行的UI设计师,建议先从较大的图标开始,比如64或者96px,因为小的图标比较难(包括像素)。

    好的,希望通过本文的梳理,大家能够对图标的大小有一个更全面的了解,我们在下一期见。