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

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

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

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

一、基础表单

1.1 需求场景

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

1.2 内容布局

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

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

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

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

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

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

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

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

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

表单有配置分类项：

表单无配置分类项：

1.3 交互行为

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

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

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

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

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

二、全页表单

2.1 需求场景

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

2.2 内容布局

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

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

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

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

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

三、总结

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

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

题图来自 unsplash，基于 CC0 协议

相关推荐

建站 | 从零开始打造自己的网站--以创意众筹网项目为例

文/跨界哥经过前几期的思考探索，跨界哥的创意众筹网项目的大概框架已经有了雏形，今天真正开始着手网站的建设。从零开始打造属于自己的网站，自己终于做了站长，想想还是有点小激动。简单描述下创意众筹网的核心业...

MyEclipse应用服务器教程:应用程序服务器入门指南(上)

1.定义一个新的服务器定义一个新的服务器允许您选择需要使用的服务器连接，并提供配置信息，然后选择项目部署到服务器上。（1）在服务器视图工具栏上点击new_server_icon。或者右键单击服务器视...

ABP异常为什么是403呢?

前言在ABP中使用UserFriendlyException抛出异常,HTTP状态码为什么是403?下面用这一段测试代码:[HttpPost]publicasyncTask<PeopleD...

Web自动化测试:模拟鼠标操作(ActionChains)

在日常的测试中，经常会遇到需要鼠标去操作的一些事情，比如说悬浮菜单、拖动验证码等，这一节我们来学习如何使用webdriver模拟鼠标的操作首页模拟鼠标的操作要首先引入ActionChains的包fro...

webapi 全流程

C#中的WebAPIMinimalApi没有控制器，普通api有控制器，MinimalApi是直达型，精简了很多中间代码，广泛适用于微服务架构MinimalApi一切都在组控制台应用程序类【Progr...

SpringBoot日志处理之Logback

日志处理是一个正式项目必备的功能，日志要能够根据时间、类型等要素，根据指定格式来保存指定的日志，方便我们观察程序运行情况、定位程序bug。SpringBoot中推荐使用Logback日志框架。slf4...

ASP.NET Core Web API 接口限流

一.前言ASP.NETCoreWebAPI接口限流、限制接口并发数量，我也不知道自己写的有没有问题，抛砖引玉、欢迎来喷！二.需求写了一个接口，参数可以传多个人员，也可以传单个人员，时间范围...

高德打车通用可编排订单状态机引擎设计

一背景订单状态流转是交易系统的最为核心的工作，订单系统往往都会存在状态多、链路长、逻辑复杂的特点，还存在多场景、多类型、多业务维度等业务特性。在保证订单状态流转稳定性的前提下、可扩展性和可维护性是我...

.Net6基础功能封装分享12(统一参数校验)

开发后台webapi接口，需要对接口传入的参数进行校验，如果传入的参数不符合验证规则，就直接返回参数错误，就需要封装统一参数校验过滤器；在.net6中，内置了DataAnnotations实现通过数据...

Path to prosperity for US and the world lies in cooperation, not confrontation

ThisisaneditorialfromChinaDaily.Turningadeafeartothe"handsoff"criesofprotestersnot...

C++ strategy策略模式

策略模式策略模式是一种行为设计模式，它定义了一组算法，他们可以以相同的接口共享。这种模式使用场景最多的就是在根据不同的条件选择不同的行为时，可以使用此模式进行解耦，使得你的代码更加易于维护和扩展，当然...

万字图文详解24种设计模式

一直想写一篇介绍设计模式的文章，让读者可以很快看完，而且一看就懂，看懂就会用，同时不会将各个模式搞混。自认为本文还是写得不错，花了不少心思来写这文章和做图，力求让读者真的能看着简单同时有所收获。设计模...

25000 字详解 23 种设计模式(多图 + 代码)

文章来源：https://javadoop.com/post/design-pattern目录创建型模式结构型模式行为型模式总结前言一直想写一篇介绍设计模式的文章，让读者可以很快看完，而且一看就懂，看...

C# 设计模式之-状态模式

问题引入仓库管理系统中，堆垛机任务的状态的变更，一般会引起一系列相关的的变更，如入库完成，就需要修改库位状态为：工作中；出库完成，则需要将任务对应的库位状态修改为：空闲；此时可以使用状态模式来将堆垛机...

seata-golang 接入指南

作者|刘晓敏来源|阿里巴巴云原生公众号seata-golang是一个分布式事务框架，实现了AT模式和TCC模式，AT模式相较TCC模式对代码的入侵性更小、需要开发的接口更少；但A...

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