83 lines
3.8 KiB
Markdown
83 lines
3.8 KiB
Markdown
# NAC XIC Token 预售页面设计方案
|
||
|
||
## 设计方向探索
|
||
|
||
<response>
|
||
<text>
|
||
**方案 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
|
||
</text>
|
||
<probability>0.08</probability>
|
||
</response>
|
||
|
||
<response>
|
||
<text>
|
||
**方案 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
|
||
</text>
|
||
<probability>0.05</probability>
|
||
</response>
|
||
|
||
<response>
|
||
<text>
|
||
**方案 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
|
||
</text>
|
||
<probability>0.07</probability>
|
||
</response>
|
||
|
||
---
|
||
|
||
## 选定方案：方案 A（暗黑科技 · 量子金融）
|
||
|
||
**理由**：
|
||
- 预售页面的核心目标是建立信任感和紧迫感，暗黑科技风格在 Web3 预售场景中最具说服力
|
||
- 琥珀金 + 量子蓝的配色组合在深色背景上对比度极高，关键数据一目了然
|
||
- 非对称双栏布局将"项目信息"和"购买操作"清晰分离，降低用户认知负担
|
||
- JetBrains Mono 字体用于数字展示，强化技术可信度
|