点击图片查看大图

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)