FOOTER & SHELL
仪表盘布局Dashboard Layout
顶栏 + 一行 KPI 卡 + 大图表 + 侧栏区块的经典信息密度布局。让用户在 3 秒内看到「现在怎么样」。
效果预览
运营看板
今日访问12.4k↑ 18%
注册转化4.8%↑ 0.6%
付费用户1,204↑ 92
近 7 天访问
热门来源
适合用在哪
数据后台、监控面板、运营看板。核心信息放左上（阅读起点）。
容易踩的坑
- KPI 卡超过 6 张平铺，3 秒内抓不住重点，应只保留最关键的 3-4 个。
- 涨跌只靠红绿颜色表达，色弱用户分不清，需配合箭头或正负号。
- 所有图表同时首屏加载渲染，数据接口慢时整页长时间空白，应分区骨架屏。
设计提示词 · Prompt
仪表盘布局（Dashboard Layout）：用 CSS Grid 明确行列——顶栏横跨整行（深色或白底），第二行并排 3 个 KPI 小卡（各含 14px 大数字、8px 说明、一行涨跌幅着色），第三行左侧一个跨 2 列的图表区（内含柱状/折线）、右侧 1 列放列表或次要信息并纵向跨到最底。所有卡片统一圆角 8px、细描边、内边距 7-10px。KPI 数字用等宽表示（tabular-nums）。列间距 6-8px 保持紧凑，信息密度是仪表盘的正当需求。
Dashboard Layout: use CSS Grid with explicit rows and columns — the top bar spans the full row (dark or white background); the second row has 3 KPI cards side by side (each with a 14px big number, an 8px label, and a color-coded change line); the third row has a chart area spanning 2 columns on the left (bar/line chart) and 1 column on the right for a list or secondary info that spans vertically to the bottom. All cards share an 8px radius, thin border, and 7-10px padding. Use tabular figures (tabular-nums) for KPI numbers. Keep column gaps at 6-8px for compactness — information density is a legitimate need for dashboards.
常见搭配
同一页面里经常和「仪表盘布局」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="sh-dash">
<div class="sh-dash__hd"><b>运营看板</b><i></i><i></i></div>
<div class="sh-dash__kpi"><span>今日访问</span><b>12.4k</b><em>↑ 18%</em></div>
<div class="sh-dash__kpi"><span>注册转化</span><b>4.8%</b><em>↑ 0.6%</em></div>
<div class="sh-dash__kpi"><span>付费用户</span><b>1,204</b><em>↑ 92</em></div>
<div class="sh-dash__mid"><span class="d-tiny">近 7 天访问</span>
<div class="sh-dash__bars"><i style="height:38%"></i><i style="height:62%"></i><i style="height:48%"></i><i style="height:78%"></i><i style="height:56%"></i><i style="height:92%"></i><i style="height:70%"></i></div>
</div>
<div class="sh-dash__side"><span class="d-tiny">热门来源</span><div style="margin-top:6px"><div class="sh-dash__ln"></div><div class="sh-dash__ln" style="width:74%"></div><div class="sh-dash__ln" style="width:52%"></div><div class="sh-dash__ln" style="width:86%"></div></div></div>
</div>