服务粉丝

我们一直在努力
当前位置:首页 > 财经 >

B端表单|表单的主要分类和相关控件认识

日期: 来源:超人的电话亭收集编辑:酸梅干超人

上一篇:B端表单系列开启|从表单的基本认识开始剖析

在 Ant、TDesign、Arco 等开源系统中,表单的控件罗列、解释都已经非常全面了,即使是新手完整的看一遍(这可不能偷懒~), 也能对表单相关控件有个大致的认识了。

之所以还要更新今天这篇内容,就是因为只看展示中根据字母顺序的排列的控件,是很难梳理其中关联,并获得更深入认识的,所以今天我要从一个不同的角度,解释表单相关控件的内容。


2.1 表单类型的发展起源

前面我们说过,表单是用来收集数据的一种形式。随着互联网的发展,产品对收集数据的场景、类型、要求越来越多,从而设计出了越来越复杂的表单控件。

但根据28原则,占少数的 20% 应用在了80%的场景中,剩下的80%使用在20%的场景里。越基础简单的控件使用得越多,越后期复杂的控件应用得越少。

所以那些不常用的表单控件重要性就不高了嘛?

恰恰相反,如果一个项目中出现无法使用最基础表单控件完成的情况,就证明这个场景具有一定的特殊性,往往涉及到一些关键的业务流程或环节。而越是这种特殊的场景,对设计师专业能力的依赖程度也就越高。

但问题是,复杂的表单应用场景要求各不相同,不仅匹配现有的复杂控件,或者设计一个全新的类型都很烧脑,要怎么掌握这种驾驭复杂的能力?这就必须要理解表单设计的起源和规律。

前面也讲过,电子表单是从纸质清单的形式上发展而来的,再加上早期系统、性能的局限性,表单中可操作对象和纸质一样都是全部可见的,几乎全由按钮、输入框和单选、多选组成。随后,又陆续增加了计算机系统独有的滑块和隐藏菜单。

按钮:执行一个针对该数据项预设好的程序,如检查数据、筛选内容、上传附件、切换格式

输入框:让用户主动选择并通过键鼠输入字符数据的操作区域

多选/单选:包含多个既定的选项,让用户从中选择一个或多个的控件

滑块:通过鼠标拖拽来控制某个范围内具体数值的控件

隐藏菜单:默认隐藏,需要通过交互来展开更多操作内容的控件

这五种控件形式是组成绝大多数表单控件和组件的基石,通过对它们进行优化、调整、组合来形成新的样式类型。比如下方的标签选择器,就是输入框、下拉菜单和按钮的结合。

所以,为了更好的对表单做出区分,我把它们分成3个大类:

  • 主动输入

  • 数据选择

  • 进阶组合



    ‍‍‍


2.2 主动输入型表单控件

主动输入型就是系统要获取完全由用户定义的数据内容,最核心的控件就是输入框。输入框作为最基础的计算机控件之一,所要满足的需求自然就数不胜数。

比如增加特定输入内容格式的适配,如网址、邮箱、座机、姓名等。

还有根据数据本身类型的特性进行优化,如数量、小数、价格、密码等。

同时,还有根据输入内容的数量和显示区域,使用单行、多行、滚动式输入框。

对于这些细分类型,相信大家不需要我一个个解释过去,都是由对应的输入场景中拓展而来,即简单又便捷。

除此以外,它还有一个非常重要的价值,就是表单控件参数的 “锚点”。

因为在 “统一性原则” 驱动之下,设计师要尽量确保控件间的设计细节保持一致,而输入框在多数设计表单中使用频率最高,且有大量表单控件的样式是根据输入框拓展而来。所以输入框的参数应用就不仅仅关乎它自身,而是成为后续设计的重要参考依据。

这会在后面的章节中进一步说明。



2.3 一般选择型表单

一般选择类型表单,就是用户从系统已经准备好的数据选项中选出一到多项,并提交给系统。所以选择型表单的首要任务,就是让用户看见系统准备了哪些数据选项。

展示的方式包含陈列式和隐藏式,陈列式即将数据选项全部展示出来,可以直接进行选择,隐藏式则是隐藏起来,需要额外的操作进行展开。

陈列式的选择中,带有圆形、矩形框的选择表单最常见,但并不代表单选或多选的设计只能使用这两个样式。

比如下面这些都是可以作为单选和多选的陈列式表单样式:

而隐藏式选择表单包含的类型就更多了,最常见的类型就是下拉选择器(Select)了,通过点击展开隐藏菜单,并在里面进行选择。

树状选择器(TreeSelect)和选择器作用差一致,区别是树状选择器展开的内容是会占用页面实际空间的,而下拉选择器则是使用浮层不受背景干扰。

除此之外,滑块、开关、步近器等控件,本质上也是隐藏选择的一种,选择系统已经划好范围的数据条目。



2.4 进阶组合型表单

和一般表单不同的是,进阶组合表单的操作方式、流程、内容会更复杂。比较常用的复杂表单类似颜色选择器(ColorPicker)、集联选择(Cascader)、附件上传(Upload)等。

根据行业和产品的不同,表单采集数据的需求多种多样,这就需要依靠设计师的个人判断和经验,构思对应的表单形式。

分类字段设置表单
任务路线图设置表单
页面模块设置表单

这些进阶组合中的每个表单项,都不仅仅是输入或选中一类数据,而会关联其它数据。如上图为页面添加一个模块项,系统不仅要获取模块的名称,同时要获取这个模块所处位置的序号进行排序。

这些复杂的表单需求无穷无尽,在我们的设计生涯中也很难设计出两个完全一样的进阶组合表单。

所以不要陷入 “找参考” 的陷进中,我们很难从市面上找到完全一样的参考对象。需要设计师熟练掌握和运用前两种表单类型,才能在遇到这些复杂需求时根据实际情况对它们进行组合和优化。



结尾

以上就是对表单类型的基本区分,后续在合并修订版本中会再做一次优化。了解完类型,下一篇内容就会展开具体的表单设计说明了。

我们下周再贱~




目前新一期B端产品设计课程和C端UI实战班都在招生中,感兴趣想要一步到位提升的同学可以联系我~

相关阅读

  • B端表单|实战篇: 表单的具体设计方法解析

  • 表单系列第一篇:B端表单系列开启|从表单的基本认识开始剖析表单系列第二篇:B端表单|表单的主要分类和相关控件认识3.1 表单的设计框架解析表单是一个包含了若干表单控件、组件的
  • 未来趋势 | 数据驱动的设计体验

  • ▲点击 "TCC翻译情报局" 关注,回复 "社群" 加入我们本文共 2951 字,预计阅读 8 分钟TCC 情报局的 第 177 篇 干货分享2023 年的 第 6 篇TCC 推荐:大家好,这里是TCC翻译情报局,我
  • 设计师如何通过算法提升产品转化率

  • 01 什么是人工智能与机器学习02 机器学习基础知识03 机器学习算法与模型举例04 机器学习在业务中的应用以用户为中心的产品设计中,根据不同的用户画像提供个性化的服
  • 【Wireshark】常用的几个使用技巧

  • 一:数据包过滤过滤需要的IP地址 ip.addr==在数据包过滤的基础上过滤协议ip.addr==xxx.xxx.xxx.xxx and tcp过滤端口ip.addr==xxx.xxx.xxx.xxx and http and tcp.port==80指定
  • 【数据类犯罪与侵财类犯罪竞合属于法条竞合】

  • 随着互联网时代网络空间的发展,数字经济及其体系和模型成为网络数据的重要内容。由此,电子数据承载着网络数据、网络信息与公私财物、其他权益等复合型赋值。当非法获取计算机
  • 幻方量化产品周报(2022/11/04)

  • 本周宏观观察 今年前10个月,我国进出口总值34.62万亿元,同比增长9.5%,其中,出口增长13%,进口增长5.2%,10月当月,进出口总值3.55万亿元,增长6.9%,其中,出口2.07万亿元,增长7%;进口1.48万
  • 幻方量化产品周报(2022/11/18)

  • 本周宏观观察 1-10月份,全国实际使用外资金额10898.6亿元人民币,同比增长14.4%,折合1683.4亿美元,增长17.4%,对外非金融类直接投资6274亿元人民币,同比增长10.3%,折合943.6亿美元,同
  • 幻方量化产品周报(2022/11/25)

  • 本周宏观观察 1-10月份,全国规模以上工业企业实现利润总额69768.2亿元,同比下降3.0%,规模以上工业企业中,国有控股企业实现利润总额22648.9亿元,同比增长1.1%;股份制企业实现利润

热门文章

  • “复活”半年后 京东拍拍二手杀入公益事业

  • 京东拍拍二手“复活”半年后,杀入公益事业,试图让企业捐的赠品、家庭闲置品变成实实在在的“爱心”。 把“闲置品”变爱心 6月12日,“益心一益·守护梦想每一步”2018年四

最新文章

  • B端表单|表单的主要分类和相关控件认识

  • 上一篇:B端表单系列开启|从表单的基本认识开始剖析在 Ant、TDesign、Arco 等开源系统中,表单的控件罗列、解释都已经非常全面了,即使是新手完整的看一遍(这可不能偷懒~), 也能对表单
  • B端表单|实战篇: 表单的具体设计方法解析

  • 表单系列第一篇:B端表单系列开启|从表单的基本认识开始剖析表单系列第二篇:B端表单|表单的主要分类和相关控件认识3.1 表单的设计框架解析表单是一个包含了若干表单控件、组件的
  • 一步到位|图标设计这个大坑,我帮你填上了

  • 图标设计进修课全新上线,共计10节课,将UI设计师所需的图标技能一次讲透,从理论到实操一步到位。这套「强中更强」的课程已经在B站全部放出,免费观看,记得献上你们手中的点赞按钮
  • 先生之风,山高水长——深切缅怀师叔顾旦生先生

  • 先生之风,山高水长——深切缅怀师叔顾旦生先生李建成惊悉顾旦生先生突然离世,无比悲痛。顾旦生先生是新中国自主培养的第一代大地测量专家,他爱国奉献,治学严谨,勇于创新,成果丰硕