Open Harmony 高端精致layered-image 分层图标资源配置实践 ✨前言 应用图标是用户接触应用的第一个视觉元素。一个页面可以慢慢优化但应用图标往往在安装、桌面展示、任务列表等场景中最先被看到。当前 OpenHarmony 项目中使用了layered-image分层图标配置这个点非常适合写成一篇“高端精致”方向的文章。本文基于当前项目真实资源文件展开不虚构复杂图标设计流程只分析项目中已经存在的分层图标结构以及这种资源组织方式的工程意义。当前项目中的图标引用 应用级配置位于AppScope/app.json5其中图标字段是icon:$media:layered_image模块 Ability 中也引用了图标资源icon:$media:layered_image,startWindowIcon:$media:startIcon这说明当前项目至少有两类图标相关资源应用图标layered_image启动窗口图标startIcon图标不是直接写死图片路径而是通过$media资源引用。layered_image.json 的结构 当前项目中存在分层图标配置{layered-image: {background:$media:background,foreground:$media:foreground} }这个配置表达得很清楚图标由背景层和前景层组成。项目中对应的资源包括background.pngforeground.pnglayered_image.json这种方式比单张图片更有结构感。背景和前景分开管理可以让图标资源更清晰也方便后续替换或调整。分层资源的查找路径 当前项目里分层图标不是孤立存在的。它至少涉及三个层次app.json5 / module.json5 -$media:layered_image- layered_image.json - background.png / foreground.png当配置中写icon:$media:layered_image系统并不是直接去找一张叫layered_image.png的图片而是根据资源名找到layered_image.json再根据里面的background和foreground继续找到具体图片资源。这也是分层图标和普通图片引用不太一样的地方。它更像是一个图标描述文件而不是一张最终图片。为什么不要把图标写死成单张图片在小 demo 中直接用一张图片当图标当然也能跑。但项目一旦希望做得更规范分层资源会更适合维护。比如后续只想替换前景标识不想动背景就可以保持background.png不变只调整foreground.png。如果要统一应用级图标和模块级图标也可以比较两个layered_image.json的引用是否一致。当前项目没有复杂品牌设计稿所以本文不讨论图标视觉设计规范。但从工程组织角度看背景、前景、启动图标分开是一个很好的基础。为什么分层图标更适合精致体验✨“高端精致”不是只靠页面大图和动画。图标、启动页、主题色、字号这些细节同样会影响用户对应用质量的判断。分层图标的优势在于结构更清晰背景和前景各自独立。资源更可维护修改前景不一定影响背景。表达更灵活可以根据设计需要调整层次。工程更规范通过资源引用统一管理。当前项目虽然还不是完整产品级图标方案但已经使用了分层图标结构这是一个不错的起点。AppScope 和 entry 模块中的资源关系 当前项目中AppScope/resources/base/media/layered_image.json和entry/src/main/resources/base/media/layered_image.json都存在类似配置。这说明项目在应用级和模块级都保留了图标资源。可以这样理解AppScope更偏应用全局资源。entry模块资源更贴近模块内部配置。app.json5和module.json5会分别引用相关资源。对于新手来说这里容易混淆。不是所有资源都写在一个目录下OpenHarmony 项目会根据作用范围组织资源。从当前项目看应用级app.json5使用的是AppScope资源而模块级module.json5更贴近entry下的资源。写文章时可以把这点讲清楚同样叫layered_image也要注意它所在的资源范围。startWindowIcon 与 layered-image 的区别 module.json5中还有startWindowIcon:$media:startIcon这和应用图标配置不是同一个字段。icon更偏应用或 Ability 的图标展示startWindowIcon更偏启动窗口展示。当前项目已经配置了启动图标这说明项目从启动体验层面也保留了基础配置。不过需要注意当前项目没有做复杂启动页动画也没有自定义启动流程。这里只是使用了启动窗口图标配置。图标资源命名的工程建议 ✅基于当前项目可以总结几个图标资源管理建议图标资源命名要清晰例如foreground、background、startIcon。应用级图标和模块级图标不要随意混用。如果更换品牌图标要同步检查app.json5和module.json5。分层图标配置要保证前景、背景资源都存在。图标不是页面 UI但属于用户体验的一部分。当前项目在资源命名上还比较基础后续如果正式化可以把资源命名调整得更贴合品牌。排查图标不生效时看哪里如果后续替换图标后发现效果没有变化可以按下面顺序排查app.json5中是否仍然引用$media:layered_image。module.json5中 Ability 图标是否引用了正确资源。layered_image.json中的background和foreground是否写对。对应的 PNG 资源是否真的存在于media目录。是否只改了AppScope但实际展示使用的是entry模块资源。这类问题很常见因为资源名、资源目录和配置引用之间隔了几层。理解这条链路后排查就不会只盯着某一张图片。和高端精致主题的关系 这篇文章对应高端精致方向。原因很直接应用图标是视觉体验的入口。一个应用如果页面做得很好但图标粗糙、启动图标不统一整体观感仍然会打折扣。当前项目用layered-image组织图标资源说明它已经具备继续做视觉规范的基础。后续如果配合统一色彩、启动页背景、页面资源 token就能逐步形成更完整的视觉系统。总结 ✨当前项目真实存在以下图标相关配置app.json5中的$media:layered_image。module.json5中的$media:layered_image。module.json5中的$media:startIcon。layered_image.json中的background和foreground。对应的 PNG 图标资源。分层图标不是复杂功能但它是应用精致感的一部分。OpenHarmony 项目想要做得更像正式产品就不能只关注页面也要关注图标、启动窗口和资源组织这些容易被忽略的细节。
Open Harmony 高端精致：layered-image 分层图标资源配置实践
Open Harmony 高端精致layered-image 分层图标资源配置实践 ✨前言 应用图标是用户接触应用的第一个视觉元素。一个页面可以慢慢优化但应用图标往往在安装、桌面展示、任务列表等场景中最先被看到。当前 OpenHarmony 项目中使用了layered-image分层图标配置这个点非常适合写成一篇“高端精致”方向的文章。本文基于当前项目真实资源文件展开不虚构复杂图标设计流程只分析项目中已经存在的分层图标结构以及这种资源组织方式的工程意义。当前项目中的图标引用 应用级配置位于AppScope/app.json5其中图标字段是icon:$media:layered_image模块 Ability 中也引用了图标资源icon:$media:layered_image,startWindowIcon:$media:startIcon这说明当前项目至少有两类图标相关资源应用图标layered_image启动窗口图标startIcon图标不是直接写死图片路径而是通过$media资源引用。layered_image.json 的结构 当前项目中存在分层图标配置{layered-image: {background:$media:background,foreground:$media:foreground} }这个配置表达得很清楚图标由背景层和前景层组成。项目中对应的资源包括background.pngforeground.pnglayered_image.json这种方式比单张图片更有结构感。背景和前景分开管理可以让图标资源更清晰也方便后续替换或调整。分层资源的查找路径 当前项目里分层图标不是孤立存在的。它至少涉及三个层次app.json5 / module.json5 -$media:layered_image- layered_image.json - background.png / foreground.png当配置中写icon:$media:layered_image系统并不是直接去找一张叫layered_image.png的图片而是根据资源名找到layered_image.json再根据里面的background和foreground继续找到具体图片资源。这也是分层图标和普通图片引用不太一样的地方。它更像是一个图标描述文件而不是一张最终图片。为什么不要把图标写死成单张图片在小 demo 中直接用一张图片当图标当然也能跑。但项目一旦希望做得更规范分层资源会更适合维护。比如后续只想替换前景标识不想动背景就可以保持background.png不变只调整foreground.png。如果要统一应用级图标和模块级图标也可以比较两个layered_image.json的引用是否一致。当前项目没有复杂品牌设计稿所以本文不讨论图标视觉设计规范。但从工程组织角度看背景、前景、启动图标分开是一个很好的基础。为什么分层图标更适合精致体验✨“高端精致”不是只靠页面大图和动画。图标、启动页、主题色、字号这些细节同样会影响用户对应用质量的判断。分层图标的优势在于结构更清晰背景和前景各自独立。资源更可维护修改前景不一定影响背景。表达更灵活可以根据设计需要调整层次。工程更规范通过资源引用统一管理。当前项目虽然还不是完整产品级图标方案但已经使用了分层图标结构这是一个不错的起点。AppScope 和 entry 模块中的资源关系 当前项目中AppScope/resources/base/media/layered_image.json和entry/src/main/resources/base/media/layered_image.json都存在类似配置。这说明项目在应用级和模块级都保留了图标资源。可以这样理解AppScope更偏应用全局资源。entry模块资源更贴近模块内部配置。app.json5和module.json5会分别引用相关资源。对于新手来说这里容易混淆。不是所有资源都写在一个目录下OpenHarmony 项目会根据作用范围组织资源。从当前项目看应用级app.json5使用的是AppScope资源而模块级module.json5更贴近entry下的资源。写文章时可以把这点讲清楚同样叫layered_image也要注意它所在的资源范围。startWindowIcon 与 layered-image 的区别 module.json5中还有startWindowIcon:$media:startIcon这和应用图标配置不是同一个字段。icon更偏应用或 Ability 的图标展示startWindowIcon更偏启动窗口展示。当前项目已经配置了启动图标这说明项目从启动体验层面也保留了基础配置。不过需要注意当前项目没有做复杂启动页动画也没有自定义启动流程。这里只是使用了启动窗口图标配置。图标资源命名的工程建议 ✅基于当前项目可以总结几个图标资源管理建议图标资源命名要清晰例如foreground、background、startIcon。应用级图标和模块级图标不要随意混用。如果更换品牌图标要同步检查app.json5和module.json5。分层图标配置要保证前景、背景资源都存在。图标不是页面 UI但属于用户体验的一部分。当前项目在资源命名上还比较基础后续如果正式化可以把资源命名调整得更贴合品牌。排查图标不生效时看哪里如果后续替换图标后发现效果没有变化可以按下面顺序排查app.json5中是否仍然引用$media:layered_image。module.json5中 Ability 图标是否引用了正确资源。layered_image.json中的background和foreground是否写对。对应的 PNG 资源是否真的存在于media目录。是否只改了AppScope但实际展示使用的是entry模块资源。这类问题很常见因为资源名、资源目录和配置引用之间隔了几层。理解这条链路后排查就不会只盯着某一张图片。和高端精致主题的关系 这篇文章对应高端精致方向。原因很直接应用图标是视觉体验的入口。一个应用如果页面做得很好但图标粗糙、启动图标不统一整体观感仍然会打折扣。当前项目用layered-image组织图标资源说明它已经具备继续做视觉规范的基础。后续如果配合统一色彩、启动页背景、页面资源 token就能逐步形成更完整的视觉系统。总结 ✨当前项目真实存在以下图标相关配置app.json5中的$media:layered_image。module.json5中的$media:layered_image。module.json5中的$media:startIcon。layered_image.json中的background和foreground。对应的 PNG 图标资源。分层图标不是复杂功能但它是应用精致感的一部分。OpenHarmony 项目想要做得更像正式产品就不能只关注页面也要关注图标、启动窗口和资源组织这些容易被忽略的细节。
