UI组件设计规范

导航栏类型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结构 -->
<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>

/* 🎨 样式设计 */
.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增强交互
// 自动处理键盘导航高亮
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 标准 (4.5:1)。

4. 屏幕阅读器支持:

   • 为每个表单输入框绑定语义化标签，如 aria-label 或 aria-describedby，提供额外的上下文信息。
   • 按钮需要描述其功能，例如“提交”、“取消”。

5. 错误提示无障碍:

   • 错误文字使用屏幕阅读器朗读，同时与视觉提示同步更新。

6. 点击区域扩展:

   • 点击目标最小高度推荐为 48px，确保触屏设备上的操作友好。

4. 代码实现说明

4.1 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 样式

/* 通用样式 */
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 验证逻辑

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 = '';
  }
});

总结

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