图标

 

Tizen 应用程序可以使用多种图标。

主图标

这种类型的图标代表应用程序。 建议用圆形图标来代表 Tizen 平台,但这并非强制性要求。 它通常用于在主页屏幕上。 但是,如果您在其他应用程序中使用它,请确保主图标在任何背景上都较引人注目。

主图标在不同背景上的可见性
主图标在不同背景上的可见性

 

主图标应该具有以下属性:

  • 文件格式:透明背景的 PNG 文件
  • 移动设备尺寸:117 x 117 像素 (基于高清分辨率)
  • Tizen Store 大小:512 x 512 像素
  • 效果从图标顶部调整光线 90 度给主图标一种立体感。 为保持一致性,您应该将相同光照角度应用到您创建的所有图标。 下图左侧显示了正确的光角度(90 度),右侧显示了不正确的光角度(120 度)。
正确 (L) 与不正确的 (R) 光角度
光角度

 

虽然菜单屏幕中每个图标的圆圈边缘上都有个圆形框架,框架却是只显示在菜单屏幕上的 UI 元素。 创建您的应用程序的主图标时,不要使用这种类型的框架。

:始终环绕带两个像素透明自由空间的每个图标。 

主图标的周围
主图标的周围

2D 图标

这些图标都有圆边和白色色调颜色,可以呈现三种不同的状态: 正常、按下 和暗淡。 此外,根据您将它们放在应用程序中的位置,它们应呈现平板或雕板的形式。 

2D 图标

 

您可以根据您的品牌标识或字符为应用程序设计图标。 但是,为了保持视觉一致性,您应该始终优先考虑 Tizen 2D 风格。 仔细考虑放置图标区域的颜色和大小,并确保它在三种状态(正常、按下和暗淡)下都可见。 

如果您把单个图标放在标头、屏脚或选项卡中,默认情况下采用雕版的形式。 然而,您可以通过应用细微的效果增强效应。

当您设计 2D 图标时,请确保您用正确的颜色呈现其状态(正常、按下或暗淡),如下图所示:

2D 图标状态颜色
 
 
表:2D 图标状态颜色

状态 颜色 效果
 正常  #fafafa 黑色阴影               

方向:90

距离:2px

 按下  #5d83ff 黑色阴影               

方向:-90

距离:2px

 暗淡  #fafafa 黑色阴影               

方向:90

距离:2px

(正常状态 + 60% 不透明度)

列表图标

这些图标可以是方形或圆形的形状,图像显示在中心位置。 整体色调和规则是类似于其他领域中的图标。

请注意:当列表图标的状态更改时,它的形状也可能会受到影响。 例如,当图标状态为“正常”或“暗淡”时,相同的颜色和效果值将应用到其他区域中的图标。

然而,当状态为“按下”时,形状颜色改变,而图标颜色呈现与背景相同的颜色值。

列表图标状态变化
列表图标状态变化
 
 
表:列表图标状态颜色

状态 颜色 内阴影
 正常  #fafafa 黑色阴影              

方向:-90

距离:2px

 按下  #212d8d 黑色阴影              

方向:-90

距离:2px

 暗淡  #fafafa 黑色阴影              

方向:-90

距离:2px

(正常状态 + 60% 不透明度)