目录

---

每日一句正能量

月光在铺路，我们是晚归的人，也是被温柔等待的人。
无论多晚、多累，这世间总有一份归属、一份理解或一份宁静在等待着你。

摘要

摘要：信息架构的本质是"讲故事"。在HarmonyOS 7（API 26）的空间计算时代，Z轴深度不再是视觉装饰，而是信息优先级最直观的映射方式。本文提出"五层空间信息模型"与"四幕叙事动线"，结合新闻、电商、社交三类典型场景，给出可落地的深度设计策略与ArkUI代码实现。

---

一、引言：信息架构的本质是"讲故事"

作为一名前端讲师，我在课堂上总爱问学生一个问题："打开一个App，你看到的到底是UI，还是故事？"

初学者的回答通常是"UI"——按钮、列表、图片、文字。但从业三年以上的开发者会意识到：用户每一次滑动、点击、停留，本质上都是在阅读一个被精心设计过的"信息故事"。 信息架构（Information Architecture, IA）就是编排这个故事的剧本。

在2D时代，这个故事的"舞台"是一张平面。我们用位置（上/下/左/右）、大小（大/小）、颜色（深/浅）来编排信息的主次。但舞台就那么大，当信息密度超过阈值，剧本就开始崩坏——用户迷失在无限滚动的信息流中，找不到核心操作，最终被卸载。

HarmonyOS 7（API 26）的空间计算能力，给了我们一张全新的舞台：三维空间。Z轴深度让信息可以"走进"或"退远"，让关键操作可以"推到眼前"，让背景氛围可以"沉入远方"。这不是视觉升级，而是叙事方式的范式转移——从"平面目录"走向"空间故事"。

---

二、2D信息架构的三大叙事困境

在讲解空间化方案之前，有必要先诊断2D时代的结构性病灶。

2.1 困境一：所有角色挤在同一幕

2D页面的信息组织逻辑是"时间序列"——从上到下依次展开。Banner先出场，然后是金刚区，然后是信息流，然后是底部导航。这种"排队讲故事"的方式，导致所有信息模块被迫争夺用户的同一时段注意力。

问题的根源在于：2D界面没有"景深"这个概念。在真实世界中，重要的东西离你更近，次要的东西在远处。但在屏幕上，所有元素都贴在你的眼球上，只能靠大小和颜色来"假装"有主次。

2.2 困境二：交互打断缺乏"戏剧缓冲"

当2D页面需要弹窗提示时，唯一的手段是遮罩层——在原有内容上盖一层半透明的黑布，然后把弹窗放在正中央。这种打断是粗暴的，就像戏剧演到一半，工作人员直接冲上台把演员推开，塞进来一张通知单。

空间计算提供了更优雅的打断方式：让弹窗从"远处"飞到"眼前"，原有内容自然退入背景。这不是动画炫技，而是符合人类空间认知的"戏剧缓冲"。

2.3 困境三：跨页面叙事逻辑断裂

在2D时代，页面A的弹窗和页面B的弹窗可能长得完全一样（都是居中白底卡片），但用户感知不到它们的"叙事关联"。空间化设计通过全局一致的Z轴语义，让用户建立跨页面的深度认知："Z=90的东西永远是紧急的，无论我在哪个页面。"

---

三、五层空间信息模型

基于HarmonyOS 7（API 26）的ArkUI空间能力，我提出了一套"五层空间信息模型"，用于指导实际项目的深度设计。

图1：五层空间信息模型——每一层都是一个独立的"叙事场景"，Z值直接映射信息优先级

层级	Z值范围	叙事角色	典型元素	设计约束
氛围层	Z = 0~10	舞台布景	动态背景、环境光、品牌粒子	永不抢夺注意力，饱和度低于内容层50%
导航层	Z = 20~40	路标系统	Tab栏、面包屑、筛选器、侧边栏	始终可见但不过分突出，提供方向感
内容层	Z = 40~60	故事主体	商品卡片、文章正文、视频、图集	占据视觉中心，承载主要信息密度
焦点层	Z = 60~80	戏剧高潮	支付按钮、核心CTA、提交表单	仅在需要时出现，颜色对比度最高
干预层	Z = 80~100	紧急插播	Toast、弹窗、权限请求、悬浮按钮	严格控制数量，同一页面不超过1个

这五层模型的核心设计哲学是：信息优先级与Z值成正比，与距用户的物理距离成反比。Z值越高，元素离用户越近，承担的情绪重量和交互权重也越高。

---

四、空间叙事动线：四幕结构设计

有了五层模型，下一步是编排"叙事动线"——用户在空间中移动视线和注意力的路径。我将其归纳为"四幕结构"：

图2：空间叙事四幕结构——用户视线在3D空间中沿"锚定→沉浸→探索→转化"路径流动

第一幕：锚定（Z=30，导航层）

用户进入页面的前300毫秒，视线首先寻找"我在哪"和"我能去哪"。此时导航层（Z=30）提供空间锚点——底部Tab、顶部标题栏、当前位置标识。这一层的目标不是吸引注意力，而是提供安全感。如果用户进入页面后找不到导航，空间感会瞬间崩塌。

第二幕：沉浸（Z=50，内容层）

确认方向后，用户的视线自然上移或内移，进入内容层（Z=50）。这是信息消费的"主舞台"——新闻的正文、电商的商品图、社交的消息气泡。内容层的Z值必须明显高于导航层，让用户产生"我正在阅读主体内容"的空间感知。

第三幕：探索（Z=40，内容层-次级）

当用户对主要内容产生兴趣后，会开始横向探索——相关推荐、评论、相似商品。这些内容位于Z=40，略低于主内容（Z=50），形成自然的"次级阅读"空间。这种深度差让用户明确感知到"这是附加信息，不是核心"。

第四幕：转化（Z=70，焦点层）

叙事的终点是行动。当用户决定购买、提交或分享时，焦点层（Z=70）将核心操作按钮"推近"到用户眼前。这个Z值高于内容层但低于干预层，既表达了"重要性"，又不至于像弹窗那样粗暴。

---

五、场景化深度策略：新闻、电商、社交的差异

五层模型和四幕结构是通用框架，但不同应用场景需要不同的深度策略。以下是我在校企合作项目中的实战经验：

图3：三类典型应用的Z轴策略差异——同一套框架，不同叙事重心

5.1 新闻资讯App：标题前置，阅读沉浸

新闻应用的叙事核心是"阅读"。因此：

• 标题被提升到Z=90（干预层级别），因为标题是用户决定"读不读"的关键决策点；
• 正文稳定在Z=50，提供沉浸式阅读体验；
• 相关推荐放在Z=30，低于正文，避免打断阅读流；
• 底部导航进一步退至Z=20，阅读期间几乎不可见。

5.2 电商购物App：商品悬浮，决策前置

电商应用的叙事核心是"购买决策"。因此：

• 3D商品展示悬浮在Z=90，让用户产生"商品就在眼前"的临场感；
• 价格/促销信息紧随其后（Z=80），因为价格是决策的关键变量；
• 购买按钮固定在Z=95，全页面最高，随时准备承接转化；
• 评价/详情退至Z=40，作为辅助决策的"远处参考"。

5.3 社交聊天App：对话沉浸，输入优先

社交应用的叙事核心是"对话流"。因此：

• 输入框被提升到Z=80，因为输入是社交的核心行为；
• 消息气泡稳定在Z=60，形成清晰的对话视觉带；
• 对方头像在Z=70，略高于消息气泡，强化"人对人"的感知；
• 表情包/快捷功能在Z=50，与消息同级，但视觉上略退后。

关键洞察：同一套五层模型，在不同场景中各层的" occupants（占据者）"完全不同。深度设计的艺术在于根据业务目标重新分配Z轴上的叙事权重。

---

六、ArkUI实战：动态深度与状态流转

理论框架需要在代码中落地。以下是我带领学生做空间化改造时使用的ArkUI架构方案。

图4：动态深度实现架构——四个核心模块协同，让信息深度随用户状态"呼吸"

6.1 全局深度配置（DepthConfig.ts）

// DepthConfig.ts —— 全局Z值语义规范
export enum SpatialLayer {
  AMBIENT = 10,    // 氛围层
  NAVIGATION = 30, // 导航层
  CONTENT = 50,    // 内容层
  SECONDARY = 40,  // 次级内容层
  FOCUS = 70,      // 焦点层
  INTERVENTION = 90 // 干预层
}

// 场景化深度映射表
export const SceneDepthMap = {
  news: {
    headline: SpatialLayer.INTERVENTION,  // 标题前置
    body: SpatialLayer.CONTENT,
    related: SpatialLayer.NAVIGATION,
    tabBar: 20
  },
  ecommerce: {
    product3D: SpatialLayer.INTERVENTION,
    price: 80,
    buyButton: 95,
    detail: SpatialLayer.SECONDARY,
    reviews: 40
  },
  social: {
    inputBox: 80,
    avatar: 70,
    messageBubble: 60,
    sticker: SpatialLayer.CONTENT
  }
};

6.2 动态深度组件（SpatialLayer.ets）

// SpatialLayer.ets —— 可复用的空间层容器
@Component
export struct SpatialLayer {
  @Prop baseDepth: number = SpatialLayer.CONTENT;
  @State currentDepth: number = this.baseDepth;
  @Prop isFocused: boolean = false;
  @BuilderParam content: () => void;

  private calculateShadow(): ShadowOptions {
    const ratio = this.currentDepth / 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
    };
  }

  build() {
    Stack() {
      this.content()
    }
    .zIndex(this.currentDepth)
    .shadow(this.calculateShadow())
    .onFocus(() => {
      // 获得焦点时，Z值弹性上升至焦点层
      animateTo({ duration: 250, curve: Curve.Spring }, () => {
        this.currentDepth = SpatialLayer.FOCUS;
      });
    })
    .onBlur(() => {
      // 失去焦点时，平滑恢复至基础深度
      animateTo({ duration: 200, curve: Curve.EaseInOut }, () => {
        this.currentDepth = this.baseDepth;
      });
    })
  }
}

6.3 叙事状态机（NarrativeFlow.ts）

// NarrativeFlow.ts —— 页面级叙事状态管理
export enum NarrativeState {
  ANCHORING = 'anchoring',   // 第一幕：锚定
  IMMERSING = 'immersing',   // 第二幕：沉浸
  EXPLORING = 'exploring',   // 第三幕：探索
  CONVERTING = 'converting'  // 第四幕：转化
}

@Observed
export class NarrativeController {
  currentState: NarrativeState = NarrativeState.ANCHORING;

  transitionTo(state: NarrativeState) {
    const validTransitions = {
      [NarrativeState.ANCHORING]: [NarrativeState.IMMERSING],
      [NarrativeState.IMMERSING]: [NarrativeState.EXPLORING, NarrativeState.CONVERTING],
      [NarrativeState.EXPLORING]: [NarrativeState.IMMERSING, NarrativeState.CONVERTING],
      [NarrativeState.CONVERTING]: [NarrativeState.ANCHORING]
    };

    if (validTransitions[this.currentState]?.includes(state)) {
      this.currentState = state;
      // 触发全局深度重算
      this.updateGlobalDepths(state);
    }
  }

  private updateGlobalDepths(state: NarrativeState) {
    // 根据叙事状态调整各层全局Z值
    const depthShifts = {
      [NarrativeState.ANCHORING]: { nav: +10, content: 0 },
      [NarrativeState.IMMERSING]: { nav: -5, content: +10 },
      [NarrativeState.EXPLORING]: { nav: 0, content: -5, secondary: +10 },
      [NarrativeState.CONVERTING]: { nav: -10, content: -10, focus: +15 }
    };
    // 实际项目中通过AppStorage或Emitter分发深度变化
  }
}

这套架构的核心价值在于：**深度不再是静态属性，而是随用户行为动态变化的"叙事状态"**。当用户从"沉浸阅读"转向"准备购买"时，系统通过状态机自动调整各层Z值，让购买按钮自然"浮起"，而次要信息优雅"退后"。

---

七、深度设计五大反模式

教学过程中，我整理了学生最常踩的五个坑，供读者参考：

图5：深度设计五大反模式——这些坑的本质都是把Z轴当装饰而非架构

反模式	典型表现	危害	正解
Z轴通货膨胀	所有元素Z值都在70+	空间感崩塌，用户找不到重点	严格控制高Z值元素数量，核心操作≤3个在Z>70
阴影各玩各的	不同模块阴影参数不统一	界面像"拼凑"的，缺乏整体空间感	全局ShadowEngine统一计算，同一光源、同一公式
深度动效滥用	每个交互都伴随大幅度Z轴变化	用户眩晕，产生"晕3D"	只有状态跃迁才动Z值，日常操作保持平面稳定
背景喧宾夺主	氛围层过于花哨	抢夺内容注意力	背景层Z值始终≤10，饱和度低于内容层50%
叙事逻辑断裂	页面跳转时Z轴逻辑不一致	用户空间认知混乱	建立全局DepthConfig规范，所有页面共享同一套Z值语义

---

八、结语：深度即叙事

HarmonyOS 7（API 26）的空间计算能力，为开发者打开了一扇新的大门。但技术永远只是手段，不是目的。

这篇文章的核心观点可以归结为一句话：Z轴深度是信息优先级的空间化表达，而信息优先级是产品目标的结构化表达。 当你在设计一个页面的深度层级时，你实际上在回答三个问题：

1. 用户在这个页面最核心的目标是什么？（决定焦点层放什么）
2. 用户完成目标需要经过哪些认知步骤？（决定四幕动线如何编排）
3. 哪些信息是"必须此刻看到"，哪些是"可以退后一点"？（决定各层的 occupants）

空间化设计不是让界面"看起来立体"，而是让信息的传递"有节奏、有层次、有故事"。从"铺大饼"到"叠千层"，从平面目录到空间叙事——这才是HarmonyOS 7给开发者出的真正考题。

下一篇，我将聚焦沉浸光感组件的体验设计，探讨如何用光影传递情绪。敬请期待。

---

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