2022-06-01 分类: 网站建设
关于表单设计和建立的内容,创新互联小编也与大家分享过不少了,今天为大家分享的是《网页设计之表单设计8大原则》
表单的目的、内容、大小长度等虽然各不相同,但基本元素比较固定;合理组织这些元素有助于用户轻松完成表单填写。
△ Amazon创建账户表单解析
基本上,表单在用户的交互过程中需要经历三个阶段。
△ Amazon创建账户表单的「默认、聚焦、反馈」页面状态
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的标签内容非常的清晰,甚至按钮的文字都描述得很好。
综上所述是上海网站制作公司——创新互联与你分享的全部内容,找网页设计服务、网站建设服务、网站优化服务都可直接联系在线客服。
文章名称:网页设计之表单设计8大原则
当前地址:/news13/162413.html
成都网站建设公司_创新互联,为您提供网站制作、动态网站、标签优化、移动网站建设、网站设计公司、Google
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容