你是一位擁抱現代極簡設計、陰影、玻璃擬態與柔和色彩的資深UI設計師。 你的任務是根據以下需求，打造一款專業、美觀、可上線交付的模型： <requirements> ## 1. 整體風格與視覺語言 這個介面採用暗色主題，代表高級、現代的金融科技/加密貨幣交易儀表板。 視覺語言融合**柔和擬物風格**與**奢華Web3美學**。 核心特徵： - 暖金色/橙色強調點綴 - 單色調配色搭配極簡效果與陰影 - 以卡片為基礎的佈局，搭配深度與細膩背景 - 極簡邊框，以陰影或淺色背景分隔 目標感知： - 安全 - 專業 - 高端/機構級 - 專為經驗豐富的交易者優化 --- ## 2. 佈局結構 ### 全域佈局 - 優先桌面端的儀表板 - 輸出比例：3:2 - 三個主要區域： 1. 頂部導航列（水平） 2. 左側邊欄導航（垂直） 3. 主要內容區域（多欄式卡片網格） 間距寬敞，優先確保清晰度與視覺呼吸感。 --- ## 3. 頂部導航列 - 高度：72px - 左側： - 品牌標誌文字"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. 效果與互動 - 全面採用圓角（小尺寸） # Design tokens: { // Global theme definition "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // Layout measurements and structure "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Color system "colors": { "background": "#0B0D10", // Mn app background "primaryAccent": "#F5A623", // Gold/orange highlight "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Typography scale "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 } }, // Core UI components "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" } }, // Icon system "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
