轻量陪伴版
￥9,800 / 月
- 拟物化设计令牌体系 1 套（约 40 个变量）
- 响应式布局 3 个断点：640 / 1024 / 1600
- 卡片式设计组件 12 个（含可按压按钮）
- 双周 1 次体验走查，48 小时响应
01
常见问题 FAQ
以下问题来自 37 个 AI 平台团队的接入访谈，答案都带可执行参数。
新拟态在深色底上会不会“糊成一片”，可按压感怎么保证？
关键是控制对比度差：背景与控件表面明度差保持在 0.06–0.09（本页 --bg 0.15 与 --surface 0.21），左上高光用 rgba(255,255,255,.05–.08)、右下暗影用 rgba(0,0,0,.35–.55)，双向各 6–12px 偏移。禁止把两种阴影做成同尺寸，否则控件会失重。
拟物化设计会不会拖慢人工智能平台的迭代速度？
不会，前提是先立令牌。把圆角、间距、阴影、字号全部收敛成 4/8pt 变量后，新增一个模型卡片只需复用 --r-md+--sh-1，实测单个组件开发从 40 分钟降到 12 分钟，设计走查返工率下降约 45%。
数据可视化用暖橙强调色，会不会与蓝色主色冲突？
橙与蓝是分裂互补，只要遵守 60-30-10：60% 中性深底、30% 主色（蓝）用于结构与激活态、10% 暖橙只落在关键数字、细线与按钮。图表最多允许 2 个暖色系列，其余用中性灰阶，避免视觉争夺。
动态交互要多少才合适，多了会不会打扰“陪伴感”？
建议单屏常驻动效 ≤3 处：悬停展开的风琴卡、数值缓动计数、卡片 2–4px 抬升。所有过渡时长控制在 150–450ms，缓动用 cubic-bezier(.4,0,.2,1)；并必须提供 prefers-reduced-motion 降级，动效时长压到 1ms。
02
服务与价格档位
按团队规模与迭代节奏分档，含明确交付物与响应时长，不打包空承诺。
全栈共建版
￥26,000 / 月
- 含轻量版全部内容
- 人工智能平台数据可视化面板 1 套（8 类图表）
- 动态交互脚本：风琴卡、视差、数值缓动
- 用户体验优化 A/B 实验 2 组 / 月
- 7×12 小时响应，2 小时紧急通道
专属奇观版
面议 / 季度
- 定制「网络奇观」视觉母题与品牌插画
- 多端一致性：Web / 平板 / 大屏指挥舱
- 性能预算：首屏 LCP ≤1.8s，CLS ≤0.05
- 驻场支持 4 天 / 月，含可用性测试
03
数据可视化面板
把模型健康度做成“仪表盘实体感”，数字会缓动，异常会呼吸式高亮。
平台实时指标（近 24 小时）
1.24s首屏 LCP 中位数
0.03布局偏移 CLS
99.92%推理服务可用率
陪伴式引导路径
新用户进入 AI 平台后，我们跟踪 4 个关键动作：连接数据源 → 选择预训练模型 → 配置算力档 → 发布接口。每一步都给出拟物化进度环与一句人话提示，降低“不知下一步点哪”的焦虑。
实测：加入陪伴式引导后，新用户首次成功发布接口率从 54% 提升到 81%。
可按压控件
按钮、开关、滑杆统一双向阴影，按下时内凹 2px，触感与真实面板同源。
点按区 ≥44px，误触率下降 31%数值缓动
关键指标从 0 缓动到目标值，320ms 结束，避免刷新跳变带来的焦虑。
数据可读性评分 +0.8异常呼吸灯
异常指标以暖橙细线呼吸 1.6s 循环，不闪烁、不遮挡正文。
异常发现平均快 26 秒多屏一致
指挥舱大屏与移动端共用令牌，网格从 1 列扩到 4 列仍保持节奏。
1920 与 320 宽度零横向溢出04
最新动态与资讯
来自一线的迭代记录，每条都附可复用的做法。
风琴卡交互上线：一屏收纳 5 类平台能力
悬停展开让信息密度提升约 2.4 倍，同时保留 280px 最低高度，避免展开时页面跳动。
响应式布局梯度补齐：320px 也能单手操作
超小屏下改为单列堆叠、内边距收到 8–12px，按钮宽度占满并保证 44px 高度，长英文模型名强制断行。
暖橙只占 10%：一次克制配色的复盘
把最高彩度色限制在关键数字、细高亮与主按钮上，页面整体仍由中性深底与蓝色主色支撑，长时间用眼疲劳感明显下降。
05
能力矩阵 · 悬停展开
把鼠标停在卡片上，展开该能力在人工智能平台中的真实落点。
可视化
数据可视化
8 类图表统一令牌：折线、环形、热力、漏斗等，色板锁定主色系与暖橙，最多 2 个暖色系列。图表容器固定宽高比，杜绝加载抖动。
交互
动态交互
悬停抬升 2–4px、阴影从 8px 扩到 30px 景深；按下内凹 2px。所有动效 150–450ms，并提供 reduced-motion 降级。
布局
响应式布局
4 档断点：1600 加宽容器并增列，1024 转两列，640 单列，380 以下收紧内边距，保证无横向滚动。
体验
用户体验优化
以可用性测试驱动：任务完成率、误触率、首次成功时长三项为核心指标，每轮至少 8 名真实用户参与。
06
实用指导清单
照着做就能落地的 6 条，每条都带做法、参数与避坑点。
1
先定令牌，再画任何控件
把间距锁成 4/8pt（--sp-1..8）、圆角锁定 8/12/16、阴影分 3 级景深。避坑：不要在组件里写死 box-shadow: 0 2px 4px 这类魔法值，否则深浅底切换必然崩。
2
新拟态对比度双闸门
底与面明度差 0.06–0.09，高光 rgba(255,255,255,.05–.08)，暗影 rgba(0,0,0,.35–.55)，偏移 6–12px。避坑：纯黑底 + 纯白高光会出现“塑料脏边”。
3
强调色守 10% 红线
暖橙只用于关键数字、激活态、主按钮与细高亮；统计页面暖色像素占比控制在 10% 以内，可用取色器抽查截图验证。
4
动效预算 ≤3 处 / 屏
风琴展开 450ms、数值缓动 320ms、卡片抬升 250ms；连续动画不超过 2 个并行动作，避免注意力被撕扯。
5
图片与布局防抖
所有图用固定宽高比容器 + object-fit:cover，并写 loading="lazy"；目标 CLS ≤0.05。避坑：直接给 img 设 height:auto 又无预留比例，会造成明显跳动。
6
可用性验收三指标
任务完成率 ≥85%、误触率 ≤5%、首次成功时长 ≤90s。每轮 8 名用户，未达标优先改信息层级而非加动效。