Design System: 科技能量线

一套与页面主题、背景颜色和使用场景解耦的动态科技线设计语言。主角是线路的几何、光脉冲与运动节奏；背景只决定线路配色和对比强度。

1. 核心视觉

科技线由克制的结构线和沿路径移动的单段能量脉冲构成。它应让人联想到 PCB 走线、信号传输和精密电子系统，而不是霓虹灯、游戏 HUD 或粒子特效。

  • 结构： 纤细、理性、有明确方向。
  • 动态： 持续但安静，运动比闪烁更重要。
  • 层次： 基础线负责描述路径，能量脉冲负责提供生命感。
  • 密度： 低至中等；留白是设计的一部分。
  • 核心原则： 用“细线 + 单段流光”表达科技感，不依赖特定背景、装饰图标或圆形节点。

2. 线路几何语法

路径结构

  • 以长水平段为主要骨架，通过短斜线改变高度。
  • 转向角优先使用 45° 和 135°，模拟 PCB 走线。
  • 单条线路建议包含 3–6 个水平段与 1–3 组斜向转折。
  • 线路可从容器边缘之外进入或离开，避免出现刻意的短线端点。
  • 多条线路应具有不同长度、转折位置和起止位置。
  • 相邻线路保持明显间距，不交叉、不缠绕、不形成随机蛛网。
  • 线路可横向、纵向或局部环绕内容，但同一画面应保持一致的主要方向。

构图规则

  • 桌面区域通常使用 3–6 条线路。
  • 移动区域通常使用 2–4 条线路。
  • 不平均分布线路；通过疏密变化形成自然节奏。
  • 线路不应切穿标题、人脸、按钮、关键数字等视觉焦点。
  • 作为局部装饰时，允许线路只占据容器的一角或一侧，无须铺满页面。
  • 静态线宽建议 1–1.5px，任何静态线路不应粗于 4px。

明确禁止

  • 不在转折处添加圆球、圆环、焊盘或呼吸节点。
  • 不添加箭头、六边形、雷达圈、随机数字和伪代码标签。
  • 不把线路排列成完全等距的网格。
  • 不使用大量碎线制造噪声。
  • 不通过复杂路径本身炫技；视觉重点始终是能量沿路径移动。

3. 组件分层

一条完整科技线由三层组成，三层使用完全相同的 SVG 路径：

  1. 基础线路 Trace

    • 描述线路结构。
    • 线宽 1–1.5px。
    • 与背景保持低至中等对比。

  2. 线路泛光 Trace Glow

    • 放置在基础线后方或紧邻其上。
    • 线宽约为基础线的 1.8–2.2 倍。
    • 透明度 0.08–0.16。
    • 高斯模糊 2–4px。
    • 浅色背景或复杂图片背景下可完全关闭。

  3. 移动能量 Energy Pulse

    • 位于最上层。
    • 线宽约为基础线的 1.8–2.2 倍，推荐 2.4–3px。
    • 使用“透明 → 主题色 → 高亮核心 → 主题色 → 透明”的线性渐变。
    • 端点使用 stroke-linecap: round。
    • 任意时刻每条线路只显示一段主要脉冲。

4. 能量脉冲

外观

透明 → 主题色弱光 → 高亮核心 → 主题色弱光 → 透明
  • 每条路径设置 pathLength="100"，统一不同路径的动画尺度。
  • 推荐 stroke-dasharray: 11 89，即约 11% 可见、89% 留空。
  • 可见脉冲长度建议控制在路径总长的 8%–16%。
  • 高亮核心应短而集中，不能让整段脉冲都呈现同等亮度。
  • 光晕模糊建议 1.2–2px，并与清晰原线合并。
  • 能量不是均匀虚线，也不是连续点阵。

标准动画

.energy {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-dasharray: 11 89;
  animation: energy-flow var(--flow-duration) linear infinite;
  animation-delay: var(--flow-delay);
}

@keyframes energy-flow {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

运动节奏

  • 单次循环建议 6–13s。
  • 多条线路必须使用不同速度和负延迟。
  • 负延迟使页面加载时脉冲已分布在不同位置，避免同时从端点出现。
  • 相邻线路可交替使用正向和反向运动。
  • 速度差异应自然，避免完全相同或整齐的倍数关系。
  • 动画必须连续，循环点不能闪烁、停顿或跳回。
  • 科技线是环境动态，不应随着鼠标高速追逐或剧烈加速。

推荐节奏样例：

线路 时长 延迟 方向
Trace 01 7.2s -1.1s 正向
Trace 02 10.8s -4.8s 反向
Trace 03 6.4s -3.2s 正向
Trace 04 12.6s -7s 反向

5. 配色与背景的关系

科技线不规定页面背景色。先确定宿主背景，再从一个主题色推导基础线、泛光和能量核心。

通用配色逻辑

  • 主题色： 选择一个能代表产品或场景的单一色相。
  • 基础线： 主题色向背景色混合，使其只比背景高一个视觉层级。
  • 泛光： 使用主题色，但保持低透明度。
  • 能量主体： 使用主题色的明亮版本。
  • 能量核心： 使用背景中可见度最高的近白或近黑高光。
  • 同一组科技线只使用一个主题色相；白色或深色核心不计为第二强调色。

深色背景

  • 基础线使用主题色的暗化版本，建议透明度 0.45–0.75。
  • 能量主体使用明亮主题色。
  • 能量核心使用近白色，可带少量主题色色相。
  • 允许低透明度外发光。
  • 示例：
    • 基础线：#0A5268
    • 泛光：rgba(0, 217, 255, 0.13)
    • 能量：#00EAFF
    • 核心：#FFFFFF

浅色背景

  • 基础线使用主题色的深色版本，避免浅线消失。
  • 能量主体使用更深、更饱和的主题色。
  • 能量核心使用接近墨色的深色高光，而不是白色。
  • 关闭或大幅减弱外发光，优先使用清晰描边。
  • 可通过 mix-blend-mode: multiply 改善与浅色表面的融合，但需验证浏览器表现。
  • 示例：
    • 基础线：rgba(8, 82, 104, 0.38)
    • 能量：#007F99
    • 核心：#032D36

彩色背景

  • 线路主题色必须与背景保持明确的明度差，不能只依赖色相差。
  • 背景饱和度较高时，优先使用近白或近黑线路方案。
  • 避免同时出现互补色霓虹效果。
  • 如背景颜色变化较大，可在科技线下方使用非常轻的局部遮罩，而不是更强的发光。

图片、视频或复杂纹理背景

  • 先降低线路所在区域的背景细节或对比，再放置科技线。
  • 基础线应保持克制，能量脉冲需有清晰轮廓。
  • 可为整组线路使用局部透明遮罩或轻微背景模糊。
  • 禁止通过不断加粗、加亮、加外发光来对抗复杂背景。
  • 若始终无法保证可读性，应减少线路数量或更换放置区域。

对比度目标

  • 基础线只需“可感知”，不应与正文或交互组件竞争。
  • 能量脉冲必须明显高于基础线，但面积保持很小。
  • 在静态截图中仍应看得见路径；在动态状态下第一眼应注意到移动，而不是发光强度。

6. 可配置设计令牌

推荐通过 CSS 变量让科技线适配不同主题：

.tech-lines {
  --trace-color: rgba(10, 82, 104, 0.72);
  --trace-glow-color: rgba(0, 217, 255, 0.13);
  --energy-color: #00eaff;
  --energy-core: #ffffff;

  --trace-width: 1.5;
  --glow-width: 3;
  --energy-width: 2.8;

  --trace-opacity: 1;
  --glow-blur: 3;
  --energy-blur: 1.8;
  --pulse-length: 11;
}

实际项目只需替换颜色令牌，无需改变路径几何和动画逻辑。

7. 使用场景

科技线可以作为：

  • 页面或局部区域的环境动态层。
  • Hero、数据面板、登录页或产品展示区的边缘装饰。
  • 卡片之间的信号连接线。
  • 图表、设备拓扑或流程状态的动态路径。
  • 品牌片头、视频封面或展台屏幕中的持续运动元素。

作为背景使用时，科技线应位于内容层之后；作为信息连接线使用时，可提高基础线对比，但必须保持同一几何与动画语言。

8. 响应式与容器适配

  • 科技线既可全屏，也可放入任意相对定位容器。
  • SVG 使用 width: 100%; height: 100%。
  • 裁切式铺满使用 preserveAspectRatio="xMidYMid slice"。
  • 需要完整显示全部线路时使用 preserveAspectRatio="xMidYMid meet"。
  • 使用 vector-effect: non-scaling-stroke 保持不同尺寸下的线宽一致。
  • 小容器中减少转折和线路数量，不应直接缩小复杂的桌面构图。
  • 禁止科技线导致页面横向滚动。

9. 实现与性能

  • 优先使用单个 SVG 管理同一组线路。
  • 路径放入 <defs>，通过 <use> 复用三层视觉。
  • <defs> 中的路径本身不要携带 .trace 样式，避免覆盖 <use> 实例的能量样式。
  • 优先使用 CSS stroke-dashoffset，不使用 JavaScript 逐帧修改坐标。
  • 同屏持续运动的线路建议不超过 8 条。
  • 控制 SVG filter 的范围，避免超大模糊区域。
  • 不为能量脉冲创建大量 DOM 粒子。
  • 若设备启用“减少动态效果”，允许停止脉冲，只保留静态线路。

10. 可访问性与内容关系

  • 装饰性科技线使用 aria-hidden="true"。
  • 承载实际数据关系的线路应提供可访问名称或文字说明。
  • 科技线不拦截鼠标事件：pointer-events: none。
  • 不影响按钮焦点、表单错误和状态提示的识别。
  • 不产生快速闪烁或高频亮度变化。
  • 内容区域可通过遮罩降低线路透明度，但不需要修改整组科技线的设计语言。

11. 禁用模式

  • 转折点圆球、圆环、焊盘和呼吸灯。
  • 均匀虚线或连续点阵假装能量流。
  • 多色霓虹、彩虹渐变和紫蓝赛博朋克套色。
  • 密集粒子、数字雨和扫描线同时叠加。
  • 粗线、剧烈闪烁和完全同步的速度。
  • 每条线路等长、等距、等速。
  • 无意义的 HUD 刻度、雷达圈、六边形和伪代码。
  • 为适配背景无限增加发光强度。
  • 使用 top、left、width 或 height 驱动逐帧动画。
  • 让装饰线路压过正文、产品或交互内容。

12. 验收标准

  • 更换深色、浅色或品牌色背景后，线路几何和动画逻辑无需重做。
  • 静态状态可辨认完整路径，动态状态可清楚感知能量移动。
  • 基础线低调，能量脉冲醒目但不刺眼。
  • 多条线路的速度、位置和方向具有自然差异。
  • 画面中不存在装饰性圆球节点。
  • 循环播放一分钟后没有明显跳变、闪断或同步感。
  • 科技线可以作为独立组件用于全屏背景、局部容器或信息连接场景。