关于低代码:表单的-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 等。不仅如此，咱们还一站式提供了企业外部零碎罕用的租户治理、细粒度的权限管制、审计日志等性能，让您疾速搭建后盾利用的同时，也为您的企业信息安全保驾护航。
咱们的开创团队来自谷歌、快手、百度等公司，深刻理解疾速迭代的软件系统对业务的重要性和当下软件开发的复杂性，咱们认为在将来软件不会是从零开发的，于是咱们从新思考，发明新的工具，帮忙公司更好更快地开发软件。
想要理解更多欢送来亲自摸索！

本文为原创内容，版权归「码匠」所有，欢送文末点赞、珍藏、评论！转载请分割咱们。