---

每日一句正能量

我们总被催促着要不停运转、要热爱世界、要解开所有难题。
悄悄告诉你：
可以暂停，可以保留困惑，可以优先照顾自己的心灵花园。
“允许自己偶尔断电，与世界失联一会儿。”
有意识地暂停——不是逃避，而是为自己创造一段精神呼吸的空间。

摘要

摘要：本文记录了一个真实电商App从2D平面界面向3D空间界面改造的完整过程。从首页的Z轴分层到详情页的3D商品展示，从代码实现到性能优化，从数据验证到用户反馈，提供了一份可复制的空间化改造实战指南。

---

一、项目缘起：为什么必须改造？

2025年秋天，我接到一个校企合作项目：为某电商平台的鸿蒙版App进行空间化改造。这个App已经上线了3年，日活用户约50万，但在用户调研中反复出现一个痛点——“页面太乱了，找不到重点”。

打开App首页，问题一目了然：Banner、金刚区、信息流、悬浮按钮、底部导航，所有元素挤在同一个Z=0的平面上。用户的眼球在十几个信息模块之间来回跳跃，注意力被无限分散。转化率数据显示：首页到详情页的点击率仅有3.2%，远低于行业平均的5.8%。

团队最初的想法是"优化一下排版"——把按钮调大、把颜色调亮、把间距拉开。但试了3版方案后，数据没有任何变化。我意识到：这不是排版问题，而是空间问题。在2D平面上，所有元素都在争夺用户的注意力，无论怎么排，都是零和博弈。

HarmonyOS 7（API 26）的空间计算能力给了我们一个全新思路：与其在平面内优化，不如跳出平面，在三维空间中重新组织信息。

---

二、改造前的"2D铺大饼"现状分析

2.1 首页布局诊断

改造前的首页是典型的"2D铺大饼"式布局：

图1：改造前首页——所有元素Z=0，缺乏层次，信息拥挤，用户注意力被无限分散

结构性问题：

• 信息层级缺失：Banner、商品卡片、导航栏都在同一平面，用户只能靠大小和颜色判断重要性
• 视觉动线混乱：用户的视线在十几个模块之间无规则跳跃，没有清晰的"阅读路径"
• 交互反馈扁平：点击商品卡片时，没有任何空间反馈，用户感知不到"被选中"
• 转化路径模糊：购买按钮淹没在信息海洋中，用户需要主动寻找

2.2 详情页布局诊断

详情页的问题更严重：商品图片是2D的，用户无法从多个角度查看；规格选择是列表式的，缺乏空间感知；购买按钮固定在底部，无论用户看到哪里都需要回到底部操作。

核心痛点：用户在详情页的停留时间平均只有12秒，但完成一次购买决策需要的信息（多角度查看、规格对比、价格确认）远超这个时间窗口。

---

三、改造目标：从"平面陈列"到"立体沉浸"

基于HarmonyOS 7（API 26）的空间计算能力，我们制定了三个改造目标：

目标	2D现状	3D目标	衡量指标
信息层级	所有元素Z=0	按重要性分配Z轴深度	首页点击率提升
视觉动线	无规则跳跃	有节奏的空间叙事	停留时长增加
转化路径	购买按钮固定底部	购买按钮随场景浮现	转化率提升

---

四、首页空间化改造：Z轴分层与动态光感

4.1 Z轴分层设计

改造后的首页采用了五层空间架构：

图2：改造后首页——按Z轴深度分层，阴影联动，信息有主次节奏

层级	Z值	元素	设计意图
氛围层	Z=10	动态渐变背景	营造品牌氛围，不抢夺注意力
导航层	Z=20~30	搜索栏、底部导航	提供方向感，始终可见但不突出
内容层	Z=40~50	商品卡片、信息流	承载主要信息，视觉中心
焦点层	Z=60~70	Banner、促销标签	关键信息，吸引注意力
干预层	Z=80~90	悬浮购买按钮、Toast	紧急操作，推到眼前

4.2 ArkUI代码实现

// Homepage.ets —— 空间化首页
@Entry
@Component
struct SpatialHomepage {
  @State bannerZ: number = 70;
  @State cardZ: number = 50;
  @State fabZ: number = 90;

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      // 氛围层 Z=10
      AmbientLayer()
        .zIndex(10)

      // 导航层 Z=20~30
      NavigationBar()
        .zIndex(30)
        .shadow(this.calculateShadow(30))

      // 内容层 Z=40~50
      Scroll() {
        Column() {
          // Banner 焦点层 Z=70
          BannerCarousel()
            .zIndex(70)
            .shadow(this.calculateShadow(70))
            .onClick(() => {
              animateTo({ duration: 300, curve: Curve.Spring }, () => {
                this.bannerZ = 85;  // 点击后推近
              });
            })

          // 商品卡片 内容层 Z=50
          Grid() {
            ForEach(products, (product: Product) => {
              GridItem() {
                ProductCard({ product: product })
                  .zIndex(50)
                  .shadow(this.calculateShadow(50))
                  .onHover((isHover: boolean) => {
                    animateTo({ duration: 200 }, () => {
                      this.cardZ = isHover ? 65 : 50;  // 悬停时浮起
                    });
                  })
              }
            })
          }
        }
      }
      .zIndex(50)

      // 悬浮购买按钮 干预层 Z=90
      FloatingActionButton()
        .zIndex(90)
        .shadow(this.calculateShadow(90))
        .position({ x: '80%', y: '75%' })
    }
    .width('100%')
    .height('100%')
  }

  private calculateShadow(zDepth: number): ShadowOptions {
    const ratio = zDepth / 100;
    return {
      radius: 4 + ratio * 16,
      offsetX: 0,
      offsetY: 2 + ratio * 10,
      color: `rgba(0, 0, 0, ${0.08 + ratio * 0.22})`,
      type: ShadowType.COLOR
    };
  }
}

4.3 动态光感配置

// 首页光感配置
const HomepageLightConfig: AmbientLightConfig = {
  theme: LightTheme.WARM,
  intensity: 0.85,
  colorTint: '#FDF2E9',
  adaptive: true,
  adaptiveSensitivity: 0.4,
  materialPreset: 'glass',
  dynamicLighting: true,
  transitionDuration: 300
};

设计要点：

• 暖色基调：电商场景需要传递"温暖、亲切、促购买"的情绪
• 玻璃材质：商品卡片使用玻璃质感，传递现代感和通透感
• 动态响应：用户滑动时，卡片的光影随Z值变化，产生"呼吸感"

---

五、详情页空间化改造：3D商品展示

5.1 3D商品展示区

改造后的详情页核心是3D商品展示区：

图3：详情页3D商品展示——3D模型悬浮展示，购买按钮推到眼前，转化路径清晰

// ProductDetail.ets —— 空间化详情页
@Entry
@Component
struct SpatialProductDetail {
  @State productRotation: number = 0;
  @State is3DView: boolean = true;

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      // 背景氛围层 Z=10
      AmbientLayer()
        .zIndex(10)

      Scroll() {
        Column() {
          // 3D商品展示区 Z=80
          Stack() {
            if (this.is3DView) {
              ArkGraphics3D({
                model: $rawfile('models/headphone.glb'),
                autoRotate: true,
                rotationSpeed: 0.5,
                onTouch: (event: TouchEvent) => {
                  // 用户触摸旋转3D模型
                  this.productRotation += event.deltaX * 0.5;
                }
              })
              .width('100%')
              .height(300)
              .zIndex(80)
              .shadow(this.calculateShadow(80))
            } else {
              Image($r('app.media.product_image'))
                .width('100%')
                .height(300)
                .zIndex(80)
            }
          }

          // 商品信息 Z=50
          ProductInfo()
            .zIndex(50)
            .shadow(this.calculateShadow(50))

          // 规格选择 Z=40
          SpecSelector()
            .zIndex(40)

          // 用户评价 Z=30
          UserReviews()
            .zIndex(30)
        }
      }
      .zIndex(50)

      // 购买按钮 固定悬浮 Z=90
      BuyButton()
        .zIndex(90)
        .shadow(this.calculateShadow(90))
        .position({ x: '5%', y: '88%' })
        .width('90%')
    }
    .width('100%')
    .height('100%')
  }
}

5.2 3D模型的光影材质

// 3D模型材质配置
const ProductMaterial: PBRMaterial = {
  roughness: 0.3,      // 低粗糙度 = 光滑、精致
  metallic: 0.8,      // 高金属度 = 高端、科技感
  opacity: 1.0,        // 不透明
  baseColor: '#C0C0C0', // 银色基底
  envMap: $rawfile('env/studio.hdr'),  // 环境光贴图
  normalMap: $rawfile('textures/headphone_normal.png')
};

// 动态光照配置
const ProductLighting: LightingConfig = {
  mainLight: {
    direction: { x: 0.5, y: -1, z: 0.5 },
    color: '#FFF5E6',  // 暖白光
    intensity: 1.2
  },
  fillLight: {
    direction: { x: -0.5, y: 0, z: -0.5 },
    color: '#E6F0FF',  // 冷补光
    intensity: 0.4
  },
  ambientLight: {
    color: '#FFFFFF',
    intensity: 0.3
  }
};

5.3 空间交互设计

// 3D模型交互
@State scale: number = 1.0;
@State rotationY: number = 0;

GestureGroup() {
  // 捏合缩放
  PinchGesture()
    .onAction((event: GestureEvent) => {
      this.scale = Math.max(0.5, Math.min(2.0, this.scale * event.scale));
    })

  // 旋转
  RotationGesture()
    .onAction((event: GestureEvent) => {
      this.rotationY += event.angle;
    })

  // 平移
  PanGesture()
    .onAction((event: GestureEvent) => {
      this.offsetX += event.offsetX;
      this.offsetY += event.offsetY;
    })
}

---

六、性能优化：空间化带来的挑战与解决方案

空间化改造不可避免地带来了性能开销。以下是我们在项目中遇到的挑战和解决方案：

图4：改造前后性能对比——空间化带来了约10-20%的性能开销，但通过优化控制在可接受范围内

6.1 渲染帧率优化

挑战：3D模型渲染和动态光影计算导致帧率从58fps下降到52fps。

解决方案：

// 性能优化配置
const PerformanceConfig = {
  // LOD（细节层次）：远距离使用简化模型
  lodDistance: [0, 10, 30],  // 0-10米用高精度，10-30米用中精度，>30米用低精度

  // 阴影质量分级
  shadowQuality: 'medium',  // 可选：low / medium / high

  // 动态批处理
  dynamicBatching: true,

  // GPU实例化
  gpuInstancing: true,

  // 帧率限制
  targetFrameRate: 60
};

6.2 内存占用优化

挑战：3D模型和纹理导致内存占用从120MB增加到145MB。

解决方案：

// 纹理压缩
const TextureConfig = {
  format: 'ASTC_6x6',  // 使用ASTC压缩格式
  maxSize: 2048,        // 最大纹理尺寸
  mipmap: true          // 生成mipmap
};

// 模型压缩
const ModelConfig = {
  format: 'glTF-Draco',  // 使用Draco压缩
  compressionLevel: 7,   // 压缩级别
  quantizePosition: true, // 量化顶点位置
  quantizeNormal: true    // 量化法线
};

6.3 启动时间优化

挑战：3D模型加载导致启动时间从800ms增加到950ms。

解决方案：

// 异步加载3D模型
@State isModelLoaded: boolean = false;

aboutToAppear() {
  // 先显示2D占位图
  this.isModelLoaded = false;

  // 异步加载3D模型
  setTimeout(() => {
    this.load3DModel().then(() => {
      this.isModelLoaded = true;
    });
  }, 100);
}

// 模型缓存
const ModelCache = new Map<string, Promise<Model>>();

function load3DModel(url: string): Promise<Model> {
  if (!ModelCache.has(url)) {
    ModelCache.set(url, fetchModel(url));
  }
  return ModelCache.get(url)!;
}

---

七、数据验证与用户反馈

7.1 A/B测试数据

改造后进行了为期2周的A/B测试（实验组30%用户，对照组70%用户）：

指标	改造前	改造后	变化
首页点击率	3.2%	4.8%	+50%
详情页停留时长	12s	18s	+50%
购买转化率	1.8%	2.5%	+39%
用户满意度	3.6/5	4.2/5	+17%

7.2 用户反馈摘录

• 正面反馈：“3D看商品很直观，旋转一下就能看到细节”、“页面看起来更有层次感了，不像以前那么乱”
• 负面反馈：“3D模型加载有点慢”、“老手机有点卡”、“希望增加2D/3D切换”

7.3 迭代方向

基于数据反馈，我们制定了后续迭代计划：

• 性能优化：针对低端设备降低3D模型精度
• 功能增强：增加2D/3D切换按钮
• 场景扩展：将3D展示推广到更多品类（服装、家具）

---

八、改造实施路线图

图5：改造实施路线图——从评估到上线的四阶段渐进式迁移

8.1 第一阶段：评估与规划（1周）

• 梳理现有UI结构，识别空间化改造的关键页面
• 确定Z轴层级规范（参考五层模型）
• 制定改造范围和优先级

8.2 第二阶段：首页改造（2周）

• 实现Z轴分层和阴影联动
• 配置动态光感组件
• 进行内部测试和调优

8.3 第三阶段：详情页改造（2周）

• 集成3D商品展示
• 实现空间交互（旋转、缩放）
• 优化性能和加载速度

8.4 第四阶段：全量上线（1周）

• A/B测试和数据验证
• 性能优化和Bug修复
• 灰度发布和全量上线

---

九、结语：空间化不是终点，而是起点

这个电商App的改造让我深刻体会到：空间化不是给界面"加个3D效果"，而是重新思考信息在三维空间中的组织方式。

改造前的首页是一个"平面目录"，用户需要主动寻找信息；改造后的首页是一个"立体橱窗"，信息按重要性分层呈现，用户只需跟随视觉动线。

改造前的详情页是一张"平面海报"，用户只能被动接受；改造后的详情页是一个"立体展台"，用户可以主动探索，从多个角度了解商品。

数据验证了这种转变的价值：点击率提升50%，停留时长增加50%，转化率提升39%。这些数字背后，是用户体验的本质提升——从"被动浏览"到"主动探索"，从"信息过载"到"沉浸体验"。

HarmonyOS 7（API 26）的空间计算能力，为开发者提供了前所未有的工具。但工具本身不等于解决方案，关键在于如何用空间思维重新设计信息架构。希望这个改造手记能为正在探索空间化转型的开发者提供一些参考。

---

转载自：https://blog.csdn.net/u014727709/article/details/164304580
欢迎 👍点赞✍评论⭐收藏，欢迎指正