上期回顾:

精心设计的表单,能让用户感到心情舒畅,愉快的注册、付款和进行内容创建和管理,这是促成网上商业成功的秘密武器。表单在 B 端和 C 端都有举足轻重的作用,特别是 B 端产品,表单和表格几乎占据了整个产品的 70%。

表单设计相关文章:

那我们在设计表单的时候有没有需要注意的地方?如果产品或业务方问你为什么这样设计,你应该用什么方式去回答?

为什么学习底层逻辑:

互联网经过了这么多年的发展,现在要说在一些基础的元素上去创新其实很难。首先公司不会给你时间去研究,大环境也不允许,这可能是为什么底层技术都是用的国外的。google 可以用 3 个月时间研究基础组件文本框,这里面除了设计还需要进行大量的测试,来验证设计是合理的、好用的,但是国内很少有公司会给你 3 个月研究一个文本框。

有人会说我只要会用就行了,管它为啥这么设计。如果是这样,在评审的时候就会经常被质疑,为什么要用这个组件,能不能换一个?我觉得可以用开关组件,我觉得可以用单选,那我们到底听谁的,我们还是设计师吗?我们虽然没有这么多时间去研究创新,但在使用的时候还是要知道这些组件的底层原理,这样你才能根据业务场景灵活运用,而不是听别人的,看别人的。

首先看一下表单有哪些设计原则:

设计原则是任何一种解决方案的指路灯。他们体现解决方案应包含的基本目标。

原则 1:尽量减少痛苦,填写过程应该尽量简洁、容易

原则 2:说明填写完成路径,清晰告诉用户如何完成这个目标

原则 3:考虑情境,受众群体、应用、业务

原则 4:确保一致沟通,保证客户与公司只用一种声音说话

从 4 个方面,总结B端表单标签的设计细节

带着原则来了解一个问题:

输入框标签应当顶对齐、右对齐还是左对齐?

导致不同对齐的原因:有时候你希望能降低人们速度,使他们有时间进行深思熟虑。也可能受到屏幕显示的限制,要求表单纵向或者横向空间最小化。也可能由于本地化需要,表单要适应不同长度的多种语言。所以标签顶对齐、左对齐或者右对齐的正确答案取决于这些及其他更多因素。

从 4 个方面,总结B端表单标签的设计细节

1. 顶对齐

三种标签对齐方式中,顶对齐标签对减少表单填写时间所做的贡献最大。

由于标签和输入框的位置非常靠近,处理起来毫不费力。填写整个表单很快很容易,因为人们一般只需要在一个方向移动:向下。这也为填完表单提供了清晰地完成路径。

从 4 个方面,总结B端表单标签的设计细节

顶对齐标签还提供了大量横向空间,可用来扩大或者收缩标签文字,而不会对整个页面布局产生负面影响。这对比长标签或者跨文化的本地化标签特别有用。相同情况下,法语,德语或者荷兰语等语言比英语长,因此很容易破坏表单布局。大量横向空间可用于以多种方式组合相关输入框,这是顶对齐标签的另一优点,由于横向空间减少,左对齐和右对齐标签对这种布局灵活性不足。

从 4 个方面,总结B端表单标签的设计细节

从 4 个方面,总结B端表单标签的设计细节

但顶对齐标签会占用额外的垂直空间。因此,如果可供使用的垂直屏幕空间较小,应当谨慎使用顶对齐标签。 顶对齐标签布局还应当采用合适的垂直间距。 表单输入框之间的垂直空间太少或者太多都会阻碍移动。一般而言,最好使用输入框 50%至 75%的高度作为相邻输入框的间距。

从 4 个方面,总结B端表单标签的设计细节

能迅速填完顶对齐标签表单的原因之一,可能是因为眼球只需要在标签和输入框之间进行单一运动。事实上,马泰奥·彭佐从 2006 年 7 月进行的眼动研究发现,从标签移动到输入框只要 50 毫秒,比右对齐标签方式快两倍,后者高达 240 毫秒。

从 4 个方面,总结B端表单标签的设计细节

因为完成时间短、完成率高,有些设计师总是推荐使用顶对齐标签,毕竟,花费最少气力填完表单是首要目标,顶对齐标签的速度自然会起作用。 但眼动追踪及现场网站测试采用的都是人们熟悉数据的表单,也就是说,人们普遍了解或者随时可以找到这些信息,比如姓名、地址、信用卡号码或者电子邮件地址,测试结果是否适用于陌生数据,仍有待观察。

2. 右对齐

右对齐标签同样具有输入框与标签相邻的优点,因此也能快速填完。

从 4 个方面,总结B端表单标签的设计细节

但右对齐布局造成左侧补齐,会降低快速浏览表单问题的效率。西方人习惯从左往右阅读,他们的眼睛喜欢沿左侧移动。如果标签文字宽度变化,右对齐标签还会产生灵活性的问题。如果标签需要两行文字,流量表单会更加困难,而这种现象相当普遍。

从 4 个方面,总结B端表单标签的设计细节

也就是说,如果要尽量减少表单占用的垂直屏幕空间,右对齐标签能提供快读完成时间。 马泰奥·彭佐的眼动研究发现,专家用户和新手扫视(眼睛运动)右对齐标签表单的标签和输入框的平均时间分别为 170 毫秒和 240 毫秒,而填完时间比左对齐标签快两倍。

从 4 个方面,总结B端表单标签的设计细节

3. 左对齐

如果人们不熟悉表单要收集的数据,或者问题无法分成易处理的内容组(比如地址各部分),左对齐标签浏览表单问题会更容易,人们只要上上下下阅读标签左栏,不会被输入框打断。

从 4 个方面,总结B端表单标签的设计细节

但有些长标签经常会增加标签和输入框之间的距离,因而延长完成时间。人们不得不在栏之间“跳越”,发现输入框和标签之间的正确联系,然后才能输入答案。 与顶对齐标签相比,左对齐标签还有占用较少垂直屏幕空间的优点。不过和右对齐标签一样,标签长度和输入框组合弹性小是其缺点之一。

三种方案中,左对齐表单填写速度最慢,可能因为左对齐表单解析问题时眼球定位次数较多。人们一般都能将左对齐布局中的标签与相应输入框联系起来,只是花费时间较长。根据马泰奥·彭佐的研究,“典型扫视时间为 500 毫秒”,很长,说明用户经历着沉重的认知压力。

从 4 个方面,总结B端表单标签的设计细节

另外 2 种较少使用的标签:

1. 输入框标签

如果屏幕空间宝贵,可以使用输入框内标签,这种做法减少了一半表单需要的屏幕空间。目前常用场景主要是在一些登录、注册、申请试用等简单的表单中使用,在主要内容中比较少见。

从 4 个方面,总结B端表单标签的设计细节

2. 混合对齐

虽然目前没有数据表明采用混合标签会有问题,而经验又告诉我们情境常常比一致性更重要。 但同一产品采用不同表单布局时一定要谨慎,除非有合适理由。否则采用单一布局是最安全的,也能兼顾一致性问题。

总结

  1. 表单标签应当使用自然的简洁语言,大小写一致,所提问题应当尽量直观,容易理解
  2. 如果要减少填写时间,或者出于本地化原因,标签长度需要灵活多变,可采用定对齐标签
  3. 如果与上述目标类似,但垂直屏幕空间有限,可采用右对齐标签
  4. 如要求用户浏览表单标签,知道必填问题或者回答多个问题中的若干特定问题,可采用左对齐标签
  5. 如果表单非常短,屏幕空间极度有限,可采用输入框内标签,同时应当确保合适的交互和情境
  6. 确保清晰区分标签和数据,特别是对于输入框内标签
  7. 如果考虑在同一应用工具的不同表单采用不同标签对齐方式,应当平衡情境和一致性
  8. 单一表格中采用不同标签对齐方式会破坏明确完成路径,人们会觉得迷惑

最后再给大家讲一个故事:

有一天,齐桓公正在读书,被一个叫扁的工匠看到了.扁问:“大王,您读的是什么书?”桓公说:“这是圣人的书。”扁说:“如此说来,大王您读的只不过是圣人的糟粕而已。”齐桓公一听,气坏了,说:“你一个工匠,从来不读书,你知道什么?”扁不慌不忙地回答:“我是在做轮子的过程中感受到的.如果做轮子时轮轴做得太松,轮子就太过光滑不够坚固;如果太紧就会导致轮子转动困难;只有不松不紧的时候,才刚好合适.但不松不紧的感觉我却无法通过语言描述,只能在反复练习中去领悟。照此看来,您所读的书,不也就是圣人的糟粕吗?” 未完待续…

点赞 27
收藏 87

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。