数据录入是用户向系统输入信息的关键环节。良好的数据录入设计能减少输入错误、降低认知负担、提升操作效率。
录入组件
输入框 Input
文本输入框，用于单行或多行文本内容的录入。
- 必须提供清晰的标签文字（Label）
- 占位文字（Placeholder）用于提示输入格式，不可替代标签
- 输入框宽度应与预期内容长度匹配
- 支持前缀图标（如搜索图标）和后缀操作（如清除按钮）
- 长文本使用多行文本框（Textarea），支持自动增高
- 密码输入提供显示/隐藏切换
下拉选择 Dropdown
从预定义选项中选择一个或多个值的组件。
- 选项列表不超过 15 项时使用下拉选择
- 超过 15 项时提供搜索过滤功能
- 当前选中项应有明确的视觉标识
- 下拉菜单应在输入框正下方展开
- 支持分组展示选项
多选 Multi-select
从预定义选项中选择多个值的组件。
- 选中项以标签（Tag）形式展示在输入框内
- 支持搜索过滤
- 支持全选和清空操作
- 选项过多时使用分页或虚拟滚动
- 已选项可通过标签上的关闭按钮移除
单选 Radio
在互斥选项中选择一个值的组件。
- 选项不超过 5 个时使用单选按钮组
- 所有选项应同时可见，无需展开
- 当前选中项应有明确的填充或边框标识
- 选项文案应简短清晰
开关 Switch
二选一的切换控件，用于开启或关闭某个功能。
- 用于即时生效的设置项
- 开启状态使用品牌色，关闭状态使用中性色
- 应提供开关对应的标签文字
- 切换后应立即显示状态变化（不需要确认按钮）
- 危险操作（如”启用调试模式”）可在切换时弹出确认提示
滑块 Slider
在连续数值范围内选择值的控件。
- 用于数值范围明确且精确值不重要的场景
- 显示当前数值标签
- 可设置最小值、最大值和步长
- 如需精确值，应配合数字输入框使用
文件上传 File Upload
上传本地文件到系统的组件。
- 明确标注支持的文件类型和大小限制
- 支持拖拽上传和点击选择
- 上传过程中显示进度条
- 上传失败显示错误原因和重试入口
- 支持多文件上传时以列表形式展示各文件状态
配置表单 Config Form
结构化配置项的集合表单，常见于设备配置、环境设置等场景。
- 相关配置项应分组展示
- 每个配置组提供组标题和简要说明
- 高级配置项可折叠隐藏
- 表单底部提供”保存”和”重置”操作
- 修改未保存时应提示用户
YAML / JSON 编辑器
用于编辑结构化配置文件的代码编辑器。
- 提供语法高亮
- 提供实时语法校验，错误位置标注明确
- 支持折叠和展开代码块
- 支持自动补全（如已知配置项）
- 提供”格式化”和”复制”快捷操作
- 提供”可视化编辑”和”代码编辑”双模式切换
设计原则
技术配置必须提供默认值
面向开发者的配置项必须提供合理的默认值。
- 默认值应满足 80% 的使用场景
- 每个配置项旁提供”使用默认值”入口
- 默认值应在输入框中以占位文字或预设值形式展示
- 修改默认值时说明影响范围
风险配置必须提供说明
可能导致系统不稳定或数据丢失的配置项必须提供说明。
- 在配置项旁显示信息图标（i），悬停展开详细说明
- 说明内容包括：参数含义、取值范围、修改影响、推荐值
- 危险配置使用警告色标识
- 链接到相关文档的详细说明
错误位置必须明确
表单验证错误应精确定位到具体字段。
- 错误提示在对应字段下方行内显示
- 错误字段使用红色边框标识
- 页面滚动到第一个错误字段
- 错误数量较多时在表单顶部显示汇总提示
- 提交前进行实时校验，不等到提交后再报错
示例输入必须完整
输入框的示例和占位文字必须完整可用。
- 占位文字应是可复制粘贴的真实示例
- 格式示例：
192.168.1.100（IP 地址）、/dev/ttyUSB0（串口路径） - 不要使用
xxx、***、请输入等无意义占位 - 对于代码类输入，提供可一键填入的完整示例