国内最专业的IT技术学习网

UI设计

当前位置:主页 > UI设计 >

产品图标 谷歌 Material 规范

发布时间:2019/07/17标签:   设计原则      设计规范    点击量:

原标题: 产品图标 谷歌 Material 规范

这篇文章规则由谷歌的Material Design制定的,图标绘制方法是我根据个人经验来讲的填一下之前挖的坑,上一篇文章也提到了,图标画法从标准化角度考虑会分为两种:一种是采用IOS的标准,一种是谷歌的Material Design标准。谷歌的Material Design图标规范又分为:产品图标和系统图标。那今天先讲一下谷歌的产品图标。先来理解下谷歌是如何规范的产品图标,如何绘制产品图标。

目录

1.1 什么是产品图标

1.2 尺寸与网格

1.3 关键线

1.4 绘制产品图标

1.1 什么是产品图标

产品图标是品牌和产品的视觉表现。图标以简单、大胆、友好的方式传达产品的核心理念和意图。虽然每个图标在视觉上是不同的,但是一个品牌的所有产品图标都应该通过概念和执行来统一。这些指南是一个起点,以确保您的产品图标颜色和关键元素反映您的品牌身份。以上是谷歌MD对产品图标的释义。我觉得可以简单理解为应用程序的Logo(标识),seo推广人员,如下图所示。

undefined

1.2 尺寸与网格

创建产品图标时的基础尺寸是48px,这里的48px是1:1的尺寸,也是原始尺寸。在谷歌的Material Design中使用的尺寸单位是”dp”不是”Px”。Px(像素)相对比较好理解我就用Px来进行说明了。至于为什么要用48这个尺寸做基础尺寸,谷歌官方也没有做明确的解释说明,我个人猜测与“DPI”关系很大,不擅长的知识就不敢乱讲了。

undefined

那当我们实际设计一个图标时,并不是按照48px这个基础尺寸标准来做的,而是要把48px这个尺寸放大4倍来做,就得到了192px这个尺寸,我们的所有图标绘制的操作都是在192px这个尺寸里面进行绘制的。由于整体尺寸被放大了4倍,网格基准也由1px变为了4px,因此就非常方便我们去规范图标里的各个形状了。

undefined

1.3 关键线

当我们把图标的设计尺寸和网格都设置好,就要约束设计尺寸192px里面的图标的形状了,所有形状随便画就缺少了统一性,大小不一形状各异,又不美观又不实用就不规范了。那要如何约束形状呢,这里就要用到关键设计线了,简称关键线(keyline)。大家按照下图给出的参数来绘制出这四种关键线,一定要绘制在一个文档里!如下图所示。

标注1(正方):152px*152px,曲率为8px;线1px;

标注2(正圆):176px*176px,正圆;线1px;

标注3(垂直矩形):高176px,宽128px;曲率为8px;线1px;

标注4(水平矩形):高128px,宽176px;曲率为8px;线1px;

undefined

绘制完成之后,我们将绘制好的四条关键线水平垂直居中对齐,并且按照最外围(192px*192px)的矩形框来绘制对角线,水平线和垂直线。之后就得到了下面的图。

undefined

1.4 绘制产品图标

这篇文章会非常的长,图片缩小了怕大家不好理解,遗漏部分细节也怕大家不好理解,没办法只能增加篇幅了。我可能只会讲解一个产品图标的绘制方法了,讲多少取决于篇幅长度。我是以谷歌的产品图标来做示例,谷歌的图标较为规范,先讲一下“谷歌邮箱”这个产品图标应该怎么画。

上一篇:每周定时写分享总结文章杭州seo中心

下一篇:没有了

返回
版权信息Copyright ? IT技术教程 版权所有??? ICP备案编号:鲁ICP备09013610号