数据可视化
统一脊线图与折线叠加,单图不超过 4 条线;坐标轴用 --line 细线,网格线透明度 ≤ 18%。
能力切片 · 六条主干线
每张卡片只讲一件事,图标居中、四周留白,靠 1px 边框与栅格对齐建立秩序。以下参数可直接用于 AI 平台开发的需求评审。
统一脊线图与折线叠加,单图不超过 4 条线;坐标轴用 --line 细线,网格线透明度 ≤ 18%。
过渡统一 250ms / cubic-bezier(.4,0,.2,1);hover 位移 ≤ 3px,避免破坏线条基线。
间距只用 4/8pt 节奏;区块内边距 32px,卡片间距 16px,禁止出现 13px、21px 类魔法值。
每条决策路径标注置信度,低于 0.72 的节点用虚线;关键数字用强调色点缀,面积不超过 10%。
把首屏可用信息压到 6 个模块内;点按区 ≥ 44px,键盘 Tab 顺序与视觉层级一致。
画布按需渲染,超过 1,500 个节点自动降级为聚合视图,保证 60fps 不掉帧。
数据可视化面板 · 探索记录
下面这组数据来自梦想纵横平台的探索性面板:左侧是六轮迭代的可视化密度,右侧是关键指标的原始读数。所有数值均可在平台内复核。
合作伙伴墙 · 协作线索
协作不靠 Logo 堆叠,而靠约定:统一线条粗细、统一栅格、统一指标口径。合作方可按下列分工直接接入平台的探索流程。
实用指导清单 · 可直接落地
每一条都给出做法、参数与避坑点,可直接贴进 AI 平台开发的设计评审文档。
在 Figma 里建 3 种线宽:1px 结构线、1.5px 数据线、2px 强调线。全局只允许这三种,超过即视为装饰,删除。避坑:别用 0.5px 冒充极简,在高分屏会灰掉。
区块内边距 32px、卡片间距 16px、行高 1.62;标题与正文间距 12px。避坑:留白不是越大越高级,超过 64px 的空区会打断「探索」的连续性。
主色承担 30%(图表主柱、图标描边),强调色只用于关键数字、激活态与一条下划箭头。避坑:不要用强调色铺卡片背景,会让极简线条失去秩序。
呼吸缩放周期 16–21s、幅度 ≤ 6%;hover 位移 ≤ 3px、时长 250ms。避坑:避免入场逐条飞入,超过 3 个元素的连续动画会让用户在探索中迷失焦点。
节点 > 1,500 自动聚合、线条 > 4 条自动折叠、窄屏 < 640px 切换为列表读数。指标:首屏 ≤ 180ms、可读性 ≥ 96 分。
正文对比度 ≥ 4.5:1、细线对比 ≥ 3:1;焦点用 2px 强调色描边并偏移 3px;点按区 ≥ 44px。避坑:别只靠颜色区分状态,需同时给形状或文字标注。
常见问题 · 探索中的疑问
这些问题来自平台评审与用户访谈,答案都指向同一个原则:结构优先,装饰服从。
图文混排特写 · 一次完整探索
以一次真实的平台搭建为例:先在纸上画出用户从注册到看见模型输出的完整路径,再把它翻译成线条网络与栅格坐标。
横向作品带 · 可左右滑动探索
用手指或触控板横向滑动,查看不同场景中极简线条艺术如何服务 AI 平台的具体任务。

把 24 份访谈记录压缩成 6 条需求主线的可视化。

损失与学习率双折线,坐标轴统一 1px,异常值用虚线标出。

用两条平行线区分输入与输出,避免气泡带来的视觉噪音。

首屏只放 6 个数字,其余下钻到二级面板,保持探索节奏。