关于表单设计和打造的内容，广州网站制作公司记者也与大伙推荐过不少了，今天为大伙推荐的是《网站制作之表单设计8大原则》
1、表单分析
表单的目的、内容、大小长度等虽然各不相同，但基本元素比较固定；合理组织这类元素能够帮助用户轻松完成表单填写。
△ Amazon创建账户表单分析
标题：这个元素帮助用户引导完成表单填写的整个过程，当你把信息分成不少组来让用户填写的时候，标题就特别有用。比如：个人资料、职业详细情况、财务明细。
标签：标签告诉用户在任何特定的输入地区期望他们填写什么内容。
占位符 ：占位符是对标签进行额外的信息描述。
错误信息提示：错误信息提示给予用户错误反馈，提醒用户为何填错了。
动作按钮：动作按钮是在表单的结尾，有个确认提交的动作控件。
2、表单状况
基本上，表单在用户的交互过程中需要历程三个阶段。
默认状况：用户在没有进行任何操作前表单的状况。
聚焦状况：这个状况强调用户正在填写的地区，帮助用户聚焦和降低反复扫描屏幕的时间。
反馈状况：反馈状况是指用户收到反馈时的页面状况（大部分是指错误信息反馈）。有时对于上一个输入信息的反馈在用户聚焦到下一个填写地区时就会显示。然而，假如数据不可以得到立即验证的话，就要等到用户点击提交按钮后再给予反馈提示。
△ Amazon创建账户表单的「默认、聚焦、反馈」页面状况
3、最好实践
1. 维持简洁
叫你的表单维持简短精炼，只保留最有必要的数据，防止以验证的名义让用户重复输入，比如不要重复密打字段，取而代之的是要让用户直接看到他们输入的密码。
2. 用准时验证
当给予用户输入进行显示错误时，最好将反馈定位到具体地方。
△ facebook和Amazon使用了两种不一样的验证反馈方法
3. 将相近的字段打组
将有关信息进行分组并根据容易见到规则排序非常重要。如此的话可以帮助用户降低认知负荷和注意力消耗。
△ 付款页面相近的功能地区被适合地分组
4. 将标签左对齐
要将标签放置到输入框上面（像上面所分析的 Amazon 的表单一样）。不要把占位符文字作为输入框的标签，那样的话用户输入完成后将看不到标签，用户将非常难对已输入的内容做最后的核对，会让他们考虑不少。
一直将标签放置在输入框上面并左对齐，这是高效率的做法。
5. 输入地区与内容种类或尺寸相匹配
简单地说，要保证输入字段的长度与预期的输入种类相匹配，比如：地址就要比邮政编码长。
△ Flutterwave’s Rave的登录页面，输入地区的尺寸与预期的输入字段的长度比率一致
△ payporte的输入地区与预期的输入字段的长度比率不匹配
6. CTA（call to action）按钮
在表单的末尾一般会有个确认按钮或者下一步按钮，在有的场景下，需要有一个以上的按钮。要强调主要的按钮，弱化次要按钮。
△ Amazon的主要次要按钮处置的非常不错
当运用模态弹窗进行信息采集时（表单在模态弹窗上），那样次要按钮有时就是关闭按钮，另一种弱化它的办法就是用 X icon 代替关闭按钮，如下所示。
△ Medium的登录模态弹窗用X icon 来代表关闭按钮
7. 搜索地区
不要隐藏你的搜索框，尤其是你的网站内有很多内容时，搜索可能是最好的选择。
△ Amazon的搜索框特别的显眼
当用户实行了搜索操作后并显示了搜索结果，不要立即清除搜索框内的内容，以便可以让用户比较容易地去回顾他起初所搜索的内容。
△ Medium没清除搜索后的输入内容
8. 明确
给用户传达了解的信息，给予他们所预期的，不要模棱两可。无人喜欢填写表单，无人想填写两遍。
△ Cowrywise的标签内容很明确，甚至按钮的文字都描述得非常不错。
综上所述是广州网站建设公司——海淘科技与你推荐的全部内容，找网站制作服务、网站制作服务、SEO服务都可直接联系在线客服。先看更多网站制作资讯，可直接点击跳转：网站制作资讯
