前言应用图标和启动窗口是用户对应用的第一印象。在萌宠日记中我们使用了分层图标技术和启动窗口背景色优化实现了从桌面图标到闪屏页的无缝过渡体验让用户感受到应用的精致与用心。本文将从萌宠日记的图标和启动窗口配置出发深入解析 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 格式支持透明背景 }前景层设计要点核心内容居中图标主体放在安全区域内去除背景前景层必须透明背景简洁清晰在小尺寸下也能清晰识别品牌一致与品牌 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:startIconstartWindowIcon使用单独的图标资源而非应用图标原因如下使用场景建议图标说明应用图标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 启动时间指标指标优秀良好需优化冷启动有启动窗口 500ms500-1000ms 1000ms热启动 200ms200-500ms 500ms首屏渲染 300ms300-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/ # 极高密度 ~480dpi8.2 分辨率适配策略分辨率限定符密度范围图标尺寸mdpi~160dpi48×48pxhdpi~240dpi72×72pxxhdpi~320dpi96×96pxxxhdpi~480dpi144×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.app9.2 常见问题排查问题现象可能原因解决方案启动窗口显示默认图标startWindowIcon 资源路径错误检查资源文件是否存在启动窗口背景色闪烁背景色与首屏不一致统一为相同色值图标显示异常分层图标配置错误检查 layered_image.json 格式启动白屏loadContent 耗时过长使用轻量首屏页面十、最佳实践总结10.1 图标设计 Checklist前景层使用透明背景的 PNG 格式核心内容在安全区域内居中 216×216 区域色彩与品牌调性一致在不同尺寸下均清晰可辨同时提供普通图标和分层图标配置10.2 启动窗口优化 Checklist启动窗口背景色 首屏背景色启动窗口图标清晰可辨首屏页面加载轻量无网络请求启动时间控制在 500ms 以内从启动窗口到闪屏页过渡平滑总结本文从萌宠日记的图标和启动窗口配置出发深入解析了分层图标机制前景层 背景层的组合设计启动窗口配置startWindowIcon 和 startWindowBackground无缝过渡体验背景色一致实现视觉平滑过渡启动性能优化减少启动时间的关键策略多分辨率适配资源限定符管理不同密度图标最佳实践图标设计和启动窗口优化的 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-supportDevEco Studio 图标制作https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/deveco-overview应用冷启动优化https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/app-start
HarmonyOS应用开发实战：萌宠日记 - 应用图标与启动窗口优化
前言应用图标和启动窗口是用户对应用的第一印象。在萌宠日记中我们使用了分层图标技术和启动窗口背景色优化实现了从桌面图标到闪屏页的无缝过渡体验让用户感受到应用的精致与用心。本文将从萌宠日记的图标和启动窗口配置出发深入解析 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 格式支持透明背景 }前景层设计要点核心内容居中图标主体放在安全区域内去除背景前景层必须透明背景简洁清晰在小尺寸下也能清晰识别品牌一致与品牌 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:startIconstartWindowIcon使用单独的图标资源而非应用图标原因如下使用场景建议图标说明应用图标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 启动时间指标指标优秀良好需优化冷启动有启动窗口 500ms500-1000ms 1000ms热启动 200ms200-500ms 500ms首屏渲染 300ms300-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/ # 极高密度 ~480dpi8.2 分辨率适配策略分辨率限定符密度范围图标尺寸mdpi~160dpi48×48pxhdpi~240dpi72×72pxxhdpi~320dpi96×96pxxxhdpi~480dpi144×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.app9.2 常见问题排查问题现象可能原因解决方案启动窗口显示默认图标startWindowIcon 资源路径错误检查资源文件是否存在启动窗口背景色闪烁背景色与首屏不一致统一为相同色值图标显示异常分层图标配置错误检查 layered_image.json 格式启动白屏loadContent 耗时过长使用轻量首屏页面十、最佳实践总结10.1 图标设计 Checklist前景层使用透明背景的 PNG 格式核心内容在安全区域内居中 216×216 区域色彩与品牌调性一致在不同尺寸下均清晰可辨同时提供普通图标和分层图标配置10.2 启动窗口优化 Checklist启动窗口背景色 首屏背景色启动窗口图标清晰可辨首屏页面加载轻量无网络请求启动时间控制在 500ms 以内从启动窗口到闪屏页过渡平滑总结本文从萌宠日记的图标和启动窗口配置出发深入解析了分层图标机制前景层 背景层的组合设计启动窗口配置startWindowIcon 和 startWindowBackground无缝过渡体验背景色一致实现视觉平滑过渡启动性能优化减少启动时间的关键策略多分辨率适配资源限定符管理不同密度图标最佳实践图标设计和启动窗口优化的 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-supportDevEco Studio 图标制作https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/deveco-overview应用冷启动优化https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/app-start
