加入收藏 | 设为首页 | 会员中心 | 我要投稿 焦作站长网 (https://www.0391zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 空间 > 正文

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

发布时间:2020-03-13 14:26:02 所属栏目:空间 来源:站长网
导读:今天为大家分享APP图标设计规范及要求,教程很不错,对于app图片设计的朋友很值得学习,推荐过来,大家一起来学习吧

产品图标网格已经形成了一致的标准,且建立了一套明确的图形元素定位规则。这种标准化带来了灵活,而连贯的系统。今天为大家分享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 单元网格

几何

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

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

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

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

 

c397568e12af6ac725bb5c2a1f6c.jpg

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

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


内容区域

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

214a568e152732f8754c809cc3d4.jpg

活动区域

796e568e155332f8754c80ee965b.jpg

修饰区域

关键线形状

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

b8c2568e158d6ac725bb5ce1d983.jpg

方形

宽&高:18px

0c40568e15a132f8754c8057ccfc.jpg

圆形

直径:20px

eacc568e15ba32f8754c807b1806.jpg

竖直矩形

高:20px, 宽:16px

fc75568e15d26ac725bb5c5b29bf.jpg

竖直矩形

高:20px, 宽:16px

几何

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

(编辑:焦作站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读