无论是应用程序还是Web界面设计,我们最常见的元素应该是表单。表单几乎是每个数字产品不可或缺的一部分,也是设计师必须亲身体验的设计组件之一。它的作用是不可替代的。本红喵漫漫游小编带您了解什么是表单?设计需要注意什么?Bee express项目表单中存在的问题。表单的组成结构和类型.
表单是什么?
在我们的现实生活中,我们从小就处理表格,从我们学习和使用的作业本、学校篮球场的线条、班级中每个小组区域的划分;然后到地板和墙壁的屏障、超市里的货架、道路上的斑马线等。虽然这些潜在的表格没有明确的标志,但它们对我们形成了条件反射和深刻的记忆。他们总是告诉我们在哪个区域可以做什么?需要注意什么?以及行动后的结果反馈。
表单主要负责产品中的数据采集功能,用于收集和呈现一些数据、信息和特定字段。大多数涉及数据采集功能的模块可以称为表单。范围非常广,应用涉及各个方面,可以灵活应用于各种功能模块。
表格不是表格,而是最常见的页面模块,如登录网站填写信息、购物填写地址、填写问卷、修改个人中心信息。表格由多种元素组成,最常用的元素只有少数。在设计过程中,设计师需要合理组织这些元素,以帮助用户在填写表格时轻松愉快地完成。
Bee express项目表中存在的问题.
Bee Express主要从事快递和快递柜业务。在早期阶段,它主要从事泰国市场。所有应用程序/网页的视觉语言均为中文、英文和泰文。然后,我们设计的界面需要考虑中文、英文和泰文在表达相同信息时不同长度的比例,并为所有翻译保留足够的位置以显示完整性。
表单的组成结构和类型.
1.表单的组合元素
虽然表格的目的、内容、尺寸和长度不同,但基本元素相对固定。在布局和交互设计中,这些元素具有较高的设计要求。合理组织这些元素,帮助用户轻松完成表格填写,需要高效、明显、可访问性好。表格主要由以下部分组成:
标签:告诉用户这里应该输入哪些元素,如:姓名、电话、地址;
输入区:文本框、选项框、下拉选择、文件上传等可交互输入区;
占位符:占位符是对标签的额外信息描述,如:输入信息的例子,填写帮助;
前导图标(可选):描述文本所需的输入类型和特征,如:登录帐户、密码、验证码;
后缀图标(可选):控制输入内容,例如:下拉的展开和收起,清空;
帮助(可选):提供表格内容的注释或辅助内容,如说明和注意事项;
反馈(可选):提交成功、错误提示、网络问题等,告知用户当前操作中可能或已经出现的问题;
键盘(可选):设备系统键盘、应用内置键盘等文本编辑需要使用键盘;
动作按钮:动作按钮在表单的结尾,如:提交、下一步、清空所有信息。
2.选择合理的对齐方法
有三种常见的对齐方法:左对齐、右对齐和顶对齐。不同的对齐方法有各自的优缺点。我们需要根据项目的实际情况选择最合适的对齐方法。
左对齐标签:
优点:左对齐有足够的垂直空间,可以充分利用,方便信息的扩展。
缺点:需要更多的横向空间,主要取决于标签的字数,需要有意识地控制,否则会显得参差不齐。与输入字段的相关性较弱,完成速度最慢,导致用户完成表单的时间延长,用户的时间成本增加。
右对齐标签:
优点:从标签到输入框的间距是固定的,用户浏览速度更快,减少了用户完成表格的时间
缺点:空间与左对齐相同,左右边缘呈锯齿状,标签与输入字段距离一致,完成速度一般。感觉有点随意,视觉上不容易快速理解表格的所有信息,缺乏统一感。
标签顶对齐:
优点:符合自然视线,完成速度最快,布局好,适合不同长度的标签。用户可以在视觉扫描中快速捕捉表单信息,更快地完成操作。
缺点:面对更多的表单内容,内容太长,需要更多的纵向空间。
三、选填必填
我们需要正确区分必须填写和选择填写的字段信息,尽量避免可以填写的字段。如果不可避免,我们应该明确区分它们。避免用户不知道必须填写哪些字段,以及选择性填写哪些字段。根据用户长期使用产品的习惯,可以通过以下方式进行区分:
用带*标记添加标签提示,告知用户必须填写字段,选择填写字段不做标记;
当必填字段过多时,不需要做任何标记,选择填字段标签备注「选填」;
避免同时标记必填和选填字段或无任何标记。
4.内容分组
当我们的设计表需要更多的字段内容时,我们需要合理地使用内容分组,这样整体看起来更有组织性。接近(格式塔原理)原则告诉我们,相互接近的物体被认为比相互距离的物体更相关,使设计界面有序、清晰,降低视觉噪音。分组时应注意:
一组内容属性相似或相关性相关;
分组根据信息的重要性和难度进行排列,选择填写的表单内容落后。
5.合理分页
当表单信息内容过多时,需要合理使用分页,以避免用户觉得需要提前花费大量时间放弃。例如,当我们申请信用卡时,我们使用多个表单页面逐渐完成。
此外,当表单信息较少时,为了提高易用性和转化率,也可以分页、分步骤完成。比如问卷调查,每个问题都是单独的页面,可以避免信息的相互干扰,让用户放松,专注于当前选项,提高易用性;还有一些应用程序登录,将手机号码输入和验证码分为两个页面。Facebook的数据显示,分步也可以提高成功率。
6.展示和隐藏
有些内容可以在用户需要时显示,或者系统强烈推荐的选择内容也可以呈现给用户,但当用户明确不需要时,及时隐藏信息,避免多余表单信息的干扰,导致用户的不确定性。
7.匹配合适的键盘
根据表单内容的不同属性,应提供不同类型的键盘,以便用户更快地使用。常见的键盘有以下类型:
设备系统内置输入法,或下载符合我们长期使用习惯的输入法APP;
在资产安全方面,提供内置键盘,打乱键盘字母和数字的固定位置,防止偷窥,提高安全性;
提供纯数字键盘的数字输入可以提高用户的完成效率,使输入更容易。
以上是关于什么是表格?设计应该注意什么?一些简单的介绍,我希望能给你带来一些帮助。更多关于UI设计培训和在线免费在线课程的问题,您可以继续关注广州优秀就业的官方网站和广州优秀就业的官方账户。如果你有时间,最好去我们的离线基地进行实地调查。