component-analysis-guide.md 9.5 KB
UI组件分析指南
组件分类体系
1. 基础组件（Basic Components）
1.1 按钮（Button）
类型：
- 主按钮（Primary Button）：最重要的操作
- 次按钮（Secondary Button）：次要操作
- 文字按钮（Text Button）：轻量级操作
- 图标按钮（Icon Button）：仅图标
- 浮动按钮（FAB）：悬浮操作按钮
分析要点：
- 尺寸：高度、内边距、最小宽度
- 圆角：border-radius值
- 颜色：背景色、文字色、边框色
- 状态：默认、悬停、点击、禁用、加载
- 阴影：box-shadow值
- 字体：字号、字重
示例描述：
### 主按钮
- 尺寸：高度40px，左右内边距24px
- 圆角：4px
- 背景色：#1890FF
- 文字：14px，字重500，白色
- 悬停：背景色变为#40A9FF
- 阴影：0 2px 4px rgba(0,0,0,0.1)
1.2 输入框（Input）
类型：
- 文本输入框（Text Input）
- 密码输入框（Password Input）
- 数字输入框（Number Input）
- 搜索框（Search Input）
- 文本域（Textarea）
分析要点：
- 尺寸：高度、宽度、内边距
- 边框：粗细、颜色、圆角
- 占位符：颜色、字号
- 前缀/后缀：图标、文字
- 状态：默认、聚焦、错误、禁用
- 标签：位置、样式
1.3 选择器（Selector）
类型：
- 下拉选择（Select/Dropdown）
- 单选框（Radio）
- 复选框（Checkbox）
- 开关（Switch）
- 滑块（Slider）
分析要点：
- 触发器样式
- 下拉面板样式
- 选项样式（默认、悬停、选中）
- 多选标签样式
- 搜索功能
2. 展示组件（Display Components）
2.1 卡片（Card）
分析要点：
- 尺寸：宽度、高度、内边距
- 边框：有无、颜色、粗细
- 圆角：border-radius
- 阴影：box-shadow
- 结构：头部、内容、底部
- 悬停效果：阴影变化、位移
示例结构：
┌─────────────────────┐
│ Card Header │
├─────────────────────┤
│ │
│ Card Content │
│ │
├─────────────────────┤
│ Card Footer │
└─────────────────────┘
2.2 列表（List）
类型：
- 基础列表（Basic List）
- 带图标列表（Icon List）
- 带头像列表（Avatar List）
- 可操作列表（Action List）
分析要点：
- 列表项高度
- 分隔线样式
- 图标/头像尺寸和位置
- 文字层级（标题、描述）
- 右侧操作区
- 悬停效果
2.3 表格（Table）
分析要点：
- 表头样式：背景色、字重、对齐
- 单元格：高度、内边距、对齐
- 边框：有无、颜色
- 斑马纹：奇偶行颜色
- 悬停效果
- 排序图标
- 分页器样式
2.4 标签（Tag/Badge）
分析要点：
- 尺寸：高度、内边距
- 圆角：完全圆角或小圆角
- 颜色：背景色、文字色
- 类型：默认、成功、警告、错误
- 可关闭：关闭图标样式
3. 导航组件（Navigation Components）
3.1 顶部导航（Header/Navbar）
分析要点：
- 高度：固定高度值
- 背景：颜色、透明度、模糊效果
- Logo：位置、尺寸
- 菜单项：间距、字号、颜色
- 激活状态：下划线、背景色
- 右侧操作区：搜索、用户、通知
- 固定/吸顶效果
3.2 侧边导航（Sidebar）
分析要点：
- 宽度：展开/收起状态
- 背景色
- 菜单项：高度、内边距、图标
- 层级：一级、二级菜单样式
- 激活状态：背景色、左侧边框
- 折叠动画
3.3 面包屑（Breadcrumb）
分析要点：
- 分隔符：/ > → 或图标
- 链接样式：颜色、悬停效果
- 当前页：颜色、字重
- 字号
3.4 标签页（Tabs）
分析要点：
- 标签样式：高度、内边距
- 激活状态：下划线、背景色、字重
- 分隔线
- 可关闭标签
- 滚动/更多按钮
4. 反馈组件（Feedback Components）
4.1 弹窗（Modal/Dialog）
分析要点：
- 尺寸：宽度、最大高度
- 遮罩：颜色、透明度
- 圆角
- 阴影
- 头部：标题、关闭按钮
- 内容区：内边距
- 底部：按钮对齐、间距
- 动画：淡入、缩放
4.2 抽屉（Drawer）
分析要点：
- 宽度
- 方向：左、右、上、下
- 遮罩
- 滑入动画
- 内容结构
4.3 提示（Toast/Message）
分析要点：
- 位置：顶部、底部、中间
- 尺寸：最小宽度、内边距
- 圆角
- 阴影
- 图标：成功、警告、错误
- 自动关闭时间
- 动画：滑入、淡入
4.4 加载（Loading）
类型：
- 旋转加载（Spinner）
- 进度条（Progress Bar）
- 骨架屏（Skeleton）
- 全屏加载
分析要点：
- 样式：圆形、条形、点状
- 颜色
- 尺寸
- 动画速度
- 文字提示
4.5 工具提示（Tooltip）
分析要点：
- 背景色：通常深色
- 文字色：通常白色
- 圆角
- 箭头：位置、尺寸
- 最大宽度
- 触发方式：悬停、点击
5. 数据录入组件（Data Entry Components）
5.1 日期选择器（DatePicker）
分析要点：
- 输入框样式
- 日历面板：尺寸、颜色
- 日期单元格：尺寸、悬停、选中
- 今天标记
- 范围选择样式
- 快捷选项
5.2 时间选择器（TimePicker）
分析要点：
- 输入框样式
- 时间面板：列表或滚轮
- 时间单元格样式
- 确认按钮
5.3 上传（Upload）
类型：
- 点击上传
- 拖拽上传
- 图片墙
- 头像上传
分析要点：
- 上传区域：尺寸、边框、背景
- 拖拽状态
- 文件列表样式
- 进度条
- 预览功能
- 删除按钮
5.4 评分（Rate）
分析要点：
- 图标：星星、心形等
- 尺寸
- 颜色：未选中、选中
- 半星支持
- 只读状态
6. 其他组件（Other Components）
6.1 头像（Avatar）
分析要点：
- 尺寸：小、中、大
- 形状：圆形、方形
- 边框
- 占位符：图标、文字
- 状态徽章：在线、离线
6.2 徽章（Badge）
分析要点：
- 位置：右上角、右侧
- 尺寸：点状、数字
- 颜色
- 最大数字显示
6.3 分页器（Pagination）
分析要点：
- 按钮样式：上一页、下一页
- 页码样式：默认、激活
- 跳转输入框
- 每页条数选择器
- 总数显示
6.4 步骤条（Steps）
分析要点：
- 方向：横向、纵向
- 步骤节点：圆形、方形
- 连接线：实线、虚线
- 状态：待完成、进行中、已完成、错误
- 标题和描述样式
6.5 时间轴（Timeline）
分析要点：
- 节点样式：圆点、图标
- 连接线：颜色、粗细
- 内容区：标题、时间、描述
- 颜色：不同状态
组件分析模板
标准组件描述格式
### [组件名称]
**类型**：[组件类型]
**尺寸**：
- 高度：XXpx
- 宽度：XXpx / 自适应
- 内边距：XXpx
**样式**：
- 背景色：#XXXXXX
- 边框：Xpx solid #XXXXXX
- 圆角：Xpx
- 阴影：X X X rgba(X,X,X,X)
**文字**：
- 字号：XXpx
- 字重：XXX
- 颜色：#XXXXXX
**状态**：
- 默认：[描述]
- 悬停：[描述]
- 点击：[描述]
- 禁用：[描述]
**特殊说明**：
[其他需要注意的细节]
组件分析检查清单
基础检查
- 组件类型已识别
- 尺寸已测量
- 颜色已提取
- 字体样式已记录
交互检查
- 默认状态已记录
- 悬停效果已记录
- 点击效果已记录
- 禁用状态已记录
- 加载状态已记录（如适用）
细节检查
- 圆角值已记录
- 阴影已记录
- 边框已记录
- 间距已记录
- 动画效果已描述
响应式检查
- 移动端适配方案已记录
- 断点变化已记录
实际案例
案例：主按钮分析
### 主按钮（Primary Button）
**类型**：实心按钮
**尺寸**：
- 高度：40px
- 最小宽度：88px
- 左右内边距：24px
- 上下内边距：0
**样式**：
- 背景色：#1890FF
- 边框：无
- 圆角：4px
- 阴影：0 2px 4px rgba(0,0,0,0.1)
**文字**：
- 字号：14px
- 字重：500
- 颜色：#FFFFFF
- 字母间距：0.5px
**状态**：
- 默认：背景#1890FF
- 悬停：背景#40A9FF，阴影加深为0 4px 8px rgba(0,0,0,0.15)
- 点击：背景#096DD9，轻微向下位移1px
- 禁用：背景#F5F5F5，文字#D9D9D9，无阴影，鼠标not-allowed
**动画**：
- 过渡时间：0.3s
- 缓动函数：ease-in-out
**特殊说明**：
- 按钮内文字不换行
- 图标与文字间距8px
- 加载状态显示旋转图标，文字变为"加载中..."
组件库参考
分析时可参考主流组件库的设计规范：
- Ant Design：企业级UI设计语言
- Material Design：Google设计规范
- Element Plus：Vue 3组件库
- Arco Design：字节跳动设计系统
- Semi Design：抖音企业级设计系统
注意事项
- 一致性：同类组件应保持样式一致
- 可访问性：确保组件符合WCAG标准
- 响应式：记录不同屏幕尺寸下的变化
- 性能：注意动画性能和加载优化
- 复用性：识别可复用的组件模式
- 命名规范：使用统一的组件命名