最为常见的信息收集表单，却最容易忽视它的体验。

最常见的信息收集表，却最容易忽略它的体验。作为最常见的页面模块，表单(不是表单)几乎忽略了它的存在吗？回想一下，当你登录网站填写信息、购物地址、问卷、修改个人中心信息时……都在与表格互动。对于设计师来说，如何设计一个经验丰富的表格？我总结了这五个策略：填写过程和问题设计1。足够简洁的填写过程需要足够简洁，以便用户能够顺利地完成信息收集，并确保产品所有表单页面操作的一致性。你可能遇到过这样的场景，用社交账户登录一个产品，不是进入主页，而是继续让你输入手机号码使用，这打断了用户填写信息的过程，失去了良好的体验，甚至可能导致用户损失。2.多页填写应有过程提示。如果填写信息分为多页，则需要有过程提示，以便用户知道填写信息的位置和剩余步骤。使用Tab键需要跳转到下一个输入框。3.问题设计的四种方法每个问题都应该保留或删除，这是一件值得思考的事情。用户希望填写的信息越少越好。他们可以尽快使用产品。因此，消除可有可无的问题，保留有价值的问题。延迟是指一些特殊的问题，使用户在输入信息时不会感到突然和过高的阈值。例如，收集银行卡等更重要的信息，不要让用户先填写，而是把问题放在后面。对于解释，仍然以收集银行卡信息为例，需要解释为什么要收集这些信息，如支付，或绑定支付可以获得折扣等。4.用户不关心冒号，也不关心冒号。用户不关心冒号。他们只关心他们想填写什么信息。5.主动作和次动作表中的主动作包括提交、保存、继续等，具有继续或完成操作的属性，表中的视觉效果应更加突出。次要动作主要包括取消、重制、返回、预览、导出、导入等。这类操作属于次要层次，主要属性是中断当前流程或操作当前信息，视觉层次也是次要层次。选择合适的输入框1。输入框的类型输入框是回答问题的一种方式，可分为输入框和输入框组。输入框主要包括复选框、单选按钮、下拉菜单、文本框、列表框(很少使用)；复合输入框、相关输入框、父子输入框等输入框组类型。完整类型的输入框可以参考antdesign组件，它包含了几乎所有将使用的类型。2.对齐标签和输入框有四种方式，左对齐、右对齐、顶对齐和输入框中的标签。顶对齐会加速用户处理，因为视线只需要在中间一起移动，但会增加页面的垂直空间。谨慎使用框内提示，当输入内容过多时，可能会忘记此提示，适用于简单的输入框，如注册、登录界面表等。输入框的长度会暗示填写信息的长度，表单中输入框的长度要提前分类。如果不需要暗示信息长度，需要统一输入框长度。3.经过无数产品的长期教育，用户已经知道带星号*(或红点)的必填项目。当必填项目超过选填项目时，可以清楚地标记选填项目，而不是所有必填项目都加星号，可以减轻视觉负担。合理使用帮助提示1。尽量减少帮助提示，不要依靠文本的帮助来弥补表单设计本身的不足，帮助文本不能使用，如果需要使用，尽可能简洁，并选择提供帮助的好时机。2.帮助提示的五种常见帮助提示有弹出窗口，toast(常见于移动端)、snackbar、气泡和行业提示有五种风格，每种提示的使用场景不同，对用户当前操作的影响也不同。弹出窗口提示直接打断当前操作；行业提示可以清晰定位提示位置；气泡提示主要用于指示、信息提示等场景；snackbar类似于toast，在顶部有短时间的操作提示，但snackbar可以附带操作属性，如带取消按钮。3.需要在适当的时间和位置自动即时帮助。在新浪注册页面上，当您开始填写手机号码时，您将提示国内外填写区别。如果您直接跳转到第二个输入框，您将立即给出错误的提示以吸引您的注意。4.成功提示成功提示属于整个输入信息的额外信息，是对用户完成信息输入的提示和感谢。因此，如果你想增加成功提示，你需要给人留下深刻印象，唤起用户的积极情绪，否则你宁愿不要成功提示。信息验证1.错误提示验证错误提示适用于错误率高、格式要求特定的问题。在QQ和虾音乐的注册页面上，当手机号码填写位数错误时，跳转到下一个输入框仍然可以通过验证。当用户输入较少的验证码时，很难找到错误。在36kr的注册界面中，跳转后会给出提示。错误提示需要与输入位置密切相关，以便用户能够清楚地看到错误发生在哪里。2.即使在输入后进行即时验证，也不是在输入过程中。你可能遇到过，当输入电子邮件时，首先输入第一个数字或字母，在输入框后面提示错误，但当你输入完整的电子邮件地址时，错误的提示变成正确的提示，在这种情况下，你会考虑是否有错误，如何总是有错误的提示，这造成了不必要的麻烦。3.实时提示限制输入在固定信息输入或长期文本信息输入中很常见，需要实时提醒用户。其他输入1。如果可以，则需要单选按钮给出默认状态，以提示用户做出选择，如性别选择。除了男性和女性选项外，一些产品还会添加一个不愿透露（或保密）作为默认选择。2.当需要显示大量输入信息或单独考虑选项时，可以考虑使用分层风格。最常见的分层风格是下拉选择框、时间日期选择等。层叠不应覆盖底部信息（特别是当选择信息更复杂时，可能会忘记底部信息），这可能会导致选择问题。总结以上内容主要来自LukeWroblewski的《Web表单设计》。虽然这本书是2010年出版的，但它的许多基本知识点仍然是普遍的，也适用于移动产品设计。