高级金融科技加密货币交易仪表盘UI模型

你是一位经验丰富的UI设计师，采用现代、简约的设计，包括阴影、玻璃效果和柔和色彩。 你的角色是根据以下要求创建一个专业、美观、可交付的模型： <requirements> ## 1. 整体风格与视觉语言 该界面代表一个高级、现代的金融科技/加密货币交易仪表板，使用深色主题。 视觉语言结合了**柔和新拟物风格**和**奢华Web3美学**。 核心特征： - 暖金色/橙色强调色 - 单色配色方案，具有简约效果和阴影 - 基于卡片的布局，具有深度和微妙的背景 - 最小边框，通过阴影或浅色背景进行分隔 目标感知： - 安全 - 专业 - 高端/机构级 - 为经验丰富的交易者优化 --- ## 2. 布局结构 ### 全局布局 - 桌面优先仪表板 - 输出比例：3:2 - 三个主要区域： 1. 顶部导航栏（水平） 2. 左侧边栏导航（垂直） 3. 主要内容区域（多列卡片网格） 间距宽敞，优先考虑清晰度和视觉呼吸空间。 --- ## 3. 顶部导航栏 - 高度：72px - 左侧： - 品牌标志文本“Mevolut” - 风格化的“M” - 金色/橙色强调色 - 中间： - 导航链接：仪表板、安全、推荐、交易费用、API管理 - 右侧： - 订单链接 - 主要CTA：“存款”（金色药丸按钮） - 用户头像（圆形） - 主题切换（月亮图标） 字体： - 简洁的无衬线字体 - 中等字重 - 白色主要文本，灰色非活动状态 --- ## 4. 左侧边栏导航 - 宽度：240px - 背景：近黑色 - 带图标的垂直导航项： - 仪表板（活动） - 安全 - 推荐 - 交易费用 - API管理 - 底部对齐： - 设置 活动项： - 微妙的背景高亮 - 轻微的背景色调 - 圆角容器 图标： - 轮廓样式 - 活动状态金色强调色 --- ## 5. 主要内容区域 ### 5.1 用户概览卡片 - 顶部大型圆角卡片 - 左侧： - 圆形头像 - 问候文本（“你好…”） - 用户名 - 内联信息块： - UID（复制图标） - 身份验证状态 - 安全级别 - 时区 - 上次登录时间戳 - 右侧： - “隐藏信息”切换 样式： - 微妙的内阴影 --- ### 5.2 存款/购买卡片 - 中型卡片 - 标题文本说明存款选项 - 两个操作行： - 存款（美元或加密货币） - 购买股票（本地货币） - 每行： - 图标 - 标签 - 箭头操作按钮（金色强调色） --- ### 5.3 总资产卡片 - 显示美元余额和美元等值 - 背景中大型淡化的美元符号水印 - 操作选项卡： - 购买股票 - 存款 - 提现 - 数值大 --- ### 5.4 VIP等级卡片 - 显示当前VIP等级 - 现货和期货费率 - 代币持有量的进度条 - “查看更多”链接 进度条： - 圆角 - 深色背景轨道 --- ### 5.5 当前持仓表格 - 包含表格布局的卡片 - 列： - 币种（图标+名称） - 价格 - 24小时涨跌 - 4小时趋势（迷你走势图） - 操作（存款、提现、交易） 迷你走势图： - 绿色表示正向趋势 - 红色表示负向趋势 悬停： - 每行微妙的背景高亮 --- ### 5.6 联盟计划卡片 - 促销卡片 - 金币插图 - 简短描述和CTA按钮（“立即申请”） --- ### 5.7 信息/新闻卡片 - 公告垂直列表 - 标题+时间戳 - 顶部“查看更多”链接 --- ## 6. 配色方案 - 主要背景：深炭黑/黑色 - 卡片表面：稍亮 - 强调色：暖金色 - 文本层次： - 白色（主要） - 灰色（次要） - 深灰色（禁用） - 状态颜色： - 绿色表示正向 - 红色表示负向 --- ## 7. 效果与交互 - 各处圆角（sm） # 设计令牌： { // 全局主题定义 "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // 布局测量和结构 "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // 颜色系统 "colors": { "background": "#0B0D10", // 主应用背景 "primaryAccent": "#F5A623", // 金色/橙色高亮 "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // 字体比例 "typography": { "fontFamily": "SF Pro, system-ui, sans-serif", "weights": { "heading": 600, "body": 400, "numeric": 500 }, "sizes": { "h1": 24, "h2": 20, "h3": 16, "body": 14, "caption": 12 } }, // 核心UI组件 "components": { "card": { "borderRadius": 16, "shadow": "0 20px 40px rgba(0,0,0,0.4)", "border": "none", "background": "#14171C", }, "button": { "primary": { "textColor": "#0B0D10", "borderRadius": 999, }, "secondary": { "background": "transparent", "textColor": "#F5A623" } }, "sidebar": { "background": "#0E1014", "itemRadius": 12, "iconStyle": "outline" }, "table": { "rowHeight": 56, "divider": "subtle", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // 图标系统 "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>