UI组件设计概要

设计概要：输入框类型的UI组件（基于Ant Design设计系统）

本文档描述了针对输入框类型UI组件的设计概要，确保其符合Ant Design的设计原则，包括可访问性、响应式行为和移动端用户的良好体验。

1. 基本设计规范

输入框（Input）是允许用户输入和编辑文本的基本UI组件，广泛应用于表单、搜索等场景。

• 支持类型：

  • 单行文本输入框
  • 密码输入框
  • 带前后缀的输入框（如图标、标签）
  • 多行文本框（TextArea）
  • 可清除输入框

• 尺寸：

  • 提供三种尺寸：large（大）、default（中）、small（小），满足不同场景需求。
  • 输入框的高度分别为 40px（大）、32px（中）、24px（小）。

2. 可访问性要求

为了确保输入框对所有用户（包括残障人士）可用，请遵循以下可访问性标准：

2.1. 语义化标签

• 输入框必须绑定适当的 label 元素或通过 aria-labelledby 提供说明。
• 为必须项添加 required 属性，同时视觉上提供红色星号或提示。

2.2. 焦点样式

• 当输入框被选中时，提供清晰的焦点标识，例如框线高亮（默认为 Ant Design 中的蓝色 #1890ff）。
• 应通过键盘导航能够到达输入框（具有 tab 顺序）。

2.3. 占位符文本

• 使用简洁清晰的占位符文本，提示用户输入要求。
• 占位符不得代替 label，以免对屏幕阅读器用户造成干扰。

2.4. 错误提示与状态

• 为屏幕阅读器用户提供实时错误反馈，可通过 aria-invalid=true 和 aria-describedby 指向相应的错误信息。
• 错误状态（如必填未填写）应通过颜色与文本结合提示。避免仅用颜色来传递信息，可通过 Ant Design 中的 hasFeedback 和 validateStatus 属性增强提示体验。

3. 响应式设计行为

输入框组件应在桌面设备和平板、移动端具有一致性的响应式行为：

3.1. 宽度调整

• 默认宽度：输入框占容器的100%，保持良好的适配性。
• 对于宽屏设备，可通过容器设置最大宽度（如 304px）限制输入框宽度，以避免过长。

3.2. 小屏适配

• 输入框在小屏设备上（如手机）保持充足的触摸目标区域，建议最小高度不低于 40px。
• 对于占位符文字，移动端建议简短明了，避免换行影响用户操作流畅性。

3.3. 响应式断点

• 通过断点调整输入框的间距和宽度，确保在局限的屏幕空间中保持整洁。例如：
  • 在 xs（<576px）尺寸下，输入框应随容器缩小至合理范围。

4. 交互状态设计

输入框需支持多种交互状态，并在移动端针对触摸交互进行优化。

4.1. 默认状态

• 输入框边框为浅灰色，提供醒目的占位符文案。
• 鼠标悬停时，边框颜色为高亮灰色（#d9d9d9）。

4.2. 聚焦状态

• 输入框边框颜色应高亮为品牌主色（默认：蓝色 #1890ff）。
• 在触摸设备上，显示虚拟键盘；支持清除按钮时，按钮应可轻松被点击。

4.3. 禁用状态

• 边框及背景变为灰色（#f5f5f5），文本变为次要颜色。
• 禁用状态下不允许输入及触发任何交互动作。

4.4. 错误状态

• 显示红色边框（#ff4d4f），并提供错误提示文字。
• 若结合表单使用，在用户提交无效数据时，同时触发错误高亮与说明。

4.5. 清除行为

• 输入框组件中带有清除按钮时（支持 allowClear 属性），按钮只在用户输入时展示，按钮尺寸适配触摸设备。

5. 移动端优化建议

针对移动端输入场景，需注意以下几点：

• 软键盘类型：根据输入内容设置适当的输入类型（如 email 或 number），便于触发合适的软键盘布局。
• 点击目标区域：按钮、清除图标等元素增加点击区域（最小40×40px），确保触摸无误。
• 防抖输入：对于需要实时验证的输入，建议添加防抖逻辑，避免过于频繁地触发校验。

6. 其他增强功能

• 国际化：占位符、错误信息等文字内容需支持国际化配置。
• 图标支持：支持用户在输入框中嵌入图标（如搜索、日期选择），并保持与输入框对齐。
• 动态变化：对组件状态（如边框色、错误信息）的改变需带有动画过渡效果（默认为 0.2s）。

该设计概要符合 Ant Design 的设计规范，并确保组件在桌面设备与移动设备上的良好表现，同时注重可访问性，为所有用户提供一致且高效的交互体验。

下拉菜单 (Dropdown Menu) 设计概要 (基于Apple Design规范)

1. 组件描述

下拉菜单是一种集合多个选项的UI组件，用户可以点击展开此菜单，从而在多个选项中选择一个。它经常用于提供有限的、可预期的选择，尽量保持界面的简洁和功能性，同时满足可访问性的要求。

2. 设计原则

根据Apple Design系统规范（HIG，Human Interface Guidelines）的要求，下拉菜单设计需要：

• 清晰和专注：确保下拉菜单将注意力引向与用户相关的信息。
• 一致性：下拉菜单的交互模式与Apple生态相一致。
• 可访问性：为所有用户提供无障碍的访问，包括语音辅助用户和键盘交互用户。
• 响应速度：快速、平滑的交互体验。

3. 设计细节

A. 外观与布局

• 样式与配色：

  • 使用系统标准（如iOS上的SF Pro字体和macOS上的San Francisco字体）。
  • 配色需符合苹果系统的Light Mode和Dark Mode规范，遵循Apple Design的动态颜色，例如使用系统提供的Primary、Secondary、Background颜色。

• 按钮与菜单的布局：

  • 下拉菜单触发源（如图标或文字）需要有明确可点的可视化提示（包括箭头或下拉符号）。
  • 弹出菜单边缘可以采用角落圆角，背景带有轻微模糊效果（如macOS的模糊背景）。
  • 使用44x44pt的触控大小布局，确保用户轻松点按。

B. 可访问性要求

• 支持VoiceOver和旁白：

  • 下拉菜单触发器和每一个选项必须带有描述性的Labels。
  • 下拉菜单的状态应该可以被辅助技术读取，比如“已展开”或“已折叠”。

• 键盘交互支持：

  • 使用标签键（Tab）导航到菜单，并通过方向键（↑ / ↓）选择菜单项。按下Enter或Space键完成选择。

• 高对比度支持：

  • 保证选择状态在所有对比模式下都清晰无误，如深色模式和浅色模式。

• 动态字体支持：

  • 应遵守系统字体大小的动态调节，支持可变字体大小以适应不同的用户需求。

C. 响应式行为

组件应在不同设备和屏幕尺寸上进行优化。

1. 移动设备（iPhone和iPad）：

   • 下拉菜单需能在小屏幕上清晰展示所有选项，必要时支持滚动。
   • 弹出菜单应该默认从触发器的底部弹出（便于触控用户）。

2. 桌面设备（macOS）：

   • 支持鼠标悬停与直接单击交互。
   • 如果窗口空间不足，则菜单会自动贴靠屏幕边缘进行适配。

3. 动态调整：

   • 当窗口大小改变时，就地更新下拉菜单的布局和内容显现方式。
   • iPad上的Split View等场景需正常适配界面缩放比例。

D. 交互状态

下拉菜单需要明确反馈用户每个操作的状态。

1. 默认状态：

   • 菜单触发按钮为无焦点状态，但清晰可见。
   • 箭头符号表明可操作性。

2. 悬停状态：

   • 鼠标或触控悬停时，菜单项会以视觉效果高亮（如色块或文字变亮）。

3. 点击或键盘焦点状态：

   • 被选中的项目将带有清晰的视觉反馈，例如系统蓝色高亮背景。

4. 禁用状态：

   • 不可用的选项需呈灰色，且不能被点击。

5. 加载状态（如异步加载内容）：

   • 在某些复杂用例中，菜单选项可能需要异步加载，可以使用占位符内容显示进度环或“正在加载”文案。

4. 推荐最佳实践

1. 避免嵌套过深：

   • 尽量避免下拉菜单出现过深的嵌套结构，否则可能影响用户体验。

2. 适度使用图标：

   • 当有助于选择理解时，可以在下拉选项的左侧添加小型图标（如表示操作类型）。图标需要遵守Apple Design的大小和间距规范。

3. 动画过渡：

   • 弹出菜单可以使用苹果推荐的弹性或渐隐动画，以保留系统生态的统一视觉反馈。

5. 开发建议

• iOS（ UIKit）：建议使用UIPickerView 或 UITableView 配合自定义菜单来实现下拉功能。
• macOS（ AppKit）：建议使用NSMenu 或 NSPopUpButton进行优化开发。
• Web：开发响应式下拉菜单推荐采用CSS3和JavaScript，并对iOS和macOS Safari浏览器优化。

以上设计概要旨在保证遵循Apple Design系统规范，同时满足全平台用户的易用性和可访问性需求，确保优秀的用户体验。