Dashboard

Dashboard 是使用者進後台的第一屏,要在一眼之內讓人知道「現在狀況如何、接下來做什麼」。這章把預設版型的區塊順序、KPI 卡與圖表區的拿捏,還有「整頁只能有一個 primary」講清楚。當你要排總覽頁、塞快捷動作、或猶豫歡迎列要不要再放按鈕時,就翻這頁對一下。

首頁 Dashboard

這是什麼

首頁儀表板常見區塊:橫幅、歡迎語、設定清單、篩選(含與上期比較)、KPI 卡(含趨勢小圖)、圖表、快捷動作、近期列表、活動動態。

什麼時候用

登入後第一屏要讓使用者掌握概況時;依產品取捨區塊,不必全部堆上。

預覽依本指南規則實作
S

SaaS Console

Platform

搜尋專案、成員、動作…
TZ
首頁

總覽

試用期剩餘 14 天 — 升級後可解除專案數量限制。

你好,Alex

以下是工作區今日概況,可從 KPI 或近期專案快速進入。

完成設定(4 步)

完成設定後可解鎖完整工作流程

2/4 完成
  • 建立第一個專案
  • 邀請團隊成員
  • 匯入或同步資料

    從 CSV 或整合來源帶入既有資料,KPI 才會開始累積。

  • 設定自動化規則
本月營收

NT$ 1.2M

12%vs 上期
活躍專案

24

3vs 上期
待處理

8

2vs 上期
年度目標

60%

5%vs 上期

近期專案

專案狀態更新
行銷 Q2Active2 小時前
官網改版Draft昨天
CRM 匯入Paused3 天前

活動動態

今天
  • Sam 更新了 行銷 Q2 狀態

    10 分鐘前
  • Alex 加入了工作區

    1 小時前
昨天
  • 系統 完成匯入 48 筆客戶資料

    昨天

營運 track 版型

這是什麼

Paper 營運儀表板(track layout):KPI 三卡、週 picker、預約 card list、右欄統計 widget。class 名稱、字級、search/hover 與 Paper prototype 一致。

什麼時候用

營運人員每天先看「今天有哪些預約/任務」,再 drill-down 到完整列表;比 analytics F 型更適合。

預覽依本指南規則實作
S

SaaS Console

Platform

搜尋專案、成員、動作…
TZ
營運後台儀表板

儀表板

今日已水銷噸數
18.6
今日減碳量
2,340kg CO₂e

統計資料

2026 年 6 月

當月水銷累積量

128.4+12%
總量工紙家紙

各行業噸數

  • 金融保險42.1 噸
  • 科技製造38.6 噸
  • 公部門18.2 噸
  • 其他企業12.4 噸
  • 教育醫療8.9 噸

回收紙比例

  • 家紙28.4 噸
  • 工紙91.8 噸

水銷噸數熱區圖

1234567891011121314151617181920212223242526272808:0012:0016:0020:00

Dashboard 版型樣式庫

這是什麼

九種常見儀表板版型樣式,附常用情境說明。

什麼時候用

規劃新產品首頁或改版儀表板時,先對照選一種主版型再填內容。

預覽依本指南規則實作

樣式庫 · 4 種版型

Mobbin MCP layout analysis (2026-05)

營運 track 版型

operational-track-dashboard

營運/排程產品首頁:KPI 列 → 月份/週 picker → 左側任務 card list + 右側統計 widget。KPI 可深連結至列表頁 filter。

常用情境

  • 每日排程、預約、到場為核心工作
  • 使用者需先看「今天發生什麼」再 drill-down 到列表
  • 左側 rich list 比 embedded table 更適合時間軸資訊
  • 需 month/week picker 與列表頁日期 filter 同步

參考:Operations SaaS · Field service · Booking admin

經典分析總覽(F 型)

classic-analytics-overview

最常見的後台首頁版型:上方 KPI 帶、中段主趨勢圖、下方近期列表或表格。符合 F-pattern 掃視路徑。

常用情境

  • 產品/營運團隊每日登入需快速確認核心指標
  • 指標可濃縮為 3–4 個 KPI
  • 需要從總覽 drill-down 到列表或詳情頁
  • 作為設計規範的預設 dashboard 示範版型

參考:Stripe · HubSpot · Vercel

模組化分析看板

modular-analytics-board

可拖曳 widget grid 組合多種圖表與 KPI,支援全域日期/segment 篩選。適合指標組合會變動的分析平台。

常用情境

  • 使用者需自行組合 funnel、retention、line chart
  • 同一產品有多個 dashboard 模板
  • 需要 TV mode 或定期 email 報表
  • 進階使用者會頻繁調整版面

參考:Amplitude · Mixpanel

營運指揮中心

operational-command-center

以即時佇列健康與團隊負載為核心,上方 metric matrix,下方可操作 conversation/ticket table。

常用情境

  • 客服、營運需監控 backlog 與 SLA
  • 指標需即時更新
  • 需從 metric drill-down 到待處理清單
  • 班次開始時評估人力分配

參考:Intercom · Zendesk

Resend Metrics 版型

這是什麼

Resend 版型:主區摘要(寄信數、送達率)+ 域名 breakdown + 次級比率卡。

什麼時候用

郵件或訊息類產品的指標首頁;主圖表與域名明細分層呈現。

預覽依本指南規則實作

Layout 規格 · Resend · mobbin-resend-metrics

指標:EMAILS · DELIVERABILITY RATE · BOUNCE RATE · COMPLAIN RATE

Metrics

EMAILS

17

DELIVERABILITY RATE

100%

  • content-mobbin.com6 · 35%
  • updates.acme.com8 · 47%
  • notify.app.io3 · 18%

BOUNCE RATE

0%

COMPLAIN RATE

0%

Arcade KPI 五欄列

這是什麼

Arcade:等寬 KPI 卡搭配升降 delta 指示。

什麼時候用

產品分析首屏要並排展示多個關鍵數字與變化幅度時。

預覽依本指南規則實作

Layout 規格 · Arcade · mobbin-arcade-kpi

指標:Views · Plays · CTA Clicks · Play Time · Completion

Views

89

+3%

Plays

80

+2%

CTA Clicks

12

-4%

Play Time

4m

-2%

Completion

90%

+1%

UiMetricCard

這是什麼

KPI 卡:label、value、delta、trend 漲跌方向。

什麼時候用

Dashboard 小卡快速指標;一卡一 KPI。

Total Plays

12,847

+12%

規格速查

項目定稿值
預設區塊順序系統橫幅/歡迎 → 篩選 → KPI → 圖表 → 快捷動作 → 近期列表(+活動)
Page headerbreadcrumb、H1、右側一個 primary(如「建立專案」)
內容寬max-width 1200–1440,F-pattern:上 KPI、中圖表、下列表
KPI 卡片3–4 張為宜,數字大、標籤小、delta badge(綠漲紅跌+箭頭)
圖表區一個主趨勢圖,loading 用 skeleton,空資料給 empty + CTA
快捷動作2–4 張 action card(建立/邀請/匯入),不取代 page header primary
活動動態與近期列表並排或獨立 tab,每列=動作描述 + 時間
Onboarding 清單checklist + 進度條,新用戶可疊在活動區或取代它

常見做錯

做錯正確
Dashboard 上散落多個 primary 按鈕整頁只留 page header 一個 primary,widget 內 CTA 不另算
KPI 卡塞五六個指標、每張又擠滿小字控制 3–4 張,數字大、標籤小,必要時再 drill-down
歡迎列又放一顆和 page header 重複的按鈕歡迎列只問候 + 一句概況,動作交給 page header primary
空 dashboard 留一片空白沒引導widget 無資料時給 empty state + CTA 或 onboarding checklist

相關章節