梳理卡片清单
按「能力 / 数据 / 推荐 / 计费」四类拆卡片，单页卡片数控制在 6–9 张，超出则拆页或折叠为二级抽屉。
耗时 0.5 天产出：卡片清单表
工作流程步骤
从接入到上线共 5 步，单步平均耗时与验收口径都已标注，避免来回返工。
套用 12 列栅格
桌面端 12 列、平板 8 列、手机 4 列；卡片间距 12–20px，列间距统一走 --gutter，保证模块对齐不歪斜。
断点 1600 / 1024 / 640对齐检查：基线一致
接入模型与推荐
先用 1 个基座模型跑通链路，再开启个性化推荐：以近 30 天行为做召回，卡片排序权重 = 0.6 兴趣 + 0.3 时效 + 0.1 热度。
首屏加载 ≤ 1.8s推荐刷新 15min
补动态交互细节
卡片 hover 上浮 3px + 阴影升级；文字逐行遮罩上滑 0.45s ease-out；尊重系统「减少动效」设置，自动降级为淡入。
反馈 ≤ 400ms过渡 0.3–0.6s
埋点与灰度验证
对卡片曝光、点击、停留三事件埋点；先放 10% 流量灰度 3 天，卡片点击率提升未达 8% 就回滚并重排优先级。
灰度 10% / 3 天目标 CTR +8%
常见问题 FAQ
都是接入真实项目时最常被问到的问题，答案带阈值与判断依据。
卡片式设计会不会让信息显得零碎？
关键在层级而非数量。做法：每张卡只承载 1 个主指标 + 2 个辅助指标，标题不超过 14 字；同屏卡片宽度差不超过 1 个栅格列。当卡片内元素超过 5 个，优先拆成「概览卡 + 详情抽屉」，而不是继续加字。
个性化推荐多久生效，冷启动怎么办？
行为数据积累到 200 次以上曝光后推荐开始明显生效，通常 3–7 天。冷启动阶段用「热度 + 编辑精选」兜底，权重 0.7 热度 / 0.3 精选；有画像后再切换为兴趣主导，避免新用户首屏全是随机卡片。
响应式布局最容易在哪个断点翻车？
640px 附近最易出现横向溢出。检查项：grid 列写 minmax(0,1fr)；卡片子项加 min-width:0；图片容器固定宽高比 + object-fit:cover；表格在窄屏改为横向滚动容器而非压缩列宽。逐项过一遍基本可消除溢出。
动态交互做多少才不干扰阅读？
控制在「进入 / 悬停 / 展开」三类。时长 0.3–0.6s，缓动统一 ease-out；同一屏同时运动的元素不超过 3 个；禁用急促弹跳与自动轮播。并务必为 prefers-reduced-motion 提供降级，否则部分用户会感到眩晕。
如何衡量用户体验优化是否真的有效？
看四个量：首屏加载 ≤ 1.8s、卡片点击率 +8% 以上、任务完成步数下降 ≥ 20%、7 日回访 ≥ 35%。四项里至少三项达标再扩大铺量，否则回到卡片信息密度与排序权重上找原因。
服务 / 价格档位
按卡片数量、推荐模型复杂度与协作席位划分，均含响应式布局适配与基础埋点。
探索版 轻量起步
¥ 0 / 首月试用
- 卡片上限 12 张，2 个 AI 应用展示位
- 基础智能推荐（热度兜底）
- 响应式布局适配至 640px
- 社区支持，工单响应 ≤ 24h
进阶版 推荐首选
¥ 1,480 / 月起
- 卡片上限 80 张，可配 3 套个性化推荐策略
- 卡片式设计组件库 + 12 列栅格规范文件
- 动态交互预设（悬停 / 上滑 / 展开）
- 每日埋点报表，卡片 CTR 对比视图
- 工单响应 ≤ 4h，含 2 次远程调优
企业定制 规模化
按需报价 / 项目制
- 卡片数量不限，支持多租户与权限分级
- 私有化模型接入 + 召回排序联合调参
- 超大屏适配至 2560px，卡片 3→4 列扩展
- 专属成功经理，季度体验复盘
核心能力卡片
三张能力卡对应平台最常被使用的三条路径，每张都带可核对的量化指标。
卡片式设计组件库
统一圆角 20–28px、阴影三档、间距 4/8pt 节奏；新增页面直接拼装，平均出图时间从 6h 降到 1.5h。
个性化推荐引擎
兴趣 / 时效 / 热度三因子加权排序，卡片顺序每 15 分钟刷新一次；支持按角色、行业、使用深度分群下发。
全端一致体验
320 / 640 / 1024 / 1600 / 2560 五档断点，超小屏单列堆叠、点按区 ≥ 44px，任何视口都不出现横向溢出。
解决方案对比
同一平台三种落地方式的关键差异，横向对照后选型更快。
| 对比项 | SaaS 快速接入 | 混合部署 | 私有化定制 |
|---|---|---|---|
| 上线周期 | 3–5 天 | 2–3 周 | 6–10 周 |
| 卡片自定义程度 | 主题色 + 布局模板 | 组件级可替换 | 完全自定义组件库 |
| 推荐策略 | 平台预设 3 套 | 预设 + 轻量调参 | 联合建模，权重自定 |
| 数据合规 | 平台侧托管 | 数据不出内网第 1 层 | 全量内网闭环 |
| 适用团队 | 1–5 人验证期 | 10 人以上成长型 | 有合规与规模要求 |
图文混排特写
以一次真实的卡片改版为例，看看体验优化到底改了什么。
把「参数墙」重构为双列交错卡片
改版前：模型参数与价格挤在一张长表里，用户平均要滚动 4.2 屏才能找到计费口径。改版后：左列放能力卡与推荐位，右列放价格、对比与 FAQ，形成双列交错节奏；巨型描边数字作为序号背景，帮助快速定位章节。
滚动深度 4.2 → 2.1 屏
找信息时间 -46%
移动端跳出 -18%
实用指导清单
6 条可直接执行的规则，照着做就能落地一个体验稳定的卡片式 AI 平台页面。
先定栅格再画卡片
桌面 12 列、平板 8 列、手机 4 列，列间距走 --gutter，卡片间距 12–20px；所有模块左边缘必须落在同一列线上，肉眼比对即可发现歪斜。
卡片信息密度设上限
每卡 1 主指标 + ≤2 辅助指标，标题 ≤ 14 字，正文 ≤ 60 字；超过 5 个元素就拆成概览卡 + 详情抽屉，避免首屏变成文字堆。
推荐顺序给权重公式
排序分 = 0.6 兴趣 + 0.3 时效 + 0.1 热度，每 15 分钟刷新；新用户前 200 次曝光走热度兜底，避免冷启动首屏随机。
交互时长卡在 0.3–0.6s
悬停上浮 3px、阴影升一档，过渡统一 ease-out；同屏运动元素 ≤ 3 个，并写好 prefers-reduced-motion 降级，去掉弹跳与自动轮播。
图片统一裁切防跳动
图片容器固定宽高比（16/9 或 4/3），object-fit:cover + loading="lazy"，并写描述性 alt；避免加载后高度突变导致卡片位移。
灰度验证再铺量
先放 10% 流量跑 3 天，卡片 CTR 提升 ≥ 8%、任务步数下降 ≥ 20% 才全量；任一未达就回到信息密度与排序权重排查。