经验总结|Web表单设计

表单作为UI设计中的通用组件,在界面中出现的频率是比较高的,尤其是在一些To B的产品设计中。近期有做大量web端的表单设计,觉得表单设计看似简单其实做起来还是比较繁琐的,需要我们结合业务或内容属性,设计出合理的表单,关于表单设计的一些经验总结,希望对你设计出有更好体验的表单有所帮助~

经验总结|Web表单设计

什么是表单?

经验总结|Web表单设计

表单在网页中的主要功能是负责采集数据以及向服务器传送数据的。表单是采集用户信息数据重要的途径。好的表单设计能提升信息采集的效率与成功率。不好的表单设计会影响用户心情,导致信息采集不成功甚至带来利益的损失。所以~我们在设计表单时要遵循提升信息采集效率的设计原则。

表单的构成

在这里我把表单简单的分为由标签、输入域、操作按钮这三个基本要素构成。无论多么复杂的表单都是在此基础上进行多维度设计细化的。

标签

标签我们可以把它理解为标题,告诉用户需要填写什么信息、需要采集什么内容。标签通常出现在输入域的左边、顶部、或者输入域内。

经验总结|Web表单设计

▵标签出现的3种位置

标签按所填信息的必要性分为必填项和非必填项,一般我们会在必填项的标签内容加上*号。*号的的摆放位置有下面两种情况:

1.当标签与输入域居中对齐时,建议把*号放在标签左侧。

经验总结|Web表单设计

因为*号比较显目,用户往往第一眼会先看到它,然后按照用户从左往右的阅读习惯,视觉落点分别为文字标签、输入域。考虑到表单的填写效率,*号位于左侧的表单阅读起来会更加顺畅。所以当标签与输入域居中对齐时,把*号放在标签左侧会更好。

2.当标签与输入域左对齐时,建议把*号放在标签右侧。

经验总结|Web表单设计

由于人们纵向的阅读习惯,视线会成F型。*号在左侧还是在右侧并不会对用户视觉落脚点造成太多困扰,但考虑到对齐的美观性,*号放在标签右侧会更好。

输入域

输入域是录入用户各种类型信息的重要交互区域。输入域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等等。

ant design有对输入域种类不了解的小伙伴可以去ant design,其官网都有进行详细的说明,传送门:

https://ant.design/components/overview-cn/

经验总结|Web表单设计

▵输入域常见形式

因为输入域是录入信息很重要的交互区域,在设计时我们应该考虑用户输入的多种场景。我们可以将用户的输入过程分为输入前、输入中、输入后,根据每一种场景去细化我们的设计。比如在输入中:我们要考虑信息提示、光标等,在输入后:我们要考虑信息输入错误应该给予怎样的视觉反馈等。总之考虑得越细致,越能提高信息录入的成功率,同时提升用户体验

经验总结|Web表单设计

以阿里云注册为例,该表单设计考虑到了用户输入前、中、后的多种场景,及时给予视觉反馈,既能提升注册成功率又能提升用户体验。

操作按钮

操作按钮是在用户填写完表单各项内容后所要进行的操作来完成或者结束当前操作流程。操作按钮分为全局操作按钮局部操作按钮。全局操作按钮控制整个表单,比如提交、发送等操作按钮。局部操作按钮是对某一范围的内容起作用,比如编辑、删除操作。

表单设计常见问题

1.标签采用哪种对齐方式更好?

在我们的实际项目中,通常会因为文案的长短不一,导致我们不知道该采用哪种对齐方式。采用哪种对齐方式应考虑具体的制约因素和目标来定。

左对齐

当标签采用左对齐的方式时,因文字标签的长度不统一,导致标签与输入框的间距是不可控的。这就会造成设计的通用性不强,以及横向空间的浪费和增加阅读成本。

如果采用左对齐的形式,就要尽量保持文字标签的长度一致,比如通过字距的调整让文字标签的长度保持一致或者通过留足留白空间,这样设计上会更统一。

以简书为例,采取左对齐形式,但是它留足了文字标签与输入域之间的距离,让表单看上去更统一和谐。

经验总结|Web表单设计

▵简书采用左对齐形式

另外左对齐标签形式最大的缺点是它的完成时间最慢,当我们需要采集一些敏感数据,需要用户放慢速度,以确保正确输入时我们可以采用左对齐的设计形式。

顶对齐

采用顶对齐的形式,会让标签和输入域垂直显示,纵向布局的信息呈现效果会更好,从而提高用户填写的效率。如果希望用户尽快扫描表单,则顶部对齐的标签是最好的。顶对齐因为垂直排布,会造成纵向空间的浪费,但在横空间上比较节省,比较适用于横向宽度较窄的页面。

经验总结|Web表单设计

▵顶对齐形式

右对齐

右对齐的优点是标签与输入域之间有明确的关联,可以帮助用户快速完成填写。右对齐跟左对齐一样会因为标签长度不可控,导致设计的通用性不强、以及横向空间的浪费。

经验总结|Web表单设计

▵右对齐形式

在这几种对齐方式中,用户浏览信息的速率是顶对齐>右对齐>左对齐。顶对齐形式适合简易表单、右对齐与左对齐表单适合复杂表单。

2.操作按钮应该用哪种设计形式比较好?

全局的操作按钮我们用常规的按钮样式进行设计即可,但需要注意按钮的层级关系。

主按钮

主按钮是界面中比较重要的功能操作按钮,比如提交、保存等一些正向的操作。主按钮在视觉层级上最高能够引导用户很快的找到核心的操作并点击。主按钮通常是纯文本或图文结合的面性形式。图文结合的形式能吸引用户注意,也帮助用户理解该按钮的操作含义。

次按钮

次按钮的层级相对于主按钮层级要弱一些,通常采用线性形式。在一个页面中可以出现多个次按钮。

经验总结|Web表单设计

▵主次按钮层级对比

对于局部操作按钮的设计形式可以是文字按钮、图标按钮,也可以是图标+文字的形式。至于应该应用哪种形式就要结合具体场景去考虑。

图标按钮

图标按钮就是用图标来代表该操作的含义,能够直观的表达按钮的功能。在设计的时候我们需要注意图标是易于理解的、是用户熟悉的图标按钮的设计通常都会配上悬浮框设计,当用户鼠标停留在该图标按钮上会出现对该按钮的文字释义的悬浮框。以微信公众号为例,当鼠标停留在预览图标那,会出现黑色的悬浮框对其进行解释,让用户理解此按钮的意义,让用户放心操作。

经验总结|Web表单设计

在web设计中,由于按钮的种类与使用场景比较多,建议局部的操作按钮使用线性图标,让它的层级相对其他按钮要弱化一些。

文字按钮

文字按钮通常出现在列表的操作项中。文字的颜色通常是品牌色或者蓝色,因为蓝色在用户的认知中通常是可点击的。

经验总结|Web表单设计

图标+文字 按钮

图文结合的按钮相对于纯文字按钮会更加直观。

经验总结|Web表单设计

3.输入框应该设计几种状态?

考虑的状态越多,设计就会越细,能够及时的反馈信息给用户,从而提高表单填写效率。在考虑输入框的设计状态时,遵循及时反馈的设计原则去考虑。

为了避免用户填写完所有信息后才反馈有误,会造成时间浪费,表单填写效率低。通常我们在设计时会在用户输入有误后及时把输入框线变成红色,同时出现红色的说明文案,来引起用户的注意,提示用户。

经验总结|Web表单设计

▵及时反馈错误信息

在设计中我们还需要考虑自动校验的成功与警告状态。颜色通常为绿色与橙色。

经验总结|Web表单设计

输入框到底应该设计几种状态我们也需要根据我们表单的复杂情况去考虑,对于简单的表单设计过于细化的状态是没有必要的。

写在最后的话

表单设计看起来简单,但实际在设计过程中还是有大量的点值得我们去学习与研究的。最初我也是直接拿大厂的设计规范去改,但是到后面遇到复杂的表单设计时,我自己是很懵的。像这种看似枯燥但又很重要的模块设计,我们在设计前期可以多从交互层去考虑:怎样的表单设计能让用户填得舒心又高效?

当我们在看别人的设计规范,比如ant design的组件规范时,我们可以去留意他们的设计细节,知其然知其所以然,去学习与总结并转化为自己的小技巧~

本文由 新媒体之家 作者: 小鱼晴子 发布或转载,其版权均为原作者所有,如稿件涉及版权等问题,请与我们联系删除或处理。稿件内容仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同其观点或证实其内容的真实性,更不对您的投资构成建议。未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
1

发表评论