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

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

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

八种很漂亮的排版方法和技巧分享

这一篇教程的版式设计主要针对的是画册设计中的版式排版设计,作者一共总结了八种很漂亮的排版方法和技巧给大家分享出来,希望这篇教程能对大家有所帮助
收藏 0 赞 0 分享

怎样才能恰如其分地运用对比提升设计品质呢?

对比实际上是每一项设计都应体现的重要原则,因为对比能够组织设计并构建设计的层次,也就是说它能够告诉观众什么才是最重要的部分。恰当地运用对比不仅能强调焦点,还可以增添视觉趣味性。那么怎样才能恰如其分地运用对比提升设计品质呢?我们来看看吧
收藏 0 赞 0 分享

如何努力成为一名复合型设计师?UI设计师需要其他技能盘点

复合型人才应该是在各个方面都有一定能力,在某一个具体的方面要能出类拔萃的人,那么也就是说作为一名“单纯”的UI界面设计师,理应具备其他技能,这样才能更具竞争力。那么UI设计师可以有哪些其他技能呢?来看看吧
收藏 0 赞 0 分享

实用:40个标志设计的心得技巧

好的标志设计不仅需要让你的作品显得富及创意及好看,它还需要能够与受众产生品牌信息的沟通。今天就为大家分享40个标志设计的心得技巧,对于初学者来说非常值得学习,好了,下面我们来学习吧
收藏 0 赞 0 分享

连续法法则 连续性在平面设计中的应用

利用连续性的心理法则,我们可以在设计中创造一种张力——从而形成一种吸引力,今天为大家分享连续性在平面设计中的应用,很实用,值得大家学习,推荐过来,希望能对大家有所帮助
收藏 0 赞 0 分享

电商banner和海报文字排版的几个实用小技巧

今天为大家分享电商banner和海报文字排版的几个实用小技巧,教程真的很实用,非常适合初学者来学习,值得大家来学习,推荐到脚本之家,来看看吧
收藏 0 赞 0 分享

两个实战案例帮你一窥专业设计师才会的设计思维

我们平时评判一个设计的好与坏,很多时候都是从色彩好不好看、使用时有没有可用性的问题等等角度来做出判断,今天为大家分享通过两个实战案例帮你一窥专业设计师才会的设计思维技巧,一起来看看吧
收藏 0 赞 0 分享

5个维度来说说视觉设计师的设计风格

想要把设计风格讲清楚,的确不是一件容易的事。但绝对要避免从感性的角度来阐述事实的这种习惯,毕竟现在的移动产品从视觉表现力方面正在逐步降低要求,这种环境的变化也是要求视觉设计师应该主动去加强设计思路的原因,下面从5个维度来说说视觉设计师的设计风格
收藏 0 赞 0 分享

电商设计师究竟该如何正确认知自己的价值呢?

要想知道电商设计师的价值是什么,就先要知道电商设计师是谁是做什么的,那么电商设计师是做什么的呢?今天为大家分享电商设计师究竟该如何正确认知自己的价值,一起来看看吧
收藏 0 赞 0 分享

超实用:字体设计之笔体笔划知识全攻略

汉字的基本笔划有点、横、竖、撇、捺、挑、折、勾8种,每种在此基础上又细分出很多同类笔划,今天为大家分享字体设计之笔体笔划知识全攻略,非常实用,值得大家学习,一起来看看吧
收藏 0 赞 0 分享
查看更多