# 仪表盘界面（Dashboard UI）

镜语 · 版式与界面 / 布局方式

- 别名：数据看板、后台界面、管理后台、Admin Dashboard、仪表板
- 口语：「后台那种一堆数据卡片」「左边菜单右边图表」「做一个数据看板」
- 一句话：左侧导航、顶部筛选，数字卡片和图表排成一屏，一眼看完关键数据
- 是什么：仪表盘界面把最重要的数据集中在一屏：左侧导航，顶部时间范围筛选，第一行是几张大数字卡片（KPI），下面是趋势图和排行。NN/g 指出，好的仪表盘利用人一眼就能感知的视觉属性（位置、长度、颜色），让用户不必逐个读数也能看出变化
- 缺了就不像：侧边导航；顶部大数字卡片；趋势图占主位
- 加了更像：时间范围切换；悬停数据提示；排行进度条；浅色描边卡片
- 适合用在：创作者后台、店铺和课程的数据页；SaaS 产品官网里的界面展示；视频里讲数据增长、复盘时的画面
- 看哪里：看信息的层级：大数字和涨跌在最上面，趋势图占最大面积，排行用横条长度表示。切换「7 天／30 天」，数字和曲线一起变化；在曲线上移动鼠标会显示当天的数据。手机宽度下侧边栏收成顶部图标
- 注意：一屏塞十几个图表，没有主次；用饼图和 3D 图表比较接近的数值，很难看出差别
- 描述示例：做一个仪表盘（Dashboard）风格的创作者后台首页：浅灰蓝 #f6f7fb 背景；左侧 168px 白色侧边栏，顶部是 Logo，下面是带图标的导航项，选中项浅紫底紫字；主区顶部是页面标题和「7 天／30 天」分段切换；第一行三张白色圆角数字卡片，显示粉丝、播放、约拍询价和绿色涨幅；下面左侧大块是紫色面积折线图，悬停显示当天数据，右侧是热门作品排行，用横向进度条表示热度；卡片用 1px 浅色描边代替阴影，数字用等宽数字
- 易混：
  - [Bento 网格](https://idea.ameng.dev/terms/bento-grid.md)：Bento 用格子展示个人信息和功能；仪表盘的格子都是数据，并且可筛选
  - [科幻界面](https://idea.ameng.dev/terms/fui.md)：科幻界面的数据是装饰；仪表盘的数据要能准确读出来
- 相关：[柱状图生长](https://idea.ameng.dev/terms/bar-chart-grow.md)、[数字递增](https://idea.ameng.dev/terms/rolling-number.md)

## 来源与延伸阅读

- [NN/g · Dashboards: Making Charts and Graphs Easier to Understand](https://www.nngroup.com/articles/dashboards-preattentive/)
- [Wikipedia · Dashboard (computing)](https://en.wikipedia.org/wiki/Dashboard_(computing))

网页版（含演示）：https://idea.ameng.dev/terms/dashboard-ui