图标
PUBLISHED
Tizen 应用程序可以使用多种图标。
主图标
这种类型的图标代表应用程序。 建议用圆形图标来代表 Tizen 平台,但这并非强制性要求。 它通常用于在主页屏幕上。 但是,如果您在其他应用程序中使用它,请确保主图标在任何背景上都较引人注目。
主图标应该具有以下属性:
- 文件格式:透明背景的 PNG 文件
- 移动设备尺寸:117 x 117 像素 (基于高清分辨率)
- Tizen Store 大小:512 x 512 像素
- 效果:从图标顶部调整光线 90 度给主图标一种立体感。 为保持一致性,您应该将相同光照角度应用到您创建的所有图标。 下图左侧显示了正确的光角度(90 度),右侧显示了不正确的光角度(120 度)。
虽然菜单屏幕中每个图标的圆圈边缘上都有个圆形框架,框架却是只显示在菜单屏幕上的 UI 元素。 创建您的应用程序的主图标时,不要使用这种类型的框架。
注:始终环绕带两个像素透明自由空间的每个图标。
2D 图标
这些图标都有圆边和白色色调颜色,可以呈现三种不同的状态: 正常、按下 和暗淡。 此外,根据您将它们放在应用程序中的位置,它们应呈现平板或雕板的形式。
您可以根据您的品牌标识或字符为应用程序设计图标。 但是,为了保持视觉一致性,您应该始终优先考虑 Tizen 2D 风格。 仔细考虑放置图标区域的颜色和大小,并确保它在三种状态(正常、按下和暗淡)下都可见。
如果您把单个图标放在标头、屏脚或选项卡中,默认情况下采用雕版的形式。 然而,您可以通过应用细微的效果增强效应。
当您设计 2D 图标时,请确保您用正确的颜色呈现其状态(正常、按下或暗淡),如下图所示:
状态 | 颜色 | 效果 |
---|---|---|
正常 | #fafafa | 黑色阴影
方向:90 距离:2px |
按下 | #5d83ff | 黑色阴影
方向:-90 距离:2px |
暗淡 | #fafafa | 黑色阴影
方向:90 距离:2px (正常状态 + 60% 不透明度) |
列表图标
这些图标可以是方形或圆形的形状,图像显示在中心位置。 整体色调和规则是类似于其他领域中的图标。
请注意:当列表图标的状态更改时,它的形状也可能会受到影响。 例如,当图标状态为“正常”或“暗淡”时,相同的颜色和效果值将应用到其他区域中的图标。
然而,当状态为“按下”时,形状颜色改变,而图标颜色呈现与背景相同的颜色值。
状态 | 颜色 | 内阴影 |
---|---|---|
正常 | #fafafa | 黑色阴影
方向:-90 距离:2px |
按下 | #212d8d | 黑色阴影
方向:-90 距离:2px |
暗淡 | #fafafa | 黑色阴影
方向:-90 距离:2px (正常状态 + 60% 不透明度) |