表单的 9 种设计技巧【下】

首发于码匠官方博客

全文 1642 字 阅读时间约 7 分钟

书接上文「表单的 9 种设计技巧【上】」，码匠继续为您分享表单交互设计中的小技巧～

技巧 5：对相关信息分组，并折叠不常用表单项

对有关联的信息进行分组是提高文案可读性的常用策略。码匠建议您通过运用字号、间距或者分割线等视觉手段将相关的信息进行分组，提升用户处理信息的效率，从而提高表单易用性。
这里使用码匠的分割线组件，将表单内容进行了信息分组：

此外，如果某些表单项很少使用，可以在表单中动态折叠/展开该部分，以优先展示常用表单项，使界面整洁有效。可以通过添加一个用于切换的链接，并根据折叠/展开的状态动态改变链接文本：

1. 首先在表单中添加一个链接组件：
   
2. 创建一个临时状态 showHide，设置默认值为 false。然后为链接组件添加一个单击事件，动作选择设置临时状态，再选择创建好的临时状态 showHide，再参照下图输入值：
   
   
3. 接着为想要动态折叠/展开的每个组件设置布局->隐藏属性，如下图：
   
4. 最后，修改链接文本，使其也能动态变化：
   

技巧 6：表单默认值

设置默认值能帮助您的用户更高效地使用表单，主要包括两方面：通过设置表单输入的默认值，预测用户可能输入的内容；或者将选择组件的默认值手动配置为用户最常使用的选项。


对于数据输入，另一个实用技巧是使用选择器组件来为用户提供备选项，并根据后端数据动态更新选项（使用文本输入组件则可能会产生一些不必要的人为错误），具体可参阅选项列表配置 -> 自动配置选项。
许多情况下，表单组件可以利用表格选中行设置默认值。例如下图，引用表格组件的 table.selectedRow.data 属性，将表格当前行的数据作为默认值来自动填充表单，并允许用户修改和提交表单：

技巧 7：输入校验和反馈

在提交表单到数据库之前进行数据校验，能避免将用户错误或无效的输入送到后端。而给用户及时、正确的反馈也同样重要，能帮助用户快速了解为什么输入的数据是错误的。
在码匠中，几乎每个数据录入组件都有校验属性，帮助您基于设置的规则在用户提交数据之前进行检查：

通过配置组件或查询的事件属性，触发表单提交成功或失败的通知，从而根据用户输入的具体情况给出不同反馈，指出当前输入存在的问题。如下图，当电子邮件输入为空时，触发全局提示：

技巧 8：成功提交后重置到默认值

一般情况下，在提交表单后自动清除输入是很重要的。在码匠中，可以在表单组件的属性栏选择是否在成功提交后重置到默认值。

但在一些特殊情况下，一些表单项的输入值需频繁复用，此时可以在表单中添加一个清除按钮，并配置好单击事件的动作，让用户自己决定是否清除和重置输入。


⚠️注意：不要将「清除」按钮放在「提交」按钮附近的位置，否则用户可能将原本打算提交的内容不小心清除了。

技巧 9：布局

最后一个技巧是设计用户友好的组件布局，这并没有千篇一律的公式，但码匠为您总结了以下几点建议：

使用对话框

前面提到，许多情况下需要搭配使用表格组件和表单组件。当涉及到更新表格中的一条记录时，最佳做法是将表单放入对话框中，当用户点击链接或按钮时，再自动弹出填充了默认值的表单，而不是将表单一直静态展示在表格旁边，防止用户在浏览表单时不小心编辑数据。具体可参阅使用对话框 (Modal)。

保持创建和更新的表单结构相同

创建和更新的表单应保持同样的输入逻辑，如果您重新排列输入的顺序，用户可能会因为之前的习惯导致出错。

正确分离增删查改操作

对于用户来说，针对数据库的增删查改操作应该是明确区分的。如果读取和更新操作没有正确分离，那么用户的一次误点击就可能意外改变数据。同样，删除操作也应该始终独立，最好为重要的数据设置警告/验证信息。

关于码匠

码匠是一款对开发者友好的低代码平台。我们主要面向国内用户，相较于国外开发的 Admin/CRM/CMS 等后台工具，我们的 UI 界面设计更加适合国内业务场景。同时我们还整合了多款国内常见数据源，包括飞书、企业微信、钉钉、阿里云 OSS 等。不仅如此，我们还一站式提供了企业内部系统常用的租户管理、细粒度的权限控制、审计日志等功能，让您快速搭建后台应用的同时，也为您的企业信息安全保驾护航。
我们的创始团队来自谷歌、快手、百度等公司，深刻理解快速迭代的软件系统对业务的重要性和当下软件开发的复杂性，我们认为在未来软件不会是从零开发的，于是我们重新思考，创造新的工具，帮助公司更好更快地开发软件。
想要了解更多欢迎来亲自探索！

---

本文为原创内容，版权归「码匠」所有，欢迎文末点赞、收藏、评论！转载请联系我们。