提升|提升表单设计效果的18个技巧

编辑导语:表单是用户和应用程序之间主要的沟通桥梁,一个合理、优秀的表单模块不仅能帮助用户顺畅的完成业务诉求,更能让用户体验到成功感、满足感,从而提升用户对产品满意度。作者分享了18个提升表单设计效果的技巧,我们一起来看看吧。
提升|提升表单设计效果的18个技巧
文章插图
一、表单始终使用标签人都喜欢接受确定性的信息,面对不确定的信息,尤其是在输入不确定的字段,如果用户忘记了字段的用途并且必须在其外部单击以再次查看占位符,此时的体验将是异常糟糕的(万匹草泥马心头掠过……)
提升|提升表单设计效果的18个技巧
文章插图
二、避免用户阅读路径呈“Z”字型“Z”字型的阅读路径,是指用户在阅读表单的时候呈现从左到右,再从上到下的规律,这样阅读模式的跳跃感较强,导致用户阅读的效率降低,表单数量过多的时候可能进一步导致用户的反感。
当表单分布垂直线上时,用户可以快速垂直浏览表单,从而更容易完成他们的任务。
提升|提升表单设计效果的18个技巧
文章插图
三、表单标签选择顶对齐当表单标签是左对齐 (右对齐),有点像是“Z”字型阅读路径的一个扩展,左对齐 (右对齐) 的表单会自动创建一个“Z”阅读模式,导致表表单阅读效率的下降。当表单标签字段非常短,左侧的标签字段对阅读影响不大。
提升|提升表单设计效果的18个技巧
文章插图
四、使用右对齐标签表单标签左对齐、右对齐相比较而言,右对齐使得标签和输入域之间的距离固定,有明确的视觉关联,可以让用户更轻松地浏览页面,表单的视觉层次也更清晰。
提升|提升表单设计效果的18个技巧
文章插图
五、亲密性强的字段分组整合较长、平铺的表单会增加用户的填写压力,降低用户的填写意愿。将亲密性强的相关表单组合成子模块 (子流程),不仅在视觉上降低长表单带来的压力,还会使表单更具吸引力。
提升|提升表单设计效果的18个技巧
文章插图
六、尊重用户的操作习惯按一定的逻辑顺序一个接着一个地填写每个字段,然后提交表单,是一个用户十分熟悉的操作习惯 (流程),把操作按钮放置表单末尾,是符合用户认知和尊重用户操作习惯的。
提升|提升表单设计效果的18个技巧
文章插图
七、表单之间留有足够的空间标签应该靠近各自的表单输入域,尤其是选择标签顶对齐的时候,利用空间将相邻表单分割开来,适当且合理的空间留白不仅会提高表单的阅读效率,更会使表单更具有美感。
提升|提升表单设计效果的18个技巧
文章插图
八、避免标签重复一般用“*”标记必填字段,有时候“*”是页面中的标签还是用来描述标签的会造成一定的误解,同时“*”的颜色有时候也会引起负面关联,例如:红色表示错误。
对于表单来说,省略不必要信息的字段信息会给表单起到视觉降噪的作用。
3个表单,其中有1个选填表单,2个必填表单,则可在选填表单标签处标记选填;1个必填表单,2个选填表单,则在必选表单标签处标记必填。
提升|提升表单设计效果的18个技巧
文章插图
九、清晰的描述错误信息表单校验出现错误时,不仅要给用户提示到哪个表单填写错误,还要给用户提示到该表单填写错误的原因以及如何快速改正错误。
提升|提升表单设计效果的18个技巧