材料图标设计

材料设计中的图标分为产品图标和系统图标。产品图标代表着品牌可以提供的产品、服务和工具,系统图标表示产品界面中表示操作、命令和文件的图形。产品图标的大小是48dp,系统图标的大小是24dp。总结了材料图标有四个特点:简单、规整、精细和微妙。

为了保证图标在材料设计语言上的一致性,提供了一套网格系统,网格包含了几个基本图形:长方形、圆形和正方形。设计师可以在网格系统上把基本图形作为参考线对图标进行设计。

为了使产品图标表现出材料的触感和质感,对产品图标的结构进行了剖析和演示:1、表面处理层;2、图标前景;3、颜色;4、投影;5、背景。其中表面处理层模拟了45度倾斜的光线照射在图标上;图标前景和颜色是融合在一起的形成图标的外形轮廓;在光线的照射下图标在背景上形成两种阴影:接触阴影和投影。说明文档中对表面处理层和两种阴影的具体参数给出了建议。为了表现材料的厚度,在背景和前景上加上了1dp的高光和内阴影。高光和阴影的色值根据图标和背景的颜色有所不同。比如在冷色的基础上叠加20%的深蓝色变现材料的阴影,在暖色的基础上叠加20%的橘色变现阴影等,具体请参照文档。

对于系统图标,文档对线端、描边、镂空和圆角都作了相应的规范。系统图标在激活、未激活和不可用三种状态透明度是不一样的,在亮背景下分别是87%、54%和38%。

材料图标设计_第1张图片
材料系统图标

你可能感兴趣的:(材料图标设计)