百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

B端UI交互界面基础组件:表单 b端ui设计做得很痛苦

xsobi 2024-12-20 19:26 22 浏览

编辑导读：在前一篇文章《B端UI界面交互基础组件-表格》中，一起学习了B端“表格”组件UI设计规范，其中包括“基础表格”、“分屏加载表格”、“分页加载表格”；并从表格组件的需求场景、内容布局以及交互方式等方面对以上组件进行了详尽的规范描述；今天我们继续介绍了B端“表单”组件的交互规范。

一、基础表单

1.1 需求场景

需要用户进行相关数据配置，并完成相应数据提交。

1.2 内容布局

根据功能需要，分为表单配置项区域，配置汇总、操作按钮：

常规配置表单内容区域根据实际内容进行排布，相应布局遵循文本、标准空间相应规范

表单配置项层级分为：配置分类标签、配置项、配置项子级

配置分类标签：标签文本局左对齐，一般在长表单中尽量使用配置分类

配置项：在表单中存在配置分类标签时，配置项内容换行缩进显示；配置项文本标签居左对齐：

配置项子级：配置项子级配置内容与配置项配置内容区域左对齐，配置项子级配置标签居左对齐，以纵向最配置标签占位最长的宽度为准：

表单配置汇总需要根据业务需要与内容项数量确定是否需要显示，一般在常规约定的最小正常显示的分辨率下，无法通过一屏将所有配置项内容展示 的表单，建议提供配置汇总展示：

配置汇总内容局左显示，不同配置分类下的配置项用一定的视觉表现进行分组显示（如使用横线）

表单项操作按钮布局根据表单所处外部环境需要进行调整，常规内容如下:

表单有配置分类项：

表单无配置分类项：

1.3 交互行为

表单初始状态下，表单所有配置项均不执行格式合法性检查提示，表单配置下发按钮默认设置为禁用状态。

表单中存在必填项未填写会配置项未通过合法性检查时，表单配置下发按钮置为禁用状态。

当表单中所有必填配置项完成配置且通过格式合法性检查，表单配置下发按钮置为可用状态。

通过后台数据有效性校验返回为未通过时，对应配置项状态标注为合法性检查未通过，配置下发按钮为不可用状态。

点击表单配置下发操作时，执行表单合法性校验，如表单中有合法性检查未通过配置项，则自动跳转到顺序第一个不合法配置项，操作下发终止。

二、全页表单

2.1 需求场景

  1. 需要用户进行相关数据配置，并完成像一个数据提交。
  2. 表单配置项较多，信息量较大。
  3. 表单有较大的可用空间防止内容。

2.2 内容布局

整体区域分布与基础表单分布相同。

在整体区域表单横向区域空间较大时，合法性校验规则或补充说明说明可以放置到输入框右侧显示：

表单初始状态下，不执行合法性检查，表单数据下发操作按钮默认设置为可用状态：

当表单输入项光标移除时，或点击数据下发或操作按钮时，进行合法性检查，标注下不合法配置项，并将光标自动定位到第一个不合法的输入项，操作按钮保持可用状态：

存在合法性炎症未通过的表单，表单数据不允许下发。

三、总结

关于B端基础交互组件“表单”的相关分享就到这里，下一章我们介绍“会话框”包括基础信息会话框、提示信息会话框、行为确认会话框、配置会话框的相关交互规范。

本文由 @云计算产品汪 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 unsplash，基于 CC0 协议

相关推荐

高并发基础-一文带你了解Redis及其常见用法与应用场景

1.概述Redis是一个键值对存储的存储系统；一般用做缓存比较多，也可以将其作为数据库及消息中间件使用。传统应用中，数据存储在关系型数据库中，前端请求到来时通过SQL语句查询关系型数据库中的数据并返...

Python中的函数注释:参数有冒号，声明后有-> 箭头

我在查看python的fixture源码时发现fixture的方法定义形式如下：deffixture(fixture_function:Optional[_FixtureFunctio...

干货!SQL性能优化，书写高质量SQL语句

写SQL语句的时候我们往往关注的是SQL的执行结果，但是是否真的关注了SQL的执行效率，是否注意了SQL的写法规范？以下的干货分享是在实际开发过程中总结的，希望对大家有所帮助！1.limit分页优化...

一起学《C程序设计》第十课——结构体、共用体以及枚举类型

注意，请认真学习完《C程序设计（第五版）》第九章后再阅读本文会有更大的收获。结构体作用与定义前面我们学习过C语言的数组，C语言的数组在使用上有一定的局限性，比如我们常使用的一维数组一旦定义了就只能接纳...

8 种最坑的SQL错误用法，你有没有踩过?

来源：yq.aliyun.com/articles/725011、LIMIT语句2、隐式转换3、关联更新、删除4、混合排序5、EXISTS语句6、条件下推7、提前缩小范围8、中间结果集下推总结sq...

ArkTS基础语法:从声明到类型的深度解析

#ArkTS基础语法：从声明到类型的深度解析在鸿蒙应用开发的领域中，ArkTS作为重要的编程语言，其基础语法是开发者们必须掌握的关键内容。今天，我们就围绕ArkTS的声明和类型相关知识展开深入探讨，...

8 种最坑的 SQL 错误用法，你有没有踩过坑?

原文作者：程序员追风01、LIMIT语句分页查询是最常用的场景之一，但也通常也是最容易出问题的地方。比如对于下面简单的语句，一般DBA想到的办法是在type,name,create_time...

Python常用数据类型及其用法-总结篇

前言在前面的文章中，我们介绍了Python常用的数据类型及其相关方法，分别为：《Python列表详解》《Python元组与字典用法详解》《Python集合详解》《Python字符串》与我们软件开发或测...

贯穿知识点看“线”(名师知识点总结训):状语从句

添加关注不迷路!!!状语从句状语从句有时间、地点、原因、目的、结果、条件、方式、比较和让步状语从句，共9种，是每年必考的语法项目，主要考查连词的判断选用，主句与从句谓语动词的时态运用。其中，以对时间状...

C++关键字介绍（c++语言中常用的关键字含义）

下表列出了C++中的常用关键字，这些关键字不能作为变量名或其他标识符名称。1、autoC++11的auto用于表示变量的自动类型推断。即在声明变量的时候，根据变量初始值的类型自动为此变量选择匹配的...

核心词汇aboard，abroad和board用法解析

1.aboardadv./prep.在船上;在(船、飞机、公共汽车、火车等)上;上(船、飞机、公共汽车、火车等)意为“在公共汽车/船/火车/飞机上；上公共汽车/船/火车/飞机”，可作介词式副词。Th...

Excel VBA小技巧:Areas集合，你不知道的多区域操作神器

大家好！今天我们来聊聊ExcelVBA中一个超级实用但经常被忽视的功能——Areas集合。如果你经常需要处理不连续的多区域操作，这篇文章绝对能让你眼前一亮！什么是Areas集合？简单来说，Areas...

Flink用法介绍（flink的使用场景）

自定义source只需要传入一个SourceFunction即可val stream4 = env.addSource( new MySensorSo...

amiable与amicable 用法辨析（able和capable的区别）

1.amiable/'emibl/用于指人,其意义为:“友好的”“和蔼的”(friendly,good-natured,good-humored):Thenext-doorneighbou...

常考词汇in terms of用法解析（in terms of doing）

intermsof含义较多，要根据上下文来判断，如：1.intermsof用……术语（话、字眼、口吻）Hereferredtoyourworkintermsofhighpr...

一周热门
最近发表
标签列表