APP图标设计规范及要求介绍

所属分类: 平面设计 / 平面其它 阅读数: 833
收藏 0 赞 0 分享

产品图标网格已经形成了一致的标准,且建立了一套明确的图形元素定位规则。这种标准化带来了灵活,而连贯的系统。今天为大家分享APP图标设计规范及要求,一起来学习吧!

8cbc568e12136ac725bb5c9cb0ed.jpg

以上已经是全尺寸比例高宽网格图可以右击另存作为参考图使用

网格

7714568e124532f8754c80c4cb1d.jpg

关键线的形状

关键线的形状是网格的基础。利用这些核心形状做为向导,即可使整个相关产品的图标保持一致的视觉比例。

ee59568e126132f8754c8029e81d.jpg

方形

高&宽: 152

00ce568e12f232f8754c80caab55.jpg

圆形

直径: 176

1f44568e134d6ac725bb5ce589e7.jpg

竖直矩形

高:176 宽:128

9185568e13b032f8754c8033a009.jpg

水平矩形

高:128 宽:176

DP 单位网格

设备上的启动器以 48dp 的尺寸显示产品图标 (边缘 1dp),所以当你创建图标时,请使用 48dp 的尺寸,必要时可将其放大 400% 到 192 x 192 dp (边缘变位 4dp)。

保持这样的放缩比即可在尺寸在缩小时保持边缘的锋利和对齐的正确性。

04f6568e13e66ac725bb5c344945.jpg

1:1 单元网格

2673568e141432f8754c80d01d94.jpg

4:1 单元网格

几何

我们为这几种特定的关键线制定了预设规则:圆形线、方形线、矩形线、正交线和对角线。这个通用且简洁的元素调板形成的目的是统一产品图标和规范它们在网格上的布置。

 c397568e12af6ac725bb5c2a1f6c.jpg

为什么要这样设计?以上右图著名的视觉错觉案例可以例证:

一样长的线段不同的视觉表现产生不一样的视觉感知,矩形的视觉感知面积相对大,所以相对网格线居中定格最小部分来设计来达到各种其他形状样式的图标统一感。


内容区域

内容应该保持在活动区域以内,如有必要,内容可以延展至修饰区域之中,但不能超出。

214a568e152732f8754c809cc3d4.jpg

活动区域

796e568e155332f8754c80ee965b.jpg

修饰区域

关键线形状

关键线形状是网格的基础,通过关键线,即可保持系统图标的一致性。

b8c2568e158d6ac725bb5ce1d983.jpg

方形

宽&高:18px

0c40568e15a132f8754c8057ccfc.jpg

圆形

直径:20px

eacc568e15ba32f8754c807b1806.jpg

竖直矩形

高:20px, 宽:16px

fc75568e15d26ac725bb5c5b29bf.jpg

竖直矩形

高:20px, 宽:16px

几何

我们为这几种特定的关键线制定了预设规则:圆形线、方形线、矩形线、正交线和对角线。这个通用且简洁的元素调板形成的目的是统一 Google 系统图标和规范它们在网格上的布置。

e8c1568e15f232f8754c80e90a8f.jpg

构建

3bcd568e160a6ac725bb5c32b385.jpg



组成

系统图标剖析

    笔划末端

    留白

    笔触

    内部角

    边界区域

e502568e16406ac725bb5c602061.jpg


一致的圆角半径(2px)是统一全系列系统图标的关键,不要修改它。

图标内部的角应为直角,也不要修改它。

36b0568e165d6ac725bb5c43cd73.jpg

外部角

d6ce568e16726ac725bb5c73a98a.jpg

內部角

笔触

一致的画笔宽度(2px)也是统一全系列系统图标的关键,请在内外部的边角上保持使用2px的宽度。

3c11568e16986ac725bb5c70e4f9.jpg

一致

370f568e16ea32f8754c8005a608.jpg

折线和角

0728568e16ff32f8754c8088fb05.jpg

笔划末端

aeac568e171d6ac725bb5c865b20.jpg

内部角

视觉校正

极端情况下必要的校正能够增加图标的清晰度。 如有必要,需与其他图标保持一致的几何形状,不要加以扭曲。

a4ef568e173932f8754c80fa14e5.jpg

复杂

09e2568e175a6ac725bb5c7d7f32.jpg

缩小

清空

为了可读性和触摸操作的需要,图标周围可以留有一定的空白区域。

8739568e178c32f8754c809938d8.jpg



清空区域

9700568e17a432f8754c8082c7d0.jpg

放置

----------------------------------------------------------------------------------------------

最佳范例

一致的图标可以有利于用户理解,在不同应用中也尽量使用已有的系统图标。

0e17568e17ca6ac725bb5c604491.jpg

(上图)可取

使用相同的画笔宽度以及方形的笔划末端。

fe1e568e17de32f8754c803740c5.jpg

(上图)不可取

不要使用不相同的画笔宽度以及非方形的笔划末端。

2a23568e180232f8754c80e875df.jpg

(上图)可取

让图标显得正面且坚定。

90c1568e18176ac725bb5c8038cb.jpg

(上图)不可取

不要倾斜、旋转图标,或是让图标显得立体。

076c568e183432f8754c80833b0b.jpg

(上图)可取

简化图标使其更具清晰度和可读性。

d062568e18466ac725bb5c5b5313.jpg

(上图)不可取

不要过度拟物化使得图标复杂。

7e0d568e185b32f8754c80c78d27.jpg

(上图)可取

让图标更加几何化而变得更加显眼。

4952568e187332f8754c8086dc1b.jpg

(上图)不可取

不要过度精细,使用过细画笔宽度。

619a568e188732f8754c80edaf96.jpg

(上图)可取

使用一致的几何形状。

0d79568e189732f8754c80ffc7b5.jpg

(上图)不可取

不要使用过于松散的形状。

a02b568e18c76ac725bb5c6aaffc.jpg

(上图)可取

让图标在像素点上(X、Y 坐标值不包含小数)。

图标应有相等的宽高(e.g. 24x24),避免扭曲。

2bd4568e18dd32f8754c808364d7.jpg

(上图)不可取

图标不在像素点上。

宽高不等。

以上就是APP图标设计规范及要求介绍,教程很实用,希望大家看完本篇教程能有所帮助!

更多精彩内容其他人还在看

年后求职必备!UI设计新人常见的7个简历制作要点

当你的简历写完以后,是不是能够在十秒钟内看完所有你认为重要的内容呢?就业专家认为,一般情况下,简历的长度以A4纸1页为限,简历越长,被认真阅读的可能性越小,下面小编就为大家介绍UI设计新人常见的7个简历制作要点,来看看吧
收藏 0 赞 0 分享

如何运用基础的色彩三要素?

说到色彩,优设一直在跟上潮流,比如2017年的潘通流行色,刚发布不久,优设就有了相关的介绍和运用方法,今天我教你如何运用基础的色彩三要素,有需要的朋友可以参考本文,来看看吧
收藏 0 赞 0 分享

真正的新用户引导应该怎么设计呢?

新用户引导(Onboarding)这个词本是人力资源领域的术语,不过现在已经被UI/UX领域借用过来,指的是帮助刚刚注册网站/APP的新用户熟悉产品到流畅使用的引导流程,今天的文章,我们来聊聊新用户引导的设计
收藏 0 赞 0 分享

学习方法和思维方式解析如何快速提升设计

做设计这个行业拥有天赋的人很少,大多都是通过有效的学习手段进行提升,盲目学习是不行的,这里就是要提到一个人是否有正确的学习方法了,有的人进步很快,有些人很慢。这里我分享一些自己的学习方法和经验,希望对你们有用
收藏 0 赞 0 分享

设计师容易忽视或处理不好的七大设计细节

我在刚刚做设计的头三年经常会犯各种各样的错误,有些错误现在稍不注意还是有可能会犯。下面小编就为大家介绍设计师容易忽视或处理不好的七大设计细节,来看看吧
收藏 0 赞 0 分享

平面设计师在面试期间的技巧全揭秘

对于设计师而言,作品就是最好的嘴巴!它会在你面试的时候去帮你诉说你的想法你的设计思路,还有你的设计风格!下面小编就为大家揭秘平面设计师在面试期间的技巧,一起来看看吧
收藏 0 赞 0 分享

如何设计一款字体标志?字体标识制作一些经验和见解

在标志设计中文字与图形元素总是紧密配合,只有恰当的字体与图形搭配时才能发挥最大的视觉效果。那么如何设计一款字体标志?下面小编就为大家分享字体标识制作过程中的一些经验和见解,来看看吧
收藏 0 赞 0 分享

3分钟出成品 零基础字体设计过程解析

今天小编为大家分享一个很不错的教程,只需3分钟即可出成品,即使是零基础,也能学会。推荐到脚本之家,有需要的朋友可以参考本文,来看看吧
收藏 0 赞 0 分享

实用:易拉宝设计的流程和思路

今天为大家分享易拉宝设计流程,教程真的很实用,介绍地很详细,非常值得大家学习,推荐到脚本之家,感兴趣的朋友可以参考本文,希望能从文中得到一些启发
收藏 0 赞 0 分享

字体性格:字型通过哪些变化影响到人的视觉感官

这篇教程是向脚本之家的朋友分享字型通过哪些变化影响到人的视觉感官教程,教程很实用,主要是向大家介绍字型基本气质,来看看吧
收藏 0 赞 0 分享
查看更多