ux-inputs-and-forms

输入与表单技能

此技能的行为方式（请先阅读）

这是一项生成式技能。默认的失败模式包括：过度询问（每个可能有用的字段都设为必填）、标签错误（把占位符当作标签、使用行话、未标明选填项），以及验证太晚（提交时在模态框中一次性显示所有错误）。解决办法不是“套用所有表单模式”——到处添加辅助文本、工具提示、进度条和多步拆分，只会让表单变得臃肿。因此，此技能会按以下步骤处理：

1. 明确背景——表单收集什么信息、每个字段为何必需、所用平台及表单长度。
2. 应用始终适用的核心原则——字段精简、便于浏览的单列布局、始终显示标签、为每个字段选择合适的输入类型、内联验证。
3. 呈现依赖具体情境的决策（多步表单、浮动标签、辅助文本、选择器、智能默认值），并说明取舍。

然后，它会交由 ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit、ux-microcopy-audit 和 ux-dark-patterns-audit 进行验证。

---

步骤 0 — 设计前明确背景

如果信息未知，请先提问；如果在没有答案的情况下继续，请说明所作的假设：

• 每个字段有何用途？ 对于每个字段，说明谁会使用这些数据，以及用途是什么。无法回答的字段就应删除——这是影响最大的表单决策。
• 平台——移动端需要情境化键盘、≥38px 的触控区域、滚动时始终可见的提交按钮，以及便于单手操作的布局。
• 长度与重要性——3 个字段的新闻通讯订阅表单，与多页结账流程需要不同的结构（步骤、进度、错误摘要）。
• 敏感性——电话号码、付款信息、证件号码：用户会问“为什么需要这些信息？”——规划好说明理由的方式（辅助文本），并预期任何超出任务所需信息的收集都会受到暗黑模式审查。

---

始终适用的核心原则（几乎适用于所有情况）

少问

• 删除所有任务不需要的字段。 表单越短，完成率越高；系统不应询问它能够检测到或已知的信息（对已知数据启用自动填充、支持浏览器自动补全、自动检测国家/地区）。
• 标明必填项和选填项——必填项使用星号（LTR 布局中放在标签前；不得使用浅灰色），选填项在标签中标注“（选填）”。
  • ❌ 十个必填字段，没有说明 ✅ 五个字段，其中一个标注“（选填）”，敏感字段带有辅助文本

布局便于浏览

• 单列布局，自上而下排列。 多列表单会导致漏填字段、填错字段以及放弃填写（Baymard）。自然的阅读顺序更胜一筹。
• 标签放在输入框上方、框外，并始终可见。 绝不能用占位符代替标签：聚焦时占位符会消失，增加记忆负担，而且看起来像已填写的数据。占位符只能提供示例值，并以明显较浅的颜色显示。
• 将相关字段分组（个人信息／账单信息／配送信息），并添加标题和间距——利用邻近关系体现结构：标签与对应输入框之间的间距 < 输入框与下一字段之间的间距；组间距 > 组内间距。
• 清晰显示输入框边界——无边框的“极简”输入框会让用户找不到输入位置。输入框高度约为 32–40px，文本 ≥16px，标签约为 13–14px，采用传统且克制的样式。

根据数据选择输入类型

• 简短回答使用单行输入框；段落文本使用多行输入框／文本区域；密码输入框提供显示／隐藏切换；搜索框提供自动建议；仅对较长的选项列表使用选择框／下拉菜单——约 5 个及以下选项使用单选按钮（单选）或复选框（多选）；凡格式有要求的字段（电话、日期、卡号）都使用输入掩码——接受用户以任意方式输入，并自动为其格式化；移动端使用情境化键盘（数字使用数字键盘）；OTP 输入框应支持粘贴和自动填充。
• **日期字段：**根据任务选择匹配的选择器——已知日期（出生日期）使用文本输入框 + 输入掩码；近期日程安排（预订）使用日历选择器。

及时验证，语气友善

• 在失焦时验证，而不是每次击键时或提交时验证。 让用户完成输入；当焦点离开字段时再检查。（例外：新密码的实时要求清单。）
• 错误消息紧邻出错的输入框（右侧或正下方——绝不能只放在顶部），用简单、礼貌且具体的语言说明：发生了什么 + 如何修复，最好一行说完，绝不截断。颜色 + 图标 + 文字——绝不能只靠颜色表达。
• 保持错误状态可见，直到输入内容确实有效， 而不只是用户开始输入后就消失。
• 预防胜过纠正： 限制条件、宽容的格式处理和输入掩码都比错误消息更好。

提交也是表单的一部分

• 主要按钮始终清晰可见（位于字段下方；较长的移动端表单中固定显示），按钮文字应描述操作——补完用户的句子“我想要……”：❌“提交” ✅“订阅” / “下单” / “创建账户”。
• 按钮层级： 主要按钮在视觉上最突出；“取消”/“返回”按钮弱化显示；留出足够间距，避免误触错误按钮。触控目标 ≥1×1 厘米（约 38 像素以上）。
• 展示全部三种状态： 提交后的加载状态、清晰的成功消息，以及礼貌且信息明确的失败消息（注意安全性：不要透露是哪项凭据错误）。

---

依赖具体情境的决策（呈现出来，不要自动套用）

对每项决策说明其权衡，并给出与步骤 0 相关的建议。把所有这些都用在一个包含 4 个字段的表单上，就是臃肿设计的典型问题。

决策	适用情形	避免 / 调整的情形	默认建议
多步骤 + 进度跟踪器	≥3 个逻辑步骤（结账、问卷）；让每页内容更易消化	简短表单——拆分会增加点击次数；>5–6 个步骤会让人不堪重负	只要分组尚未失效，就保持单页
浮动标签	空间紧张的布局，希望在同一位置容纳标签 + 示例	复杂或很少使用的表单，固定标签更稳妥	输入框上方放静态标签；浮动标签作为节省空间的替代方案
辅助文本	敏感字段（“为什么需要我的电话号码？”）、要求细致的字段（密码规则）	每个字段都“以防万一”地添加——产生噪音，掩盖重点	只在用户容易犹豫的地方添加；最多一行
用于提供指引的图标 / 工具提示	适合用图示说明的问题（CVV 位置），图比文字更清楚	仅靠工具提示提供帮助的移动端设计（需要额外点击，悬停也不可靠）	优先使用图标；工具提示作为补充，不能是唯一的信息来源
自动建议 / 增量搜索	选项列表很长（国家）；将匹配的字符加粗	选项较少时，单选框 / 复选框更快捷	对所有需要滚动浏览的列表使用自动建议
智能默认值 / 自动检测	地理位置检测国家、预填已知数据——减少操作	看起来像用户主动选择的默认值（同意选项、营销订阅选项——可能构成暗黑模式）	预填事实，绝不预填决定
单个全名字段	减少操作阻力；更包容不同文化习惯	产品必须可靠地拆分名和姓	除非数据模型确实需要两个字段，否则只用一个姓名字段
顶部错误摘要	较长表单中，多个错误可能不在屏幕内；每项都链接到对应字段	简短表单——行内消息就足够	始终使用行内消息；较长表单再添加摘要
CAPTCHA / 验证	确实存在滥用风险；优先选择易于使用的替代方案（魔法链接、OTP、通行密钥）	扭曲文字的 CAPTCHA；阻止在密码字段中粘贴	根据风险采用易于使用的验证方式；绝不阻止粘贴
左侧标签	超长桌面表单且垂直空间有限	移动端、标签长度不一的情况，以及任何响应式布局	标签放在输入框上方

---

验证结果（编排）

交接时使用各审查视角对应的可安装技能 name。只有安装了该技能时才调用；如果未安装，此技能的核心内容已包含这些规则，无需阻塞，直接继续即可。

生成或修订后，应将结果交给审查视角审核，而不是直接宣布完成。这些都是候选审查视角——审核方式由 docs/orchestration-policy.md 规定，也可以将整个流程交由 ux-design-review 处理。此处，heuristics、microcopy 和 dark-patterns 属于 A 级（自动运行）；accessibility、aesthetics 和 mobile-responsiveness 属于 B 级（可选）——在现有设计系统下，aesthetics 会被跳过，accessibility 的范围会缩小为使用体验；mobile-responsiveness 仅适用于移动端。如果用户调用此技能是为了处理某个特定事项，请遵循该范围。

• ux-heuristics-audit （A 级） —— 系统状态可见性（状态、加载、成功）、错误预防、用户控制，以及优先识别而非回忆。
• ux-accessibility-audit （B 级——可选；在设计系统下缩小范围） —— 键盘操作和焦点指示器、标签与对比度最低要求、通过 aria-describedby 关联错误提示、多重线索错误状态、无障碍身份验证。
• ux-aesthetics-audit （B 级——可选；在设计系统下跳过） —— 间距节奏、分组清晰度，以及“极简”样式是否削弱了输入控件的可识别性。
• ux-microcopy-audit （A 级） —— 标签是否清晰、辅助文本是否简洁、错误消息的语气与具体程度、操作按钮措辞。
• ux-dark-patterns-audit （A 级） —— 过度收集个人数据、预先勾选的加入选项、隐蔽的默认设置，以及本应可选却设为必填的字段。
• ux-mobile-responsiveness-audit （B 级——可选；仅适用于移动端） —— 面向移动端时，检查键盘、触控区域、固定提交按钮，以及单手操作的可达性。

如果审核发现冲突（例如，营销团队希望增加字段，而完成率因此下降），应以首要任务为准来解决：用户是来完成某件事的——每个字段和每次打断都必须证明其成本合理。

---

常见做法：应做与不应做

❌ 不要	✅ 应该
收集所有将来可能有用的信息	每个字段都应说明谁会使用这些数据以及用途
只用占位符文本充当标签	在输入框上方使用常驻标签；占位符仅作示例
为了“节省空间”而采用两列字段布局	使用单列布局、合理分组和自然的阅读顺序
为只有 3 个选项的选择使用下拉菜单	选项少于约 5 个时，单选用单选按钮，多选用复选框
强制采用严格的输入格式（“不许输入连字符！”）	使用宽容的格式，并通过输入掩码代用户格式化
每次按键都验证，或只在提交时验证	在失焦时验证；仅在创建密码时显示实时检查清单
在顶部弹出错误模态框，仅列出字段编号	在出错的输入框旁显示具体、礼貌的消息（仅长表单附加摘要）
所有场景都使用笼统的“提交”	使用与场景相符的操作标签：“创建账户”“下单”
提交后不提供任何反馈	始终提供加载 → 成功/失败状态
将预先勾选的营销订阅项当作“智能默认值”	预填事实，绝不预选决定（→ dark-patterns）
未经检查就发布	交由 heuristics、accessibility、aesthetics、microcopy 和 dark-patterns 审核

---

来源课程（Uxcel）

• 如何设计 UI 表单
• 表单设计最佳实践
• UI 输入控件的类型及其适用场景
• UI 输入控件设计最佳实践
• UI 输入控件样式设计最佳实践
• 提交表单
• 显示输入错误
• 表单无障碍设计