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

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


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

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

字段种类

  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

相关推荐

  • 交互设计之用户建模

        上次已经论述了交互设计的目标研究,这次呢来说一下建模,建模包括用户建模和使用场景建模。因为使用场景建模常常和需求设计结合在一起,所以放到下次说。    目标建模包括理解…

  • 设计流程、交互设计进阶、空状态设计

    设计作品源于设计师的自我发现、情感和创造,在日常工作中我们加入字体、颜色、空间准则来让在我们感性的表达设计美学基础上更理性的表达设计思维;以上这些是众所周知的基本法则,是设计具备的基本能力;科学的、合理的、为用户设计才是设计师价值的体现。那么如何让我们的设计更理性?在长期跟一条产品线的工作过程中,我们会发现每天做着很多事情,不知道会不会有以下感觉:1.感觉离用户很远;2.感觉对用户数据的增长好像没有什么明显帮助。那么用户增长和设计有什么...

    2018-03-15
  • apple watch 中文手册:Apple Watch 整体架构

    整体功能预览 总体而言,WatchKit第一版SDK提供的功能远远超出了我的期望。因为我原本以为第一版WatchKit可能侧重于对iOS Today Extension功能的延伸,而不是真正开发Watch App。所以当知道真相后,我即惊讶又感到…

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

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

    2017-05-11
  • 一招教你让交互方案更靠谱!超好用的目标导向设计法

    对于一枚交互设计 师,设计水平的重要判断标准之一,是看设计师能否产出足够靠谱的方案。对内,方案要能帮助产品不断向前发展,提升产品的数据,为公司带来收益;对外,方案要能满足用户的使用需要,方便用户的操作,提供良好的用户体验。对于交互的同学来说,这些是我们的天职,要想尽一切办法去做好。那么问题来了,如何才能做好这些天职呢?下面我将分三个阶段介绍一个很好用的设计方法 :目标导向设计法。掌握了这个设计方法 ,可以帮你设计出团队内部认可、用户也喜欢的方案。

    2017-05-28
  • 深度长文|如何输出一份让团队满意的交互设计交付物

    本篇是系列小结的第二篇,简单总结一下自己对如何提高交互文档质量的一些思考。

    2017-05-16
  • 新一轮文案大比拼即将到来

    #微博桌面美图##奶茶妹妹# #奶茶刘强东分手# #苏宁易购5亿年货红包疯抢# #axure##Axure##干货分享#  我只想说 呵呵!!偷笑偷笑偷笑偷笑

    2015-01-08
  • 设计思考模式:“删除、组织、隐藏、附加”

    Giles Colborne简约四策略是“删除、组织、隐藏、转移”,由于“转移”在实际设计过程中比较少运用到,所以我根据elya的知乎回答把四策略定义为“删除、组织、隐藏、附加”,elya没有解释她的理解,所以我根据自己理解重新定义。“删除每个页面上一半的文字,然后把剩下的文字再去掉一半。”(《Don’t make me think》中Krug可用性第三定律)“点击多少次都没关系,只要每次点击都是无须思考,明确无误的选择。”(《Don’t make me think》中Krug可用性第二定律》)

    2017-06-04
  • 这个简单粗暴的设计为何是“好设计”?

    作者:UX沐沐(公众号:Liveux)   20世纪著名建筑师史密斯.德罗在总结他成功经验时说“魔鬼藏在细节中”,面对一些习以为常的设计,设计师能否洞察背后的不寻常? 今天想探讨一个我们每天都能见到数十次的“寻常”设计…

    交互专题 2017-08-07
  • 前车之鉴:一个视觉交互设计失败的案例

    最近在做产品设计时,遇到了一个非常典型的设计失败案例。这个案例反应了一些老生常谈的问题,我觉得非常有意思。

    2017-06-01