+025-5212 1206
| Icon状态 | 不透明度 |
| 触发+聚焦 | 87% |
| 触发+未聚焦 | 54% |
| 未触发 | 38% |
| Icon状态 | 不透明度 |
| 触发+聚焦 | 100% |
| 触发+未聚焦 | 70% |
| 未触发 | 50% |
设计方法
产品icon设计从现实材料的质感和触感中获得启发。每个icon都像真实纸张一样被裁剪、折叠、照亮，并且这一切都是通过一些简单的图形元素来表现的。通过干净的折痕和清晰的边缘来表现Material结实坚固的质感，利用微妙的亮光和阴影来展现材料的哑光质感。
物理原型
光线考究
Material原型
颜色考究
产品icon网格
使用产品icon网格进行设计有利于一致性，同时也为icon的定位建立了一套明确的规则。这种标准化带来了灵活且一致的系统。
网格
参考线
参考线的形状
参考线的形状是网格的基础。利用这些核心形状做为向导，即可使整个相关产品的icons保持一致的视觉比例。
方形
高&宽: 152dp
圆形
直径:176 dp
竖直矩形
高: 176dp
宽: 128dp
水平矩形
高: 128dp
宽: 176dp
DP单位网格
Android的产品icon尺寸是48dp，边缘为1dp。所以当你创建icon时，请使用48dp的尺寸，但将其放大至400%时，尺寸为192 x 192 dp（边缘则变为4dp）
1:1的单位网格
4:1的单位网格
几何形状
我们为参考线制定了一些预设的标准形状：圆形、方形、矩形、正交线和对角线。
产品icon剖析图
产品icon剖析图描述了组成一个产品icon的图形对象。在这些icons中，对象的一致性是形成统一视觉语言的关键。熟悉这些对象可以更容易地理解每个logo和它们之间特征的细微差异。它也将帮助你学习了解logo设计中的基础结构。
最终处理
Material 背景
Material 前景
色彩
投影
组件
直接从上方看，组件相互重叠。
构建视角
显示图标构造中各对象的立体分解图。
Material 背景
最底层的对象。
Material 前景
上面抬起的material对象，它会在material背景上投射阴影
专色
应用到元素中一小部分的颜色
泛色
无边框，应用到整个对象的颜色
边缘色（亮边）
在material对象的顶部边缘。该颜色混合了白色，它比固有色更亮
边缘色（暗边）
在material对象的底部边缘。该颜色混合了深色，它比固有色更暗
投影
Material对象抬高后周围形成的一个柔和投影。
最终处理
为所有对象提供了一个柔和的色彩照明，从左上角到右下角逐渐减弱。
产品icon准则
光线
在material环境中，模拟灯光照射在物体上并使其产生投影。顶部发出的光使material对象产生上文提及的阴影，以此突出物体的上下边缘，而带有角度的光线则可以增强对象表面的质感。
光在正顶部时
光为45%时
阴影
对于产品icon来说，顶部的光会让对象周围投下柔和的阴影并且在元素的顶部和左边会有高光出现。左上阴影较轻而右下阴影较重，并且它总会处于整个icon的轮廓中。
阴影数值
模式：普通
不透明度：20%
X轴偏移：0px
Y轴偏移：6px
模糊值：4px
色彩：参考色彩，形状和阴影的数值
亮边和暗部
Material对象的顶部和底部边缘提供了一种深度感和表面感。Material对象有一个1dp的标准厚度。要注意所有边的距离都是从该对象的内边缘算起的。
亮边是突出了所有对象的上边缘。而左、右和底部的边缘是没有亮边的。
暗部是突出了所有对象的下边缘。而左、右和顶部的边缘是没有暗部的。
亮边
高度: 1dp
透明度: 20%
颜色值: White (#FFFFFF)
暗部
高度: 1dp
透明度: 20%
颜色值: 参考图标色彩中阴暗部分的数值
最终处理
最终处理是指一个45度的虚拟照射光线。它从左上延伸至右下，且只作用在图标之内。
渐变参数
样式: 径向
角度: 45o
颜色值: White (#FFFFFF)
中点位置: 33%
渐变 1 不透明度: 10% 位置: 0%
渐变 2 不透明度: 100% 位置: 0%
亮部、暗部和投影值
冷色
清新色
暖色
热色
中性色
产品icon模式
让颜色元素与material对象表面齐平。不要给颜色元素增加任何的边缘或投影。
可行
不可行
图层
对material对象进行分层能够形成空间深度（有边缘和投影）。
但要谨慎对待material对象层叠的数量，避免因过于复杂而丧失焦点。
可行
tiradcn@126.com