前言

HarmonyOS 7 的新能力里，空间化很容易让人先想到视觉效果。

比如沉浸光感、空间感、3D 内容、端侧重建，这些词本身就带有很强的视觉吸引力。真正回到项目里以后，问题会变得更具体：一个普通应用到底要不要马上做空间化改造？哪些页面值得先调整？多端适配是不是要和空间化放在一起处理？如果手里已经有 HarmonyOS 6 原生项目，第一轮应该从哪里开始？

这里我们先不要急着把空间化理解成复杂 3D 页面，也不要把多端适配简单理解成平板拉宽。对于大多数工具类、办公类、内容类、会议类应用来说，第一阶段更适合做的是页面层次、信息密度、窗口宽度、交互确认和多端布局这些基础工作。

HarmonyOS 7 的空间化方向已经覆盖沉浸光感组件和 3DGS 端侧重建；前者强调光随指动、光线勾勒、非线性形变等动效，后者面向空间建模、商品展示、文旅展陈等 3D 内容场景。与此同时，HarmonyOS 设计资源也强调多设备体验和适配指南。

所以，我们先从普通应用角度处理一个更实际的问题：

空间化和多端适配要一起思考，普通应用先改哪些页面。

如果你的项目是会议随记、待办管理、资料整理、本地生活、图片工具、学习工具，第一轮可以先从这些页面入手：

• 首页和工作台
• 列表页和详情页
• 编辑页和表单页
• 空状态和引导页
• 设置页和管理页

这些页面不一定都要做很强的视觉效果，但它们非常适合先整理布局层级、宽度策略和多端适配规则。等基础体验稳定之后，再考虑沉浸光感、空间化组件或者 3D 内容能力，整体风险会小很多。

一、先判断页面是否值得做空间化改造

空间化不是所有页面都值得做。

有些页面本身就是信息密度高、操作频繁、状态变化明显的页面，适合增加层次、动效和空间感。比如工作台、图片预览、商品展示、项目看板、会议详情，这类页面通常承载核心信息，也更容易体现空间化带来的感知差异。

另一些页面只是简单配置项或者一次性表单，过度加入空间感反而会让操作变复杂。比如登录页、简单开关页、单字段设置页，这些页面的主要目标是快速完成操作，视觉强化不应该抢走注意力。

我们可以先用三个问题判断一个页面是否值得优先改造。

判断问题	适合优先改造的表现	暂缓改造的表现
页面是否高频使用	首页、工作台、列表、详情经常进入	低频设置项、一次性页面
页面是否信息复杂	多模块、多状态、多数据层级	单一按钮、单一输入框
页面是否需要视觉反馈	拖拽、选择、预览、确认、状态变化明显	静态文本说明、简单跳转

这个判断可以先实践到普通应用里。

页面类型	空间化优先级	原因
首页工作台	高	承载应用入口和核心状态
图片预览页	高	视觉内容本身需要层次和沉浸感
列表详情页	中高	适合做主从结构和层级关系
编辑表单页	中	需要强调确认、保存和风险提示
空状态引导页	中	适合做轻量引导和结构说明
设置页	低到中	以清晰稳定为主，不宜过度动效
登录页	低	操作目标单一，减少干扰更重要

这里我们可以先形成一个判断：普通应用第一阶段不要追求全站空间化。更稳的方式，是先挑核心页面处理层次和多端布局。等基础结构稳定以后，再选择适合的页面增加沉浸光感或者更复杂的视觉表达。

HarmonyOS 7 的沉浸光感组件更适合提升核心界面的空间感和沉浸感，3DGS 端侧重建更适合空间建模、商品展示、文旅展陈等 3D 内容场景。普通工具类应用如果没有 3D 内容，第一阶段不需要强行接入 3DGS，可以先从页面层次和交互反馈开始。

二、首页和工作台优先整理信息层级

首页和工作台通常是最值得先处理的页面。

原因很简单。它们是应用打开后的第一层信息组织，也是用户判断应用状态的主要入口。如果首页里有项目、会议、待办、提醒、最近记录、快捷操作，到了平板、折叠屏和多窗口环境里，原来手机上的纵向列表很容易显得拥挤或者松散。

对于这类页面，空间化的第一步不是加复杂动效，而是重新整理信息层级。

比如会议随记类应用，首页可能有这些内容。

模块	页面作用
今日会议	展示当前需要处理的会议
最近记录	快速回到最近编辑内容
待办提醒	展示需要跟进的行动项
项目入口	进入项目视角
快捷操作	新建会议、新增联系人、生成周报

在手机上，这些内容可以按纵向卡片排列。到了平板或者折叠屏展开态，就可以考虑分区展示。左侧放主要任务，右侧放辅助信息。这样不是为了让页面看起来更大，而是让信息关系更清楚。

我们可以先按照这个结构整理。

屏幕状态	首页布局建议
手机竖屏	单列卡片，优先展示当前任务
手机横屏	保持单列或轻量双列，避免信息过散
折叠屏展开	左侧主任务，右侧最近记录或待办
平板横屏	工作台分区，主任务、待办、项目入口并列
多窗口	保持核心卡片可读，隐藏低优先级装饰内容

这里有一个常见误区。很多页面一到大屏，就想把所有内容都摆出来。这样短期看起来信息很多，实际阅读压力也会增加。更合理的方式，是先确定主任务，再把辅助信息放到次级区域。

可以用一个简单的结构草案表达首页层级。

interface WorkbenchSection {
  id: string;
  title: string;
  priority: 'primary' | 'secondary' | 'support';
  visibleInCompact: boolean;
  visibleInExpanded: boolean;
}

这段代码属于项目侧结构草案，用来说明首页模块的优先级和可见性。它不代表 HarmonyOS 7 新 API。对于空间化和多端适配来说，这种结构比直接在页面里堆布局判断更稳。后续如果要做平板分栏、折叠屏展开布局或者多窗口适配，就可以基于这些字段控制模块显示。

三、列表页和详情页优先做主从结构

列表页和详情页，是多端适配里最容易体现差异的一组页面。

在手机上，列表和详情通常分开显示。点击列表项，进入详情页；返回以后，再回到列表。这种方式在小屏幕上很自然，因为屏幕空间有限。

但到了平板、折叠屏展开态和桌面窗口，列表和详情完全可以并排展示。左侧保留列表，右侧展示详情。这样用户不需要频繁返回，信息对照也更方便。

会议类应用就很典型。

手机状态	大屏状态
会议列表页单独展示	左侧会议列表
点击进入会议详情	右侧会议详情
返回后继续选择其他会议	选择列表项后右侧直接刷新
编辑操作进入新页面	右侧局部进入编辑状态或弹出编辑区

这种结构在普通应用里非常实用。联系人、项目、文件、消息、收藏、本地生活商家列表，都可以采用类似思路。

可以先用宽度阈值决定是否进入主从布局。

const MIN_DETAIL_WIDTH = 560;
const LIST_WIDTH = 320;
const GAP = 16;
const PAGE_PADDING = 24;

function canUseMasterDetail(windowWidth: number): boolean {
  const availableWidth = windowWidth - PAGE_PADDING * 2;
  const requiredWidth = LIST_WIDTH + GAP + MIN_DETAIL_WIDTH;
  return availableWidth >= requiredWidth;
}

这段代码属于常规布局判断草案，用来说明多端适配里的宽度计算思路。它不依赖 HarmonyOS 7 新 API。真正落到项目时，可以结合应用现有窗口信息、断点体系和组件布局方式实现。

列表详情页改造时，我建议优先处理三件事。

改造点	说明
空选择状态	大屏下右侧不能空白，要有默认详情或引导
列表选中态	左侧选中项要清楚，避免不知道当前详情来源
编辑模式	详情页编辑要明确是局部编辑还是跳转编辑

这里比较容易忽略的是空选择状态。手机上没有选择就停留在列表页，大屏上如果右侧空白，会显得页面没有完成。可以在右侧放一个轻量引导，比如 选择一条会议查看详情，或者默认展示最近一条记录。

空间化在这里可以做得很克制。列表层、详情层、操作层之间有清楚的视觉层级，就已经能提升空间感。不需要每个卡片都加复杂动效。越是工具类页面，越要保证阅读效率。

四、编辑页和表单页优先保证确认边界

编辑页和表单页不适合一上来追求空间化效果。

这类页面的核心任务是输入、校验、保存和确认。尤其是会议编辑、待办分配、项目设置、预约提交、资料发布这类场景，页面最重要的不是视觉冲击，而是让用户知道自己正在修改什么、哪些信息还没有填、保存后会产生什么结果。

到了 HarmonyOS 7，Agent、Skill 和 AI 能力可能会生成草稿、提取待办、补全字段、建议责任人。这样一来，编辑页的确认边界就更重要了。

比如会议纪要编辑页，可以出现三类内容。

内容类型	处理方式
原始会议文本	只读展示，作为参考
AI 生成草稿	可编辑，保存前确认
用户最终内容	保存到项目或会议记录

如果这三类内容混在一起，用户就很难判断哪些是原始记录，哪些是系统生成，哪些是自己确认过的最终结果。更稳的页面结构，是把它们分层展示。

可以用一个状态结构管理编辑页。

interface DraftEditState {
  sourceText: string;
  generatedDraft: string;
  userEditedContent: string;
  hasUserConfirmed: boolean;
  hasUnsavedChanges: boolean;
}

这个结构属于项目侧状态草案。它表达的是编辑页需要区分原始输入、生成草稿、用户编辑和确认状态。后续无论 AI 能力、Skill 能力还是 Agent 任务链进入，都可以围绕这几个状态做处理。

编辑页多端适配时，也建议优先处理这几个位置。

页面位置	多端处理建议
标题区	明确当前编辑对象和保存状态
输入区	手机单列，大屏可分左右参考和编辑
操作区	保存、取消、确认按钮固定在清楚位置
错误提示	靠近输入项展示，不要只放全局提示
预览区	大屏可以展示预览，手机可以折叠展示

对于大屏来说，编辑页可以采用左侧参考、右侧编辑的结构。比如左侧放会议原文或 AI 草稿，右侧放最终纪要编辑区。这样用户更容易对照修改。对于手机来说，仍然可以使用上下结构，保持操作路径清晰。

空间化在编辑页里的作用，更多是区分内容层级。原始内容、生成草稿、用户确认内容，应该有不同的视觉层次。只要层级清楚，确认流程明确，就已经比复杂动效更重要。

五、空状态、设置页和低频页面保持克制

很多应用的空间化改造，会忽略空状态和设置页。

其实这两类页面也很重要，只是处理方式要克制。空状态决定用户第一次进入页面时是否知道下一步做什么；设置页决定用户能不能稳定管理权限、通知、同步、外观和数据。它们不一定需要强视觉效果，但需要更清楚的结构和引导。

空状态页面可以优先改这几个点。

空状态类型	处理建议
没有会议	提供新建会议、导入录音、查看示例
没有待办	提供从会议提取待办的入口
没有项目	提供创建项目和关联会议的入口
没有联系人	提供新增联系人和导入联系人入口
没有搜索结果	提供调整关键词和清除筛选入口

空状态的重点是让用户知道下一步动作。它不需要堆很多解释，也不需要做很重的视觉效果。大屏上可以增加右侧引导卡片，手机上保持主操作按钮清楚即可。

设置页则更适合保持稳定和清晰。尤其是涉及权限、通知、数据同步、账号、备份、隐私这些内容时，空间化装饰不应该影响阅读和操作。可以把设置项按照使用频率和风险等级分组。

设置分组	示例
常用设置	通知、显示、默认视图
数据设置	同步、备份、导出
权限设置	录音、文件、联系人
安全设置	隐私、账号、登录状态
高风险操作	清空数据、删除账号

多端适配时，设置页可以在大屏上采用左侧分类、右侧详情的结构。手机上继续使用分组列表。这样既能保持熟悉的操作方式，也能利用大屏空间。

可以用一个简单的宽度判断决定设置页是否进入分栏。

const GROUP_PANEL_WIDTH = 260;
const DETAIL_MIN_WIDTH = 560;
const GAP = 16;
const PAGE_PADDING = 24;

function canUseSettingsSplit(windowWidth: number): boolean {
  const availableWidth = windowWidth - PAGE_PADDING * 2;
  const requiredWidth = GROUP_PANEL_WIDTH + GAP + DETAIL_MIN_WIDTH;
  return availableWidth >= requiredWidth;
}

到这里，普通应用第一轮应该先改哪些页面就比较清楚了。首页工作台、列表详情、编辑表单、空状态引导、设置管理，这五类页面覆盖了大多数应用的核心路径。先把它们的层级、宽度、确认和引导处理好，后续再引入沉浸光感、3DGS 或更复杂的空间化能力，会更稳固。

总结

我的建议是，空间化和多端适配最好一起考虑。

如果只做视觉效果，项目可能变得好看但不好用。
如果只做屏幕拉伸，页面可能能显示但缺少层次。
更稳的方式，是先从普通应用的核心页面开始，把信息结构、多端宽度、确认流程和引导路径处理好。

首先可以优先关注五类页面。

页面类型	改造重点
首页工作台	信息层级和核心入口
列表详情页	主从结构和选中状态
编辑表单页	输入、确认、保存和回退
空状态引导页	下一步动作和轻量引导
设置管理页	分类、权限、数据和高风险操作

对于会议随记类应用，可以先处理工作台、会议列表详情、纪要编辑页、待办空状态和设置页。对于本地生活应用，可以先处理首页推荐、商家列表详情、预约表单、无结果页和权限设置。对于图片工具，可以先处理素材首页、图片详情、批量编辑、空相册和存储设置。

这轮改造完成以后，普通应用会先获得更稳定的多端基础。后面再考虑沉浸光感、3DGS 端侧重建、空间化动效和更复杂的视觉能力，就不会只停留在装饰层面。