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,因为小的图标比较难(包括像素)。
好的,希望通过本文的梳理,大家能够对图标的大小有一个更全面的了解,我们在下一期见。