325 lines
13 KiB
Markdown
325 lines
13 KiB
Markdown
# 渐变色彩设计
|
||
|
||
<cite>
|
||
**本文引用的文件**
|
||
- [index.html](file://index.html)
|
||
</cite>
|
||
|
||
## 目录
|
||
1. [简介](#简介)
|
||
2. [项目结构](#项目结构)
|
||
3. [核心组件](#核心组件)
|
||
4. [架构总览](#架构总览)
|
||
5. [详细组件分析](#详细组件分析)
|
||
6. [依赖关系分析](#依赖关系分析)
|
||
7. [性能考量](#性能考量)
|
||
8. [故障排查指南](#故障排查指南)
|
||
9. [结论](#结论)
|
||
10. [附录](#附录)
|
||
|
||
## 简介
|
||
本文件面向有维项目中的渐变色彩系统，系统性解析两种主要渐变色彩：紫色渐变与绿色渐变的设计原理、色彩搭配理论、视觉效果分析，并说明其在不同组件中的应用场景（登录页面背景、按钮、徽章、推荐标识等）。同时提供渐变角度与色彩过渡的计算方法、可访问性考虑、对比度要求、品牌调性适配建议，以及渐变色彩的扩展与自定义方法。
|
||
|
||
## 项目结构
|
||
有维项目采用单页应用（SPA）结构，渐变色彩集中于样式层，通过CSS变量统一管理，便于主题化与品牌一致性控制。渐变主要应用于登录页面背景、按钮、徽章、推荐标识、对话气泡等组件。
|
||
|
||
```mermaid
|
||
graph TB
|
||
A["index.html<br/>主页面"] --> B["CSS 变量区<br/>:root 定义"]
|
||
B --> C["渐变变量<br/>--gradient-1 / --gradient-2"]
|
||
C --> D["登录页面背景<br/>.login-page"]
|
||
C --> E["登录按钮<br/>.login-btn"]
|
||
C --> F["徽章/推荐标识<br/>.membership-card.recommended"]
|
||
C --> G["对话气泡<br/>.chat-message.user"]
|
||
C --> H["头像/徽标<br/>.user-avatar / .nav-logo-icon"]
|
||
C --> I["提示 Toast<br/>.industry-btn.active"]
|
||
```
|
||
|
||
图表来源
|
||
- [index.html:14-31](file://index.html#L14-L31)
|
||
- [index.html:167-172](file://index.html#L167-L172)
|
||
- [index.html:346-362](file://index.html#L346-L362)
|
||
- [index.html:733-750](file://index.html#L733-L750)
|
||
- [index.html:1291-1295](file://index.html#L1291-L1295)
|
||
- [index.html:511-522](file://index.html#L511-L522)
|
||
- [index.html:447-457](file://index.html#L447-L457)
|
||
- [index.html:2597](file://index.html#L2597)
|
||
|
||
章节来源
|
||
- [index.html:14-31](file://index.html#L14-L31)
|
||
- [index.html:167-172](file://index.html#L167-L172)
|
||
- [index.html:346-362](file://index.html#L346-L362)
|
||
- [index.html:733-750](file://index.html#L733-L750)
|
||
- [index.html:1291-1295](file://index.html#L1291-L1295)
|
||
- [index.html:511-522](file://index.html#L511-L522)
|
||
- [index.html:447-457](file://index.html#L447-L457)
|
||
- [index.html:2597](file://index.html#L2597)
|
||
|
||
## 核心组件
|
||
- 渐变变量定义
|
||
- 紫色渐变：linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%)
|
||
- 绿色渐变：linear-gradient(135deg, #10B981 0%, #059669 100%)
|
||
- 应用范围
|
||
- 登录页面背景、登录按钮、徽章/推荐标识、用户头像、导航徽标、对话气泡、提示 Toast 等
|
||
|
||
章节来源
|
||
- [index.html:25-26](file://index.html#L25-L26)
|
||
- [index.html:167-172](file://index.html#L167-L172)
|
||
- [index.html:346-362](file://index.html#L346-L362)
|
||
- [index.html:733-750](file://index.html#L733-L750)
|
||
- [index.html:511-522](file://index.html#L511-L522)
|
||
- [index.html:447-457](file://index.html#L447-L457)
|
||
- [index.html:1291-1295](file://index.html#L1291-L1295)
|
||
- [index.html:2597](file://index.html#L2597)
|
||
|
||
## 架构总览
|
||
渐变色彩系统通过CSS变量集中管理，组件通过var()引用，形成“变量定义—组件应用”的解耦架构。这种设计有利于：
|
||
- 主题化与品牌一致性
|
||
- 统一视觉语言
|
||
- 降低维护成本
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
Start(["开始"]) --> Define["定义渐变变量<br/>--gradient-1 / --gradient-2"]
|
||
Define --> Apply["组件应用<br/>var(--gradient-1) / var(--gradient-2)"]
|
||
Apply --> Visual["视觉呈现<br/>背景/按钮/徽章/头像等"]
|
||
Visual --> Feedback["用户反馈<br/>品牌感知/交互体验"]
|
||
Feedback --> Iterate["迭代优化<br/>对比度/可访问性/品牌适配"]
|
||
Iterate --> Define
|
||
```
|
||
|
||
图表来源
|
||
- [index.html:25-26](file://index.html#L25-L26)
|
||
- [index.html:167-172](file://index.html#L167-L172)
|
||
- [index.html:346-362](file://index.html#L346-L362)
|
||
- [index.html:733-750](file://index.html#L733-L750)
|
||
- [index.html:511-522](file://index.html#L511-L522)
|
||
- [index.html:447-457](file://index.html#L447-L457)
|
||
- [index.html:1291-1295](file://index.html#L1291-L1295)
|
||
- [index.html:2597](file://index.html#L2597)
|
||
|
||
## 详细组件分析
|
||
|
||
### 紫色渐变系统（linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%)）
|
||
- 设计原理
|
||
- 角度：135°，斜向渐变，营造动态与科技感
|
||
- 起止色：深紫蓝（#4F46E5）至近紫（#7C3AED），强调品牌科技属性与专业感
|
||
- 色彩搭配理论
|
||
- 饱和度与明度适中，避免过度刺眼；与白色文本组合具备高对比度
|
||
- 视觉效果
|
||
- 登录页面背景：营造沉浸式入口体验
|
||
- 登录按钮：突出操作意图，增强点击引导
|
||
- 推荐标识：强调“推荐”状态，提升转化
|
||
- 头像/徽标：统一品牌识别
|
||
- 对话气泡：区分用户消息，强化交互层次
|
||
- 应用场景
|
||
- 登录页面背景：.login-page
|
||
- 登录按钮：.login-btn
|
||
- 推荐标识：.membership-card.recommended::before
|
||
- 用户头像：.user-avatar
|
||
- 导航徽标：.nav-logo-icon
|
||
- 对话气泡（用户侧）：.chat-message.user
|
||
- 提示 Toast：.industry-btn.active（背景）
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant U as "用户"
|
||
participant L as "登录页面"
|
||
participant B as "登录按钮"
|
||
participant M as "推荐标识"
|
||
participant A as "用户头像"
|
||
participant N as "导航徽标"
|
||
participant T as "提示 Toast"
|
||
U->>L : 访问登录页
|
||
L-->>U : 展示紫色渐变背景
|
||
U->>B : 点击登录
|
||
B-->>U : 展示紫色渐变按钮
|
||
U->>M : 查看会员卡
|
||
M-->>U : 展示“推荐”徽章紫色渐变
|
||
U->>A : 查看个人资料
|
||
A-->>U : 展示紫色渐变头像
|
||
U->>N : 导航栏查看
|
||
N-->>U : 展示紫色渐变徽标
|
||
U->>T : 点击筛选
|
||
T-->>U : 展示紫色渐变提示
|
||
```
|
||
|
||
图表来源
|
||
- [index.html:167-172](file://index.html#L167-L172)
|
||
- [index.html:346-362](file://index.html#L346-L362)
|
||
- [index.html:733-750](file://index.html#L733-L750)
|
||
- [index.html:511-522](file://index.html#L511-L522)
|
||
- [index.html:447-457](file://index.html#L447-L457)
|
||
- [index.html:2597](file://index.html#L2597)
|
||
|
||
章节来源
|
||
- [index.html:25-26](file://index.html#L25-L26)
|
||
- [index.html:167-172](file://index.html#L167-L172)
|
||
- [index.html:346-362](file://index.html#L346-L362)
|
||
- [index.html:733-750](file://index.html#L733-L750)
|
||
- [index.html:511-522](file://index.html#L511-L522)
|
||
- [index.html:447-457](file://index.html#L447-L457)
|
||
- [index.html:1291-1295](file://index.html#L1291-L1295)
|
||
- [index.html:2597](file://index.html#L2597)
|
||
|
||
### 绿色渐变系统（linear-gradient(135deg, #10B981 0%, #059669 100%)）
|
||
- 设计原理
|
||
- 角度：135°，传达活力与成长感
|
||
- 起止色：中绿（#10B981）至深绿（#059669），体现健康、稳定与专业
|
||
- 色彩搭配理论
|
||
- 与浅色背景组合具备良好对比度；用于强调积极信息与完成态
|
||
- 视觉效果
|
||
- 用户头像：在对话场景中代表“用户侧”，与“机器人侧”形成清晰区分
|
||
- 统计图标/标签：传递积极、完成、成功等语义
|
||
- 应用场景
|
||
- 用户头像（对话场景）：.chat-message.user .message-avatar
|
||
- 统计图标（绿色）：.stat-icon.green
|
||
- 学习路径进度条（跨组件渐变）：.learning-path::before 使用线性渐变连接两端
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
P["绿色渐变变量"] --> U["用户头像对话<br/>.chat-message.user .message-avatar"]
|
||
P --> S["统计图标绿色<br/>.stat-icon.green"]
|
||
P --> L["学习路径进度条<br/>.learning-path::before"]
|
||
U --> V["视觉区分用户/机器人"]
|
||
S --> V
|
||
L --> V
|
||
```
|
||
|
||
图表来源
|
||
- [index.html:25-26](file://index.html#L25-L26)
|
||
- [index.html:1291-1295](file://index.html#L1291-L1295)
|
||
- [index.html:618-621](file://index.html#L618-L621)
|
||
- [index.html:893-895](file://index.html#L893-L895)
|
||
|
||
章节来源
|
||
- [index.html:25-26](file://index.html#L25-L26)
|
||
- [index.html:1291-1295](file://index.html#L1291-L1295)
|
||
- [index.html:618-621](file://index.html#L618-L621)
|
||
- [index.html:893-895](file://index.html#L893-L895)
|
||
|
||
### 渐变角度与色彩过渡计算
|
||
- 角度：135°
|
||
- 在CSS中表示为斜向渐变，从左上到右下，营造动态与现代感
|
||
- 色彩过渡：0% 到 100%
|
||
- 线性插值，确保平滑过渡，避免色带突兀
|
||
- 实现要点
|
||
- 使用CSS变量统一管理，便于主题化与品牌一致性
|
||
- 在高对比度场景下，注意文本颜色与背景的对比度满足可访问性标准
|
||
|
||
章节来源
|
||
- [index.html:25-26](file://index.html#L25-L26)
|
||
|
||
### 渐变在不同组件中的应用场景
|
||
- 登录页面背景：.login-page
|
||
- 登录按钮：.login-btn
|
||
- 徽章/推荐标识：.membership-card.recommended::before
|
||
- 用户头像：.user-avatar、.chat-message.user .message-avatar
|
||
- 导航徽标：.nav-logo-icon
|
||
- 对话气泡（用户侧）：.chat-message.user
|
||
- 提示 Toast：.industry-btn.active（背景）
|
||
|
||
章节来源
|
||
- [index.html:167-172](file://index.html#L167-L172)
|
||
- [index.html:346-362](file://index.html#L346-L362)
|
||
- [index.html:733-750](file://index.html#L733-L750)
|
||
- [index.html:511-522](file://index.html#L511-L522)
|
||
- [index.html:447-457](file://index.html#L447-L457)
|
||
- [index.html:1291-1295](file://index.html#L1291-L1295)
|
||
- [index.html:2597](file://index.html#L2597)
|
||
|
||
## 依赖关系分析
|
||
- 变量依赖
|
||
- 所有渐变组件依赖于:root中定义的--gradient-1与--gradient-2变量
|
||
- 组件耦合
|
||
- 渐变变量与组件类名解耦，通过var()引用，降低耦合度
|
||
- 可维护性
|
||
- 修改渐变参数只需更新变量，即可全局生效
|
||
|
||
```mermaid
|
||
graph LR
|
||
Var["CSS变量<br/>--gradient-1 / --gradient-2"] --> LoginBg["登录背景<br/>.login-page"]
|
||
Var --> Btn["登录按钮<br/>.login-btn"]
|
||
Var --> Badge["推荐标识<br/>.membership-card.recommended::before"]
|
||
Var --> Avatar["用户头像<br/>.user-avatar"]
|
||
Var --> NavIcon["导航徽标<br/>.nav-logo-icon"]
|
||
Var --> ChatUser["用户对话气泡<br/>.chat-message.user"]
|
||
Var --> Toast["提示 Toast<br/>.industry-btn.active"]
|
||
```
|
||
|
||
图表来源
|
||
- [index.html:25-26](file://index.html#L25-L26)
|
||
- [index.html:167-172](file://index.html#L167-L172)
|
||
- [index.html:346-362](file://index.html#L346-L362)
|
||
- [index.html:733-750](file://index.html#L733-L750)
|
||
- [index.html:511-522](file://index.html#L511-L522)
|
||
- [index.html:447-457](file://index.html#L447-L457)
|
||
- [index.html:1291-1295](file://index.html#L1291-L1295)
|
||
- [index.html:2597](file://index.html#L2597)
|
||
|
||
章节来源
|
||
- [index.html:25-26](file://index.html#L25-L26)
|
||
- [index.html:167-172](file://index.html#L167-L172)
|
||
- [index.html:346-362](file://index.html#L346-L362)
|
||
- [index.html:733-750](file://index.html#L733-L750)
|
||
- [index.html:511-522](file://index.html#L511-L522)
|
||
- [index.html:447-457](file://index.html#L447-L457)
|
||
- [index.html:1291-1295](file://index.html#L1291-L1295)
|
||
- [index.html:2597](file://index.html#L2597)
|
||
|
||
## 性能考量
|
||
- 渐变渲染性能
|
||
- CSS渐变由GPU加速，性能开销低，适合大面积背景与按钮
|
||
- 动画与过渡
|
||
- 渐变与hover/active等状态切换配合，需避免过度复杂的动画序列
|
||
- 可访问性
|
||
- 确保文本与渐变背景的对比度满足WCAG AA/AAA标准
|
||
- 提供高对比度模式与降敏选项（如系统级暗色模式）
|
||
|
||
## 故障排查指南
|
||
- 文本可读性问题
|
||
- 现象：在渐变背景上文字难以辨识
|
||
- 排查：检查对比度是否达标；必要时引入半透明遮罩或调整文本颜色
|
||
- 渐变不生效
|
||
- 现象：组件未显示预期渐变
|
||
- 排查：确认CSS变量是否正确声明与引用；检查类名拼写与作用域
|
||
- 颜色溢出/边界模糊
|
||
- 现象：渐变边缘出现不期望的颜色过渡
|
||
- 排查：检查渐变角度与起止色位置；必要时微调百分比或使用更精确的色彩空间
|
||
|
||
章节来源
|
||
- [index.html:25-26](file://index.html#L25-L26)
|
||
- [index.html:167-172](file://index.html#L167-L172)
|
||
- [index.html:346-362](file://index.html#L346-L362)
|
||
- [index.html:733-750](file://index.html#L733-L750)
|
||
- [index.html:511-522](file://index.html#L511-L522)
|
||
- [index.html:447-457](file://index.html#L447-L457)
|
||
- [index.html:1291-1295](file://index.html#L1291-L1295)
|
||
- [index.html:2597](file://index.html#L2597)
|
||
|
||
## 结论
|
||
有维项目的渐变色彩系统通过统一的CSS变量管理，实现了品牌一致性与视觉层次的平衡。紫色渐变强调科技与专业，绿色渐变传递活力与成长，二者在登录、按钮、徽章、头像、对话等关键组件中协同工作，形成清晰的品牌识别与良好的用户体验。建议在后续迭代中持续关注对比度与可访问性，并根据业务场景灵活扩展渐变参数与应用范围。
|
||
|
||
## 附录
|
||
|
||
### 渐变色彩扩展与自定义指南
|
||
- 新增渐变变量
|
||
- 在:root中新增--gradient-n变量，命名遵循语义化规则
|
||
- 组件应用
|
||
- 通过var(--gradient-n)在目标组件中应用
|
||
- 参数调整
|
||
- 角度：135°为默认，可根据品牌风格调整为45°/90°等
|
||
- 起止色：保持与品牌主色一致，确保对比度与可读性
|
||
- 品牌适配
|
||
- 不同业务模块可定义专属渐变，但需保持整体协调
|
||
- 提供高对比度版本与暗色模式适配
|
||
|
||
章节来源
|
||
- [index.html:25-26](file://index.html#L25-L26)
|
||
- [index.html:167-172](file://index.html#L167-L172)
|
||
- [index.html:346-362](file://index.html#L346-L362)
|
||
- [index.html:733-750](file://index.html#L733-L750)
|
||
- [index.html:511-522](file://index.html#L511-L522)
|
||
- [index.html:447-457](file://index.html#L447-L457)
|
||
- [index.html:1291-1295](file://index.html#L1291-L1295)
|
||
- [index.html:2597](file://index.html#L2597) |