你是一位经验丰富的 UI 设计师，擅长现代极简主义设计、阴影、玻璃质感和柔和色彩。你的角色是根据以下要求创建一个专业、精美且可交付的界面原型： <requirements> #…

你是一位经验丰富的 UI 设计师，擅长现代极简主义设计、阴影、玻璃质感和柔和色彩。你的角色是根据以下要求创建一个专业、精美且可交付的界面原型： <requirements> ## 1. 整体风格与视觉语言 该界面呈现为一个高端、现代的金融科技/加密货币交易仪表盘，采用深色主题。视觉语言结合了**柔和拟态 (soft neumorphism)** 和 **奢华 Web3 美学**。 核心特征： - 温暖的金色/橙色强调高光 - 单色调配色方案，带有极简效果和阴影 - 基于卡片的布局，具有深度感和微妙的背景 - 极简边框，通过阴影或浅色背景进行区域划分 目标感知： - 安全 - 专业 - 高端/机构级 - 针对资深交易者优化 --- ## 2. 布局结构 ### 全局布局 - 桌面端优先的仪表盘 - 输出比例：3:2 - 三个主要区域： 1. 顶部导航栏（水平） 2. 左侧侧边栏导航（垂直） 3. 主内容区域（卡片的多列网格） 间距宽敞，优先考虑清晰度和视觉呼吸感。 --- ## 3. 顶部导航栏 - 高度：72px - 左侧： - 品牌 Logo 文字 "Mevolut" - 风格化的 "M" - 金色/橙色强调 - 中间： - 导航链接：Dashboard（仪表盘）, Security（安全）, Referral（推荐）, Trading Fees（交易费）, API management（API 管理） - 右侧： - Order（订单）链接 - 主要 CTA： “Deposit”（存款，金色胶囊按钮） - 用户头像（圆形） - 主题切换（月亮图标） 排版： - 简洁的无衬线字体 - 中等字重 - 白色主文本，静音灰色的非激活状态 --- ## 4. 左侧侧边栏导航 - 宽度：240px - 背景：近黑色 - 带有图标的垂直导航项： - Dashboard（激活状态） - Security - Referral - Trading Fees - API management - 底部对齐： - Settings（设置） 激活项： - 微妙的背景高光 - 轻微的背景色调 - 圆角容器 图标： - 轮廓风格 - 激活状态下为金色强调 --- ## 5. 主内容区域 ### 5.1 用户概览卡片 - 顶部的大圆角卡片 - 左侧： - 圆形头像 - 问候语（“Hello…”） - 用户名 - 内联信息块： - UID（复制图标） - 身份验证状态 - 安全等级 - 时区 - 最后登录时间戳 - 右侧： - “Hide info”（隐藏信息）切换开关 风格： - 微妙的内阴影 ### 5.2 存款/购买卡片 - 中型卡片 - 解释存款选项的标题文本 - 两行操作行： - Deposit（美元或加密货币） - Buy stocks（本地货币） - 每行包含： - 图标 - 标签 - 箭头操作按钮（金色强调） ### 5.3 总资产卡片 - 显示美元余额和美元等值 - 背景中有巨大的、淡出的美元符号水印 - 操作标签页： - Buy stocks - Deposit - Withdraw - 数值较大 ### 5.4 VIP 等级卡片 - 显示当前 VIP 等级 - 现货和期货费率 - 代币持仓进度条 - “View more”（查看更多）链接 进度条： - 圆角 - 深色背景轨道 ### 5.5 当前持仓表格 - 包含表格布局的卡片 - 列： - Coin（图标 + 名称） - Price（价格） - 24h Change（24小时涨跌幅） - 4h Trend（4小时趋势，迷你走势图） - Actions（操作：存款、取款、交易） 迷你走势图： - 正向趋势为绿色 - 负向趋势为红色 悬停： - 每行有微妙的背景高光 ### 5.6 联盟计划卡片 - 促销卡片 - 金币插图 - 简短描述和 CTA 按钮（“Apply now”） ### 5.7 信息/新闻卡片 - 公告的垂直列表 - 标题 + 时间戳 - 顶部有“View more”链接 --- ## 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 } }, "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>