点击图片查看大图
UI 与界面
高端暗色系数据仪表板 UI
dashboardfintechdark-themeuicrypto
暗色系高端数据仪表板 UI 模板,适用于金融/加密/数据分析类产品。基于 Design Token JSON 参数化结构,支持品牌色、布局、组件一键替换。
Use When · 何时使用
需要生成暗色系高端数据仪表板、金融/加密交易后台、数据分析平台 UI 时使用。支持替换品牌名、强调色、行业类型、导航菜单和卡片内容。
Variables · 使用前替换
共 17 项,保留模板结构,只修改任务变量
- 行业类型
- 默认:fintech / crypto trading
- 主题模式
- 默认:dark
- 强调色
- 默认:Warm gold/orange
- 目标用户
- 默认:traders
- 画布比例
- 默认:3:2
- 品牌名
- 默认:Mevolut
- 导航菜单
- 默认:Dashboard, Security, Referral, Trading Fees, API management
- 主按钮文字
- 默认:Deposit
- 卡片1
- 默认:User Overview Card
- 卡片2
- 默认:Deposit / Buy Card
- 卡片3
- 默认:Total Asset Card
- 卡片4
- 默认:VIP Level / Progress Card
- 卡片5
- 默认:Holdings / Data Table
- \"主题模式\"
- 默认:\"dark\"
- \"行业类型\"
- 默认:\"fintech\"
- \"背景色\"
- 默认:\"#0B0D10\"
- \"强调色Hex\"
- 默认:\"#F5A623\"
Prompt4145 字符 · 130 行
You are an experienced UI designer embracing modern, minimalistic design, shadows, glass, and soft colors.
Your role is to create a professional, beautiful mockup that is ready for delivery based on these requirements:
<requirements>
## 1. Overall Style & Visual Language
This interface represents a premium, modern {argument name="行业类型" default="fintech / crypto trading"} dashboard using a {argument name="主题模式" default="dark"} theme.
The visual language combines **soft neumorphism**, and **luxury Web3 aesthetics**.
Core characteristics:
- {argument name="强调色" default="Warm gold/orange"} accent highlights
- Monochromatic color palette with minimalistic effects and shadows
- Card-based layout with depth and subtle backgrounds
- Minimal borders, separation via shadows or light backgrounds
Target perception:
- Secure
- Professional
- High-end / institutional-grade
- Optimized for experienced {argument name="目标用户" default="traders"}
---
## 2. Layout Structure
### Global Layout
- Desktop-first dashboard
- Output proportions: {argument name="画布比例" default="3:2"}
- Three main regions:
1. Top navigation bar (horizontal)
2. Left sidebar navigation (vertical)
3. Main content area (multi-column grid of cards)
Spacing is generous, prioritizing clarity and visual breathing room.
---
## 3. Top Navigation Bar
- Height: 72px
- Left:
- Brand logo text "{argument name="品牌名" default="Mevolut"}"
- Stylized first letter
- Accent color
- Center:
- Navigation links: {argument name="导航菜单" default="Dashboard, Security, Referral, Trading Fees, API management"}
- Right:
- Primary CTA: "{argument name="主按钮文字" default="Deposit"}" (accent pill button)
- User avatar (circular)
- Theme toggle
---
## 4. Left Sidebar Navigation
- Width: 240px
- Background: near-black
- Vertical navigation items with icons
- Bottom-aligned: Settings
- Active item: subtle background highlight, accent color icon
- Icons: outline style
---
## 5. Main Content Area
### 5.1 {argument name="卡片1" default="User Overview Card"}
- Large rounded card at top
- User greeting, identity info, verification status
### 5.2 {argument name="卡片2" default="Deposit / Buy Card"}
- Medium-sized card with action rows
- Each row: icon + label + arrow action button (accent color)
### 5.3 {argument name="卡片3" default="Total Asset Card"}
- Large faded watermark symbol in background
- Action tabs
- Numeric values are large
### 5.4 {argument name="卡片4" default="VIP Level / Progress Card"}
- Progress bar for holdings/usage
- Fee rates display
### 5.5 {argument name="卡片5" default="Holdings / Data Table"}
- Card containing a table layout
- Columns with sparklines (green positive, red negative)
- Hover: subtle background highlight per row
---
## 6. Color Palette
- Primary background: deep charcoal / black
- Card surfaces: slightly lighter
- Accent color: {argument name="强调色" default="warm gold"}
- Text hierarchy: White (primary), Muted gray (secondary), Dark gray (disabled)
- Status colors: Green for positive, Red for negative
---
## 7. Design Tokens
{
"theme": {
"mode": "{argument name=\"主题模式\" default=\"dark\"}",
"style": ["soft-neumorphism", "premium-{argument name=\"行业类型\" default=\"fintech\"}"]
},
"layout": {
"type": "desktop-dashboard",
"grid": "three-column",
"sidebarWidth": 240,
"topbarHeight": 68,
"contentPadding": 24
},
"colors": {
"background": "{argument name=\"背景色\" default=\"#0B0D10\"}",
"primaryAccent": "{argument name=\"强调色Hex\" default=\"#F5A623\"}",
"textPrimary": "#FFFFFF",
"textSecondary": "#B0B3B8",
"success": "22C55E",
"danger": "#EF4444"
},
"typography": {
"fontFamily": "SF Pro, system-ui, sans-serif",
"sizes": { "h1": 24, "h2": 20, "h3": 16, "body": 14, "caption": 12 }
},
"components": {
"card": { "borderRadius": 16, "shadow": "0 20px 40px rgba(0,0,0,0.4)", "background": "#14171C" },
"button": { "primary": { "borderRadius": 999 } },
"sidebar": { "background": "#0E1014", "iconStyle": "outline" },
"table": { "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }
}
}
</requirements>来源:Creative Toolkit Gallery · UI & Graphic (1 prompt analyzed, 995 likes, 139K views)
