国内最专业的IT技术学习网

UI设计

当前位置:主页 > UI设计 >

全面解析表单设计

发布时间:2019/07/30标签:   APP设计    点击量:

原标题: 全面解析表单设计

小编:表单是产品设计中的重要组成部分,如果说弹框的主要作用是完成信息反馈,那么表单的主要作用就是完成信息录入。

任何一个表单都可以被拆解成三个最基本要素:标签(标题)、输入框按钮

标签是用来告诉用户这个列表项是什么的;输入框是供用户完成信息录入的;按钮是供用户完成信息录入后点击进入下一个流程的。

标签

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

1)左标签

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

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

2)?顶部标签

顶部标签是指位于输入框上方的标签,这样输入框就可以独占整个页面,信息可以得到更完全的展示。

与左标签相比,顶部标签可以给输入框的内容腾出足够的空间。在界面设计中,更多的空间还意味着具有更高的信息层级。同一个表单中会有很多的输入项,有些输入项的优先级很高,ui设计qq群,我们可以考虑使用顶部标签的样式来进行凸显。

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

3)?行内标签

行内标签又可以被看成是输入提示,其样式看起来很适合手机端的表单设计,因为它可以极大地节省页面空间。但是一旦用户点击切换到输入状态以后,就看不到这些标签了,如图5-22 所示。如果操作提示字数很多,例如密码规范,那么用户会记得很辛苦。我们可以在调起的键盘顶部加上提示,减少用户的记忆成本。

但是,如果表单项目过多,则用户在填写的时候很容易串行,可能会出现把家庭住址填到毕业院校一栏中的情况。更严重的是,用户因为无法看到标签,这类错误是无法被检查出来的。为了解决这个问题,我们可以在行内标签前加一个图标来标识这个列表项,图标所占据的空间不会太大,而且会提高页面的美观性。

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

输入框

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

版权信息Copyright ? IT技术教程 版权所有??? ICP备案编号:鲁ICP备09013610号