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

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


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

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

字段种类

  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

相关推荐

  • UE网APP现已发布:UE小组,致力于自学UE。

    UE小组是为:ue自学者提供一个自学UE的渠道和平台,希望能帮助到大家 UE小组的官网:UE小组 豌豆荚、360市场也可直接搜索“UE小组” 进行下载 现在支持安卓版本,稍晚些支持IOS,请广大苹果用户持续关注。 IOS和安卓…

    2015-05-27
  • 如何设计一份专业且有价值的交互规范

    很多设计团队都会有一套比较成熟完整的交互规范,好的交互规范能够保证设计的一致性,减少沟通和开发成本,提升效率。由于笔者是设计手机系统和App相关的,所以简单的和大家聊下如何设计交互规范。

    2017-05-11
  • 2019工业设计/交互设计考研课程全国招生

    2019考研大军将会是一支更庞大的队伍,唯有先见意识和过人的战术才能庸中佼佼。初次踏上考研队列的童鞋们难免会遇到一些问题。专业问题、复习计划、院校选择、分数线和招生指标可私信客服。[ 长按加客服好友 ]工业设计x交互设计- - - - -相信大部分同学考研担心最多的是专业科目,500分中占了300分,在工业设计考研中,快题手绘和设计理论就是你的专业考试内容,快题考察你的设计表现能力,所以,手绘很重要。说到手绘,ICAMP创意坊有着教学多...

    2018-04-10
  • 译文|Facebook将推"dislike"按钮

    Facebook users will soon be able to 'dislike' posts and pictures on their feeds. Facebook用户很快就可以“dislike”订阅内容里别人发的帖子和图片了。 The social networking site's founder Mark Zuckerberg r…

    交互设计 2015-09-18
  • 淘宝双12亲亲节:活动视觉分析(预热期)

    双12对比双11,最大的区别是双11更强调品牌的狂欢、而双12更强调年轻、有趣、活力。本文作者将为大家分析一些观点,仅供参考!亲,能包邮吗?亲,还能在便宜点吗?

    2017-05-14
  • 8个你需要知道的2017年UI设计流行趋势

    UI界面的设计趋势是不断变化的。随着时间的推移也在不断的成长,进化。虽然有些趋势还有待检验,但我们还是需要不断的去学习新的技术。

    2017-05-15
  • 用户体验设计影响力引起两会代表关注,获业界点赞!

    如今,用户体验设计已成为社会广泛关注的话题,在今年两会上,用户体验设计的影响力也引起了两会代表关注。在今年的两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。设计创新与科技创新互为表里,需要协同发展;从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。用户体验是指用户基于对产品、系统、服务使用或者预期使用的态度和反馈。叶友达解释:“说白了,就是我们在产品的设...

    2018-03-20
  • D4-交互设计工作困惑答疑

    作者:飞阿婷(公众号:飞阿婷的交互设计生活)自我成长1.面试攻略为什么强调说,不能把自己的不足归咎于之前公司没给自己带来很大成长?抛开你有推卸责任的人品问题来说,其实还有科学依据证明很多事情都是可以事在人为的。费斯汀格法则:“生活中的10%是由发生在你身上的事情组成,而另外的90%则是由你对所发生的事情如何反应所决定。”我的理解是那10%就是不受我们控制的自然发生的事情,而90%就是我们面对这10%的事情选择接下来要做的事情,而这个选择...

    微信热点 2018-04-12
  • 线上广告更加吸引人的5个思路

    今天说讲述的5个思路是不同的,内容决定设计,留白,故事都和这种填鸭式的广告不是一个路子。而线上广告和传统广告最大的不同在于,它可以创造体验。

    2017-05-04
  • 交互设计与空间展示的深度结合 | 通过交互科技扩展展览空间的体验维度

    本文分为两个主部分,第一部分为如何理解,通过交互科技扩展展览空间的体验维度,第二部分将结合若干具体案例,为大家分享怎样运用交互科技,扩展展览空间的体验维度。大理石是大型彩色模压形状,能够和人通过声音…

    2017-08-01