美文网首页
设计尺寸规范

设计尺寸规范

作者: Cindy_99e7 | 来源:发表于2019-09-26 00:12 被阅读0次

    Android  /  iOS应用图标设计尺寸及设计注意事项

    一个有吸引力的APP应用图标,可以让用户愿意去了解你,下载你的 App。它也会出现在整个系统中,例如“设置”和搜索结果中。

    应用图标设计时应注意:

    1、简约

    设计要简单,专注于App 产品单个要素或形状。谨慎添加细节。如果图标的内容或形状过于复杂,则难以辨别细节,尤其是在较小尺寸时。

    2、简单明了

    应用商店汇集了数百万应用。在浏览应用商店时,用户首先看到的是图标,其次是应用的标题和预览图。如果通过图标就能大概了解应用的功能,用户会觉得很方便。

    3、设计一个可识别的图标

    设计的图标必须可以让人识别出来。例如,邮件App 图标使用信封图形,因为信封与邮件相关联。

    4、醒目

    假设用户下载了一款应用,随后关上了手机屏幕,过了几小时再打开。如果用户手机里的应用很多,那么要找到特定应用通常会花点时间。这时,如果您的应用能够一眼就认出来,对用户来说会方便很多。

    5、背景简单,不要使用透明度

    图标不要使用透明度,并且不要使用复杂混乱的背景。无需填满整个图标。

     

    6、避免使用文字图标

    如果设计中包含文字,最好是使用与应用实际内容相关的文字。如果可以,避免在图标中使用文字。在应用商店、手机屏幕和菜单中,应用名称会被标注于应用的下方或旁边。使用文字,尤其是应用的名称,会显得多此一举。

    7、不要包含照片屏幕截图或界面元素

    小尺寸的照片细节很难看到。屏幕截图和界面元素对于应用程序图标来说过于复杂性。

    8、针对不同的壁纸测试图标

    无法预测用户使用哪种壁纸,因此不要仅针对浅色或深色测试您的应用。应在不同的壁纸上多次尝试和具有动态背景的设备上测试。

    Android应用图标的尺寸大小

    512x512px

    L DPI ( Low Density Screen,120 DPI ),其图标大小为 36 x 36 px

    M DPI ( Medium Density Screen, 160 DPI ),其图标大小为 48 x 48 px

    H DPI ( High Density Screen, 240 DPI ),其图标大小为 72 x 72 px

    XH DPI ( Extra-high density screen, 320 DPI ),其图标大小为 96 x 96 px

    XXH DPI( xx-high density screen, 480 DPI ),其图标大小为144 x 144 px

    XXXH DPI( xxx-high density screen, 640 DPI ),其图标大小为192 x 192 px

    96 x 96 px 图标可以画图区域大小可以设为 88 x 88 px, 四周留出4个像素用于填充(无底色)

    72 x 72 px 图标可以画图区域大小可以设为 68 x 68 px, 四周留出2个像素用于填充(无底色)

    48 x 48 px 图标可以画图区域大小可以设为 46 x 46 px, 四周留出1个像素用于填充(无底色)

    36 x 36 px 图标可以画图区域大小可以设为 34 x 34 px, 四周留出1个像素用于填充(无底色)

    安卓手机品牌太多,每个手机品牌系统不同可能对桌面图标的处理也不相同,需要先搞清楚对桌面图标进行统一剪裁的手机平台规范,才能保证在这些平台可完全匹配,不出现白边黑边的情况。

    以小米手机为例,比较了淘宝、京东、qq、支付宝、微信、腾讯、爱奇艺、小红书APP。发现在96x96px尺寸下圆角为20px占到了42%,得出结论在96x96px尺寸下圆角小于等于20px为安全值(这个安全值并不能说明可以包含所有的安卓手机,毕竟安卓手机品牌太多系统版本也是很多,但至少可以涵盖大部分主流安卓手机品牌。)

    iOS应用图标的尺寸大小:

    1024x1024px

    512x512px

    180x180px

    120x120px

    114x114px

    87x87px

    80x80px

    58x58px

    57x57px

    29x29px

    iOS图标中采用并不是圆角矩形方式而是采用羊角螺线的绘制方式,在上传切图时只需直角就可以了,圆弧会自动适配。

    相关文章

      网友评论

          本文标题:设计尺寸规范

          本文链接:https://www.haomeiwen.com/subject/tjdujctx.html