按钮用于交互操作，图片展示信息，二者结合提升界面
按钮设计要点
类型与功能
| 按钮类型 | 适用场景 |
| 常规按钮 | 主操作（如提交、确认） |
| 悬浮按钮 | 固定位置的优先操作（如底部导航） |
| 幽灵按钮 | ，弱化按钮本身（常用于浅色背景） |
| 图标按钮 | 空间有限时，用图标替代文字（需配合悬停提示） |
| 链接按钮 | 类似按钮样式的超链接（需明确标识为外部链接） |
状态反馈
| 状态 | 设计要求 |
| 默认状态 | 清晰可识别，文字/图标完整 |
| 悬停状态 | 颜色/阴影变化（提示可点击性） |
| 激活状态 | 按下效果（如缩放、背景色加深） |
| 禁用状态 | 灰色调+低透明度（文字标注“不可用”） |
图片类型与格式
矢量图 vs 位图
| 特性 | 矢量图（SVG/AI） | 位图（JPEG/PNG） |
| 缩放能力 | 无限无损缩放 | 超过分辨率会模糊 |
| 文件大小 | 小（代码描述图形） | 大（记录像素信息） |
| 适用场景 | 图标、Logo、简单插画 | 照片、复杂渐变图像 |
主流格式对比
| 格式 | 特点 |
| JPEG | 有损压缩，适合照片（支持百万级颜色） |
| PNG | 无损压缩，支持透明背景（文件较大） |
| GIF | 支持动画（颜色限制256色） |
| SVG | 矢量格式，可嵌入HTML直接缩放 |
| WebP | 现代格式，压缩率高于JPEG/PNG（浏览器兼容性需注意） |
优化策略
图片优化
- 响应式加载：根据设备分辨率提供不同尺寸图片
- 懒加载：滚动到视口时再加载图片（
loading="lazy"） - CDN加速：使用云存储服务提升加载速度
- 格式转换：摄影类用JPEG，图形类用SVG/WebP
按钮优化
- 点击区域：最小高度≥40px，宽度适应内容
- 焦点管理：Tab键顺序合理，聚焦时显示轮廓
- 加载状态：异步操作时添加微交互（如转圈动画）
- 触控适配：增大触摸目标尺寸（建议≥48px×48px）
交互应用案例
按钮与图片组合
| 场景 | 实现方案 |
| 图片上传按钮 | 使用<label>包裹图片预览区，点击区域触发文件选择器 |
| 画廊导航按钮 | 箭头图标+淡入淡出动画，右侧暴露部分下一张图片 |
| 悬浮操作按钮 | 鼠标悬停图片时显示编辑/删除按钮组（使用CSS position定位） |
无障碍设计
- 图片需添加
alt属性（装饰性图片用aria-hidden="true"） - 按钮文字与图标需同时存在（图标在前文字在后）
- 禁用状态时移除
tabindex属性 - 颜色对比度≥4.5:1（WCAG 2.1标准）
问题与解答
Q1：如何判断应该使用矢量图还是位图？
A：优先考虑矢量图的场景：
- 需要频繁缩放的图形（如导航图标）
- 单色/少量色块的图案（如Logo）
- 需要动画变形的效果
位图更适用于： - 真实照片或复杂渐变
- 半透明背景叠加效果
- 已有高清素材无需二次编辑
Q2：按钮加载状态应该如何设计不影响用户体验？
A：最佳实践方案：
- 立即反馈：点击后0.1秒内改变按钮状态（如禁用+加载动画）
- 进度指示：超过2秒的操作显示百分比/进度条
- 取消机制：提供中断按钮（如右上角×号）
- 错误处理：用色块+文字说明替代原生alert弹窗
- 恢复逻辑：操作完成后自动还原按钮状态
