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

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


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

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

字段种类

  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-04-17
  • 读书会第二期:《用户体验要素》(下)

    接上文···框架层1界面设计界面设计要做的全部事情就是选择正确的界面元素。界面元素的种类繁多,书里列举了复选框、单选框、文本框、下拉菜单、多选菜单、按钮等一系列网站设计中常用的控件,在2001年的时候这些控件就已经出现了,至今仍在大量使用,但是作者写这本书的时候并没有预料到目前的互联网行业有多么繁荣,所以近些年出现的很多新控件都没在书里。目前ios平台和安卓平台都有完善的设计规范可供参考,网上也可以找到海量的控件模板,只要耐心积累,多观...

    2018-04-13
  • 草稿箱的交互设计

    作者:宋孝方,交互设计师,现负责虾丸校园app的整体交互设计。 转载自微信公众号:大宋(id:songxf0827) 转载请联系作者。 由于移动端设备的限制,文字的编辑成本高,在PC上很容易完成的事情,移动设备上来做可能…

    2015-09-10
  • 小白菜们:别再用“好的文案”YY了,该醒醒了!

    不知何时起,文案写的好,竟然成了众多互联网小白追捧的热点,各种文案大师,文案叫兽,传道受业解惑,登台演讲,大讲文案的力量,貌似文案写的好,就练成了盖世神功,天下无敌了。

    2017-05-26
  • UED专访 | 李冀:建筑设计的唯一性与多样性

    📌 编辑 | XK P.S建筑行业之所以能百花竞放是因为有人独树一帜,自成一派有人匠心筑梦,执著务实在各展所长的事务所里李冀的原地工作室像潜生的植物一样有着自己的节奏与坚守静默地成长着……©UED我们常说懂一个作品应是知其然并知其所以然。本次我们专访内容围绕李冀及其原地建筑事务所作品展开,以长白山河谷别墅群等作品为切入点,尽可能多地去探究建筑建造过程的一些原由故事,倾听设计师还原当时的设计思路,了解作品从无到有精细入微的生长。也许你会因...

    2018-02-08
  • 交互案例实战!三个按钮背后由小见大的交互思考

    @窒息红Leon :初入交互设计工作,最常见的需求就是——放按钮。放按钮看起来是超级简单的事,无非就是设计按钮的样式、摆放按钮的位置、确定按钮的状态与反馈等,但殊不知其『麻雀虽小,五脏俱全』,小小的按钮设计…

    2015-09-18
  • 读书会第一期:《简约至上-交互设计四策略》

    你有多久没有静下心来好好读一本专业书了?谁都知道读书重要,然而“工作忙没有时间”、“不知道该看什么“常常成了借口,读书还是一再被耽搁。本周起,集创堂推出“设计经典书籍阅读”系列,每周解析一本设计类好书,深入浅出,提炼精华。也许,看完简介之后,你就有了读原著的欲望,那么我们做这件事的目的就达到了。《简约至上-交互设计四策略》这本书是我罗列的推荐书单里专门描写信息架构的书籍,书籍作者Giles Colborne是物理学出身,参与过航空航天项...

    2018-04-07
  • 关于“下一步 ”的设计思考

    用户在使用 App的过程中,总会进入各种页面,并且对于页面之间的跳转, “<” 返回或者物理键均可回溯到上一级页面。但是进入下一级页面的入口,可以是各种操作按钮、缩略图、 tab或者导航切换,在工具性产品中,…

    2016-03-14
  • 用户体验和可用性之间的联系和差异

    关注一下,更多精彩等着你用户体验和可用性的不同目标对于网站而言,唯一的可用性目标是“易于使用”。但是,用户体验的目标是关于用户在使用网站之前,期间,之后获得的整体感受。因此,可用性和用户在网站中完成任务的难以程度是有关的,而用户体验关注的则是用户和网站互动上的感知。可用性在用户体验设计中扮演着重要的角色拥有良好可用性的产品,用户在使用之后会感觉方便、快捷、舒适,同时减少用户操作出错的可能性。很显然,它会唤起用户良好的情感体验,让用户感到...

    2018-03-09
  • 交互开始的第一步:触发器详解

    最好的触发器应该是符合情景的,体贴用户的,触发器的控件应该与其要传达的状态匹配,且引人注目的程度要与其使用频率匹配,标签也应该简洁明了,通俗易懂。

    2017-05-22