文章目录
Web 表单设计的 6 个基本原则的最佳实践_网站设计
我们几乎每天都会看到网站设计各种用于登录或提供信息以获取服务或发布内容的网站表单设计。然而，填写表格的过程往往不是那么愉快。我们花时间输入信息，点击提交，然后我们可能不得不等待审核。尤其是相对复杂、流程较长的表单，糟糕的用户体验很容易让用户感到沮丧并最终放弃。
如何提高填表效率，防止用户出错或半途而废？本文总结了以下几种方法：
1.说服用户有效填写：
首先，构建出色的表单来告诉用户填写它们的原因。他们能得到什么？让用户看到向您提供信息的好处。例如，Github 清楚地告诉您，在其注册网页表单设计的右侧，您将获得什么样的帮助。
此外，您可以更具体地告诉用户您考虑让他们填写特定信息表。
为了说服用户有效地填写表格，您还需要消除负面干扰以获得他们的信任。在大多数情况下，最大的担忧是网站收集信息后的使用情况。用户不希望他们的隐私被公开或继续收到垃圾邮件销售电子邮件。此时，您可以引用一些权威作为证据，例如媒体报道和用户案例。
您可以以更周到和亲密的方式来完成，例如通知用户填写他们可能使用的表单的预计时间。
2. 合理组织信息
对于更复杂、项目较多的网页表单设计，如果信息组织不好，很可能会显得复杂和混乱。用户很容易产生抗拒感，甚至一开始就放弃。合理、分层的信息组织意味着框架、空间和颜色的差异。部分应按不同的类别、特征和依赖性进行良好划分。当前过程应以步骤表示。
一般来说，蓝色表示通知，黄色表示警告，红色表示错误，绿色表示成功。
清晰的浏览线条、合理的标签、提示文字和按钮布局可以避免重复信息的出现，减轻用户的视觉负担和身体负担。
适当地隐藏信息可以使整个网页表单设计看起来更加清爽宜人。有些信息可以设置在需要进行相关操作的时候出现。区分主要操作和次要操作很重要。使用按钮定义主要操作，同时链接到次要操作。请记住为主要操作添加比次要操作更明显的样式。
3.为用户节省时间。
花大量时间填写表格会让人们发疯。当您进行 Web 表单设计时，您应该假设所有用户都是懒惰和忙碌的。尝试删除所有不必要的文件项，并考虑是否有比让用户通过键盘机械输入更好的方法（例如后续网站设计研究）来收集信息。
验证码始终是表单中令人头疼的项目。用户需要等待生成验证码，确认内容，确认输入后点击提交，整个过程与用户利益无关。用户将不会因再填写一个验证码而获得奖励。我们可以改变输入验证码的体验，让它更简单有趣，也可以通过新的后台逻辑限制每日用户数来取消验证码。
来自我们安全平台反恶意组织的同事创造了一种巧妙的图片验证码形式
除了验证码之外，注册确认单中存在的二次确认密码也是比较耗时的。目前国外很多主流网站，如Facebook、Twitter、LinkedIn、Friendster等，在填写注册表单时都不需要用户确认密码。WordPress 甚至直接将现成的密码发送到用户的邮箱，而不是要求他们填写表格。
除了上述方式外，用户第一次输入密码时明文也有助于再次输入密码。出于信息安全的考虑，还应为需要的用户提供暗文本开关。以下是我收集的明文密码确认方法供大家参考：
鼠标单击和拖动操作比键盘更有效。添加选择器、快捷选项、智能关联、范围滑块、数字微调等，让用户可以更快地完成表单。
添加选择器、快捷方式选项
支持拖放上传：
微调
应谨慎使用下拉框，因为它会对用户隐藏信息。最好放置在日期/省份选择部分或任何有更大范围的选项。对于范围有限且重要的选项，使用更明显的选择方法更为合适。
减少输入要求，包括格式、大小写等。让你的系统比让用户为你改变他们的打字习惯更灵活。
防止错误。即时验证信息，以便用户修改信息。此外，我们还可以限制用户的行为（例如到达日期不能早于出发日期）或提供自动更正以防止用户犯错误。
通过提供更主动的交互反馈、呈现文本、自动获取信息、自动格式更改、填充小数点等，让您的表单变得更加友好。
当用户输入信用卡号时，它应该自动确定用户使用哪种信用卡。
当电话号码输入错误时，用户更有可能发现归属位置是否不匹配。
4、提供友好指导。
清理晦涩的技术术语（如数据库错误），尽量用更贴心的语言引导用户填写表格，告诉用户任何错误的原因。当问题出现时，清楚地说明问题的原因并提供有效的解决方案。如有必要，您还可以在指导文字之外添加更生动的照片或视觉图形作为指导。
5、一揽子服务
提交不是表单的结束，我们应该为用户提供一个打包服务，形成一个闭环，避免用户在服务中跳出。例如，用户在支付过程中被告知余额不足，用户只能充值继续后续操作。但是当这一切都完成后，用户发现原来的支付和商品页面不见了。这是不闭环的典型例子。同样的故事也发生在下载网站上。用户经常被告知在下载之前注册。但是，当您完成注册过程后，页面会自动跳转到论坛的主页。
一个好的网页表单设计，不仅需要考虑预填指导和填空帮助，还需要考虑整个过程之后的体验。想着用户的初衷是什么，让他在填完后得到他最想要的。即使他暂时拿不到，我们也需要告诉他相应的原因和替代操作。
6. 提供设计关怀
据统计，约有12%的人口患有轻度或重度色觉障碍。如果你使用颜色作为区分不可点击文本和可点击链接的独特元素，可能会使这部分人难以使用。我们可以在链接文本中添加虚线，使用按钮或其他形状进行区分，以便这些用户更清楚地知道哪些是可点击的。
本文由宁波久五网络原创分享