UI设计模式
按钮模式
| 状态 | 视觉反馈 |
|---|---|
| Default | 基础样式 |
| Hover | 背景略微变暗或变亮 |
| Active/Pressed | 下移1px，颜色更深 |
| Focus | 2px轮廓+偏移（键盘导航） |
| Loading | 旋转图标、禁用点击、显示"加载中" |
| Disabled | opacity:0.4, cursor:not-allowed |
表单设计最佳实践
- ☑ 单列布局（更易扫描）
- ☑ 标签在输入框上方（不用placeholder代替）
- ☑ 验证错误显示在字段下方
- ☑ 清晰标记必填字段（不只用*）
- ☑ 输入完成自动跳转下一字段（如信用卡号）
导航模式
| 模式 | 使用时机 |
|---|---|
| 顶部导航栏 | ≤7个主要板块，桌面优先网站 |
| 侧边导航 | 多板块、层级深的应用 |
| 底部标签栏 | 移动应用，3–5个主要板块 |
| 汉堡菜单 | 移动端多导航项（次要） |
| Breadcrumbs | 深层次结构、电商分类 |
| 超级菜单 | 企业、零售多分类网站 |