表单页面功能元素设计攻略:字段种类及属性说明

本文参考了一些表单编辑平台的字段功能,基本上涵盖了平时常用的所有表单字段。


本文参考了一些表单编辑平台的字段功能,基本上涵盖了平时常用的所有表单字段。

表单页面功能元素设计攻略:字段种类及属性说明

字段种类

  1. 文本:单行文字、多行文字、描述
  2. 号码
  3. 数值:数字(小数点后保留)
  4. 金额
  5. 计算公式
  6. 选项:单级下拉框、多级下拉框(级联)
  7. 下拉菜单:单项选择、多项选择
  8. 矩阵单选
  9. 矩阵填空
  10. 工作区成员
  11. 日期和时间
  12. 图片:图片单选、图片多选
  13. 附件:上传文件
  14. 分页:向下展开、设置单页数据数量、显示全部、滚动加载
  15. 网址
  16. 评分
  17. 关联:表单关联、字段关联、综合计算公式的关联

实例字段:联系信息

  1. 姓名
  2. 昵称
  3. 性别
  4. 身份证号
  5. 手机
  6. 座机
  7. 邮箱
  8. 微信
  9. QQ
  10. 地址/地理位置
  11. 备注

表单字段公共属性说明

基础

  1. 字段标题:此属性用于告诉填写者应该在该字段中输入什么样的内容。通常是一两个简短的词语,也可以是一个问题。
  2. (页面初始化)默认值:设置后,此值将作为默认值显示在该字段的输入框中。如果不需要设置默认值,请将此处留空。
  3. 字段提示:此属性用于指定对该字段进行一些附加说明,一般用来指导填写者输入。
  4. 数据类型:字母(分大小写和不分大小写)、阿拉伯数字、中文(一个汉字=两个字符)、限定种类的混合字符数据(字母开头、只限字母和数字、只限字母、只限数字、字母数字英文“_”中文“-”)
  5. 标识

布局设置

  1. 排列方式:纵向、横向
  2. 宽度占整行的百分比:占总宽度的百分比。
  3. 设置表单宽度值和高度值

校验

  1. 必填校验:勾选后,该字段将不允许为空,在字段名称后会有红色的星号标出。如果填写者在提交表单时必填字段没有输入,系统将会给出相关错误提示,表单将无法提交。该属性常用于需要强制填写者必须输入的字段。
  2. (单选)设置“其他”必填:勾选后,当填写者选中“其他”时,需要同时填写“其他”后面的文本框;如果填写者在提交表单时,该文本框没有输入内容,系统将会给出相关错误提示,表单将无法提交。
  3. 唯一校验:勾选后,该字段将将不允许重复,在字段名称后会有红色的星号标出。如果填写者在提交表单时字段不唯一,系统将会给出相关错误提示,表单将无法提交。该属性常用于需要强制填写者输入不重复的字段。
  4. 只能填数字:勾选后,该字段只能填写数字,数字之外的字符将不能正常提交表单。
  5. 重复校验:(不能和已有数据重复)勾选后,该字段将不允许提交重复值。填写者在提交表单时,会检测数据库中是否已存在相同的值;如果存在,将给出错误的提示信息,提交将失败。常用于电子邮件,用户名等需要验证填写者身份的字段。
  6. 限定范围:勾选设置后,填写者只能提交这个列表范围内的数据,这个列表范围外的数据将不能提交表单。通常用于需要限制报名者身份的场景。表单页面功能元素设计攻略:字段种类及属性说明
  7. (长度)最少填写字符:勾选设置后,系统会限制填写者填写此字段的最小字符数。
  8. (长度)最多填写字符:勾选设置后,系统会限制填写者填写此字段的最大字符数。
  9. (可见权限)字段隐藏:勾选后,该字段只有管理员及数据维护员可见,普通填写者将看不到此字段;通常适用于当你想为已提交数据设置一些特殊属性,如状态(处理/未处理)或优先级(重要/一般)。
  10. 缓存填写数据:(为填写者缓存所填内容,下次自动填写)勾选后,填写者第二次打开你的表单时,第一次填写的字段数据将会自动显示出来,减少重复填写。(注:清除浏览器cookie后该功能将会失效)
  11. (单选或多选)选项展示顺序随机:勾选后,该字段的选择项在每次访问时出现的顺序是随机的。

统计

统计数据:对该字段的数据总数求和

权限

增删改查

数据提交

提交方式:按步骤提交——点击确定或完成或提交或更新按钮向数据库请求提交数据、失去焦点提交并更新数据、数据模块填写完成并失去焦点时自动提交

字段的特殊属性

数字:最多支持15位数字。如需要用作“身份证号码”填写,请选用“单行文字”。

时间:

表单页面功能元素设计攻略:字段种类及属性说明

日期:

表单页面功能元素设计攻略:字段种类及属性说明

表单页面功能元素设计攻略:字段种类及属性说明

日期校验

表单页面功能元素设计攻略:字段种类及属性说明

起始日期:

勾选设置后,系统会限制填写者填写此字段的最小值。

结束始日期:

勾选设置后,系统会限制填写者填写此字段的最大值。

表单页面功能元素设计攻略:字段种类及属性说明

单选选项(圆形)

表单页面功能元素设计攻略:字段种类及属性说明

多选选项(方形)

表单页面功能元素设计攻略:字段种类及属性说明

单张图片

表单页面功能元素设计攻略:字段种类及属性说明

多张图片

表单页面功能元素设计攻略:字段种类及属性说明

矩阵单选:

表单页面功能元素设计攻略:字段种类及属性说明

矩阵填空:

表单页面功能元素设计攻略:字段种类及属性说明

下拉框:

表单页面功能元素设计攻略:字段种类及属性说明

描述:

显示分割线

翻页:

表单页面功能元素设计攻略:字段种类及属性说明

评分:

表单页面功能元素设计攻略:字段种类及属性说明

表单页面功能元素设计攻略:字段种类及属性说明

级联:

表单页面功能元素设计攻略:字段种类及属性说明

上传文件:

上传文件的大小限制在20MB以内

表单页面功能元素设计攻略:字段种类及属性说明

最大文件数量:此属性用于限制填写者最大上传文件数量。

表单页面功能元素设计攻略:字段种类及属性说明

表单页面功能元素设计攻略:字段种类及属性说明

手机号:

  • 限定手机号:限定范围——勾选设置后,填写者只能提交这个列表范围内的数据,这个列表范围外的数据将不能提交表单。通常用于需要限制报名者身份的场景。
  • 短信验证:勾选后,填写者在填写该字段时会收到一条验证码用于验证填写者手机号真实性。(注:短信费用将会从你的账户中扣除。)

表单页面功能元素设计攻略:字段种类及属性说明

地理位置/地址:

表单页面功能元素设计攻略:字段种类及属性说明

本文参考了一些表单编辑平台的字段功能,基本上涵盖了平时常用的所有表单字段。

 

作者:Aaron,微信公众号:四方策论weiwonder,金融领域B端产品经理。

本文由 @Aaron 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25186/

(0)
CatherineCatherine
上一篇 2017-05-10 20:55
下一篇 2017-05-10 23:07

相关推荐

  • 人工智能对用户体验的影响

    最近两年人工智能技术在金融、安全、交通、医疗、公共服务和制造业等领域逐渐落地,随着技术的成熟,人工智能将会在更多领域影响人类的生活。以人为本的人工智能设计会变得更加重要,本文会从安全性、效率、易用性、场景化、个性化五个方面阐述人工智能如何改善现有的产品和用户体验,这五个方面存在着各种联系并相互影响。安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨大影响;如果关系到国家安全,整个社会的秩序都会被扰乱,所以...

    2018-03-26
  • “来电”性格测试的交互设计历程

    来电,是一个主打免费通话的纯语音应用。从14年7月份低调发布Lightalk1.1后,历经3个版本,终于在1.4版更名为来电并投入推广了。除了运用一些传统的渠道推广,来电也尝试在应用内嵌一个提供分享的入口,鼓励用户做…

    交互设计 2015-04-10
  • 智能语音交互设计 2 — 语音理财案例分析

    Image credit:Kuromon Ichiba Market, Ōsaka-shi, Japan大家好,这个星期将通过一个Alexa案例分析来介绍用户如何使用语音交互来解决功能性问题。(10分钟左右阅读时间)笔者作为用户体验设计师就职于一家人工智能公司,17年12月和18年1月进行了2轮为期两周的用户研究来了解:语音理财助手的用户特点,用户为什么会使用语音理财助手,用户如何与语音理财助手交互,常见的语音交互错误类型,以及用户期望...

    2018-02-12
  • 译文|为什么产品思考将成为交互设计中的一大重要的步骤

    生命有限,不能去浪费时间去做一些没人用的东西“明确用户想要什么,不是用户本身的责任” – Steve Jobs“沉浸在一个问题当中,而不是一个具体的解决方案。”- Laura Javier“创造功能很容易,但是创造出合适的功能给需要的人就很具有挑战了。”

    2017-05-29
  • 《用户体验可视化指南》视频讲书(5)

    《用户体验可视化指南》书中第2章"绘制基础"的第1部分。服务体验中,避免负面切换波动。从可视化的角度,阐述体验的特点。点击视频观看(大约10分钟,推荐室内安静、有wifi环境下播放)兰静同学听后分享这是本章节的开篇,蓉姐在视频中提了2个重点:切换波动。对应到用户企业的互动上,就是各触点上的体验波动。我自己用App最常发生体验波动的地方就是电商App的活动页,本来选东西选的正爽,结果一不小心进到活动页就会蒙圈,完全想不起来刚才发生了什么,...

    2018-04-09
  • 设计基础|设计的7条心理学原则和定律

    译者注:上图的中文版金字塔并非原文内容,找来帮助大家理解。译者注(图中文字):
    费茨定律示例
    它是什么意思呢?费茨定律表明,你应当让按钮和其他界面元素足够大,因为用户点击小按钮十分困难。
    如果你有个小按钮,像【OK】这样,可以增加一些内边距,或者让它更宽:【 OK 】
    如果说网站上有个按钮,让整个按钮都能点击——而不仅仅是文字标签。
    而且,如果你把物体放在很远的地方,最好就要增大它的尺寸作为补偿。

    2017-05-24
  • 交互设计的进展及未来趋势

    作者:Terry Cao   2015-5-7 10:05am    发表于DESIGN & DEV      译者:小媛 作为一种无形的设计,交互设计一直以来都是UX中最难的。以往,用户会被简单的交互吸引,如一个意料不到的动画。但现在的动画效果已…

    2015-10-16
  • 3月19日部分上海实习信息汇总

    2018“猎萝卜”校园宣讲会 松江大学城专场人立方智能科技有限公司时间:3月22日 18:00-20:00地点:上海对外经贸大学 B303上海人立方智能科技有限公司,专注于人工智能与人才招聘,中国人力资源行业领军企业50强。猎萝卜(www.lieluobo.com)是公司创立于2017年的智能猎头招聘平台,服务于互联网、金融这两大领域国际知名客户及500强企业。平台上汇聚上千家优质的猎头公司,通过人工智能算法的引导,精准匹配中高端人才需...

    2018-03-19
  • 干货!如何做一个让人闻风丧胆的Html5页面

    Specifies the initial zoom factor for the window or viewing area. This is a magnifying glass type of zoom. Interactively changing the zoom factor from the initial zoom factor does not affect the size of the initial or the actual viewport.A two-dimensional transformation is applied to the coordinate system an element renders in through the ‘transform’ property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix (either defined in this specification or by reference to the SVG specification), then multiplying the matrices.The value of the transform property is a list of applied in the order provided. … specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. … specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.

    2017-06-03
  • 【译文】UI设计中七个不能违反的法则

      作者:Peter Vukovic(译者:RAS)   虽然当下的网页的功能无非是引导或者填表,但是随着新技术和新标准的发展,网页设计中出现了越来越多对动态化和定制化的要求。UI设计的工作量随之会越来越大,让我们来看看设…

    交互专题 2017-08-07