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

所属分类: 平面设计 / 平面其它 阅读数: 962
收藏 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图标设计规范及要求介绍,教程很实用,希望大家看完本篇教程能有所帮助!

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

国外预测13个关于2017年的设计趋势

在过去很长的一段时间里,用户体验设计的传道者,数字大神,以及交互设计师们在创意层面上都已经达到了最高水准,并力求在科技、设计以及用户愉悦体验中有所突破
收藏 0 赞 0 分享

设计师如何应对一堆指指点点的客户?

设计师如何应对一堆指指点点的客户?相信这是很多设计朋友的心声吧,所以今天我们就来听听有着15年设计经验的大牛的实战经验吧
收藏 0 赞 0 分享

韩流究竟有什么值得我们设计师学习的地方

今天为大家分享韩流究竟有什么值得我们设计师学习的地方,教程比较实用,对于设计师来说,很值得大家大家学习,推荐过来,来看看吧
收藏 0 赞 0 分享

零基础设计师必看:写给非科班设计师的渐变色学习指南

今天下篇是渐变色的进阶教程,除了复习前两篇的基础外,还会学习角度渐变和金属渐变,整个教程循序渐进, 零基础也可以轻松学会
收藏 0 赞 0 分享

平面设计中的毛笔字制作方法解析

今天为大家分享平面设计中的毛笔字制作方法,教程真的很实用,很值得大家学习,推荐到脚本之家,喜欢的朋友可以参考本文哦
收藏 0 赞 0 分享

五分钟快速学习如何在表情包上加表情

这篇教程主要是向脚本之家的朋友分享五分钟快速学习如何在表情包上加表情方法,教程真的很不错,值得大家学习,感兴趣的朋友可以参考本文,来看看吧
收藏 0 赞 0 分享

如何准确定位和设定你的品牌LOGO颜色?

色彩是一个网站的情绪表达方式或者说是性格特征的体现,每种颜色都有着属于自己的声音。下面小编就为大家分享如何准确定位和设定你的品牌LOGO颜色方法,来看看吧
收藏 0 赞 0 分享

7个提升设计一致性的小贴士 让您的设计作品看上去更专业

这里所说的设计作品,包括了效果图和平面设计作品。在业内,有一些人主导以表现为主,认为图画得好不好是最关键的,而另一些人则认为画得好,不如做得好,下面小编就为大家分享7个提升设计一致性的小贴士,让您的设计作品看上去更专业,好了,我们一起来看看吧
收藏 0 赞 0 分享

日常使用的文案字体排版指南

无论你是做网页还是App设计,文字内容总是能占到整个版面将近80%的区域。因此理解字体与排版对UI设计师来说非常关键。下面小编为大家分享日常使用的文案字体排版指南,一起来看看吧
收藏 0 赞 0 分享

干货:制作精美吸精电商横幅的五个实用技巧

这篇教程是向脚本之家的朋友分享制作精美吸精电商横幅的五个实用技巧,教程真的很不错,值得大家学习,教程介绍的很全面,知识点很多,一起来看看吧
收藏 0 赞 0 分享
查看更多