你是一位经验丰富的UI设计师，擅长现代极简设计、阴影、毛玻璃效果和柔和配色。 你的任务是根据以下要求创建一款专业、美观、可交付的模型： <requirements> ## 1. 整体风格与视觉语言 该界面是一款采用暗色主题的高端现代金融科技/加密货币交易仪表盘。视觉语言融合**柔和新拟态风格**与**奢华Web3美学**。 核心特征： - 暖金/橙色点缀高亮 - 单色配色方案，搭配极简效果和阴影 - 基于卡片的布局，带有深度和细腻背景 - 极简边框，通过阴影或浅色背景实现分隔 目标感知： - 安全 - 专业 - 高端/机构级 - 专为资深交易者优化 --- ## 2. 布局结构 ### 全局布局 - 优先适配桌面端的仪表盘 - 输出比例：3:2 - 三个主要区域： 1. 顶部导航栏（水平） 2. 左侧边栏导航（垂直） 3. 主内容区（多列卡片网格） 间距宽裕，优先保障清晰度和视觉呼吸感。 --- ## 3. 顶部导航栏 - 高度：72px - 左侧： - 品牌logo文字"Mevolut" - 风格化字母"M" - 金/橙色点缀 - 中间： - 导航链接：仪表盘、安全、推荐、交易手续费、API管理 - 右侧： - 订单链接 - 主要行动号召按钮：“存款”（金色胶囊按钮） - 用户头像（圆形） - 主题切换按钮（月亮图标） 字体： - 简洁无衬线字体 - 中等字重 - 主文本为白色，非激活状态为柔和灰色 --- ## 4. 左侧边栏导航 - 宽度：240px - 背景：近黑色 - 带图标的垂直导航项： - 仪表盘（激活状态） - 安全 - 推荐 - 交易手续费 - API管理 - 底部对齐： - 设置 激活项： - 细腻背景高亮 - 轻微背景着色 - 圆角容器 图标： - 轮廓风格 - 激活状态带金色点缀 --- ## 5. 主内容区 ### 5.1 用户概览卡片 - 顶部的大圆角卡片 - 左侧： - 圆形头像 - 问候语（“你好…”） - 用户名 - 内联信息块： - UID（复制图标） - 身份验证状态 - 安全等级 - 时区 - 最后登录时间戳 - 右侧： - “隐藏信息”切换开关 样式： - 细腻内阴影 --- ### 5.2 存款/购买卡片 - 中等尺寸卡片 - 说明存款选项的标题文本 - 两行操作项： - 存款（美元或加密货币） - 购买股票（本地货币） - 每行包含： - 图标 - 标签 - 箭头操作按钮（金色点缀） --- ### 5.3 总资产卡片 - 显示美元余额和美元等值金额 - 背景有大尺寸淡色美元符号水印 - 操作标签页： - 购买股票 - 存款 - 提现 - 数值为大号字体 --- ### 5.4 VIP等级卡片 - 显示当前VIP等级 - 现货和期货手续费率 - 代币持仓进度条 - “查看更多”链接 进度条： - 圆角 - 深色背景轨道 --- ### 5.5 当前持仓表 - 包含表格布局的卡片 - 列： - 币种（图标+名称） - 价格 - 24小时涨跌 - 4小时趋势（迷你图） - 操作（存款、提现、交易） 迷你图： - 上涨趋势为绿色 - 下跌趋势为红色 悬停效果： - 每行有细腻背景高亮 --- ### 5.6 联盟计划卡片 - 推广卡片 - 金币插图 - 简短描述和行动号召按钮（“立即申请”） --- ### 5.7 资讯/新闻卡片 - 公告垂直列表 - 标题+时间戳 - 顶部有“查看更多”链接 --- ## 6. 配色方案 - 主背景：深炭色/黑色 - 卡片表面：稍浅的色调 - 点缀色：暖金色 - 文本层级： - 白色（主文本） - 柔和灰色（次要文本） - 深灰色（禁用状态） - 状态色： - 绿色代表上涨/正向 - 红色代表下跌/负向 --- ## 7. 效果与交互 - 全局使用圆角（小尺寸） # 设计参数： { // 全局主题定义 "theme": { "mode": "dark", "style": [ "柔和新拟态", "高端金融科技" ] }, // 布局尺寸与结构 "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>
