点击图片查看大图
UI 与界面
高端暗色系数据仪表板 UI
dashboardfintechdark-themeuicrypto
暗色系高端数据仪表板 UI 模板,适用于金融/加密/数据分析类产品。基于 Design Token JSON 参数化结构,支持品牌色、布局、组件一键替换。
Use When · 何时使用
需要生成暗色系高端数据仪表板、金融/加密交易后台、数据分析平台 UI 时使用。支持替换品牌名、强调色、行业类型、导航菜单和卡片内容。
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)
