首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >HarmonyOS修改图标时注意事项

HarmonyOS修改图标时注意事项

作者头像
红目香薰
发布2025-12-16 15:18:57
发布2025-12-16 15:18:57
3910
举报
文章被收录于专栏:CSDNToQQCodeCSDNToQQCode

看着改了实际没改。。。

看看真的实例代码怎么改的:

代码语言:javascript
复制
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:startIcon",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ],

标注属性:

"abilities": [   {     //  Ability名称,唯一标识当前Ability组件,需与代码中定义的类名一致     "name": "EntryAbility",     //  Ability的代码入口路径,指定Ability的实现文件位置     "srcEntry": "./ets/entryability/EntryAbility.ets",     //  Ability的描述信息,引用string.json中的国际化字符串(key为EntryAbility_desc)     "description": "$string:EntryAbility_desc",     //  Ability的图标,引用media目录下的图片资源(startIcon为资源文件名)     "icon": "$media:startIcon",     //  Ability的显示名称,引用string.json中的国际化字符串(key为EntryAbility_label)     "label": "$string:EntryAbility_label",     //  应用启动时的窗口图标,通常与Ability图标一致,引用media资源     "startWindowIcon": "$media:startIcon",     //  应用启动时的窗口背景色,引用color.json中的颜色配置(key为start_window_background)     "startWindowBackground": "$color:start_window_background",     //  是否允许其他应用调用当前Ability,true表示可被外部访问(入口Ability通常设为true)     "exported": true,     //  Ability支持的技能列表,定义该Ability可响应的场景和动作     "skills": [       {         //  实体类型,描述Ability所属的类别(entity.system.home表示桌面应用入口)         "entities": [           "entity.system.home"         ],         //  可响应的动作,action.system.home表示该Ability可作为桌面应用启动         "actions": [           "action.system.home"         ]       }     ]   } ]

其中的icon是设置安装之后显示图片的,还有一个startWindowIcon是应用启动时的窗口图标,通常与Ability图标一致,引用media资源。

我们来看看具体效果:

图片放置位置:

在修改应用显示图标(如移动端、桌面端或跨平台应用的图标)时,需注意以下核心事项,以确保图标显示效果、用户体验和兼容性符合预期:

一、图标设计规范
  1. 尺寸与分辨率适配
    • 不同平台对图标尺寸有明确要求(如手机应用图标、桌面快捷方式、启动器图标等),需按平台规范提供多套尺寸,避免拉伸或模糊。
      • 例:Android 图标需覆盖 mipmap-xxxhdpi(192×192px)、mipmap-xxhdpi(144×144px)等;iOS 需包含 1024×1024px(App Store)、180×180px(iPhone 高清)等。
    • 确保图标为正方形(特殊平台除外),避免非等比例设计导致显示变形。
  2. 视觉风格统一
    • 图标风格需与应用定位一致(如工具类简洁、游戏类生动),并符合平台设计语言(如 Android Material Design、iOS Human Interface Guidelines)。
    • 避免过度复杂的细节:小尺寸图标(如桌面快捷方式)需简化元素,确保远距离可识别。
  3. 背景与透明区域
    • 若平台支持透明图标(如多数移动系统),需使用 PNG 格式并保留适当透明边距,避免图标边缘与系统背景融合模糊。
    • 部分平台(如 Windows 桌面)可能要求图标包含背景色,需提前确认是否需要适配。
二、格式与资源文件要求
  1. 图片格式选择
    • 优先使用 PNG 格式:支持透明通道,压缩后画质损失小,适配多数平台。
    • 矢量图备份:使用 SVG 或 AI 等矢量格式保存源文件,便于后续按不同尺寸导出,避免像素化。
    • 避免使用低质量格式:如 JPG(可能有锯齿或压缩 artifacts)、BMP(体积过大)。
  2. 资源命名与路径规范
    • 图标文件命名需清晰(如icon_launcher.png、icon_app_512.png),避免特殊字符或空格,适配不同系统的文件系统规则。
    • 按平台目录结构存放:如 Android 放在 res/mipmap-xxx 目录,iOS 放在 Assets.xcassets 中,鸿蒙应用放在 media 目录,并通过配置文件正确引用(如 $media:icon)。
三、平台兼容性与配置
  1. 平台特定限制
    • Android:图标需避免圆角设计(系统会自动添加圆角遮罩,手动加圆角可能导致显示异常);高版本系统支持自适应图标(Adaptive Icon),需提供前景层和背景层分离设计。
    • iOS:图标需符合圆角半径规范(不同尺寸圆角弧度不同,建议用官方模板);避免使用 alpha 通道半透明效果,可能在某些场景下显示异常。
    • 桌面端(Windows/macOS):需支持不同尺寸(如 16×16px、32×32px、256×256px),macOS 图标可能需要包含阴影效果。
  2. 配置文件引用正确
    • 在应用配置文件中(如 AndroidManifest.xml、Info.plist、鸿蒙的 config.json),确保图标路径和文件名与实际资源一致,避免拼写错误导致图标不显示。
    • 若使用动态图标(如根据主题切换),需确保代码中资源引用逻辑正确,且适配平台主题切换机制(如 Android 的深色模式)。
四、用户体验与品牌一致性
  1. 辨识度与记忆点
    • 图标需突出应用核心功能或品牌元素(如 Logo、特征颜色),确保用户能快速关联应用用途。
    • 避免与主流应用图标过于相似,防止用户混淆。
  2. 测试场景全覆盖
    • 在不同设备、系统版本、屏幕分辨率下测试图标显示效果,包括:
      • 桌面 / 启动器列表、应用商店展示、快捷方式、通知栏小图标等场景。
      • 深色 / 浅色主题切换时,图标是否清晰可见(如浅色图标在白色背景下需加描边)。
    • 检查图标在不同缩放比例下的显示效果,避免细节丢失或模糊。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-12-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、图标设计规范
  • 二、格式与资源文件要求
  • 三、平台兼容性与配置
  • 四、用户体验与品牌一致性
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档