|B端UI交互界面基础组件：表单
编辑导读：在前一篇文章《B端UI界面交互基础组件-表格》中 ， 一起学习了B端“表格”组件UI设计规范 ， 其中包括“基础表格”、“分屏加载表格”、“分页加载表格”；并从表格组件的需求场景、内容布局以及交互方式等方面对以上组件进行了详尽的规范描述；今天我们继续介绍了B端“表单”组件的交互规范 。
本文图片
一、基础表单
1.1 需求场景
需要用户进行相关数据配置 ， 并完成相应数据提交 。
1.2 内容布局
根据功能需要 ， 分为表单配置项区域 ， 配置汇总、操作按钮：
本文图片
常规配置表单内容区域根据实际内容进行排布 ， 相应布局遵循文本、标准空间相应规范
表单配置项层级分为：配置分类标签、配置项、配置项子级
配置分类标签：标签文本局左对齐 ， 一般在长表单中尽量使用配置分类
本文图片
配置项：在表单中存在配置分类标签时 ， 配置项内容换行缩进显示；配置项文本标签居左对齐：
本文图片
【|B端UI交互界面基础组件：表单】
配置项子级：配置项子级配置内容与配置项配置内容区域左对齐 ， 配置项子级配置标签居左对齐 ， 以纵向最配置标签占位最长的宽度为准：
本文图片
表单配置汇总需要根据业务需要与内容项数量确定是否需要显示 ， 一般在常规约定的最小正常显示的分辨率下 ， 无法通过一屏将所有配置项内容展示 的表单 ， 建议提供配置汇总展示：
本文图片
配置汇总内容局左显示 ， 不同配置分类下的配置项用一定的视觉表现进行分组显示（如使用横线）
表单项操作按钮布局根据表单所处外部环境需要进行调整 ， 常规内容如下:
本文图片
表单有配置分类项：
本文图片
表单无配置分类项：
本文图片
1.3 交互行为
表单初始状态下 ， 表单所有配置项均不执行格式合法性检查提示 ， 表单配置下发按钮默认设置为禁用状态 。
本文图片
表单中存在必填项未填写会配置项未通过合法性检查时 ， 表单配置下发按钮置为禁用状态 。
本文图片
当表单中所有必填配置项完成配置且通过格式合法性检查 ， 表单配置下发按钮置为可用状态 。
本文图片
通过后台数据有效性校验返回为未通过时 ， 对应配置项状态标注为合法性检查未通过 ， 配置下发按钮为不可用状态 。
推荐阅读
- 甘肃天水落地脱贫“基础工程”见效累计减贫92.08万人
- 为啥看到书柜上的藏书会有心旷神怡的感觉
- 界面新闻|不会吧？DS 9在欧洲竟然和宝马5系卖得一样贵
- 有点计算机基础的人想尽快找份编程的工作。哪种编程的工作最好找还需要学些啥
- 零基础入门学习啥语言好
- 环球车讯网|软件能否定义汽车
- 计算机专业大三，应该扎实学好基础专业课，还是该随大流去参加培训机构培训
- 马云说的大数据时代到底是，用到啥技术，如果想要学习大数据技术，要学习哪些基础的东西要先会编程么
- 基础|并不是分高就能上！基础很重要！这5大热门专业有“附加条件”
- 文明城市|夯实镇村基层基础 共建美好文明城市 市领导“四不两直”赴镇村调研