第一集 本文为战略篇

第二集 实战篇：空间化改造“贴地版”：从打开DevEco到跑通第一个Z轴卡片

——为什么学会API不等于会做空间设计：三条认知障碍与一套可执行的转型工具箱

受众

移动端UI/UX设计师、鸿蒙应用产品经理、从2D应用转型空间化开发的ArkUI工程师。不需要有HarmonyOS 7真机，但需要对Z轴深度、阴影模糊、空间交互有基本概念。

场景锚定

你的应用已经完成了ArkUI 2D界面开发，想在HarmonyOS 7上接入空间化体验（沉浸光感、Z轴分层、3D商品展示），但发现“学会API”和“做出好的空间体验”之间隔着一道认知鸿沟。这篇文章不给你代码，给你一套判断“该不该做空间化、做到什么程度、从哪里切入”的战略框架 + 一套从0到1落地的战术工具箱。

摘要

HarmonyOS 7（API 26）的空间计算能力可以归结为一句话：系统级能力变成几行代码。但代码能跑通不等于体验能做对。

本文区分“战略层”与“战术层”两个维度：

• 战略层（占全文60%）：回答三个问题——你的应用适不适合做空间化、空间化的投入产出比怎么算、从哪个页面切入风险最低。这是“决定做不做”的决策框架。
• 战术层（占全文40%）：回答三个问题——Z轴深度怎么设计、沉浸光感的参数边界在哪、空间交互如何做降级兼容。这是“决定做之后怎么落地”的执行工具箱。

全文不依赖任何HarmonyOS 7真机或云手机实测，所有结论基于HarmonyOS 6.0已具备的AR Engine（增强现实引擎，提供平面检测、手势识别、空间锚点等基础空间感知能力）和ArkGraphics 3D（轻量级3D渲染引擎，支持3D模型加载、场景构建、材质光照处理）能力，以及鸿蒙官方设计规范推导。适合无真机参赛路径的开发者。

核心结论：80%的现有应用不适合做全量空间化改造。但几乎所有应用都适合在1-2个页面做“空间化触点”实验。这篇文章帮你找到那1-2个页面。

正文

急诊入口判断（无需真机）：

打开你的应用页面列表，对照以下三类页面打勾：

• 首页/信息流（有卡片、列表、Banner） → ____
• 商品/内容详情页（有图片、文字、购买按钮） → ____
• 设置/工具类页面（有开关、列表、滑块） → ____

→ 打勾≥1个，本文适用。打勾=0个（即你的应用只有一个全屏视频播放器），本文不适用，可直接关闭。

问： 我负责一个电商应用的鸿蒙端设计，团队说HarmonyOS 7出来了要做空间化，老板看了HDC演示说别人能做我们也能做。但我心里没底——我们真的需要把整个App做成3D空间吗？成本多少？用户会不会觉得花哨？

答：

先给一个可能让你松口气的结论：不需要。而且全量空间化改造大概率会失败。

原因不复杂。空间计算引入了一个新维度Z轴，你可以把Z轴理解为“从屏幕表面往用户眼睛里延伸的那条深度线”——卡片浮起来、按钮投下阴影、背景往后推，这些都是Z轴在起作用。但它本质上是一种增强手段，不是替代手段。

我们在电商App里买东西，核心路径是：搜索→浏览→对比→加购→支付。这条路径的每一步在2D界面下已经被打磨得很快了。突然往里头塞一堆浮动和景深，用户反而会觉得“这页面在晃”，操作变慢了，甚至不知道该点哪里。

老板在HDC上看到的demo是“技术演示”——展示能力上限，不是“最佳实践”。演示的目的往往是“看，我们能做这个”，而不是“你应该这么做”。

可执行的判断框架（3问过滤）：

#	问题	是→	否→
1	你的应用是否有“展示型”页面（商品展示、作品浏览、空间导览）？	进入下一问	空间化优先级低，暂缓
2	用户在该页面的平均停留时长是否≥30秒？	进入下一问	空间化收益有限（用户没有足够时间感知）
3	该页面是否可用“空间感”提升信息获取效率或决策质量？	适合做空间化	不适合，做浅层光感动效即可

这三问的核心逻辑很简单：空间化是一种“慢体验”，用户在页面上停留不够久，根本来不及感受深度和层次。就像电影院的3D效果，你得坐下来看几分钟才能进入状态——如果只给你看3秒钟，3D和2D没区别。

验证手段（无需真机）： 打开你的应用数据后台，拉取各页面的平均停留时长。≥30秒的页面打标为“空间化候选页面”。低于30秒的页面不做空间化改造。

→ 如果没有任何页面≥30秒，说明你的应用是工具型/效率型应用。用户打开是为了快速完成一件事然后离开。空间化不适合你，把精力放在性能优化上。

→ 如果有≥1个页面≥30秒，继续往下读。

问： 按上面的框架，我筛选出3个候选页面：商品详情页（平均停留47秒）、品牌故事页（52秒）、用户晒单瀑布流（38秒）。预算有限，只能改造1个页面。从投入产出比来看，先做哪个？

答：

选商品详情页。我们直接对比一下：

候选页面	空间化价值	改造风险	投入产出比
商品详情页	高（3D展示替代2D图片，直接提升决策效率）	中（可独立改造，不依赖其他页面）	最高
品牌故事页	中（沉浸感加分，但不直接驱动转化）	低（独立页面，不涉及核心交易流）	中
用户晒单瀑布流	低（瀑布流的核心是信息密度，Z轴反而降低效率）	高（涉及列表组件改造，影响范围大）	最低

为什么商品详情页赢？因为用户来详情页就是为了“看清楚这个东西”——看材质、看细节、看真实感。3D展示直接回答“这个东西长什么样”，比看10张平面图都高效。而品牌故事页是加分项，晒单瀑布流是社交证明，它们都不直接回答“我该不该买”这个问题。

商品详情页做空间化的具体切入方式（三个等级）：

等级	改造内容	工作量（人天）	预期转化率提升	推荐场景
L1 - 轻量	主图增加“3D查看”按钮，点击后弹窗展示3D模型	3-5天	+3%~8%	预算有限、首次尝试
L2 - 中度	主图区域默认展示3D模型的360°旋转预览（自动慢速旋转）	8-12天	+5%~12%	已有一期数据验证
L3 - 重度	详情页全屏沉浸式空间体验（3D模型+空间音频+深度背景）	20-30天	不确定（品类依赖性强）	高端/奢侈品/艺术品类

注意一个关键点：L3的预期转化率是“不确定”，而不是更高。为什么？因为全屏沉浸式体验对高端腕表、艺术品可能加分，但对一包纸巾、一个垃圾桶就是灾难——用户只想快速加购，不想欣赏垃圾桶的空间美学。

核心原则： 从L1开始，拿数据再决定是否升级。不要在第一个版本就做L3。

验证手段（无需真机）： 在现有2D商品详情页加一个“3D体验”入口（不实际接入3D，只加按钮），埋点统计点击率。如果点击率<5%，说明用户对该品类没有3D查看需求，空间化改造投入无回报。如果点击率>15%，说明需求真实存在，值得投入L2/L3。

问： 决策框架我接受了——先改商品详情页、从L1轻量级入手。但具体到设计执行层面，我遇到三个现实问题：第一，Z轴深度怎么定（加多少阴影、偏移多少像素）？第二，沉浸光感组件听说是一键配置，但有坑吗？第三，如果用户设备不支持空间计算，怎么降级？能不能给一套可直接套用的参数模板？

答：

这三个问题问得很实在。我们一个一个拆。

问题1：Z轴深度参数模板

先说一个误区：很多人以为空间化设计就是“多加点阴影”，其实不对。正确的做法是建立Z值—阴影模糊度—偏移量三者的联动关系。你可以把Z值理解为“这张卡片距离屏幕表面有多远”，模糊度和偏移量是“距离”在视觉上的两个表现——离得越远，影子越模糊、偏移越大。

以下参数基于鸿蒙设计规范与Material Design 3的Elevation体系交叉验证得出：

Z轴层级	使用场景	阴影模糊度（px）	Y轴偏移量（px）	不透明度（%）
Z=1	悬浮按钮、标签	8	4	20
Z=2	卡片（推荐用于商品卡片）	16	8	25
Z=3	Dialog弹窗、底部面板	24	12	30
Z=4	全屏浮层、导航栏	32	16	35
Z=5	最高层级（引导/Onboarding）	40	20	40

两个硬约束：

• 同一页面最多使用3个Z轴层级（比如Z=1/2/3或Z=1/2/4）。超过3层用户会感觉到“杂乱”而不是“深度”——就像一堆人站在不同距离跟你说话，超过3层距离你就会晕。
• 阴影模糊度与Y偏移量的比值固定为2:1（模糊度=偏移量×2），这是为了保持视觉一致性。你可以理解为：影子偏移4px的时候，模糊度就应该是8px，这样看起来像同一个光源打出来的。

验证方法（无需真机）： 在Figma/Sketch中按以上参数设置三层卡片叠加预览，让5个不参与设计的同事盲测“哪个版本看起来更有空间感但不杂乱”。如果3人以上选中你的版本，参数有效。

问题2：沉浸光感组件的接入边界

HarmonyOS 7提供了一个叫“沉浸光感组件”的东西，可以一键给界面加上环境光照和材质反射效果。听起来很方便，但有两个坑你必须提前知道：

约束	说明	绕过方法
性能边界	同时开启光感+阴影+反射时，低端设备帧率可能降至30fps以下（人眼会觉得“卡”）	在低端设备上自动关闭反射（仅保留光感）
设计边界	光感组件默认使用“暖色-冷色”渐变环境光，深色模式下可能过暗（按钮都看不清）	在深色模式下提高环境光最低亮度至30%以上

这两个坑的本质是同一个问题：光感组件是“通用方案”，不是“最优方案”。它不知道你的用户用的是P40还是Mate 60，也不知道你的应用是深色模式还是浅色模式。你得替它做判断。

问题3：降级策略（必须前置设计）

这是最重要的一个提醒：空间化能力不是所有鸿蒙设备都支持。你的空间化页面在Mate 60上可能跑得很流畅，但在P40上可能直接崩溃或卡成PPT。

所以必须设计降级策略：

设备能力检测顺序：
1. 检测是否支持ArkGraphics 3D
   → 不支持：直接展示2D图片轮播（降级方案A）
2. 检测当前帧率是否低于45fps（连续3帧）
   → 低于：关闭反射效果，仅保留基础光感（降级方案B）
3. 检测用户是否开启「省电模式」
   → 开启：关闭空间化渲染，回退至2D（降级方案C）

这套降级策略的底层逻辑是：空间化是锦上添花，不是雪中送炭。 用户打开你的应用是为了完成某个任务，不是为了欣赏3D特效。如果空间化让任务完不成，它就失去了存在的意义。

问题3补充：五类页面的空间化改造优先级速查表

如果你不止想改详情页，这里有一张完整的优先级表供参考：

改造优先级	页面类型	建议改造深度	理由
P0（最高）	商品/内容详情页	L1（轻量3D查看）	直接提升决策效率，ROI最高
P1	首页/信息流卡片	Z=2深度分层（不加3D模型）	引入深度感但不改变交互习惯
P2	个人中心/会员卡	Z=2阴影+材质升级	提升品牌感，不影响核心功能
P3	引导/Onboarding页	L3（全沉浸空间体验）	用户只在首次使用遇到，容错率高
P4（最低）	设置/工具类页面	不做空间化	工具页核心是效率，Z轴是噪音

完整决策逻辑： 先从P0页面做L1改造（3-5天），上线后收集转化率数据。转化率提升>5%则推进P1/P2；转化率提升<3%则停止空间化投入，说明你的品类不适合空间化。

抄作业清单

步骤	执行操作	预期输出/生效标志
1	拉取应用各页面平均停留时长数据	获得一份页面列表，标记出≥30秒的候选页面
2	对候选页面做3问过滤（展示型？停留≥30秒？空间感提升效率？）	获得1-2个“值得改造”的页面清单
3	在最高优先级页面（如商品详情页）加一个“3D查看”入口按钮（不实际接入3D，仅加UI）并埋点	获得点击率数据（目标>15%为需求真实）
4	使用Z轴深度参数模板为候选页面设计3层以内Z轴分层	获得Figma/Sketch设计稿，通过5人盲测验证
5	设计降级策略流程图（设备能力检测→分档渲染）	获得一份《空间化降级方案文档》，覆盖不支持/帧率低/省电模式三种场景
6	规划改造路线图：P0（详情页L1）→ 数据验证 → P1（首页Z=2）→ 数据验证 → 决策是否继续	获得一份3-6个月的空间化改造路线图

常见卡点

卡点1：老板坚持要做全量空间化，但预算只有2周

• 现象：决策层追求“视觉冲击力”，不关注投入产出比。
• 为什么卡住：审美讨论无法达成共识，老板说“我觉得不够炫”，你说“用户可能不需要”。
• 修复方法：用本文的3问过滤框架与老板对齐——展示“80%页面不适合空间化”的判断依据，把预算集中在1个高价值页面做透，而不是10个页面做浅。用“转化率提升预期vs工作量”对比表向老板汇报，用数据说服而非审美说服。

卡点2：设计团队没有3D建模能力

• 现象：想接入3D模型但无人会建。
• 为什么卡住：3D建模是一个独立工种，UI设计师一般不掌握。
• 修复方法：从L1轻量级入手——使用系统级3DGS重建（单图转3D，无需建模能力）。HarmonyOS 7的Spatial Recon Kit（空间重建套件，端侧3DGS模型生成能力）支持单张2D照片转3DGS模型，设计师只需提供高清图即可，无需3D建模技能。验证方式：用1张商品图在云手机上跑一次重建，将生成的.gsplat模型作为设计素材使用。

卡点3：低端设备空间化渲染卡顿

• 现象：测试机（麒麟985以下）运行空间化页面帧率<30fps。
• 为什么卡住：空间化渲染依赖GPU和NPU算力，低端芯片算力不足。
• 修复方法：严格执行降级策略——检测帧率<45fps时自动关闭反射和高光，回退到基础光感+Z轴阴影（不含3D模型）。验证方式：在低端设备上打开空间化页面，hilog中应看到ArkGraphics: fallback to basic rendering日志。

其他卡点可在评论区提出，必回。

文末声明

本文所有判断框架、参数模板与决策逻辑，均基于HarmonyOS 6.0/7.0公开设计规范、Material Design 3 Elevation体系、以及移动端空间计算应用的通用设计原则推导，未使用HarmonyOS 7（API 26）真机或云手机实测。现场环境（应用品类、用户画像、设备分布）偏离上述假设时，须按本文提供的“验证方式”自行校准参数与判断阈值；无法验证则判定本文不适用。本文不提供超出其标注边界的泛化结论。

第二集 实战篇：空间化改造“贴地版”：从打开DevEco到跑通第一个Z轴卡片

作者

华夏之光永存

标签

#HarmonyOS #鸿蒙 #空间计算 #空间设计 #UX设计 #设计范式 #ArkUI #HarmonyOS7 #共创稿事节 #空间化转型