• 24小时服务热线:400-088-1128

当前位置 南顺网络>> 知识拓展

用一篇超全面的文章,帮你掌握【表单设计】知识点

    表单是产品设计中的重要组成部分,如果说弹框的主要作用是完成信息反馈,那么表单的主要作用就是完成信息录入。任何一个表单都可以被拆解成三个最基本要素:标签(标题)、输入框和按钮。标签是用来告诉用户这个列表项是什么;输入框是供用户完成信息录入的;按钮是供用户完成信息录入后点击进入下一个流程的。

标签
根据标签所处的位置,可以将其分为左标签、顶部标签和行内标签。

1、左标签

左标签在目前来说是最常见的一种标签样式,但是这并不意味着我们可以无所顾虑地使用它。以手机端为例,手机端的屏幕尺寸(宽度)有限,左标签会占据屏幕较大的空间,此时右边的输入框就可能无法展示完整的信息。

例如,如果用户输入的地址过长,就会造成信息的展示不完全,这对用户体验来说是致命的。因为用户在进行下一步操作之前都会对输入的内容进行审核确认,如果连完整的内容都无法获知或者获知的难度较大,则用户根本不会进行下一步操作,这就造成了操作流程的中断。所以,我们在使用左标签的时候,一定要考虑对多行文本的展示。

2、顶部标签

顶部标签是指位于输入框上方的标签,这样输入框就可以独占整个页面,信息可以得到更完全的展示。
与左标签相比,顶部标签可以给输入框的内容腾出足够的空间。在界面设计中,更多的空间还意味着具有更高的信息层级。同一个表单中会有很多的输入项,有些输入项的优先级很高,我们可以考虑使用顶部标签的样式来进行凸显。

但是这种布局方式也有缺点:会占据更多的纵向空间,之前一屏就可以展示的内容,现在用户需要滑动页面才可以看完。

3、行内标签

行内标签又可以被看成是输入提示,其样式看起来很适合手机端的表单设计,因为它可以极大地节省页面空间。但是一旦用户点击切换到输入状态以后,就看不到这些标签了。如果操作提示字数很多,例如密码规范,那么用户记忆会很吃力。我们可以在调起的键盘顶部加上提示,减少用户的记忆成本。
但是,如果表单项目过多,则用户在填写的时候很容易串行,可能会出现把家庭住址填到毕业院校一栏中的情况。更严重的是,用户因为无法看到标签,这类错误是无法被检查出来的。为了解决这个问题,我们可以在行内标签前加一个图标来标识这个列表项,图标所占据的空间不会太大,而且会提高页面的美观性。

当表单项目过多时,我们要对其进行整合分组来提升内容的可读性。如下图所示,这里将 15 个字段分成 3 组。同样的内容,但给用户的印象却大不相同。
输入框

输入框的作用是供用户完成信息录入,这里我们的设计思路是如何提升信息的录入效率。很多设计师偷懒,把所有的输入框都做成文本框样式,用户必须调起键盘一个字一个字地输入,这种体验是非常不友好的。如果我们想让用户录入个人信息,其中的生日和城市就应该使用日期和城市组件,而不是让用户手动输入。

即使非要让用户手动输入,我们同样可以根据不同的场景给用户提供更友好的体验。如果要输入的是数字,那么应该给用户调起数字键盘;如果要输入文本,那么应该给用户调起全键盘,避免用户手动切换键盘。

即使用户输入符号,我们也要考虑如何减少用户的操作步骤。例如,我们发现当光标位于周星星三个字右边的时候,点击「“」键,会出现左右双引号;当光标位于周星星三个字中间的时候,点击「“」键,只会出现左双引号。这是因为光标在文本右边,用户只要输入「“」,那么就必然需要「”」来结尾,这里直接提供左右双引号更合适。如果光标是文本中间,无法确定「”」需要在哪里出现,所以只展示「“」。容错性设计 

在理想状态下,用户填写完表单信息,然后点击「提交」按钮,系统显示提交成功。但是,现实情况却是用户在填写过程中经常会发生错误,那么如何将容错性原则融入表单设计中呢?

首先我们需要给予用户足够的操作提示,日期录入就是最典型的例子。不同的地区对于日期录入的格式也不一样,「02/12/2019」到底是2019年2月12日还是2019年12月2日?如果我们不提示用户,用户就不知道应该怎么输入。

为了避免用户犯错和提升用户的信息录入效率,我们可以提供自动完成录入功能,当用户在文本框里输入时,系统可以猜测可能的答案,显示可选列表,避免了用户手动输入造成的错误。

如果你确定对用户足够了解,在用户进行信息录入时,可以提供合理的默认值。因为对用户来说,填写信息永远都不是一件有趣的事情,设置合理的默认值可以节省用户的操作时间。


原文链接:https://www.uisdc.com/form-design-3