2D 商品列表一屏放 20 条，用户拇指一划扫过七八条，信息密度高但有效。搬到空间界面，同样的 20 条排成空间网格，戴上头显一看——密密麻麻全是卡片，分不清主次，看两秒就累。我们第一版直接把 2D 列表的 20 条照搬过来，用户测试 8 个人里有 6 个说"太挤了不想看"。砍到 8 条，有人说"空了点但能看"。砍到 4 条，有人说"太少了不够选"。这篇把信息密度从 2D 到空间的迁移量化，给一张密度-距离-可读性的对照表。

能力面：空间界面的信息密度约束

2D 界面信息密度受屏幕尺寸和字号约束，一屏放多少条主要看每条占多高。空间界面多了两个约束：视锥范围和注意力带宽。

视锥范围决定了用户不转头能看到多少区域。人眼水平清晰视野约 60°（超出这个范围要转头才能看清），垂直约 40°。在这个视锥内排卡片，放太多超出视野用户看不到，放太少浪费空间。

注意力带宽决定了用户一眼能处理多少信息。2D 界面用户可以拇指控制滚动速度，信息过载时划快点。空间界面一眼望去全看到，没有"划快点"的缓冲，信息过载直接表现为认知疲劳。

我们测了 12 个同事，在空间界面里看不同密度的商品列表 10 秒，然后问"你记住了几个"：

密度（项数）	平均记住数	注意力覆盖率	主观疲劳感
4 项	3.2	80%	“很轻松”
8 项	5.1	64%	“还行”
12 项	4.8	40%	“有点累”
16 项	3.6	23%	“看不过来”
20 项	2.9	15%	“不想看”

数据有个反直觉的点：密度从 8 升到 12，记住数反而降了。8 项时用户能认真扫完每个，12 项时开始跳着看，跳看导致漏掉一些，加上疲劳记住的更少。20 项时基本是"看一眼就放弃"。

结论是空间界面信息密度 4~8 项是甜点区，8 项时注意力覆盖率 64% 已经不算高，再多就过载。这个数字跟 2D 的 20 项差了 2.5 倍，迁移时不能照搬。

约束面：距离和排布方式对密度的影响

信息密度不是孤立数字，它和排布距离、排布方式耦合。

距离对密度的影响

同样的 8 项列表，放在 1m 距离和 3m 距离，体感密度完全不同。1m 处每项占视野角度大，8 项已经满视野；3m 处每项占视野小，8 项只占视野中央一小块，周围空荡荡。

距离	8 项体感密度	建议项数
1m	“很满”	4~6 项
2m	“适中”	6~10 项
3m	“偏空”	8~12 项
5m	“很空”	12~16 项

远距离可以放更多项，但每项信息量要降——3m 处字号至少 38sp（前文算过），一行放不下几个字。所以远距离高密度适合图片缩略图，不适合文字信息。

排布方式对密度的影响

空间界面排布不只是网格，还有弧形和分层。三种排布的密度承受力不同：

排布方式	最大舒适密度	适用场景
平面网格	8 项	固定面板，类 2D 迁移
弧形排列	12 项	环绕用户，视野利用好
分层排列	6 项/层 × 2~3 层	Z 轴分层，主次分明

弧形排列比平面网格多放 50% 是因为弧形贴合视野形状——人眼水平视野 60° 比垂直 40° 宽，弧形把项沿水平方向铺开，利用率高。分层排列总项数可以更多，但每层不超过 6 项，层间靠 depth 区分主次。

我们商品列表最终用的是弧形排列 8 项，距离 2m。弧形比平面多放 4 项但不觉挤，2m 距离字号 24sp 能放下商品名+价格两行。

场景落地：商品列表从 2D 迁移

2D 商品列表每条卡片高 120vp、宽 100vp，一屏 4 列 5 行 20 条。迁到空间界面：

迁移阶段	排布	项数	距离	用户反馈
V1 照搬	平面网格 4×5	20	2m	“太挤了”
V2 砍半	平面网格 3×3	9	2m	“还是有点多”
V3 再砍	平面网格 3×2	6	2m	“少了点但能看”
V4 弧形	弧形排列	8	2m	“正好”
V5 分层	弧形 6 + 后层 4	10	2m+2.5m	“主次清楚”

V5 是最终版：前层弧形 6 项放推荐商品，后层弧形 4 项放分类入口，depth 差 0.5m。用户聚焦前层时后层半透明退后，需要分类时头部微抬看后层。

把 V1 到 V5 的迭代过程抽象成一条迁移链，每换一种排布或距离都要重新过一遍密度校验。

迁移系数和安全上限都来自前面的实测数据，不是拍脑袋定的。

// entry/src/main/ets/pages/SpatialProductList.ets
import { SpatialContainer, SpatialNode } from '@kit.ArkUI';

@Entry
@Component
struct SpatialProductList {
  private frontItems: Product[] = [];  // 前层 6 项
  private backItems: Category[] = [];   // 后层 4 项

  build() {
    SpatialContainer() {
      // 后层：分类入口，depth=-0.50，4 项弧形
      SpatialNode({ depth: -0.50 }) {
        ArcLayout({
          items: this.backItems,
          radius: 2.5,           // 弧形半径 2.5m
          arcAngle: 60,          // 弧形跨度 60°
          opacity: 0.6           // 半透明退后
        })
      }

      // 前层：推荐商品，depth=0，6 项弧形
      SpatialNode({ depth: 0 }) {
        ArcLayout({
          items: this.frontItems,
          radius: 2.0,           // 弧形半径 2m
          arcAngle: 50,          // 弧形跨度 50°
          opacity: 1.0
        })
      }
    }
  }
}

弧形半径 2m 和弧形跨度 50° 是按视锥算的——2m 处 50° 弧长约 1.75m，6 项每项占 0.29m 宽，够放商品缩略图+名称+价格。

踩坑与取舍

坑一：照搬 2D 密度导致认知过载

V1 照搬 20 项是最直接的坑。2D 里 20 项用户可以滚动控制节奏，空间里 20 项一眼全看到没有缓冲，认知过载。用户测试时有人看了一眼就说"信息太多了我不想选"，直接退出。

教训是 2D 到空间的信息密度不能照搬，要砍到 1/3 左右。20 项砍到 6~8 项是合理范围。如果业务确实需要展示更多，用分层+分页，不要一屏全堆。

坑二：过度稀疏用户嫌空

V3 砍到 6 项后有用户说"就这么几个？感觉没什么可选的"。信息密度太低会让用户觉得"这个应用没什么内容"，影响留存。

解法是 V5 的分层——前层 6 项 + 后层 4 项，总共 10 项但分两层不觉多。用户聚焦前层时看到 6 项"正好"，需要更多时看后层发现还有 4 个分类入口"还有不少"。分层让总信息量比单层 6 项多 67%，但体感密度没增。

被放弃的方案：动态密度按注视时长调整

试过根据用户注视时长动态调密度——用户快速扫视时显示 4 项（低密度快速浏览），注视某项超 1s 时展开周围到 8 项（高密度细看）。逻辑实现出来了，但用户反馈"项数在变很乱，我不知道该看哪"。动态密度让用户失去对布局的预期，反而增加认知负担。放弃了，回到固定密度。

注意一下下

• 空间界面信息密度 4~8 项为宜，不超过 12 项
• 2D 到空间密度砍到约 1/3，20 项→6~8 项
• 距离 2m 适合 6~10 项，1m 适合 4~6 项，3m 适合 8~12 项
• 弧形排列比平面网格多放 50%，优先用弧形
• 分层排列每层不超 6 项，层间 depth 差 0.5m
• 远距离高密度只适合图片缩略图，文字信息要降密度

目前密度是按场景写死的，换一个列表页要重新调。下一步打算把密度做成距离和视锥的函数自动算——给定距离和排布方式，自动算出舒适密度上限，业务方只提供数据源不操心排布。另外想测一下不同品类商品的密度差异——服装可能适合高密度（视觉差异大一眼能区分），3C 数码可能适合低密度（需要看参数），按品类调密度可能比统一密度更合理。