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

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


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

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

字段种类

  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

相关推荐

  • Axure遇见大数据

    本期介绍数据可视化工具:Echarts工具地址:http://echarts.baidu.com/examples/Echarts图表适用于哪些大数据可视化场景体重分析访问来源分析下载统计指标分析公交线路分析Echarts图表可满足哪些实际需求和交互效果满足需求:支持对图表标题修改支持对图表数据进行修改支持对图表数据进行可视化调整支持代码的获取支持图表的高清原图下载基础交互:点击主题色块,切换主题配色点击色块,可打开或关闭开关数据展示项...

    2018-04-06
  • 设计师进阶:从UED向UXD转型

    UXD(User experience designer)概念为何在当下越来越热?这个新Title对设计师意味着什么?UXD对设计师提出了怎样的新要求,设计师们又如何去转型UXD呢?在设计师转型UXD的背景下,还需要讲求专业精深吗?纯视觉设计师VD(Visual designer)又有怎样的发展路径?

    三位阿里巴巴UED掌门人分别从自身视角对设计师转型UXD进行了解析。

    2017-05-12
  • Sketch 这几招你肯定不知道

    1.精确调整元素属性在点击元素属性旁的箭头时按住 alt 键可以以10px 倍进行调整,按住 option 键则是0.1px 倍。2.用对齐工具对齐锚点Sketch 中的对齐工具不仅可以对齐群组和图层,还能够对齐锚点,非常方便。3.导航栏文本状态调整与其为导航栏每一个状态都重新做一下,不如将导航栏中的所有元素转为一个符号(symbol),这一个符号中调整样式即可。如果要隐藏文字图层的话只需要在符号的对应文字中输入空格键即可。4.直接拖动...

    2018-04-26
  • 面对大型项目的设计需求,设计师的定位与协作方式应该是这样的……

    工作需求每天都有,但总有一些冥冥之中会被更多人关注,如实事热点、周年庆典、大版本发布、热门合作等,那这些被更多关注的项目是否就是传说中的大型项目呢?视觉设计师在这样的项目中,又该如何发挥自己最大的作用,找到自己的最佳定位,保证高质量高效率的完成项目呢?Ps:养成良好的分类习惯,在需要时它也可以是你的加速度。ps:作为视觉设计师,要不忘设计的态度,时刻提醒自己,除了眼前的这个方案一定还存在一个更好的方案,时间允许的前提下不妨再对自己狠一点,过程虽然痛苦,但结果往往会带来惊喜!

    2017-05-10
  • 『真实』两个女设计师:一个互联网新手,一个30岁面临艰难选择

    编辑:我是UE网-@Tina爱学习  责任校对:@Tina爱学习 两个真实的经验送给互联网从业的设计师。 NANA 女 产品设计师  今年三十岁 传统软件企业 图片来自:unsplash 前几天Tina问我:好久不见,最近在忙什么?我说:…

    2015-06-02
  • 称职的用户体验设计师必须注意的九件事情

    “不论你即将开始的设计项目是怎样的,你都需要预先对你的目标用户有清晰的勾画。”“如果你所设计的系统需要解释才能让人明白,那么这个系统本身就是崩坏的。如果你的用户需要通过你提供的系繁复的说明才能玩转这个产品,那么这个设计明显是不合格的。”“我们喜欢将UX视作科学,然而现实世界中它更接近于艺术。过去15年的经验告诉我们,用户与整个系统的交互依然是难以预测的。用户依然会每天给我们惊喜。某个你觉得超级好用的东西,在某些人眼中依然是反人类的设计。”“在互联网时代之前,人们通过遥控器上真实的按钮来操控设备。在设计中充分借鉴和模拟之前的交互体验是很有必要的,因为人们习惯于这样的操作,这样他们会明白如何使用你的产品。”“让真实的用户尽早参与到测试中来,而不是等到产品已经开发结束并耗费了大量资源之后积重难返。”“用户并不想被选择所轰炸。”

    2017-05-28
  • 给用户带来新的feel|5个好玩的交互设计效果

    真正的科学家应当是个幻想家;谁不是幻想家,谁就只能把自己称为实践家。—— 巴尔扎克近期在工作中偶然发现的3种移动界面布局,从移动端的分辨率、配合设计布局变化的web端响应式、以及H5的设计布局。另外加上2个好玩的设计方式,更多的让点击率、产品凸显展示,总共5个好玩的交互效果给大家分享。开发资源不够或快速上线的页面交互设计上图在专业术语中叫做流体交互效果,这种交互效果的好处与坏处优点:避免小分辨率的情况下,出现水平条的情况。缺点:分辨率小...

    2018-04-17
  • “空状态的设计“值得更多关注

    空状态,或称零数据状态,很多时候不太招设计师的待见。我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下,因为从表现上来看,空状态给人的感觉就是临时性的,有些微不足道。 不要被空状态的…

    2015-08-17
  • 团队项目现已在Axure RP 9中提供

    团队项目现在可以在最新版本的Axure RP 9 beta中获得!请查看以下步骤以开始使用。 在RP 9中创建一个新的团队项目 转到文件>新团队项目或团队>从当前文件创建团队项目。 为团队项目命名。 为团队项目创建新工…

    2019-04-04
  • 微软设计师分享|七个技巧,帮你提高产品的用户体验

    今天为大家带来的一位在微软工作的用户体验设计师——JoannaNgai的设计分享,主要讲述了7个如何提高产品设计体验的小的技巧,个人觉得她的见解结合了产品思维和设计思维,简单明了,当然要让我们体会的更深刻,就需要我们在日后工作中来细细体会。

    2017-05-09