94 lines
2.6 KiB
Markdown
94 lines
2.6 KiB
Markdown
|
# 样式设计提示词
|
||
|
|
|
||
|
|
## 整体设计风格
|
||
|
|
创建一个现代化的企业级管理系统界面，采用简洁清晰的设计风格，注重用户体验和视觉层次。
|
||
|
|
|
||
|
|
## 颜色方案
|
||
|
|
|
||
|
|
### 主色调
|
||
|
|
- **头部背景色**: `rgb(9, 84, 43)` - 深绿色，体现专业稳重
|
||
|
|
- **页面背景色**: `#f5f5f5` - 浅灰色，减少视觉疲劳
|
||
|
|
|
||
|
|
### 功能色彩
|
||
|
|
- **主要操作色**: `#1890ff` - 蓝色系
|
||
|
|
- 悬停状态: `#40a9ff`
|
||
|
|
- 选中状态: `#e6f7ff`（背景）
|
||
|
|
- **成功色**: `#52c41a` - 绿色
|
||
|
|
- 悬停状态: `#73d13d`
|
||
|
|
- **警告色**: `#faad14` - 橙黄色
|
||
|
|
- 悬停状态: `#ffc53d`
|
||
|
|
|
||
|
|
### 辅助色彩
|
||
|
|
- **表单背景**: `#fafafa` - 极浅灰
|
||
|
|
- **边框色**: `#d9d9d9`、`#e8e8e8`
|
||
|
|
- **文本色**: `#333` - 深灰色
|
||
|
|
- **白色**: `#fff` - 纯白色用于卡片背景
|
||
|
|
|
||
|
|
## 布局特点
|
||
|
|
|
||
|
|
### 页面结构
|
||
|
|
- 全屏布局：`width: 100%`, `height: 100vh`
|
||
|
|
- 顶部固定头部区域
|
||
|
|
- 主内容区域可滚动：`overflow-y: auto`
|
||
|
|
|
||
|
|
### 间距系统
|
||
|
|
- 大间距: `30px` (页面边距、区块间距)
|
||
|
|
- 中间距: `20px` (表单元素间距)
|
||
|
|
- 小间距: `10px`、`5px` (按钮、图标间距)
|
||
|
|
|
||
|
|
## 组件设计
|
||
|
|
|
||
|
|
### 按钮样式
|
||
|
|
```css
|
||
|
|
.btn {
|
||
|
|
padding: 10px 20px;
|
||
|
|
border-radius: 5px;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 5px;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### 表单元素
|
||
|
|
- **输入框**: 圆角 `4px`，边框 `#d9d9d9`
|
||
|
|
- **聚焦效果**: 蓝色边框 + 阴影效果
|
||
|
|
- **标签**: 字重 `500`，深灰色 `#333`
|
||
|
|
|
||
|
|
## 交互效果
|
||
|
|
|
||
|
|
### 动画过渡
|
||
|
|
- **通用过渡**: `transition: all 0.3s ease`
|
||
|
|
- **按钮悬停**: 向上移动 `translateY(-2px)`
|
||
|
|
- **展开动画**: 淡入效果 `fadeIn 0.3s ease-in-out`
|
||
|
|
|
||
|
|
### 视觉反馈
|
||
|
|
- **悬停状态**: 颜色变化 + 轻微位移
|
||
|
|
- **选中状态**: 背景色变化 + 边框高亮
|
||
|
|
- **加载状态**: 渐变动画效果
|
||
|
|
|
||
|
|
## 响应式设计
|
||
|
|
- **移动端适配**: `@media (max-width: 768px)`
|
||
|
|
- **布局调整**: 头部垂直排列，表单单列布局
|
||
|
|
- **间距优化**: 减少边距和字体大小
|
||
|
|
|
||
|
|
## 字体系统
|
||
|
|
```css
|
||
|
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
|
||
|
|
"Hiragino Sans GB", "Microsoft YaHei", 微软雅黑,
|
||
|
|
Arial, sans-serif;
|
||
|
|
```
|
||
|
|
|
||
|
|
## 设计原则
|
||
|
|
1. **一致性**: 统一的颜色、字体、间距系统
|
||
|
|
2. **层次性**: 清晰的信息层级和视觉引导
|
||
|
|
3. **易用性**: 直观的操作反馈和状态提示
|
||
|
|
4. **专业性**: 企业级应用的稳重可靠感
|
||
|
|
5. **响应性**: 适配不同设备和屏幕尺寸
|
||
|
|
|
||
|
|
## 关键特色
|
||
|
|
- 深绿色头部体现企业稳重感
|
||
|
|
- 蓝色系交互元素提供现代感
|
||
|
|
- 细腻的阴影和过渡效果
|