🎨 Design

Bố trí & Thiết kế Dashboard

Nguyên tắc layout, màu sắc, typography và UX để tạo dashboard chuyên nghiệp, dễ đọc và dễ ra quyết định.

📐
Layout Patterns
3 layout phổ biến nhất cho Power BI dashboard
Layout 1 — Executive Dashboard (KPIs trên, charts dưới)
₫12.4B
Total Revenue
+18.5%
YoY Growth
8,241
Total Orders
1,502
Customers
Revenue by Month
Revenue by Category
Electronics 45%
Fashion 25%
Food 18%
Layout 2 — Analytical Dashboard (Filters trái, charts phải)
YEAR
2024
2023
CATEGORY
All
Electronics
₫12.4B
Revenue
32.4%
Margin
Trend Line
Rule 01
F-Pattern Reading
Người dùng đọc theo pattern chữ F — trái qua phải, trên xuống dưới. Đặt thông tin quan trọng nhất ở góc trên trái.
Rule 02
Hierarchy rõ ràng
KPI Cards hàng đầu (tóm tắt). Charts chính giữa (detail). Filters/slicers cạnh bên hoặc trên cùng.
Rule 03
Alignment & Grid
Dùng grid 4px hoặc 8px. Snap to grid = ON. Tất cả elements phải align — lệch 1px trông rất sai.
Rule 04
White Space
Đừng sợ khoảng trống. Padding tối thiểu 8px giữa visuals. Chart không nên chiếm >80% diện tích card.
Rule 05
Tối đa 6-8 visuals/trang
Quá nhiều chart = cognitive overload. Mỗi trang chỉ trả lời 1-2 câu hỏi. Dùng drill-through thay vì nhét hết vào 1 trang.
Rule 06
Mobile-responsive
Tạo Phone Layout riêng trong View → Mobile Layout. Stack visuals theo chiều dọc. Ẩn bớt non-essential charts.
🎨
Color System
Chọn màu đúng — không phải chọn màu đẹp
Nguyên tắc: Màu phải mang ý nghĩa, không chỉ để đẹp. Xanh = tốt/tăng, Đỏ = xấu/giảm, Vàng = highlight/chú ý. Giữ nhất quán trong toàn bộ report.
Primary Blue
#2F6FD4
Main charts, title bars, interactive elements
Success Green
#21BF73
Positive values, growth, targets met
Alert Red
#E74C3C
Negative values, below target, alerts
Warning Amber
#F39C12
Caution, approaching threshold
Secondary Purple
#8E44AD
Secondary data series, categories
Neutral Gray
#7F8C8D
Background series, non-focus data
Cách áp dụng Theme trong Power BI
  1. Vào View → Themes → Browse for themes để load file JSON theme
  2. Hoặc Customize current theme → chọn Primary Color, Secondary Color
  3. Export theme JSON để dùng lại: View → Themes → Save current theme
  4. Áp dụng cho tất cả visuals cùng lúc — không phải format từng cái
Tránh: Dùng quá nhiều màu (>5 màu khác nhau). Dùng màu tương tự nhau (gây nhầm lẫn). Màu sáng chói trên background trắng (gây mỏi mắt).
✍️
Typography Scale
Font size hierarchy tạo visual order
Page Title
Dashboard Title
24px Bold · Page header only
Section Title
Chart Title
16-18px Semibold · Visual titles
KPI Value
₫12.4B
32-40px Bold · Card callout values
Data Label
12,345,678
9-11px Regular · Axis labels, data labels
Body Text
Tooltip text, descriptions
12-14px Regular · Tooltips, labels
Font khuyên dùng: Segoe UI (mặc định Power BI), Calibri, DM Sans, Inter. Tránh font serif (Times New Roman) — khó đọc trên màn hình.
🎛️
Slicer & Filter Design
UX cho filter controls
📌
Đặt Slicer ở đâu?
Header bar (ngang) cho Date/Year — luôn hiển thị. Right panel cho Category/Region — dùng panel tính năng. Tránh trộn lẫn slicer giữa các charts.
🔗
Slicer Sync
View → Sync slicers → chọn slicer → tick các page cần sync. Slicer Date ở header nên sync toàn bộ pages.
📅
Date Slicer best practices
Dùng Between style cho date range. Dùng Dropdown cho Year/Quarter để tiết kiệm space. Relative date slicer (Last 3 months) tốt hơn absolute.
🧹
Clear Filters button
Thêm Button (Insert → Button → Reset) → Action = Clear All Slicers. Người dùng thường bị lost trong filter state — nút này cứu sống họ.
🎯
Conditional Slicer Style
Format slicer: Selection controls → Single Select ON khi chỉ cần 1 giá trị. Show Select All = ON cho multi-select.
🚀
Performance tip
Slicer trên high-cardinality column (CustomerID hàng triệu) sẽ rất chậm. Dùng Dropdown style thay List, hoặc search slicer. Cân nhắc filter thay slicer.
🎨
Conditional Formatting
Màu tự động theo giá trị — không cần custom visual
🟢
Background Color theo Rule
Matrix → Format → Cell elements → Background color → Rules. Ví dụ: Profit % > 30% = xanh, 15-30% = vàng, <15% = đỏ.
📊
Data Bars trong Table
Format → Cell elements → Data bar → ON. Hiện bar chart nhỏ ngay trong cell — không cần visual riêng.
📌
Icon Sets (KPI arrows)
Format → Cell elements → Icons. Chọn Arrow set. Rule: >0 = mũi tên xanh lên, <0 = mũi tên đỏ xuống, = 0 = dash vàng.
🎨
Font Color theo Measure
Format → Cell elements → Font color → Field value → Tạo measure trả về màu hex: IF([Growth]>0,"#0ECB81","#F6465D")
🔖
Bookmarks & Navigation
Tạo interactive navigation giữa các views
  1. Tạo 2 states: state A (chart 1 visible) và state B (chart 2 visible). Hide chart cần ẩn.
  2. View → Bookmarks → Add Bookmark cho từng state. Rename cho dễ nhớ.
  3. Insert → Button. Format → Action = Bookmark → chọn target bookmark.
  4. Dùng để tạo Tab navigation (Sales / Inventory / Finance) trên cùng 1 page.
  5. Dùng Selection Pane (View → Selection) để manage visibility của các visuals.
Use case hay: Nút toggle Chart ↔ Table — cùng data, người dùng chọn cách xem. Bookmark Chart = chart visible, Table hidden. Bookmark Table = ngược lại.
💬
Custom Tooltip Page
Rich tooltip thay vì tooltip mặc định
  1. Tạo page mới → Format page → Page information → Allow use as tooltip = ON
  2. Set canvas size = 320×240px (Tooltip size trong Page information)
  3. Thêm visuals vào page này — sẽ hiện khi hover vào visual khác
  4. Vào visual cần gán → Format → General → Tooltips → Type = Report page → chọn trang vừa tạo
Ví dụ: Hover vào bar chart của 1 tháng → tooltip page hiện mini line chart trend của 12 tháng + top 3 products tháng đó.