发布时间：2021-10-9 分类： 行业资讯
表单设计的主要目标是满足我们和用户的需求，并确保用户可以快速轻松地完成它。
本文从三个方面探讨了表单设计的基本原则：选择合适的表单问题，阐明问题逻辑，遵循表单设计规则。
选择正确的问题
只需要考虑两个问题：
我们希望用户通过表单获得哪些信息？
用户完成当前操作需要哪些信息？
根据我们得到的问题，请参阅Carolyn Jarrett的“预订，删除，延迟，解释”;这四种策略形成了更好的问题。
保留：你问的是用户想要什么，然后留下这些问题
删除：用户无需填写即可获得答案。我们可以通过用户的其他信息来推断它，或删除不必要的问题，减少我们的工作量并减少用户填写表格的时间
延迟：您不需要立即得到答案，延迟到正确的时间填写正确的地方
解释：涉及敏感信息或用户隐私的信息，但我们必须要求用户解释为什么需要它以及它对用户有什么好处
清除问题之间的逻辑：
在通过分析得出一个相对合理的问题之后，我们必须考虑问题之间的逻辑，以确保顺利填写。
根据情况和问题数量对问题进行分组，并考虑提出这些问题的适当时间和地点。
例如，如果您在Apple的官方代购源码网站上购买了帐户，您仍然可以购买该产品，然后在付款结束时创建一个帐户。它不会影响购买行为，因为用户没有帐户。
表单设计规则
适当的标签对齐
根据标签的位置，它可以分为左对齐标签，顶对齐标签，右对齐标签和帧内输入标签。具体方法取决于诸如我们希望用户完成表单的速度，屏幕显示的限制等因素。
顶部对齐标签
顶部对齐的标签具有清晰的完成路径，用户可以按照标签快速完成表格，并且可以在网络侧添加水平空间以其他方式组合相关的输入框;缺点是当内容较多时会占用额外的垂直空间当你有更多时，请小心使用它。应该注意的是，顶部对齐标签应使用合适的垂直间距，通常使用输入框的高度50％-75％作为相邻输入框的间距。
对齐右侧标签
右对齐标签与相关输入框相邻，填充时间相对较快，占用垂直空间减小;缺点是左侧不均匀，这降低了可读性。
对齐左标签
左对齐标签还减少了对垂直空间的占用。由于标签是左对齐的并符合我们的阅读习惯，因此用户可以快速理解表格需要回答的问题。缺点是右侧未对齐，导致标签与相关输入框相邻。增加的间距增加了用户完成表单所花费的时间。
如果您希望用户仔细填写问题，使用左对齐标签是一个不错的选择。
在框中输入标签
输入框标签极大地节省了页面空间，使界面看起来更简洁美观，但一旦用户点击切换到输入状态，用户就不会看到这些标签。如果同一页面上有许多表单项（超过5个），用户可能会忘记在用户填写之前填写的内容。为了解决这个问题，我们可以在内联标签前面添加一个图标来识别列表项。图标占用的空间不是太大，它会增加页面的美感。
如果表单很长，则输入框中的标签不合适。表格填写完毕后，标签就消失了。用户很难检查出来，因此输入框中的标签更适合于一个问题（例如搜索框）或两个问题。用户熟悉的三个输入框表单或表单（例如登录）
清除输入框类型
常用输入框类型包括单选按钮，复选框，下拉列表和文本框。
文本框：您可以添加文本框提示，以帮助用户了解如何回答问题，防止输入错误，并且效率低下。
单选框，复选框：答案很明显，有效防止输入错误。如果有更多选项，则会影响界面。您可以考虑使用下拉框。
下拉框：与单选按钮一样，可以防止输入错误，视觉效果也很好。缺点是它牺牲了可用性和清晰度。答案并不明显。用户需要单击以查看答案然后选择。
突出显示主要操作
主要动作通过视觉设计突出显示，表明重要性并减少次要运动的视觉干扰。
可以在用户完成操作之前禁用主动作，并且在主动作完成之后给予用户及时反馈，并且向用户通知下一操作。
在完成
之前禁用主要操作完成后提供反馈
什么时候帮忙？
帮助信息具有直接呈现和触发器演示。
直接表示形式意味着用户不需要执行任何操作，并且提示信息自动出现在相关区域中。目前，最常见的是出现在输入框的内部或右侧。例如，我们常用的登录页面会在输入用户名时提示您输入电子邮件/用户名/验证的手机提示信息，以帮助用户尽快完成操作。
触发的呈现形式意味着在用户触发操作之后，显示相关的提示内容，并提示用户执行下一操作并确定用户的当前操作是否正确。应当注意，当用户指示已填写并进入下一个输入框时，应验证触发器呈现。如果应该告知用户错误或直接给出建议的答案。
本文最初由@struggle发布。未经许可，禁止复制。
该地图来自PEXELS，基于CC0协议
