表单页概述
表单页是一个包含表单元素的页面，可以让用户输入、选择、编辑、上传数据等。
表单页的设计需要考虑用户的输入效率和便捷性，以及数据的准确性和完整性。设计师通常需要权衡各种表单元素的数量、排列方式、标签的清晰度、提示信息的可读性等。
不同类型
根据信息的复杂度，分为三种模式：
| 类型 | 用法 | 链接 |
|---|---|---|
| 页面表单页 | 适合于需要收集大量信息的情况，如复杂的数据输入任务（大多数的新增和编辑的场景）。 | 点击跳转查看 |
| 抽屉表单页 | 从页面的一侧滑出的抽屉形式呈现，通常用于提供附加信息或进行次要任务。 | 点击跳转查看 |
| 弹窗表单页 | 这些用于不常见的请求以及只有大约 5 个字段的小型表单。它们也可用于将数据输入补充到整页表单中。模态弹窗不应相互堆叠。 | 点击跳转查看 |
页面表单页
抽屉表单页
弹窗表单页
设计布局
间距
表单元素需要适当的间距以获得更好的易读性。如果间距与推荐的量有所不同，则应以 8px 为增量进行。
| 间距类型 Type | 区域 Area | 元素 Element | 值 Value(px) | 用法 Usage |
|---|---|---|---|---|
| 内容与卡片的间距 | 内边距 | 24px | ||
| 垂直间距 | 项目行之间的上下间距 | 24px | 垂直间距是表单组元素之间的垂直距离，默认情况为 24px。 | |
| 水平间距 | 项目列之间的左右间距 | 48px | 水平间距是表单内联元素之间的距离。间距以 24px 为增加倍数。 | |
| 标签宽度 | 标签区域 | min-width: 80px / max-width: 160px |
响应式布局
表单可以设计单列或多列，并根据断点更新布局。
最大宽度和最小宽度
考虑在整页表单上设置最大宽度。这将有助于提高可读性，并使用户专注于屏幕的一个区域以完成表单。
信息分组
将相关字段分组到多个卡片有助于使表单更易于识别和定位。
如果一个卡片内信息过多，还可以使用额外的分隔线或标题来区分。
标签文案
标签帮助用户理解在相应的输入中应该给出什么类型的响应。
标签文案
- 标签应简短、简洁且具有描述性。建议使用 2-8 个中文字符。
- 避免全部大写以提高可读性。
- 请勿在标签后使用标点符号。
标签放置
在表单中，标签可以放置在输入框的顶部或左侧。单个表单中的所有标签都应使用相同的位置。
左标签位置
好处
- 视觉一致性：左对齐标签创建了一条清晰的视觉线条，有助于用户跟踪和阅读。
- 适合简短表单：对于字段数较少的表单，左对齐可以快速引导用户完成填写。
- 阅读顺畅：对于从左到右阅读的用户，左对齐标签与自然的阅读习惯相符，减少阅读负担。
缺点
- 视线跳动：当表单字段宽度不一致时，用户的视线需要在标签和输入框之间来回跳动，可能导致阅读和填写效率降低。
- 空间利用：左侧标签可能会占用更多的水平空间，对于移动设备或窄屏幕不太适用。
- 视觉混乱：在较长或复杂的表单中，左侧标签可能导致视觉混乱，尤其是当标签文字长度不一时。
顶部标签位置
好处
- 效率提升：顶部标签减少了用户的视线移动距离，尤其是在长表单或字段宽度变化较大的情况下，可以提高填写效率。
- 节省空间：顶部标签更适合紧凑的布局，尤其适用于移动设备或响应式设计。
- 适应性强：与左侧标签相比，顶部标签适用于更多种类和长度的表单，灵活性更高。
缺点
- 垂直空间占用：顶部标签可能会占用更多的垂直空间，导致页面滚动。
- 阅读断裂：如果标签和输入字段之间的垂直间距过大，可能会造成用户在阅读上的断裂感，影响用户体验。
- 设计挑战：在保持清晰度和易读性的同时，设计紧凑的顶部标签布局会更具挑战性。
必填字段
- 如果某些字段是必填的，请通过在标签文本旁边显示星号
*来指示必填字段，并在表格加入星号表示必填字段。 - 如果所有字段都是必填的，则无需明确指出。
- 应避免过多的非必填字段。如果有必要，可以为非必填字段创建一个单独的卡片。
长列表设计
有一些方法可以通过降低用户感知的复杂性，来减少用户对较长表单的压力。
渐进式披露
渐进式披露是按需逐步展示信息和选项，而不是一次性呈现所有内容。这种方法可以提高用户的交互效率和满意度，尤其是在处理复杂的信息或长表单时。
优点
- 增强可用性：通过只展示当前相关的信息，渐进式披露有助于减少用户的认知负担，使界面更加整洁和易于理解。
- 提高用户参与度：这种方法鼓励用户逐步深入，通过分步骤提供信息，可以提升用户的参与度和完成任务的动力。
- 引导用户流程：渐进式披露有助于引导用户按照设计者的预期顺序进行操作，减少用户迷失或感到不确定的情况。
- 适应不同用户需求：可以根据用户输入和行为动态调整显示的信息，满足不同用户的需求。
注意
- 用户期望管理：需要确保用户明白还有更多的信息或选项即将显示。如果管理不当，可能会导致用户感到困惑或不确定。
- 避免过度隐藏：确保重要信息或常用功能不被隐藏，否则可能会降低效率或造成用户不便。
- 流程的直观性：设计的每一步都应清晰、直观，避免让用户感到迷路或不知所措。
- 平衡信息量：每一步披露的信息量需要得当，过多信息可能导致用户感到压力，过少则可能导致用户不理解下一步行动。
多步骤表单
多步骤表单采用将表单进行逻辑分组，然后将这些分组分成步骤或页面。