3、二维平面阵列：矩形阵列、圆形阵列、六边形阵列的结构与特点

二维平面阵列，说白了就是把元素在平面上铺开。你想想看，从手机屏幕上的图标，到电路板上的焊盘，再到建筑外立面的幕墙，本质上都是在做这件事。我做了这么多年排布设计，最深的体会就是：选对阵列形态，项目就成功了一半。

这一章，咱们就聊聊三种最基础的二维阵列——矩形、圆形和六边形。它们各有各的脾气，用对了地方就是利器，用错了……嗯，我踩过不少坑，待会跟你们细说。

3.1 矩形阵列：最基础，也最容易被低估

矩形阵列，就是元素按行和列对齐排列。横平竖直，规规矩矩。它是最直观的排布方式，但别因为它简单就轻视它。

我记得有一次做 LED 显示屏的像素排布方案。客户要求高密度，我就用了矩形阵列，间距压到最小。结果呢？散热完全不行，中间区域温度直接超标。后来我学乖了——矩形阵列虽然排布效率高，但必须给热管理和走线留出空间。

3.1.1 适用场景

3.2 圆形阵列：向心与发散的艺术

圆形阵列，元素围绕一个中心点，按半径和角度分布。它天生带有向心性和旋转感，视觉冲击力比矩形强得多。

圆形阵列有两个关键参数：半径和角度步长。半径决定元素离中心的远近，角度步长决定元素之间的疏密。

// 圆形阵列的坐标计算公式
// 假设中心点为 (cx, cy)，半径为 r，元素数量为 n
for (let i = 0; i < n; i++) {
    let angle = (360 / n) * i;  // 角度步长
    let x = cx + r * Math.cos(angle * Math.PI / 180);
    let y = cy + r * Math.sin(angle * Math.PI / 180);
    // 在 (x, y) 处放置元素
}

我曾经做过一个雷达界面的设计，用圆形阵列排布功能菜单。一开始每个菜单项的大小都一样，结果外围的按钮看起来比内圈的小一圈——这是透视错觉。后来我按半径比例递增元素尺寸，才解决了这个问题。

3.2.1 圆形阵列的变体

• 单环阵列：所有元素在同一半径上，常见于表盘、转盘
• 多环阵列：多个半径层叠，常见于雷达图、靶心图
• 螺旋阵列：半径随角度递增，形成螺旋线排布
• 扇形阵列：只覆盖部分角度范围，常见于仪表盘

3.3 六边形阵列：蜂窝结构的秘密

六边形阵列，也叫蜂窝阵列。它用正六边形铺满平面，每个六边形与六个邻居相邻。这种结构在自然界中随处可见——蜂巢、龟裂的泥土、玄武岩柱……

为什么六边形这么特殊？我给你们算笔账：

等周效率，说白了就是用最少的材料围出最大的面积。六边形在这点上完胜。所以蜂巢用六边形，不是蜜蜂审美高，是进化出来的最优解。

// 立方体坐标 (q, r, s)，满足 q + r + s = 0
// 六个邻居的偏移量
const neighbors = [
    [1, -1, 0], [1, 0, -1], [0, 1, -1],
    [-1, 1, 0], [-1, 0, 1], [0, -1, 1]
];

我在做游戏地图时用过六边形阵列。当时有个需求：玩家单位可以移动到相邻格子。如果用矩形网格，需要处理四个方向还是八个方向的问题（四方向太死板，八方向又太灵活）。六边形天然六个方向，移动规则清晰，玩家直觉上也好理解。

3.3.1 六边形阵列的优缺点

• 优点：邻居关系均匀、空间利用率高、视觉上有机感强、适合模拟扩散/寻路
• 缺点：坐标计算复杂、与矩形屏幕/纸张的适配性差、边缘处理麻烦

3.4 三种阵列的对比与选择

说了这么多，到底什么时候用哪种？我整理了一张对比表，你们可以当参考：

选型的时候，我一般会问自己三个问题：

1. 边界是什么形状？——矩形边界用矩形阵列，圆形边界用圆形阵列
2. 元素之间需要交互吗？——需要邻居关系就考虑六边形
3. 视觉重心在哪里？——有中心焦点用圆形，无焦点用矩形或六边形

3.5 知识结构图

下面这张图把三种阵列的核心要素串起来了，你们可以保存下来当速查表：

3.6 实战中的选择逻辑

最后，我想分享一个真实案例。去年我做了一个智慧园区的数据大屏，需要展示 20 多个监控点的状态。

一开始我用矩形阵列排布，每个监控点一个方块。结果甲方说「太像 Excel 表格了，没有科技感」。后来我改成圆形阵列，把监控点按重要程度分布在不同的半径上——核心区域放关键点位，外围放次要点位。甲方很满意。

但问题来了：圆形阵列导致屏幕四个角落大量留白，信息密度太低。最后我妥协了——主体区域用圆形阵列，角落用矩形阵列补位。混合排布，反而效果最好。