什么是表单?设计需要注意些什么?
作者:优漫动游 2022-09-14 15:21 查看: 643
  不管是APP还是Web端界面设计,我们最常见的元素应该就是表单了,表单几乎是每一款数字产品都不可或缺的组成部分,也是设计师必须要亲身经历的设计组件之一,它的作用无可替代。本篇优漫动游小编带你了解一下什么是表单?设计需要注意些什么?Bee express项目表单存在的问题.表单的组成结构与类型.


什么是表单?设计需要注意些什么?

  什么是表单?

  在我们的现实生活中,从小到大都在和表单打交道,从我们在学习使用的作业本、学校篮球场里的线条、班级里面每个小组区域的划分;再到楼层及墙面阻隔、超市里面的货架、马路上的斑马线…等。虽然这些潜在的表单没有明确的标识,但对我们已经形成了条件反射,也有了深刻的记忆,随时都在告诉我们,在哪个区域可以做什么?需要注意什么?以及行动之后的结果反馈。

  表单在产品中主要负责数据采集的功能,用来搜集和呈现一些数据、信息和特定的字段,大部分涉及到数据采集功能的模块,我们都可以称其为表单。范畴极为广泛,应用情况牵涉到方方面面,可以被灵活运用于多种功能模块中。

  表单并不是表格,是最为常见的页面模块,比如登录网站填写信息、购物填写地址、填写调查问卷、修改个人中心信息时……都是在和表单发生互动。表单是由多种元素组成,最常用的元素就那么几个,在设计过程中,设计师需要合理组织这些元素,帮助用户在填写表单时,轻松愉快的完成。

  Bee express项目表单存在的问题.

  Bee Express主要经营的是快递、速递柜业务,前期主要经营泰国市场,所有APP/网页的视觉语言定为中文、英文、泰文三种。那么我们设计的界面就需要去考虑在表达同一个信息时,中、英、泰三文不同长度的占比,需要预留足够的位置以供所有译文显示完整。

  表单的组成结构与类型.

 1.表单的组合元素

  表单的目的、内容、大小长度等虽然各不相同,但基本元素比较固定,在进行布局和交互设计的时候,这些元素有着较高设计要求,合理组织这些元素有助于用户轻松完成表单填写,在产品上需要高效、显著且有良好的可访问性。表单主要有以下几部分组成:

  标签:告诉用户这里应该输入的元素是什么,如:姓名、电话、地址;

  输入域:可交互的输入区域,如:文本框、选项框、下拉选择、文件上传;

  占位符:占位符是对标签进行额外的信息描述,如:输入信息的范例、填写帮助;

  前导图标(可选):描述文本所需的输入类型和特征,如:登录的账号、密码、验证码;

  后缀图标(可选):对输入内容进行控制,如:下拉的展开与收起、清空;

  帮助(可选):提供表单内容的注释或辅助内容,如:说明、注意事项;

  反馈(可选):告知用户当前操作可能或已出现的问题,如:提交成功、错误提示、网络问题;

  键盘(可选):在文本编辑时需要使用键盘,如:设备系统键盘、应用内置键盘;

  动作按钮:动作按钮是在表单的结尾,如:提交、下一步、清空所有信息。

  2.选择合理的对齐方式

  常见的对齐的方式有三种,左对齐、右对齐和顶对齐。不同的对齐方式都有各自的优点和缺点,我们需要根据项目实际情况来选择最合适的对齐方式。

  标签左对齐:

  优点:左对齐有足够的垂直空间,可以充分利用,而且便于信息的扩展。

  缺点:需要更多的横向空间,主要由标签的字数决定,需要刻意控制,否则会显得参差不齐。与输入字段关联性弱,完成速度最慢,导致加长用户完成表单的时间,增加用户的时间成本。

  标签右对齐:

  优点:标签到输入框的间距是固定的,用户在浏览时速度更快,减少了用户完成表单的时间

  缺点:所占空间与左对齐相同,左右边缘呈锯齿状,标签与输入字段距离一致,完成速度一般。感觉上有些随意,在视觉上不易快速了解表单的全部信息,且缺乏统一感。

  标签顶对齐:

  优点:符合自然视线,完成速度最快,好布局,适合长短不同的标签,用户在视觉扫描时能快速的捕捉表单信息,更快的完成操作。

  缺点:面对表单内容较多、内容过长时,需要更多的纵向空间。

  3.选填与必填

  需要正确区分必填及选填的字段信息,尽量避免可填字段,如果不可避免,应该做明确区分。避免用户不知道哪些字段必须填写、哪些是选择性填写。根据用户长期使用产品被培养出来的习惯,可以用下列方式区分:

  使用带*标记加入标签提示,来告知用户必填字段,选填字段不做标记;

  必填字段过多时,不用做任何标记,选填字段标签处备注「选填」;

  避免必填和选填字段同时标记或者都没有任何标记。

  4.内容分组

  在我们设计表单需要的字段内容较多时,需要合理的使用内容分组,这样整体看起来更加有组织性。接近性(格式塔原理)原则告诉我们:相互靠近的物体被认为比相互距离较远的物体更有关联性,这样能使设计界面层次有序,视觉清晰,减少视觉噪音。分组时需要注意:

  内容属性相近或有关联性的放在一组;

  根据信息的重要性及难易程度排列分组,将选填的表单内容靠后。

  5.合理分页

  表单信息内容过多时,需要合理的使用分页,避免用户在事先就觉得需要在这个表单上花费大量的时间,就有可能产生放弃的想法。比如我们申请信用卡,就是采用多个表单页面逐步完成的。

  另外,在表单信息较少时,为了提升易用性和转化率,也可以采用分页、分步骤完成。如问卷调查,每个问题都是单独的页面,这样可以避免信息的相互干扰,也让用户得以放松心情,专注于当前选项,提升易用性;还有部分APP登录,把手机号输入和验证码分为两个页面操作,Facebook的数据表明,分步也是可以提高成功率的。

  6.展示与隐藏

  部分内容在用户需要的时候可以展示,或者系统强烈推荐的选填内容也可以呈现给用户,但在用户明确不需要时,适时将信息隐藏,避免多余表单信息的干扰,造成用户的不确定性。

  7.匹配合适的键盘

  根据表单内容的不同属性,应对不同的输入需求,应该提供不同的键盘类型,以便于用户使用更加快捷。常见键盘有以下类型:

  设备系统内置的输入法,或者下载符合我们长期使用习惯的输入法APP;

  涉及资产安全方面,提供内置键盘,打乱键盘字母及数字的固定位置,可以防止窥窃,提高安全性;

  数字输入,提供纯数字键盘,能够提升用户的完成效率,让输入变得更简单。 


      以上就是关于什么是表单?设计需要注意些什么?的一些简单介绍,希望给大家带来一些帮助。更多关于UI设计培训的问题以及线上免费网课,可以持续关注广州优漫就业官方网站以及广州优漫就业公众号具体了解哦。如果大家有时间的话,最好是能到我们线下基地进行实地考察。
预约申请试听课
填写下面表单即可预约申请试听!怕钱不够?可就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑! 担心就业?一地学习,可全国推荐就业!
IT培训问答
开班时间

微信客服