UI组件设计规范

### 按钮类型UI组件设计规范

在UI组件设计中，按钮是一种基础且高频使用的交互元素。设计规范需满足用户可用性，以确保按钮在各种情况下都能被直观、准确地操作。以下是基于最佳实践的具体设计规范：

---

#### 1. **视觉属性**
##### 1.1 按钮类型
- **主要按钮（Primary Button）**  
  用于核心动作，视觉上最为显著，承担主要任务的操作。
- **次要按钮（Secondary Button）**  
  显示重要性略低的操作，通常出现在辅助场景。
- **文本按钮（Text Button）**  
  轻量化设计，通常用于非核心动作，避免干扰重点。
- **警告按钮（Danger Button）**  
  用于提示高风险操作（如删除、数据重置等）。

##### 1.2 按钮大小
- **常规（Regular）：** 提供足够的点击区域，通常为40px~48px高，最常见的尺寸。
- **大尺寸（Large）：** 为移动端或特殊操作提供更舒适的点击范围，54px~64px高。
- **小尺寸（Small）：** 适用于空间紧凑或次级操作，24px~32px高。

##### 1.3 按钮形状
- **边框圆角（Border Radius）：** 建议圆角为4px、8px或全圆，确保按钮友好且视觉平滑。
- **边框宽度：** 1px~2px，需与整体UI风格保持一致。

##### 1.4 颜色与对比度
- **背景颜色：** 确保按钮（尤其是主要按钮）的背景与页面背景之间有足够的对比度（至少达到WCAG 2.1 AA级标准：对比度4.5:1）。
- **字体颜色：** 确保文字颜色与按钮背景之间的对比度加强可视性（建议对比度达到7:1）。
- **常见颜色示例：**  
  - 主要按钮（Primary）：#007BFF（蓝色）背景，#FFFFFF（白色）文字。  
  - 禁用按钮（Disabled）：#EDEDED背景，#AAAAAA文字。

---

#### 2. **交互状态**
按钮应有清晰的交互状态指引，帮助用户感知其响应。每个按钮需至少具备以下几种状态：

- **默认状态（Default）：** 显示按钮的初始样式，与正常运行中的页面视觉风格相符。
- **悬停状态（Hover）：** 鼠标悬停时，通过颜色（亮度或饱和度的微调）突显按钮。
- **点击状态（Pressed / Active）：** 用户点击按钮时，视觉反馈及时响应，可通过颜色加深或凹陷处理显示。
- **禁用状态（Disabled）：** 用于按钮不可用时，通常通过降低颜色不透明度来传达不可操作性。
- **加载状态（Loading）：** 在提交或处理中，按钮可显示加载动画，同时禁用交互。

###### 状态样例示例：
1. 默认：背景颜色 #007BFF，文字颜色 #FFFFFF。
2. 悬停：背景颜色 #0056D2（颜色加深）。
3. 点击：背景颜色 #003E94（更深的颜色）。
4. 禁用：背景颜色 #EDEDED，文字颜色 #AAAAAA。

---

#### 3. **可访问性考虑**
- **可键盘操作：** 按钮需支持通过 `Tab` 键聚焦，以及 `Enter` 或 `空格键`触发点击。
- **焦点状态（Focus）：** 当按钮通过键盘聚焦时，需可视化高亮其边框或周围加阴影，以提示焦点所在。
- **文本标签：** 每个按钮应使用清晰明了的文案，避免歧义，同时通过 `aria-label` 提供给屏幕阅读器更多语义化的辅助信息。
- **触控面积：** 提供足够的点击区域，确保触控设备上的可操作性。建议最小点击区域为48x48像素。

---

#### 4. **代码实现说明**
以下代码为按钮的HTML与CSS实现示例：

```html
<!-- HTML -->
<button class="btn btn-primary">提交</button>
<button class="btn btn-secondary">取消</button>
<button class="btn btn-danger">删除</button>
<button class="btn btn-disabled" disabled>禁用按钮</button>
```

```css
/* CSS */

/* 通用样式 */
.btn {
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* 默认状态 */
.btn-primary {
  background-color: #007BFF;
  color: #FFFFFF;
}

.btn-secondary {
  background-color: #6C757D;
  color: #FFFFFF;
}

.btn-danger {
  background-color: #DC3545;
  color: #FFFFFF;
}

.btn-disabled {
  background-color: #EDEDED;
  color: #AAAAAA;
  cursor: not-allowed;
}

/* 悬停状态 */
.btn:hover:not([disabled]) {
  filter: brightness(85%);
}

/* 点击状态 */
.btn:active:not([disabled]) {
  transform: scale(0.98);
}

/* 焦点状态 */
.btn:focus {
  outline: 2px solid #0056D2;
  outline-offset: 2px;
}

/* 禁用属性 */
.btn:disabled {
  opacity: 0.6;
  pointer-events: none;
}
```

---

#### 5. **响应式支持**
为了使按钮在移动设备及桌面设备上均有最佳的表现：
- 使用CSS媒体查询为不同屏幕尺寸（如小于768px和大于1024px）定制按钮大小和间距。
- 确保移动端足够触达区域，避免因按钮过于贴近导致误触。

---

#### 6. **总结**
设计按钮时需考虑多种状态下的交互反馈，并确保其具有足够的对比度及清晰操作区域，提供良好的触控和可访问性体验。在开发中，需合理整合CSS动画和焦点指示效果，同时通过语义化和ARIA标签兼顾辅助技术用户的使用体验。

### 导航栏类型UI组件设计规范

为了确保导航栏类型UI组件满足视觉一致性、高可用性和开发友好性，需要从 **视觉设计**、**交互状态**、**可访问性** 和 **代码实现说明** 四个方面进行综合设计：

---

#### **1. 视觉属性**
视觉属性是导航栏设计的核心部分，旨在创造一致的视觉体验。以下为具体细化要求：

- **布局**
  - 高度：固定，例如 64px（在移动设备上可调整为 48px）。
  - 内边距：确保内容不会贴边（建议左右 16px）。
  - 元素间距：导航项之间使用固定间隔（例如 24px），需要保持布局对齐及左右均匀。
  - 图标和文本的组合：确保图标与文本在尺寸和间距上视觉平衡。

- **字体**
  - 字体颜色：
    - 默认文本颜色：`#333333`
    - 活跃状态颜色：`#007AFF`（或品牌主色）
    - 禁用状态颜色：`#BFBFBF`
  - 字体大小：14px 或 16px（视屏幕分辨率调整）。
  - 字体粗细：默认 `400`，在强调的部分使用 `600`。

- **图标**
  - 图标尺寸：24px × 24px（移动设备上可为 20px × 20px）。
  - 图标颜色：
    - 默认颜色：`#333333`
    - 活跃状态颜色：`#007AFF`
    - 禁用状态颜色：`#BFBFBF`

- **背景**
  - 默认背景颜色：白色 `#FFFFFF`。
  - 分割线：浅灰色 `#E0E0E0`，位于导航栏底部，可选透明化处理。

- **主题支持**
  - 深色模式：背景颜色调整为 `#1E1E1E`；文本和图标的默认颜色为 `#FFFFFF`，禁用颜色为 `#A5A5A5`。

---

#### **2. 交互状态**
导航栏需要支持多种交互状态，以保证良好的用户体验：

- **默认状态**
  - 文本的颜色和图标颜色为默认值。
  - 鼠标悬停（hover）：背景颜色微微提升亮度或加入浅色阴影（例如背景变为 `#F5F5F5`）。

- **选中状态**
  - 强调当前激活的页面或操作。
  - 文本和图标颜色切换为活跃状态颜色（`#007AFF`）。
  - 可通过下划线或背景高亮强调当前选中导航项（例如使用圆角高亮背景，背景颜色：`#E5F4FF`）。

- **点击（Active）状态**
  - 文本和图标颜色略加加深（例如 `#005BB5`）。
  - 可以通过缩放动画增强反馈（`transform: scale(0.95)`）。

- **禁用状态**
  - 此状态的文本、图标颜色变为禁用状态（`#BFBFBF`）。
  - 鼠标不可点击，光标样式为 `not-allowed`。

- **触摸设备支持**
  - 增加点击区域（建议触控区域不小于 48px × 48px）。
  - 使用触控回馈效果，例如轻微变暗或透明。

---

#### **3. 可访问性考虑**
为确保所有用户的可访问性，包括视障用户和键盘操作用户，设计中加入以下内容：

- **键盘导航**
  - 支持使用 `Tab` 键逐项导航，当前聚焦项使用清晰的视觉样式（如 `outline` 边框，或动画切换聚焦效果）。
  - 键盘操作的焦点样式：
    - 默认使用浏览器的 `outline` 样式。
    - 或者自定义聚焦样式（例如 `2px solid #007AFF` 的焦点边框）。
  
- **屏幕阅读器支持**
  - 使用语义化的 HTML 标签（如 `<nav>` 或 `<ul>`）实现导航。
  - 确保导航项使用适当的描述性文本（通过 `aria-label` 或 `aria-labelledby` 提供补充说明）。

- **配色对比度**
  - 文字与背景对比度必须符合 WCAG 标准，推荐达 AA 级以上（对比度至少为 4.5:1）。
  - 活跃/禁用样式有触觉或视觉上的明显差距。

---

#### **4. 代码实现说明**
以下为推荐的前端代码结构，确保开发过程简洁高效，易于扩展：

```html
<!-- ⚡ HTML结构 -->
<nav class="navbar">
  <ul class="nav-list">
    <li class="nav-item active">
      <a href="#" class="nav-link">
        <span class="icon">🏠</span>
        <span class="text">主页</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <span class="icon">🔍</span>
        <span class="text">搜索</span>
      </a>
    </li>
    <li class="nav-item disabled">
      <a href="#" class="nav-link" aria-disabled="true">
        <span class="icon">⚙️</span>
        <span class="text">设置</span>
      </a>
    </li>
  </ul>
</nav>
```

```css
/* 🎨 样式设计 */
.navbar {
  background-color: #FFFFFF;
  border-bottom: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  height: 64px;
}

.nav-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  margin-right: 24px;
}

.nav-item:last-child {
  margin-right: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333333;
  font-size: 16px;
}

.nav-link:hover {
  background-color: #F5F5F5;
  border-radius: 6px;
}

.nav-item.active .nav-link {
  color: #007AFF;
  font-weight: 600;
}

.nav-item.disabled .nav-link {
  color: #BFBFBF;
  pointer-events: none;
  cursor: not-allowed;
}

.icon {
  margin-right: 8px;
  font-size: 20px; /* 基础图标大小 */
}
```

```javascript
// 🎯 JavaScript增强交互
// 自动处理键盘导航高亮
const navItems = document.querySelectorAll('.nav-item');

navItems.forEach((item) => {
  item.addEventListener('focus', (e) => {
    item.classList.add('focus');
  });
  item.addEventListener('blur', (e) => {
    item.classList.remove('focus');
  });
});
```

---

通过上述设计，可以很好地确保导航栏组件在视觉上保持一致、交互上友好、细节上考虑周全，支持可访问性和高效实现。

为表单类型的UI组件制定设计规范时，需要从多个维度考虑，以确保其在视觉设计、交互体验、可访问性以及开发实现方面具备足够的优先级支持。以下是详细设计规范：

---

### 1. 视觉属性
#### 1.1 对齐与布局
- **间距**: 表单组件之间使用一致的间距，例如 16px 作水平间距，8px 作竖直间距，以确保可读性和空间感。
- **对齐方式**: 标签（Label）与输入框保持左对齐，支持国际化设计时需要根据语言文字特性调整对齐方式。

#### 1.2 样式与大小
- **字体**: 使用无衬线字体，如 `Roboto`、`Arial`，字体大小为 14-16px，适配不同分辨率。
- **颜色**:
  - 默认状态字体颜色：#333333
  - 提示文本颜色：#8c8c8c
  - 错误状态颜色：#FF4D4F
  - 禁用状态颜色：#D9D9D9（背景色）和 #BFBFBF（文本色）
- **按钮效果**: 主按钮（提交、确认等）使用明显的视觉吸引色（如品牌色），强调视觉层级。
- **输入框边框**:
  - 默认边框：1px 实线，颜色 #D9D9D9
  - 聚焦状态：1px 实线，颜色 #0DAFE6

#### 1.3 样式大小定义
- 宽度：
  - 输入框：即使自适应内容宽度，也需提供最小宽度，建议 200px。
  - 按钮：至少宽度为 64px，高度为 32px。
- 圆角：小型按钮和输入框推荐使用 4px 的边角半径。

---

### 2. 交互状态
#### 2.1 输入框（Text Field）
- **默认状态（Default）**：
  - 显示标签、占位符提示，可点击。
- **聚焦状态（Focused）**：
  - 激活状态边框颜色高亮（如 #0DAFE6），增加视觉焦点。
  - 显示光标，能够编辑内容。
- **输入状态**：
  - 输入完成后，若校验不通过，应即时通过错误提示红框及校验文案显示反馈（如：*请输入有效的邮箱地址*）。
- **禁用状态（Disabled）**：
  - 灰化组件，避免点击或输入。
- **错误状态（Error）**：
  - 输入框边框高亮红色；下方显示错误提示信息。
  
#### 2.2 按钮（Button）
- **状态设计**：
  1. 默认状态：突出主按钮颜色，显示可点击效果。
  2. 悬停状态：高亮或浅色阴影处理，提示用户可交互。
  3. 点击状态：提供按下效果（如按钮轻微凹陷、颜色稍微变暗）。
  4. 禁用状态：按钮颜色变灰，不可响应操作。

#### 2.3 单选框/多选框（Radio/Checkbox）
- **默认状态**：显示圆形或方形框。
- **悬停状态**：增加背景浅色遮罩或改变鼠标光标为指针。
- **选中状态**：突出选择的可视化状态。
- **禁用状态**：转换为灰色，无法改变状态。

---

### 3. 可访问性考虑
1. **键盘导航支持**:
   - 通过 `Tab` 键切换组件焦点， `Enter` 键确认输入或点击操作，`Space` 键控制单选框、多选框。
   
2. **焦点状态**:
   - 聚焦组件时需提供明显的视觉标识（如高亮边框、阴影等），避免用户漏掉聚焦。
   
3. **文本可视化**:
   - 确保组件内文本与背景之间的对比度至少达到 [WCAG AA 标准](https://www.w3.org/TR/WCAG21/) (4.5:1)。
   
4. **屏幕阅读器支持**:
   - 为每个表单输入框绑定语义化标签，如 `aria-label` 或 `aria-describedby`，提供额外的上下文信息。
   - 按钮需要描述其功能，例如“提交”、“取消”。
   
5. **错误提示无障碍**:
   - 错误文字使用屏幕阅读器朗读，同时与视觉提示同步更新。
   
6. **点击区域扩展**:
   - 点击目标最小高度推荐为 48px，确保触屏设备上的操作友好。

---

### 4. 代码实现说明
#### 4.1 HTML 结构
```html
<form>
  <!-- 输入框 -->
  <div class="form-group">
    <label for="email">邮箱地址</label>
    <input id="email" name="email" type="email" placeholder="请输入邮箱地址" aria-required="true" />
    <span class="error-message">请输入有效的邮箱地址</span>
  </div>
  
  <!-- 单选框 -->
  <div class="form-group">
    <label>选择性别</label>
    <input type="radio" id="male" name="gender" value="male" />
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female" />
    <label for="female">女</label>
  </div>

  <!-- 按钮 -->
  <button type="submit" class="btn-primary">提交</button>
</form>
```

#### 4.2 CSS 样式
```css
/* 通用样式 */
body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

input, button, select, textarea {
  font-size: 14px;
  line-height: 1.5;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
}

input[type="text"], input[type="email"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #D9D9D9;
  border-radius: 4px;
  outline: none;
}

input:focus {
  border-color: #0DAFE6;
  box-shadow: 0 0 4px #0DAFE6;
}

.error-message {
  color: #FF4D4F;
  font-size: 12px;
  margin-top: 4px;
}

button {
  background-color: #0DAFE6;
  color: #FFFFFF;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
}

button:disabled {
  background-color: #D9D9D9;
  color: #BFBFBF;
  cursor: not-allowed;
}
```

#### 4.3 JavaScript 验证逻辑
```javascript
document.querySelector('form').addEventListener('submit', function (e) {
  const emailInput = document.getElementById('email');
  const errorMessage = document.querySelector('.error-message');

  if (!emailInput.value.includes('@')) {
    e.preventDefault(); // 阻止表单提交
    emailInput.classList.add('error');
    errorMessage.textContent = '请输入有效的邮箱地址';
  } else {
    emailInput.classList.remove('error');
    errorMessage.textContent = '';
  }
});
```

---

### 总结
通过以上的规范设计，我们确保表单组件在视觉上明确、交互上直观、可访问性友好，同时提供了易于扩展的代码实现，方便开发者快速复制和使用。