检查与正确输入框相关的错误
提交缺少单元格的表单，然后使用键盘对其进行编辑。保持标签可见，在输入请求之前对其进行描述，并将错误放在足够近的位置以准确了解哪些字段需要修复。
输入栏 设计体系
帮助在信息字段中正确输入并纠正错误。
清单内容
检查进度
01
结构及意义
在使用环境中比较信息和演示。
02
交互性和可用性
尝试操作，更改状态并继续工作。
03
需要检查分支机构
在开始、更改和完成任务时尝试特定场景。
进度会自动保存在此浏览器中。
指南
检查方法
示例
应用示例
电子邮件地址的格式不正确
标有“电子邮件”的框和错误“输入电子邮件为 name@vidu.com”；刚刚输入的内容会被保留，以供用户编辑一个字符。
变体与使用场景
输入框框架
该框架将输入区域与背景分开,使内容和光标在两个主题中都可见。
尝试焦点、自动填充和文本缩放;框架不会覆盖文本或尺寸跳跃。
示例 聚焦时,电子邮件框的边框会变暗,但行高不会改变。
标签和说明
标签在用户输入后存在;需要了解的附加格式说明或条件。
输入数据,然后使用屏幕阅读器读回单元格名称;标签和提示仍然正确链接。
示例 在下面标记“订单代码”并提示“示例:DZ-2048”。
需要有效的电子邮件地址
单元格中的图标和操作
将插图图标与显示密码或删除关键字等操作区分开来。
Tab 到单元格和子按钮;该操作具有明确的名称,并且不会无意中删除数据。
示例 装饰放大镜图标; “清除搜索”按钮获得焦点并有一个标签。
数据状态
空、数据、焦点、只读、禁用和错误的定义遵循相同的规则。
从错误切换到重新输入;错误及时更新,数据不丢失。
示例 只读验证码框仍可复制;发送信元处于等待状态。
默认
正在输入
选择
显示错误电子邮件格式不正确。
不可用
输入框尺寸
单元格大小遵循密度上下文,而字体大小和触摸区域仍然易于使用。
将紧凑的单元格放置在表格中,将大的单元格放置在移动设备上;文本不是垂直剪切的。
示例 管理面板有一个整洁的过滤框;登录屏幕使用较高的框。
多行输入区域
仅当内容需要换行时才使用多行,以保持滚动和边界清晰。
粘贴长段并打开键盘;用户仍然可以看到输入位置和提交按钮。
示例 响应单元格将其内容扩展至其极限,然后在单元格内滚动。