前言

应用图标 和 启动窗口 是用户对应用的第一印象。在 萌宠日记 中，我们使用了 分层图标 技术和 启动窗口背景色优化，实现了从桌面图标到闪屏页的 无缝过渡体验，让用户感受到应用的精致与用心。

本文将从 萌宠日记 的图标和启动窗口配置出发，深入解析 HarmonyOS 的分层图标机制、启动窗口优化策略，以及如何打造流畅的启动体验。

一、应用图标概述

1.1 图标显示场景

HarmonyOS 应用图标在以下场景中展示：

场景	图标尺寸	展示形式
桌面	自适应	系统裁剪为统一形状
最近任务	小尺寸	圆形或圆角矩形
应用信息	中等尺寸	原始形状
通知栏	极小尺寸	精简图标
设置页面	中等尺寸	圆形

1.2 萌宠日记的图标配置

// app.json5 — 应用图标配置
{
  "app": {
    "icon": "$media:layered_image",
    "label": "$string:app_name"
  }
}

图标引用分层图标资源：

// layered_image.json — 分层图标配置文件
{
  "layered-image": {
    "background": "$media:background",
    "foreground": "$media:foreground"
  }
}

提示：$media:layered_image 引用的是 layered_image.json 配置文件，而非直接引用图片。系统根据该配置自动组合前景和背景层。

二、分层图标机制

2.1 分层图标的原理

分层图标将图标分为 前景层（Foreground） 和 背景层（Background） 两层：

┌─────────────────────────────────────┐
│        背景层（Background）          │
│  ┌───────────────────────────────┐  │
│  │                               │  │
│  │         前景层（Foreground）    │  │
│  │          🐾 萌宠日记           │  │
│  │                               │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

图层	作用	设计建议
背景层	提供底色和纹理	使用品牌色 #F5A623 或渐变色
前景层	展示核心图标	使用品牌标识，去除背景

2.2 分层图标 vs 普通图标

对比维度	普通图标	分层图标
形状适配	固定形状，系统裁剪可能失真	自适应系统形状，效果统一
交互反馈	不支持	按压、长按时有动态效果
系统整合	孤立于系统风格	与系统图标风格一致
多设备适配	需手动适配不同分辨率	自动适配
开发复杂度	低	中（需设计两层图）

2.3 前景层设计规范

// 前景层图片设计规范
{
  "width": 288,       // 设计尺寸 288×288px
  "height": 288,
  "safeMargin": 36,   // 安全边距 36px（内侧 216×216 区域放置核心内容）
  "format": "png"     // 推荐 PNG 格式，支持透明背景
}

前景层设计要点：

1. 核心内容居中：图标主体放在安全区域内
2. 去除背景：前景层必须透明背景
3. 简洁清晰：在小尺寸下也能清晰识别
4. 品牌一致：与品牌 Logo 保持一致

三、启动窗口配置

3.1 启动窗口的作用

启动窗口（Start Window）是应用启动时 系统显示的画面，在以下场景中生效：

场景	启动窗口显示	后续显示
冷启动	应用进程不存在时	显示启动窗口 → 加载闪屏页
热启动	应用在后台时	直接显示最后界面，无启动窗口

3.2 萌宠日记的启动窗口配置

// module.json5 — Ability 启动窗口配置
{
  "abilities": [
    {
      "name": "EntryAbility",
      "startWindowIcon": "$media:startIcon",
      "startWindowBackground": "$color:start_window_background",
      "exported": true
    }
  ]
}

启动窗口属性说明：

属性	引用	值	说明
startWindowIcon	$media:startIcon	应用图标	启动窗口中心显示的图标
startWindowBackground	$color:start_window_background	#FFF8F0	启动窗口背景色

3.3 背景色配置

{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFF8F0"
    }
  ]
}

四、无缝过渡体验

4.1 过渡链路

从启动窗口到首屏的完整过渡链路：

启动窗口（startWindowBackground: #FFF8F0）
    ↓
SplashPage 加载中（loadContent 异步）
    ↓
SplashPage 渲染完成（背景色: #FFF8F0）
    ↓
用户点击"开始记录"
    ↓
router.pushUrl → Index 页面

4.2 过渡优化策略

策略	实现方式	效果
背景色一致	启动窗口背景色 = SplashPage 背景色 = #FFF8F0	视觉无跳变
图标预览	启动窗口显示图标，用户提前感知应用	降低等待焦虑
快速加载	闪屏页内容轻量，无网络请求	即时渲染
动画衔接	可通过 aboutToAppear 添加淡入动画	平滑过渡

// 启动窗口背景色资源定义
// color.json
{ "name": "start_window_background", "value": "#FFF8F0" }

// SplashPage 背景色
// SplashPage.ets
.backgroundColor('#FFF8F0')  // 与启动窗口背景色一致

五、启动窗口图标优化

5.1 startWindowIcon 配置

"startWindowIcon": "$media:startIcon"

startWindowIcon 使用单独的图标资源，而非应用图标，原因如下：

使用场景	建议图标	说明
应用图标 icon	分层图标	自适应系统形状
启动图标 startWindowIcon	静态图标	启动窗口固定显示

5.2 启动图标设计建议

• 简洁清晰：启动图标通常较小，设计要简洁
• 品牌一致：与应用图标保持视觉一致性
• 无文字：小尺寸下文字不可读
• 正方形：启动窗口图标显示为正方形

六、启动性能优化

6.1 减少启动时间

// EntryAbility.ets — 启动优化
onWindowStageCreate(windowStage: window.WindowStage): void {
  // 1. 使用闪屏页作为首屏，内容轻量
  windowStage.loadContent('pages/SplashPage', (err) => {
    if (err.code) {
      hilog.error(DOMAIN, 'testTag',
        'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
      return;
    }
    hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
  });
}

6.2 启动时间指标

指标	优秀	良好	需优化
冷启动（有启动窗口）	< 500ms	500-1000ms	> 1000ms
热启动	< 200ms	200-500ms	> 500ms
首屏渲染	< 300ms	300-600ms	> 600ms

七、资源图片管理

7.1 图片资源配置

萌宠日记的媒体资源目录：

resources/base/media/
├── background.png        # 分层图标背景层
├── foreground.png        # 分层图标前景层
├── layered_image.json    # 分层图标配置
└── startIcon.png         # 启动窗口图标

7.2 图片格式选择

格式	适用场景	优点	缺点
PNG	图标、UI 元素	无损、支持透明	文件较大
JPEG	照片、背景图	文件小	不支持透明
SVG	矢量图标	无损缩放、文件小	渲染性能略低
WEBP	通用场景	压缩率高、支持透明	兼容性需确认

八、多分辨率适配

8.1 图标资源目录

HarmonyOS 支持多分辨率资源目录：

resources/
├── base/media/          # 默认分辨率
├── mdpi/media/          # 中密度 ~160dpi
├── hdpi/media/          # 高密度 ~240dpi
├── xhdpi/media/         # 超高密度 ~320dpi
└── xxhdpi/media/        # 极高密度 ~480dpi

8.2 分辨率适配策略

分辨率限定符	密度范围	图标尺寸
mdpi	~160dpi	48×48px
hdpi	~240dpi	72×72px
xhdpi	~320dpi	96×96px
xxhdpi	~480dpi	144×144px

九、图标与启动窗口的测试

9.1 测试方法

# 安装应用测试图标
hdc app install -r entry/build/default/outputs/default/entry-default-unsigned.hap

# 查看启动窗口效果
hdc shell aa start -a EntryAbility -b com.mengchongriji.app

9.2 常见问题排查

问题现象	可能原因	解决方案
启动窗口显示默认图标	startWindowIcon 资源路径错误	检查资源文件是否存在
启动窗口背景色闪烁	背景色与首屏不一致	统一为相同色值
图标显示异常	分层图标配置错误	检查 layered_image.json 格式
启动白屏	loadContent 耗时过长	使用轻量首屏页面

十、最佳实践总结

10.1 图标设计 Checklist

• 前景层使用透明背景的 PNG 格式
• 核心内容在安全区域内（居中 216×216 区域）
• 色彩与品牌调性一致
• 在不同尺寸下均清晰可辨
• 同时提供普通图标和分层图标配置

10.2 启动窗口优化 Checklist

• 启动窗口背景色 = 首屏背景色
• 启动窗口图标清晰可辨
• 首屏页面加载轻量（无网络请求）
• 启动时间控制在 500ms 以内
• 从启动窗口到闪屏页过渡平滑

总结

本文从 萌宠日记 的图标和启动窗口配置出发，深入解析了：

1. 分层图标机制：前景层 + 背景层的组合设计
2. 启动窗口配置：startWindowIcon 和 startWindowBackground
3. 无缝过渡体验：背景色一致实现视觉平滑过渡
4. 启动性能优化：减少启动时间的关键策略
5. 多分辨率适配：资源限定符管理不同密度图标
6. 最佳实践：图标设计和启动窗口优化的 Checklist

通过分层图标和启动窗口优化，萌宠日记实现了从桌面图标到应用首屏的 无缝衔接，为用户提供了流畅、一致的开场体验。

下一篇我们将深入 日志系统集成与调试技巧，解析 hilog 在萌宠日记中的应用。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

---

相关资源：

• 分层图标开发指导：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/layered-image
• 应用图标配置：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/app-configuration-file
• 启动窗口配置：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/uiability-usage
• 应用启动优化：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/app-startup
• 资源限定符说明：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/resource-categories-and-access
• 图片格式支持：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/image-support
• DevEco Studio 图标制作：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/deveco-overview
• 应用冷启动优化：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/app-start