材料图标设计

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

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

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

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

材料系统图标
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容