【HarmonyOS/OpenHarmony】高端精致：资源分层如何支撑多场景一致视觉体验

前言 🌟

全场景体验不仅是能力流转，也包括视觉一致性。一个应用如果在手机、平板、深色模式、浅色模式下表现割裂，即使功能能跑起来，也很难给用户精致感。

当前项目还没有实现真正的多设备适配，但已经有资源分层基础，例如 base 和 dark 资源目录、字符串资源、字号资源、颜色资源和媒体资源。本文就基于这些真实文件，分析资源分层如何为多场景一致视觉体验打基础。

本文对应四大主题中的 高端精致。

当前项目的资源目录 📦

当前项目中比较关键的资源包括：

entry/src/main/resources/base/element/string.json
entry/src/main/resources/base/element/float.json
entry/src/main/resources/base/element/color.json
entry/src/main/resources/dark/element/color.json
entry/src/main/resources/base/media/layered_image.json
AppScope/resources/base/element/string.json
AppScope/resources/base/media/layered_image.json

这些资源分别承担：

1. 文案管理。
2. 字号管理。
3. 颜色管理。
4. 深色资源覆盖。
5. 图标资源管理。

虽然资源数量不多，但已经体现了资源分层思路。

base 资源：默认视觉基础 🎨

当前基础颜色资源中有：

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

这说明默认启动窗口背景是白色。它被 module.json5 引用：

"startWindowBackground": "$color:start_window_background"

这是一条完整的资源引用链路：

module.json5
  -> $color:start_window_background
  -> base/element/color.json

资源化的好处是，颜色不直接散落在配置和代码中。后续如果需要统一调整启动视觉，只需要维护资源。

dark 资源：深色场景基础 🌙

当前项目还有：

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

它位于：

entry/src/main/resources/dark/element/color.json

这说明项目已经为深色场景准备了同名颜色资源。当前项目没有完整深色页面，但启动背景已经具备基础分层。

这就是多场景一致体验的起点：同一个资源名，在不同场景下可以有不同表现。

字号资源：页面视觉统一的基础 🔢

当前项目中 float.json 定义了：

{
  "name": "page_text_font_size",
  "value": "50fp"
}

首页使用：

.fontSize($r('app.float.page_text_font_size'))

这说明页面字号不是硬编码，而是通过资源管理。

如果后续做多设备适配，字号资源会很有价值。手机上适合的字号，在平板或大屏上不一定合适。把字号抽到资源中，可以为后续扩展提供调整空间。

当前项目只有一个字号资源，所以不能说已经完成响应式字号体系。但它确实已经有资源化意识。

字符串资源：文案统一管理 📝

应用名称来自：

{
  "name": "app_name",
  "value": "xiaohongshu"
}

并在 app.json5 中引用：

"label": "$string:app_name"

模块中也有 Ability 相关文案：

{
  "name": "EntryAbility_label",
  "value": "label"
}

当前模块文案仍然比较模板化，说明项目还没有做正式文案优化。但把文案放入资源文件，本身就是良好习惯。

多场景应用中，文案可能会根据设备、语言、场景有所变化。资源化管理可以让这些变化更可控。

媒体资源：图标一致性 ✨

当前项目使用了分层图标：

{
  "layered-image": {
    "background": "$media:background",
    "foreground": "$media:foreground"
  }
}

应用图标和模块图标都通过资源引用，而不是直接写死图片路径。

在全场景体验中，图标一致性很重要。不同设备上用户看到的入口应该有统一识别度。当前项目还没有针对多设备做不同图标适配，但它已经把图标纳入资源体系。

资源链路要能追踪 🔍

写资源类文章时，最好不要只贴资源文件，还要把引用链路说清楚。

例如启动背景的链路是：

module.json5
  -> startWindowBackground
  -> $color:start_window_background
  -> color.json

应用名称的链路是：

app.json5
  -> label
  -> $string:app_name
  -> AppScope string.json

应用图标的链路是：

app.json5
  -> icon
  -> $media:layered_image
  -> layered_image.json

这些链路能体现资源管理的工程价值。资源不是孤立文件，而是被配置和页面真正引用。

为什么资源分层属于高端精致？🌈

精致体验不是只靠某个页面好看，而是多个场景下都保持稳定。

比如：

1. 启动背景不突兀。
2. 深色模式不刺眼。
3. 字号层级统一。
4. 应用图标和启动图标协调。
5. 文案管理清晰。

当前项目的资源体系还很基础，但这些基础正好对应视觉一致性的底层能力。

多场景一致性不等于所有场景完全一样 📌

一致性不是指所有设备、所有主题都显示完全相同的颜色和字号，而是体验风格保持统一。

比如浅色模式下启动背景是白色，深色资源中启动背景是黑色，二者颜色不同，但都是为了让启动体验和当前显示环境协调。

未来如果做更多设备，也可以遵循这个思路：手机、平板、大屏可以有不同布局和信息密度，但品牌色、图标风格、文案层级和交互反馈要保持一致。

当前项目还没有这些复杂适配，但资源分层已经提供了思考方向。

当前项目的真实边界 📌

当前项目已经有：

1. base 颜色资源。
2. dark 颜色资源。
3. 字符串资源。
4. 字号资源。
5. 分层图标资源。
6. 页面中 $r() 资源引用。

当前项目还没有：

1. 完整响应式布局。
2. 多设备资源差异化配置。
3. 完整设计 token 系统。
4. 全页面深色模式适配。
5. 多语言资源体系。

因此文章应写成“资源分层支撑多场景一致体验”，而不是“项目已完成全场景视觉适配”。

后续扩展建议 🚀

如果继续完善，可以增加：

page_background
text_primary
text_secondary
card_background
brand_primary
content_spacing
title_font_size
body_font_size

这些资源可以帮助后续页面在不同设备和不同主题下保持一致。

尤其是如果项目继续向“小红书风格内容流”发展，卡片背景、标题字号、昵称颜色、点赞颜色、底部导航颜色都应该资源化，而不是写死在页面里。

总结 ✅

这篇文章对应 高端精致 方向。

当前项目虽然没有完成多设备全场景适配，但资源分层已经具备基础。base 和 dark 提供主题场景基础，string 管理文案，float 管理字号，color 管理颜色，media 管理图标。

全场景体验要想精致，必须先做到多场景视觉一致。当前项目的资源体系还小，但方向是对的：把容易变化的视觉内容交给资源系统，而不是散落在页面代码里。