Dash 样式设计
Dash 样式设计系统（UI/UX 完整指南）
为 DASH 加密货币仪表板 打造专业、现代、响应式的 视觉设计系统，基于 Dash Bootstrap Components (DBC) + 自定义 CSS + Plotly 主题，支持 深色/浅色模式、响应式布局、品牌一致性。
设计目标
| 目标 | 实现方式 |
|---|---|
| 品牌识别 | DASH 蓝 #008DE4 主色 |
| 专业感 | 卡片阴影、圆角、微交互 |
| 响应式 | 移动端适配 |
| 可访问性 | 高对比度、ARIA |
| 可扩展 | CSS 变量 + 组件化 |
1. 配色方案（DASH 官方品牌色）
:root {
--dash-primary: #008DE4;
--dash-secondary: #00C1DE;
--dash-success: #00D084;
--dash-warning: #FFD23F;
--dash-danger: #FF6B6B;
--dash-dark: #1A1A1A;
--dash-light: #F8F9FA;
--dash-gray: #6C757D;
--dash-bg: #FFFFFF;
--dash-text: #212529;
--dash-border: #DEE2E6;
}
[data-theme="dark"] {
--dash-bg: #1A1A1A;
--dash-text: #F8F9FA;
--dash-border: #343A40;
--dash-light: #2C3034;
}2. 字体系统
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.95rem;
line-height: 1.6;
}3. 全局样式 assets/style.css
/* 全局重置 */
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--dash-bg);
color: var(--dash-text);
transition: all 0.3s ease;
}
/* 导航栏 */
.navbar-brand {
font-weight: 700;
font-size: 1.4rem;
display: flex;
align-items: center;
gap: 10px;
}
.navbar-brand img {
height: 32px;
border-radius: 8px;
}
/* 卡片增强 */
.card {
border: 1px solid var(--dash-border);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transition: all 0.3s ease;
background: var(--dash-bg);
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}
/* 按钮美化 */
.btn-dash {
background: var(--dash-primary);
border: none;
border-radius: 8px;
padding: 0.6rem 1.2rem;
font-weight: 600;
transition: all 0.2s;
}
.btn-dash:hover {
background: #0072b8;
transform: translateY(-1px);
}
/* 输入框 */
.form-control, .form-select {
border-radius: 8px;
border: 1px solid var(--dash-border);
padding: 0.6rem 1rem;
transition: all 0.2s;
}
.form-control:focus {
border-color: var(--dash-primary);
box-shadow: 0 0 0 3px rgba(0, 141, 228, 0.2);
}
/* 表格 */
.table {
border-radius: 8px;
overflow: hidden;
}
.table th {
background: var(--dash-light);
font-weight: 600;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.5px;
}
/* 加载动画 */
.spinner {
width: 2rem;
height: 2rem;
border: 3px solid var(--dash-light);
border-top: 3px solid var(--dash-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}4. 深色模式切换组件
# components/theme_switch.py
import dash_bootstrap_components as dbc
from dash import html
theme_switch = dbc.Row([
dbc.Col([
html.Div([
html.Span("Light", className="me-2"),
dbc.Switch(id="theme-switch", value=False),
html.Span("Dark", className="ms-2")
], className="d-flex align-items-center justify-content-end")
], width=12)
], className="mb-3")// 在 app.py 添加回调
@app.callback(
Output("page-content", "data-theme"),
Input("theme-switch", "value")
)
def toggle_theme(dark_mode):
return "dark" if dark_mode else "light"5. 响应式布局（移动端优化）
/* 移动端卡片堆叠 */
@media (max-width: 768px) {
.card {
margin-bottom: 1rem;
}
.navbar-nav {
flex-direction: row;
gap: 1rem;
}
.display-4 {
font-size: 2rem;
}
}6. Plotly 图表主题（与 DASH 品牌一致）
# utils/plotly_theme.py
import plotly.graph_objects as go
import plotly.express as px
DASH_TEMPLATE = go.layout.Template(
layout=dict(
font=dict(family="Inter, sans-serif", size=12),
title=dict(font=dict(size=18, color="var(--dash-text)")),
paper_bgcolor="rgba(0,0,0,0)",
plot_bgcolor="rgba(0,0,0,0)",
colorway=[ "#008DE4", "#00C1DE", "#00D084", "#FFD23F", "#FF6B6B" ],
xaxis=dict(
gridcolor="var(--dash-border)",
zerolinecolor="var(--dash-border)"
),
yaxis=dict(
gridcolor="var(--dash-border)",
zerolinecolor="var(--dash-border)"
)
)
)
def apply_dash_theme(fig):
fig.update_layout(
template=DASH_TEMPLATE,
margin=dict(l=40, r=40, t=60, b=40),
hoverlabel=dict(
bgcolor="var(--dash-light)",
font_size=12,
font_family="Inter"
)
)
return fig使用：
fig = px.line(df, x='date', y='price')
fig = apply_dash_theme(fig)7. 图标系统（使用 Bootstrap Icons）
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"># 示例：带图标的卡片
dbc.Card([
dbc.CardBody([
html.Div([
html.I(className="bi bi-currency-bitcoin text-primary", style={"fontSize": "2rem"}),
html.Div([
html.H4("28.50 USD", className="mb-0"),
html.P("当前价格", className="text-muted mb-0")
], className="ms-3")
], className="d-flex align-items-center")
])
])8. 组件库（可复用）
指标卡片
def metric_card(title, value, icon, color="primary"):
return dbc.Card([
dbc.CardBody([
html.Div([
html.I(className=f"bi {icon} text-{color}", style={"fontSize": "1.8rem"}),
html.Div([
html.H3(value, className="mb-0"),
html.P(title, className="text-muted mb-0 small")
], className="ms-3 flex-grow-1")
], className="d-flex align-items-center")
])
], className="h-100")加载状态
def loading_spinner():
return html.Div([
html.Div(className="spinner", style={"margin": "auto"})
], style={"textAlign": "center", "padding": "3rem"})9. 完整布局示例（带样式）
# pages/home.py
from components.theme_switch import theme_switch
layout = html.Div([
navbar,
dbc.Container([
theme_switch,
# 英雄区
dbc.Row([
dbc.Col([
html.H1("DASH 实时仪表板", className="display-4 fw-bold"),
html.P("即时价格 • 钱包管理 • 主节点监控", className="lead")
], width=12, className="text-center mb-5")
]),
# 指标卡片
dbc.Row([
dbc.Col(metric_card("价格", "$28.50", "bi-currency-exchange"), width=3),
dbc.Col(metric_card("交易量", "1.2M", "bi-bar-chart-line"), width=3),
dbc.Col(metric_card("主节点", "3,850", "bi-hdd-network"), width=3),
dbc.Col(metric_card("区块高度", "1,987,654", "bi-box"), width=3),
], className="g-4 mb-5"),
# 图表区
dbc.Row([
dbc.Col(dcc.Graph(figure=price_fig), width=8),
dbc.Col(dcc.Graph(figure=volume_fig), width=4)
], className="g-4")
], fluid=True, className="py-4")
])10. 品牌资产
| 资产 | 链接 |
|---|---|
| Logo | https://www.dash.org/assets/img/dash-logo.png |
| Favicon | https://www.dash.org/favicon.ico |
| 字体 | Inter (Google Fonts) |
| 图标 | Bootstrap Icons |
11. 最终效果
深色/浅色切换 | 响应式网格 | 卡片悬停动画
DASH 蓝主色 | 圆角设计 | 微交互反馈
移动端折叠导航 | 加载动画 | 高可访问性12. 一键部署样式包
# assets/dash-theme.css
curl -o assets/dash-theme.css https://cdn.jsdelivr.net/gh/dashpay/brand/dash-ui-kit.css一句话总结：使用 CSS 变量 + DBC + Inter 字体 + DASH 蓝，5 分钟打造专业加密货币仪表板，深色模式、响应式、品牌一致。
需要我提供 Figma 设计稿、Tailwind CSS 版本、动画登录页，或 PWA 图标集 吗？随时告诉我！