39.细解鸿蒙之元服务UX上架标准-图标设计规范

312 阅读2分钟

细解鸿蒙之元服务UX上架标准-图标设计规范

是否必须遵守:必须

标准项描述:

1.元服务图标与应用图标有明显区别,它继承了HarmonyOS 的设计语言体系,内部圆形表示完整独立,外圈装饰线表示可分可合可流转的特点。

2.元服务图标生成需提供尺寸为 1024 x 1024 px的静态图片资源,并使用元服务图标工具(生成元服务图标)生成相应的规范图标。

3.元服务图标外环请勿直接设计成纯白或纯黑样式(为保证在多色背景下显示正常,建议进行灰色描边处理)。

生成元服务图标

  1. 在工程中选中模块或文件,右键单击New > Image Asset,进入图标配置页面。

  2. 在Path中选择本地图片路径。图片尺寸及要求如下:

图标格式:.png、.jpeg、.jpg格式的静态图片资源;

图标尺寸:1024 x 1024 px (正方形);

图标背景:不透明;

质量要求:图标内容需清晰可辨,避免存在模糊、锯齿、拉伸等问题。

3. 在预览界面可以配置图标颜色、名称、保存路径等。

**Color**:推荐使用的图标颜色。选择不同颜色,右边图标预览区域可查看相应的效果。

**Name**:生成的图标名称。

**Res Directory**:生成的512px\*512px尺寸图标在工程中的保存位置。

**Save to**:生成的216px\*216px尺寸图标需要指定本地文件夹的保存位置。后续在AppGallery Connect上架元服务时,需使用该图标。

4.点击OK,保存配置并在相应模块目录**src > main > resources > base > media**路径下生成元服务图标。可在模块级module.json5中的icon字段中配置元服务图标。

--javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet"
    ],
    "deliveryWithInstall": true,
    "installationFree": true,
    "pages": "$profile:main_pages",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:icon",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ]
  }
}

PS:实际项目中如有出入,请告知博主,博主会第一时间修改得哇~