前言HarmonyOS 7 的新能力里空间化很容易让人先想到视觉效果。比如沉浸光感、空间感、3D 内容、端侧重建这些词本身就带有很强的视觉吸引力。真正回到项目里以后问题会变得更具体一个普通应用到底要不要马上做空间化改造哪些页面值得先调整多端适配是不是要和空间化放在一起处理如果手里已经有 HarmonyOS 6 原生项目第一轮应该从哪里开始这里我们先不要急着把空间化理解成复杂 3D 页面也不要把多端适配简单理解成平板拉宽。对于大多数工具类、办公类、内容类、会议类应用来说第一阶段更适合做的是页面层次、信息密度、窗口宽度、交互确认和多端布局这些基础工作。HarmonyOS 7 的空间化方向已经覆盖沉浸光感组件和 3DGS 端侧重建前者强调光随指动、光线勾勒、非线性形变等动效后者面向空间建模、商品展示、文旅展陈等 3D 内容场景。与此同时HarmonyOS 设计资源也强调多设备体验和适配指南。所以我们先从普通应用角度处理一个更实际的问题空间化和多端适配要一起思考普通应用先改哪些页面。如果你的项目是会议随记、待办管理、资料整理、本地生活、图片工具、学习工具第一轮可以先从这些页面入手首页和工作台列表页和详情页编辑页和表单页空状态和引导页设置页和管理页这些页面不一定都要做很强的视觉效果但它们非常适合先整理布局层级、宽度策略和多端适配规则。等基础体验稳定之后再考虑沉浸光感、空间化组件或者 3D 内容能力整体风险会小很多。一、先判断页面是否值得做空间化改造空间化不是所有页面都值得做。有些页面本身就是信息密度高、操作频繁、状态变化明显的页面适合增加层次、动效和空间感。比如工作台、图片预览、商品展示、项目看板、会议详情这类页面通常承载核心信息也更容易体现空间化带来的感知差异。另一些页面只是简单配置项或者一次性表单过度加入空间感反而会让操作变复杂。比如登录页、简单开关页、单字段设置页这些页面的主要目标是快速完成操作视觉强化不应该抢走注意力。我们可以先用三个问题判断一个页面是否值得优先改造。判断问题适合优先改造的表现暂缓改造的表现页面是否高频使用首页、工作台、列表、详情经常进入低频设置项、一次性页面页面是否信息复杂多模块、多状态、多数据层级单一按钮、单一输入框页面是否需要视觉反馈拖拽、选择、预览、确认、状态变化明显静态文本说明、简单跳转这个判断可以先实践到普通应用里。页面类型空间化优先级原因首页工作台高承载应用入口和核心状态图片预览页高视觉内容本身需要层次和沉浸感列表详情页中高适合做主从结构和层级关系编辑表单页中需要强调确认、保存和风险提示空状态引导页中适合做轻量引导和结构说明设置页低到中以清晰稳定为主不宜过度动效登录页低操作目标单一减少干扰更重要这里我们可以先形成一个判断普通应用第一阶段不要追求全站空间化。更稳的方式是先挑核心页面处理层次和多端布局。等基础结构稳定以后再选择适合的页面增加沉浸光感或者更复杂的视觉表达。HarmonyOS 7 的沉浸光感组件更适合提升核心界面的空间感和沉浸感3DGS 端侧重建更适合空间建模、商品展示、文旅展陈等 3D 内容场景。普通工具类应用如果没有 3D 内容第一阶段不需要强行接入 3DGS可以先从页面层次和交互反馈开始。二、首页和工作台优先整理信息层级首页和工作台通常是最值得先处理的页面。原因很简单。它们是应用打开后的第一层信息组织也是用户判断应用状态的主要入口。如果首页里有项目、会议、待办、提醒、最近记录、快捷操作到了平板、折叠屏和多窗口环境里原来手机上的纵向列表很容易显得拥挤或者松散。对于这类页面空间化的第一步不是加复杂动效而是重新整理信息层级。比如会议随记类应用首页可能有这些内容。模块页面作用今日会议展示当前需要处理的会议最近记录快速回到最近编辑内容待办提醒展示需要跟进的行动项项目入口进入项目视角快捷操作新建会议、新增联系人、生成周报在手机上这些内容可以按纵向卡片排列。到了平板或者折叠屏展开态就可以考虑分区展示。左侧放主要任务右侧放辅助信息。这样不是为了让页面看起来更大而是让信息关系更清楚。我们可以先按照这个结构整理。屏幕状态首页布局建议手机竖屏单列卡片优先展示当前任务手机横屏保持单列或轻量双列避免信息过散折叠屏展开左侧主任务右侧最近记录或待办平板横屏工作台分区主任务、待办、项目入口并列多窗口保持核心卡片可读隐藏低优先级装饰内容这里有一个常见误区。很多页面一到大屏就想把所有内容都摆出来。这样短期看起来信息很多实际阅读压力也会增加。更合理的方式是先确定主任务再把辅助信息放到次级区域。可以用一个简单的结构草案表达首页层级。interfaceWorkbenchSection{id:string;title:string;priority:primary|secondary|support;visibleInCompact:boolean;visibleInExpanded:boolean;}这段代码属于项目侧结构草案用来说明首页模块的优先级和可见性。它不代表 HarmonyOS 7 新 API。对于空间化和多端适配来说这种结构比直接在页面里堆布局判断更稳。后续如果要做平板分栏、折叠屏展开布局或者多窗口适配就可以基于这些字段控制模块显示。三、列表页和详情页优先做主从结构列表页和详情页是多端适配里最容易体现差异的一组页面。在手机上列表和详情通常分开显示。点击列表项进入详情页返回以后再回到列表。这种方式在小屏幕上很自然因为屏幕空间有限。但到了平板、折叠屏展开态和桌面窗口列表和详情完全可以并排展示。左侧保留列表右侧展示详情。这样用户不需要频繁返回信息对照也更方便。会议类应用就很典型。手机状态大屏状态会议列表页单独展示左侧会议列表点击进入会议详情右侧会议详情返回后继续选择其他会议选择列表项后右侧直接刷新编辑操作进入新页面右侧局部进入编辑状态或弹出编辑区这种结构在普通应用里非常实用。联系人、项目、文件、消息、收藏、本地生活商家列表都可以采用类似思路。可以先用宽度阈值决定是否进入主从布局。constMIN_DETAIL_WIDTH560;constLIST_WIDTH320;constGAP16;constPAGE_PADDING24;functioncanUseMasterDetail(windowWidth:number):boolean{constavailableWidthwindowWidth-PAGE_PADDING*2;constrequiredWidthLIST_WIDTHGAPMIN_DETAIL_WIDTH;returnavailableWidthrequiredWidth;}这段代码属于常规布局判断草案用来说明多端适配里的宽度计算思路。它不依赖 HarmonyOS 7 新 API。真正落到项目时可以结合应用现有窗口信息、断点体系和组件布局方式实现。列表详情页改造时我建议优先处理三件事。改造点说明空选择状态大屏下右侧不能空白要有默认详情或引导列表选中态左侧选中项要清楚避免不知道当前详情来源编辑模式详情页编辑要明确是局部编辑还是跳转编辑这里比较容易忽略的是空选择状态。手机上没有选择就停留在列表页大屏上如果右侧空白会显得页面没有完成。可以在右侧放一个轻量引导比如选择一条会议查看详情或者默认展示最近一条记录。空间化在这里可以做得很克制。列表层、详情层、操作层之间有清楚的视觉层级就已经能提升空间感。不需要每个卡片都加复杂动效。越是工具类页面越要保证阅读效率。四、编辑页和表单页优先保证确认边界编辑页和表单页不适合一上来追求空间化效果。这类页面的核心任务是输入、校验、保存和确认。尤其是会议编辑、待办分配、项目设置、预约提交、资料发布这类场景页面最重要的不是视觉冲击而是让用户知道自己正在修改什么、哪些信息还没有填、保存后会产生什么结果。到了 HarmonyOS 7Agent、Skill 和 AI 能力可能会生成草稿、提取待办、补全字段、建议责任人。这样一来编辑页的确认边界就更重要了。比如会议纪要编辑页可以出现三类内容。内容类型处理方式原始会议文本只读展示作为参考AI 生成草稿可编辑保存前确认用户最终内容保存到项目或会议记录如果这三类内容混在一起用户就很难判断哪些是原始记录哪些是系统生成哪些是自己确认过的最终结果。更稳的页面结构是把它们分层展示。可以用一个状态结构管理编辑页。interfaceDraftEditState{sourceText:string;generatedDraft:string;userEditedContent:string;hasUserConfirmed:boolean;hasUnsavedChanges:boolean;}这个结构属于项目侧状态草案。它表达的是编辑页需要区分原始输入、生成草稿、用户编辑和确认状态。后续无论 AI 能力、Skill 能力还是 Agent 任务链进入都可以围绕这几个状态做处理。编辑页多端适配时也建议优先处理这几个位置。页面位置多端处理建议标题区明确当前编辑对象和保存状态输入区手机单列大屏可分左右参考和编辑操作区保存、取消、确认按钮固定在清楚位置错误提示靠近输入项展示不要只放全局提示预览区大屏可以展示预览手机可以折叠展示对于大屏来说编辑页可以采用左侧参考、右侧编辑的结构。比如左侧放会议原文或 AI 草稿右侧放最终纪要编辑区。这样用户更容易对照修改。对于手机来说仍然可以使用上下结构保持操作路径清晰。空间化在编辑页里的作用更多是区分内容层级。原始内容、生成草稿、用户确认内容应该有不同的视觉层次。只要层级清楚确认流程明确就已经比复杂动效更重要。五、空状态、设置页和低频页面保持克制很多应用的空间化改造会忽略空状态和设置页。其实这两类页面也很重要只是处理方式要克制。空状态决定用户第一次进入页面时是否知道下一步做什么设置页决定用户能不能稳定管理权限、通知、同步、外观和数据。它们不一定需要强视觉效果但需要更清楚的结构和引导。空状态页面可以优先改这几个点。空状态类型处理建议没有会议提供新建会议、导入录音、查看示例没有待办提供从会议提取待办的入口没有项目提供创建项目和关联会议的入口没有联系人提供新增联系人和导入联系人入口没有搜索结果提供调整关键词和清除筛选入口空状态的重点是让用户知道下一步动作。它不需要堆很多解释也不需要做很重的视觉效果。大屏上可以增加右侧引导卡片手机上保持主操作按钮清楚即可。设置页则更适合保持稳定和清晰。尤其是涉及权限、通知、数据同步、账号、备份、隐私这些内容时空间化装饰不应该影响阅读和操作。可以把设置项按照使用频率和风险等级分组。设置分组示例常用设置通知、显示、默认视图数据设置同步、备份、导出权限设置录音、文件、联系人安全设置隐私、账号、登录状态高风险操作清空数据、删除账号多端适配时设置页可以在大屏上采用左侧分类、右侧详情的结构。手机上继续使用分组列表。这样既能保持熟悉的操作方式也能利用大屏空间。可以用一个简单的宽度判断决定设置页是否进入分栏。constGROUP_PANEL_WIDTH260;constDETAIL_MIN_WIDTH560;constGAP16;constPAGE_PADDING24;functioncanUseSettingsSplit(windowWidth:number):boolean{constavailableWidthwindowWidth-PAGE_PADDING*2;constrequiredWidthGROUP_PANEL_WIDTHGAPDETAIL_MIN_WIDTH;returnavailableWidthrequiredWidth;}到这里普通应用第一轮应该先改哪些页面就比较清楚了。首页工作台、列表详情、编辑表单、空状态引导、设置管理这五类页面覆盖了大多数应用的核心路径。先把它们的层级、宽度、确认和引导处理好后续再引入沉浸光感、3DGS 或更复杂的空间化能力会更稳固。总结我的建议是空间化和多端适配最好一起考虑。如果只做视觉效果项目可能变得好看但不好用。如果只做屏幕拉伸页面可能能显示但缺少层次。更稳的方式是先从普通应用的核心页面开始把信息结构、多端宽度、确认流程和引导路径处理好。首先可以优先关注五类页面。页面类型改造重点首页工作台信息层级和核心入口列表详情页主从结构和选中状态编辑表单页输入、确认、保存和回退空状态引导页下一步动作和轻量引导设置管理页分类、权限、数据和高风险操作对于会议随记类应用可以先处理工作台、会议列表详情、纪要编辑页、待办空状态和设置页。对于本地生活应用可以先处理首页推荐、商家列表详情、预约表单、无结果页和权限设置。对于图片工具可以先处理素材首页、图片详情、批量编辑、空相册和存储设置。这轮改造完成以后普通应用会先获得更稳定的多端基础。后面再考虑沉浸光感、3DGS 端侧重建、空间化动效和更复杂的视觉能力就不会只停留在装饰层面。