207 lines
5.1 KiB
Markdown
207 lines
5.1 KiB
Markdown
# 🎨 渐变设计指南
|
||
|
||
## 概述
|
||
|
||
我为你的分销中心设计了一套完整的渐变主题系统，包含多种美观的渐变方案和统一的设计语言。
|
||
|
||
## 🌈 渐变主题方案
|
||
|
||
### 1. 预设主题
|
||
|
||
| 主题名称 | 颜色搭配 | 适用场景 | 视觉效果 |
|
||
|---------|---------|---------|---------|
|
||
| **ocean** | 蓝紫渐变 | 科技、专业 | 🌊 海洋般的深邃感 |
|
||
| **sunset** | 橙红渐变 | 活力、热情 | 🌅 日落般的温暖感 |
|
||
| **fresh** | 蓝绿渐变 | 清新、活力 | 🍃 清新自然的感觉 |
|
||
| **nature** | 绿青渐变 | 生机、成长 | 🌱 生机勃勃的活力 |
|
||
| **warm** | 金粉渐变 | 温馨、友好 | ☀️ 温暖亲和的感觉 |
|
||
| **elegant** | 淡彩渐变 | 优雅、精致 | 💎 优雅精致的品味 |
|
||
| **royal** | 皇家紫蓝 | 高贵、权威 | 👑 高贵典雅的气质 |
|
||
| **fire** | 火焰粉红 | 激情、浪漫 | 🔥 激情浪漫的氛围 |
|
||
|
||
### 2. 业务场景渐变
|
||
|
||
```typescript
|
||
// 分销商相关
|
||
dealer: {
|
||
header: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||
card: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
|
||
success: 'linear-gradient(135deg, #10b981 0%, #34d399 100%)',
|
||
warning: 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)',
|
||
danger: 'linear-gradient(135deg, #ef4444 0%, #f87171 100%)',
|
||
info: 'linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%)'
|
||
}
|
||
|
||
// 金额相关
|
||
money: {
|
||
available: 'linear-gradient(135deg, #10b981 0%, #059669 100%)', // 可提现 - 绿色
|
||
frozen: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)', // 冻结中 - 蓝色
|
||
total: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)' // 累计 - 橙色
|
||
}
|
||
```
|
||
|
||
## 🎯 设计特点
|
||
|
||
### 1. 视觉层次
|
||
- **主背景**：动态渐变，根据用户ID自动选择
|
||
- **卡片背景**：微妙的白色渐变，增加层次感
|
||
- **装饰元素**：半透明圆形，增加空间感
|
||
|
||
### 2. 色彩心理学
|
||
- **蓝色系**：信任、专业、稳定
|
||
- **绿色系**：成长、财富、安全
|
||
- **橙色系**：活力、温暖、友好
|
||
- **紫色系**：高贵、创新、神秘
|
||
|
||
### 3. 交互反馈
|
||
- **悬停效果**：轻微的亮度变化
|
||
- **选中状态**：边框高亮
|
||
- **加载状态**：渐变动画
|
||
|
||
## 🛠️ 使用方法
|
||
|
||
### 1. 基础使用
|
||
|
||
```tsx
|
||
import { businessGradients, cardGradients } from '@/styles/gradients'
|
||
|
||
// 使用预设的业务渐变
|
||
<View style={{ background: businessGradients.dealer.header }}>
|
||
内容
|
||
</View>
|
||
|
||
// 使用卡片渐变
|
||
<View style={cardGradients.elevated}>
|
||
卡片内容
|
||
</View>
|
||
```
|
||
|
||
### 2. 动态主题
|
||
|
||
```tsx
|
||
import { gradientUtils } from '@/styles/gradients'
|
||
|
||
// 根据用户ID获取主题
|
||
const userTheme = gradientUtils.getThemeByUserId(userId)
|
||
|
||
<View style={{ background: userTheme.background }}>
|
||
个性化内容
|
||
</View>
|
||
```
|
||
|
||
### 3. 自定义渐变
|
||
|
||
```tsx
|
||
import { gradientUtils } from '@/styles/gradients'
|
||
|
||
// 创建自定义渐变
|
||
const customGradient = gradientUtils.createGradient('#ff6b6b', '#4ecdc4', '45deg')
|
||
|
||
<View style={{ background: customGradient }}>
|
||
自定义内容
|
||
</View>
|
||
```
|
||
|
||
## 🎨 设计原则
|
||
|
||
### 1. 一致性
|
||
- 所有页面使用统一的渐变系统
|
||
- 相同功能使用相同的颜色语义
|
||
- 保持视觉风格的连贯性
|
||
|
||
### 2. 可访问性
|
||
- 确保文字与背景有足够的对比度
|
||
- 支持深色模式适配
|
||
- 考虑色盲用户的体验
|
||
|
||
### 3. 性能优化
|
||
- 使用 CSS 渐变而非图片
|
||
- 避免过度复杂的渐变效果
|
||
- 合理使用动画和过渡
|
||
|
||
## 📱 移动端适配
|
||
|
||
### 1. 响应式设计
|
||
```css
|
||
/* 小屏幕优化 */
|
||
@media (max-width: 768px) {
|
||
.gradient-header {
|
||
background-size: 200% 200%;
|
||
animation: gradientShift 8s ease infinite;
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 性能考虑
|
||
- 在低端设备上简化渐变效果
|
||
- 使用 `will-change` 属性优化动画
|
||
- 避免在滚动时使用复杂渐变
|
||
|
||
## 🔧 高级功能
|
||
|
||
### 1. 主题切换器
|
||
```tsx
|
||
import GradientThemeSelector from '@/components/GradientThemeSelector'
|
||
|
||
<GradientThemeSelector
|
||
visible={showThemeSelector}
|
||
onClose={() => setShowThemeSelector(false)}
|
||
onSelect={handleThemeSelect}
|
||
currentTheme={currentTheme}
|
||
/>
|
||
```
|
||
|
||
### 2. 动画渐变
|
||
```tsx
|
||
import { animatedGradients } from '@/styles/gradients'
|
||
|
||
<View style={animatedGradients.flowing}>
|
||
动态流动的渐变背景
|
||
</View>
|
||
```
|
||
|
||
### 3. 玻璃态效果
|
||
```tsx
|
||
import { cardGradients } from '@/styles/gradients'
|
||
|
||
<View style={cardGradients.glass}>
|
||
毛玻璃效果卡片
|
||
</View>
|
||
```
|
||
|
||
## 🎯 最佳实践
|
||
|
||
### 1. 渐变方向
|
||
- **135度**：最常用，自然舒适
|
||
- **90度**：垂直渐变，适合长条内容
|
||
- **45度**：对角渐变，动感活泼
|
||
|
||
### 2. 颜色选择
|
||
- 选择色相相近的颜色
|
||
- 避免过于强烈的对比
|
||
- 考虑品牌色的融入
|
||
|
||
### 3. 层次搭配
|
||
- 主背景：鲜艳渐变
|
||
- 卡片背景：淡雅渐变
|
||
- 文字：纯色或微渐变
|
||
|
||
## 🚀 未来扩展
|
||
|
||
### 1. 主题商店
|
||
- 更多预设主题
|
||
- 用户自定义主题
|
||
- 主题分享功能
|
||
|
||
### 2. 智能推荐
|
||
- 基于使用习惯推荐主题
|
||
- 根据时间自动切换主题
|
||
- 情境感知的主题选择
|
||
|
||
### 3. 高级效果
|
||
- 3D 渐变效果
|
||
- 粒子背景
|
||
- 交互式渐变
|
||
|
||
这套渐变系统不仅美观，还具有很强的扩展性和可维护性，为你的应用提供了专业级的视觉体验！
|