关于表单设计和建立的内容，海淘科技小编《》

　　关于表单设计和建立的内容，海淘科技小编《》

　　关于表单设计和建立的内容，海淘科技小编也跟大家分享了很多。今天给大家分享一下《网页设计表单设计的8个原则》

　　一、表单分析

　　虽然表单的用途、内容、大小、长度各不相同，但基本元素是相对固定的；这些元素的合理组织有助于用户轻松完成表单。

　　△亚马逊账户创建表单分析

　　二、表单状态

　　基本上，表单在用户交互过程中需要经历三个阶段。

　　△亚马逊账户创建表单的“默认、关注、反馈”页面状态

　　三、最佳实践

　　1.保持简单

　　表单要简洁明了，只保留最需要的数据，避免以验证的名义重复输入，比如不要重复密码字段。相反，让用户直接看到他们输入的密码。

　　2.使用及时验证

　　在向用户提供报告错误的输入时，最好将反馈定位到特定位置。

　　△Facebook 和亚马逊使用两种不同的验证反馈方式

　　3. 将相似的字段分组

　　将相关信息分组并按照通用规则进行排序很重要。这可以帮助用户减少认知负荷和注意力消耗。

　　△ 与支付页面类似的功能区适当分组

　　4. 将标签左对齐

　　将标签放在输入框上（如上面解析的亚马逊表单）。不要使用占位符文本作为输入框的标签。在这种情况下，用户在输入完成后将看不到标签，用户很难对输入的内容进行最后的检查，这会让他们思考很多。

　　始终将标签放在输入框上方并左对齐。这是一种有效的做法。

　　5. 输入区域与内容类型或大小匹配

　　简单来说，就是确保输入字段的长度与预期的输入类型匹配，例如地址必须比邮政编码长。

　　△Flutterwave 的 Rave 登录页面，输入区域的大小与输入字段的预期长度相同

　　△payporte的输入区域与预期输入字段的长度比例不匹配

　　6. CTA（号召性用语）按钮

　　表单末尾通常有一个确认按钮或一个下一步按钮。在某些情况下，必须有多个按钮。要强调主要按钮，请削弱次要按钮。

　　△亚马逊的主副按钮处理得很好

　　当使用模态弹窗进行信息采集时（表单在模态弹窗上），那么辅助按钮有时就是关闭按钮。另一种削弱它的方法是使用 X 图标而不是关闭按钮，如下所示。

　　△ Medium 的登录模式弹窗使用 X 图标代表关闭按钮

　　7.搜索区域

　　不要隐藏你的搜索框，尤其是当你的网站内容很多时，搜索可能是最好的选择。

　　△亚马逊的搜索框特别显眼

　　当用户执行搜索操作并显示搜索结果时，不要立即清除搜索框中的内容，以便用户轻松查看自己最初搜索的内容。

　　△ Medium 搜索后没有清除输入的内容

　　8.清除

　　给用户一个明确的信息，给他们他们的期望，不要模棱两可。没有人喜欢填写一张表格，没有人愿意填写两次。

　　△ Cowrywise 的标签内容非常清晰，就连按钮文字也很好。

　　综上所述，海淘科技与您分享的所有内容，如果您找到网页设计服务、网站建服务、网站优化服务，可以直接联系在线客服。想先看更多网页设计信息，可以直接点击跳转：网页设计信息