表单就绪
表单是一组相关的输入字段或控件元素，允许用户输入数据、提交信息和配置选项。
表单模式可以根据不同的上下文进行配置。表单不限于界面内的特定位置，而是可以根据设计和功能要求无缝集成到各种UI组件中，例如页面、对话框、侧边栏等。设计师和开发者可以根据自己的具体需求调整表单模式。
表单结构
头部
通常包含表单的标题和描述。此部分向用户提供有关表单用途的上下文，并为他们即将提供的信息奠定基础。
主体
表单的主要部分，用户在此输入和提供信息。您可以在此放置表单元素，例如输入字段、复选框、单选按钮或收集所需数据的任何其他元素。主体是表单的核心，其布局和设计应组织清晰，易于使用。
操作栏
通常出现在表单底部或主要交互区域附近。它包含用户可以执行以完成或操作表单的按钮或操作。常见操作包括“提交”、“保存”、“取消”或与表单用途相关的任何其他操作。操作栏是用户导航和与表单交互的关键元素。
常见的表单元素包括：
- 文本字段：用于输入短文本，例如姓名、电子邮件地址或密码。
- 文本区域：用于较长的文本块，例如评论或消息。
- 复选框：用于从列表中选择一个或多个选项。
- 单选按钮：用于从列表中选择单个选项。
- 下拉菜单/选择框：用于从预定义选项列表中选择一个选项。
- 按钮：例如提交按钮用于发送表单数据，或重置按钮用于清除输入的信息。
表单还可以包含其他元素，如开关、滑块等。
样式
- 表单元素靠左对齐。这有助于提高可读性，并遵循许多文化中的自然阅读流程。
- 组件垂直堆叠，每个组件周围有 16px 的内边距。此间距增强了组件之间的视觉分隔，并提供了协调美观的布局。
- 表单标题与主体之间、操作栏与主体之间以及表单两个不同部分之间的内边距设置为 40px。此额外间距有助于创建清晰的视觉层次结构，并防止元素显得局促。
按钮
每个表单使用一个主要按钮
每个表单使用一个主要按钮有助于用户清晰理解完成表单所需采取的主要操作，同时最大程度地降低次要操作导致意外后果的风险。
单个主要按钮清晰地传达了用户需要采取的主要操作。无论是保存、提交还是进入下一步，用户都能准确知道点击主要按钮后会发生什么。
主要按钮与表单容器左对齐
西方语言阅读顺序是从左到右。将主要操作按钮放在左侧使其与自然阅读流程一致，使用户更容易找到并理解与表单相关的主要操作。左对齐的主要按钮通过提供一致且符合预期的布局，有助于提高可访问性。视力障碍用户或使用屏幕阅读器的用户受益于标准化的设计模式。
将“取消”或“放弃”等破坏性操作放在右上角，并触发模态窗口以确认操作。将破坏性操作远离主要内容，并放在用户通常不进行积极操作的位置，可减少意外点击的可能性。这有助于防止用户意外触发不可逆转的操作。触发模态窗口进行确认增加了额外的安全层。
需要注意的是，这些原则并非普遍适用，上下文很重要。在某些情况下，右对齐按钮或居中对齐可能更合适，这取决于特定文化或应用上下文中的设计目标和用户期望。最终，可用性测试和用户反馈可以帮助确定特定设计中最有效的按钮放置位置。
布局
单列
使用单列布局组织表单主体。根据信息的自然流程，将相关控件和输入字段按逻辑顺序放置。
分组相关控件
按逻辑顺序排列表单元素，以便于浏览和完成。将相关控件分组在一起，以视觉方式表明其关联性。使用空白或视觉分隔符创建不同控件组之间的清晰区分。如有必要，添加标题为每个组提供上下文。
包含内容
- 只询问基本信息，以减少工作量并使填写表单过程更简单。
- 使用渐进式展现，在需要时逐步显示信息。按需显示高级选项。
- 仅在绝对必要时将字段标记为必填。这有助于减少表单填写过程中的摩擦。使用星号 (*) 突出显示必填字段，确保用户能够快速识别并填写基本信息。
- 尽可能使用智能默认值。建议的选项应符合并服务于大多数用户的利益。
错误处理和预防
- 为每个表单字段提供清晰简洁的说明。使用易于理解的标签，并确保它们与用户期望一致。精心设计的标签有助于提供友好的用户体验。
- 使用内联验证，对用户输入提供实时反馈
- 使用颜色编码、图标或描述性消息传达验证结果
- 在适当的情况下为字段使用默认值，以节省用户时间。如果可能，预先填写字段或默认选择常见选项。
- 突出显示需要注意的特定字段，并提供有关如何更正错误的清晰说明。实现用户友好的错误消息和验证，指导用户如何更正错误。
- 允许用户保存进度并稍后继续。这对于较长或更复杂的表单尤其重要。
- 清楚地告知表单提交中的任何错误或问题。
注意事项
- 切勿禁用提交按钮。
- 尽量避免过长的表单。使用多步表单或折叠面板将表单分成更小、更易于管理的部分有助于保持用户参与度。
- 谨慎使用模态窗口。应明智地使用模态窗口，以避免干扰用户流程。虽然它们对于某些交互有效，但过度使用可能导致用户体验脱节。保留模态窗口用于需要立即注意的关键任务或信息。
变体
整页表单
最适合复杂、独立的工作流程或关键配置。
特点
- 通常适用于用户需要进行全面或关键任务的情况，这些任务需要专注且沉浸式的体验。
- 适用于字段数量较多、输入要求复杂或需要用户全神贯注的工作流程的表单。
- 提供充足的空间用于说明、上下文信息和视觉元素。
对话框
最适合作为更大工作流程或用户旅程一部分的、字段数不超过5个的表单，或一个更长的表单的一部分。
特点：
- 适用于用户可以在不离开当前上下文的情况下快速完成表单的简短交互。
- 通常以弹窗或叠加层形式出现在当前屏幕内，与更大的工作流程或旅程保持连接。
- 在收集少量信息且无需整页切换时非常有用。
抽屉式面板
最适合作为更大工作流程或用户旅程一部分的、字段数超过5个的表单，或一个更长的表单的一部分。
特点：
- 与对话框类似，但通常为较长的表单或更广泛的工作流程提供更多空间。
- 以侧面板或抽屉形式出现，从屏幕边缘水平或垂直展开。
- 适合在不完全将用户带离当前上下文的情况下收集更多信息。
长表单设计
设计长表单可能具有挑战性，但我们可以采用一些策略使其更容易完成并减少用户错误。
将表单分成多个部分
将长表单划分为逻辑部分或步骤。每个部分应侧重于一组特定的相关信息。这种方法使表单更易于管理，并帮助用户在头脑中组织所需信息。
折叠面板模式
使用折叠面板模式逐步显示信息。将相关部分分组，并允许用户根据需要展开或折叠每个部分。这有助于保持界面整洁和焦点集中，同时允许用户有选择地探索更多详细信息。
内联添加
对不需要额外字段的用户隐藏这些字段（例如，在报告表单中，“添加另一个仪表板”按钮会按需显示一组额外的输入字段）。
- 在某一部分或一组字段旁边添加“添加更多”或类似的按钮。
- 当用户点击按钮时，动态生成额外的字段供他们输入。
- 这种方法最初使表单保持简洁，但允许用户根据需要进行扩展。
动态表单（渐进式展现）
采用条件逻辑，根据用户输入或选择显示或隐藏特定字段。这有助于个性化表单，只向用户显示相关信息（例如，报告表单的计划页面）。
实现方式：
- 识别可能不适用于所有用户的字段。
- 使用条件逻辑隐藏这些字段，直到满足特定条件（例如，用户选择特定选项）。
- 提供清晰的指示或工具提示，帮助用户理解何时以及为何某些字段被隐藏。
模态窗口
用例
- 用于暂时覆盖主要内容的专注任务或工作流程。
- 为特定任务或决策点收集输入。
- 当需要展示与特定任务或操作紧密相关的选项、配置或设置集合时。
- 用于额外选项可能影响整个用户界面或应用程序状态的场景。
注意事项
- 确保模态内容组织良好，选项导航或分类清晰。
- 在应用更改之前，考虑提供更改的摘要或预览。
- 模态窗口可能会中断用户流程，因此请明智使用，尤其对于不那么关键的操作。
抽屉式面板（侧面板）
用例
- 在不完全遮挡主要内容的情况下显示额外选项或设置。
- 为额外控件或导航元素提供一个持久空间。
- 通过允许用户在保持主要上下文的同时访问补充信息来增强整体用户体验。
注意事项
抽屉式面板常用于不那么打扰用户的交互，这些交互不需要用户全神贯注。它们有助于显示额外选项、设置或信息，而不会中断主要工作流程。抽屉式面板在响应式设计中特别有用，可适应不同的屏幕尺寸。
高级选项展开器
如果表单有许多并非所有用户都需要的高级选项，请考虑将其放在高级选项展开器部分。
包含“显示高级选项”链接或按钮。此功能允许用户访问并非所有人都立即相关的可选控件或功能。这对于高级用户或寻求更多自定义功能的用户特别有利。