全文 1642 字
阅读时间约 5 分钟
本文首发于码匠技术博客
书接上文（表单的 9 种设计技巧【上】），码匠继续为您分享表单交互设计中的小技巧～
技巧 5：对相关信息分组，并折叠不常用表单项
对有关联的信息进行分组是提高文案可读性的常用策略。码匠建议您通过运用字号、间距或者分割线等视觉手段将相关的信息进行分组，提升用户处理信息的效率，从而提高表单易用性。
这里使用码匠的分割线组件，将表单内容进行了信息分组：
此外，如果某些表单项很少使用，可以在表单中动态折叠/展开该部分，以优先展示常用表单项，使界面整洁有效。可以通过添加一个用于切换的链接，并根据折叠/展开的状态动态改变链接文本：
1. 首先在表单中添加一个链接组件：
2. 创建一个临时状态 showHide，设置默认值为 false。然后为链接组件添加一个单击事件，动作选择设置临时状态，再选择创建好的临时状态 showHide，再参照下图输入值：
3. 接着为想要动态折叠/展开的每个组件设置布局->隐藏属性，如下图：
4. 最后，修改链接文本，使其也能动态变化：
技巧 6：表单默认值
设置默认值能帮助您的用户更高效地使用表单，主要包括两方面：通过设置表单输入的默认值，预测用户可能输入的内容；或者将选择组件的默认值手动配置为用户最常使用的选项。
对于数据输入，另一个实用技巧是使用选择器组件来为用户提供备选项，并根据后端数据动态更新选项（使用文本输入组件则可能会产生一些不必要的人为错误），具体可参阅选项列表配置 -> 自动配置选项。
许多情况下，表单组件可以利用表格选中行设置默认值。例如下图，引用表格组件的 table.selectedRow.data 属性，将表格当前行的数据作为默认值来自动填充表单，并允许用户修改和提交表单：
技巧 7：输入校验和反馈
在提交表单到数据库之前进行数据校验，能避免将用户错误或无效的输入送到后端。而给用户及时、正确的反馈也同样重要，能帮助用户快速了解为什么输入的数据是错误的。
在码匠中，几乎每个数据录入组件都有校验属性，帮助您基于设置的规则在用户提交数据之前进行检查：
通过配置组件或查询的事件属性，触发表单提交成功或失败的通知，从而根据用户输入的具体情况给出不同反馈，指出当前输入存在的问题。如下图，当电子邮件输入为空时，触发全局提示：
技巧 8：成功提交后重置到默认值
一般情况下，在提交表单后自动清除输入是很重要的。在码匠中，可以在表单组件的属性栏选择是否在成功提交后重置到默认值。
但在一些特殊情况下，一些表单项的输入值需频繁复用，此时可以在表单中添加一个清除按钮，并配置好单击事件的动作，让用户自己决定是否清除和重置输入。
