# NAC XIC Token 预售页面设计方案
## 设计方向探索
**方案 A：暗黑科技 · 量子金融**
- **Design Movement**: Cyberpunk Fintech / Dark Luxury
- **Core Principles**:
1. 深黑底色配金色/琥珀色高光，营造高价值感
2. 数据可视化优先，进度条、倒计时、实时数据流
3. 极简功能区块，每个操作区域清晰独立
4. 微粒子动效背景，体现区块链技术感
- **Color Philosophy**: 背景 `#0a0a0f`（极深蓝黑），主色 `#f0b429`（琥珀金），强调 `#00d4ff`（量子蓝），成功 `#00e676`（绿）
- **Layout Paradigm**: 左侧固定信息面板（项目信息+进度），右侧购买操作区，非对称双栏布局
- **Signature Elements**:
1. 扫描线动效（CSS animation）
2. 数字滚动计数器（已售/目标）
3. 链式连接图标（BSC/ETH/TRC20 网络选择器）
- **Interaction Philosophy**: 每次点击都有涟漪效果，状态变化有流畅过渡
- **Animation**: 背景粒子漂浮，数字实时滚动，进度条填充动画，按钮悬停发光
- **Typography System**: 标题 Space Grotesk Bold，数字 JetBrains Mono，正文 Inter Regular
0.08
**方案 B：极简白金 · 机构级**
- **Design Movement**: Swiss Modernism / Institutional Finance
- **Core Principles**:
1. 大量留白，内容密度低，信任感强
2. 严格网格系统，精确对齐
3. 单色调为主，用尺寸和重量建立层次
4. 无装饰性元素，功能即美学
- **Color Philosophy**: 背景纯白，文字深炭灰 `#1a1a2e`，强调色 `#0066cc`（机构蓝），边框 `#e5e7eb`
- **Layout Paradigm**: 居中单栏，宽屏下分为三区（信息/购买/说明），极度克制
- **Signature Elements**:
1. 细线分隔符
2. 数据表格展示代币经济
3. 无边框卡片，仅靠阴影区分层次
- **Interaction Philosophy**: 无动效，状态变化即时，强调可靠性
- **Animation**: 仅有必要的加载状态，无装饰性动画
- **Typography System**: 标题 Playfair Display，正文 Source Sans Pro，数字 Roboto Mono
0.05
**方案 C：深海科技 · 宇宙级**
- **Design Movement**: Deep Space / Web3 Premium Dark
- **Core Principles**:
1. 深海蓝黑渐变背景，星云质感
2. 玻璃拟态卡片（glassmorphism），半透明磨砂
3. 紫蓝渐变高光，体现 Web3 未来感
4. 多网络支持可视化（链图标+网络切换动画）
- **Color Philosophy**: 背景 `#050b1a`（深宇宙蓝），玻璃卡片 `rgba(255,255,255,0.05)`，主色渐变 `#6366f1→#8b5cf6`（靛紫），金色点缀 `#fbbf24`
- **Layout Paradigm**: 全屏英雄区（背景星云+核心数据），下方功能区三栏网格，购买区居中突出
- **Signature Elements**:
1. 星云粒子背景（CSS + SVG filter）
2. 玻璃卡片购买面板
3. 网络切换器（BSC/ETH/TRC20 标签页）
- **Interaction Philosophy**: 悬停时卡片上浮，选择网络时平滑切换，购买按钮有脉冲动效
- **Animation**: 背景星云缓慢旋转，卡片入场从下淡入，进度条动态填充
- **Typography System**: 标题 Syne ExtraBold，副标题 Outfit Medium，正文 DM Sans，数字 Space Mono
0.07
---
## 选定方案：方案 A（暗黑科技 · 量子金融）
**理由**：
- 预售页面的核心目标是建立信任感和紧迫感，暗黑科技风格在 Web3 预售场景中最具说服力
- 琥珀金 + 量子蓝的配色组合在深色背景上对比度极高，关键数据一目了然
- 非对称双栏布局将"项目信息"和"购买操作"清晰分离，降低用户认知负担
- JetBrains Mono 字体用于数字展示，强化技术可信度