【产品交互】超全面B端设计规范总结

在这里插入图片描述
不知不觉已经深耕在B端这个领域3年有余,很多人接触过B端后会觉得乏味,因为B端的设计在视觉上并没有C端那么有冲击力,更多的是结合业务逻辑,设计出符合业务需求的交互,以及界面排版的合理性,达到产品的可用性、易用性、好用性。

由于业务的复杂性,功能实现的难度程度相比C端会高很多,但是B端系统会有很多相似的组件可以共用,设计师一般会在项目前期做好这些组件的规范,便于后期设计使用,同时开发也能减少开发量,公用组件库不仅能减少开发时间还能达到系统界面统一的效果,降低用户的学习成本。
B端的系统规范我分为两大类,分别是:UI规范、组件规范。

UI规范:色彩、字体、布局、图标。

组件规范:按钮、面包屑、导航菜单、分页、下拉菜单、滑条、日期选择框、树、标签页、输入框、表单、上传、气泡卡片、表格、警告提示、弹窗/抽屉

一、UI规范

1. 色彩

系统色彩规范,包含核心(品牌)色、辅助色、中性色

1)品牌色

即产品主色,产品主色的设定直接影响产品气质和直观感受,也是产品直接对外的形象,品牌色要根据产品特性、用户使用场景、产品定位等进行选,尽量做好色彩的延伸性,可支持换肤,品牌色的应用场景包括操作状态、按钮色、可操作图标等

2)辅助色

用于提示其他场景,比如:成功、失败、警告、无效等

3)中性色

常用于文本、背景、边框、分割线等,需要考虑深色背景和浅色背景的差异,可以选择同一色相控制透明度变化,用来表现不同的层级结构
在这里插入图片描述
一整套系统所涉及到的色彩往往不止这几种,如果我们只限制在上面所总结的几种颜色,那么在一些需要多种颜色时就比较难区分,比如一些常见的数据图表分析,就会涉及到多种颜色的结合使用,所以我们会根据主要的色彩规范衍生更多的色系供特殊情况使用,因此在作色彩规范时会准备一个“其它色”。

4)其它色

如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定,通过基本色彩衍生而来
在这里插入图片描述

2. 字体

字体是体系化界面设计中最基本的构成之一。

字体的大小、色彩区分体现界面信息的层级关系。

  • 中文字体建议选择:苹方体、思源黑体
  • 英文字体建议选择:Helvetica Neue、思源黑体
  • 系统中字体大小为:14px、16px、18px、20px、24px、26px、28px、30px、36px…
  • 字体行高设定:根据文字大小及使用场景设置行高,行高=文字大小+8px

在这里插入图片描述
常规默认的系统字体规范最小为12px,不同分辨率下,不同显示器分辨率和布局的默认设置情况,字体规范会作不同的梯度,这里就不再赘述,感兴趣的可以回头看看。

3. 布局

B端系统的用户的主流分辨率主要为 1920、1440 和 1366,个别系统还存在 1280 的显示设备,通过动态适配布局来完成在不同分辨率下展示内容。

系统中存在的结构方式有:左右结构、上下结构。

系统适配:采用24栅格。

1)左右结构布局

常被用于左右布局的设计方案中,常见的做法是将左边的导航栏固定宽度,顶部栏固定高度(有顶部栏的情况下),对右边的内容展示区域进行动态缩放。
在这里插入图片描述
2)上下结构布局

常被用于上下布局的设计方案中,常见的做法是将顶部栏固定,对下边的内容展示区域进行动态缩放,内容区域左右两边固定有最小值。
在这里插入图片描述

4. 图标

B端系统图标简洁为主、分类区分、便于识别,默认大小:16X16px,SVG格式为主。

对于图标来讲,相信大家都不会陌生,而对于B端的图标,图标主要注重简洁易懂,并且一般起到分类标识和点缀的效果。

这里分享一下我在工作中怎么整理我的项目图标,以及怎么便捷的和开发小哥哥配合传图,图标设计我使用AI完成,大小都设置为16x16px,画好的图标直接保存为SVG格式,然后批量上传到iconfont.cn,在这里我会根据不同的项目分类,开发小哥哥只需要在每个项目中下载需要的图标即可,这样大大提高了工作效率。

在这里插入图片描述

二、组件规范

1. 按钮

是按钮触发事件或动作,他们让用户知道接下来会发生什么。

按钮的样式分为5种,分别是:主按钮、默认按钮、虚线按钮、文本按钮、链接按钮。

  • 主按钮:用于主行动点,一个操作区域只能有一个主按钮。
  • 默认按钮:用于没有主次之分的一组行动点。
  • 虚线按钮:常用于添加操作。
  • 文本按钮:用于最次级的行动点。
  • 链接按钮:用于作为外链的行动点。
  • 按钮的状态分为4种,分别是:正常、突出显示、禁用、已选中。
  • 正常(normal):表示控件处于活动状态,但是当前并未使用。
  • 突出显示(highlighted):表示控件正被按住或正被使用。
  • 禁用(disabled):表示按钮未启用且无法使用。
  • 已选中(selected):仅特定控件具有该状态,表示控件当前已被选中。

在这里插入图片描述

2. 面包屑

面包屑是一种导航系统,显示当前页面在系统层级结构中的位置,并能向上返回。

面包屑组件在B端系统是常用的组件,同时在网站中也是常用的,面包屑的样式分为2种:短面包屑、长面包屑。

  • 短面包屑:用户层级比较浅的页面。
  • 长面包屑:用户层级比较深的页面。

在这里插入图片描述

3. 导航菜单

为页面和功能提供导航的菜单列表。

导航菜单一般分为2种模式:左右结构导航、上下结构导航。

  • 左右结构导航:我们见过最多的就是左右结构的导航,通常会采用图标+文案的形式呈现,并且有层级区分,采用点击展开的形式收缩二级目录,左右结构的导航一般都会支持左侧收缩的交互功能,为内容展示区域提供更大的展示空间,一键收缩或者鼠标左右拖动收缩,可根据实际情况而选择合适的交互方式。
  • 上下结构导航:菜单排版在顶部左侧或者右侧,这样的导航方式在网站中比较常见,但是在B端系统中也会使用,我曾接触过的实际项目中就有使用,主要运用于页面内容量大,导航无次级时。

在这里插入图片描述

4. 分页

采用分页的形式分隔长列表,每次只加载一个页面。

分页的样式也是多种多样,在不同情况下也会选择不同的样式,我这里总结了我们目前系统使用的3种分页样式:常规样式、长版样式、简洁样式。

  • 常规样式:默认展示的样式即常规样式,控制在五个数字间,避免数字太多太混乱
  • 长版样式:当数据信息量巨大的情况下,分页的数量也会增多,采用多数字可切换的样式
  • 简洁样式:页数固定或最多不超过10页时,一般采用左右切换的样式

在这里插入图片描述

5. 下拉菜单

下拉菜单向用户显示操作或选项的列表。

下拉菜单样式可分为2种:一级下拉、多级下拉。

  • 一级下拉:最简单的下拉选择样式,直接平铺可选择的选项内容。
  • 多级下拉:下拉框种存在层级关系(主次层级)、样式可分为左右分级展示、上下错位分级展示、树结构分级展示(这里关于树结构的下拉展示方式没有作样式,不过后面有关于树结构的组件介绍,可参考其样式)。

在这里插入图片描述

6. 滑条

上下滑动展示更多内容。

滑条是作为产品中不可缺少的组件,无论是web端还是移动端,都会运用到,滑条的样式也都差距不大,也没有很大的设计发散,主要是还是根据实际需求情况区分其交互形式。

例如:在我的实际工作中,我选择的交互方式是,滑条不会一直显示在界面中(避免页面整体视觉效果受到干扰),只有当鼠标移动到可滑动的区域才会出现滑条(告知用户页面内容可滑动看更多),所以我的组件中会出现两个样式。
在这里插入图片描述

7. 日期选择框

输入或选择日期的控件。

对于B端系统来说,日期会根据业务的情况精度提取会不同,精确到日、时、分、秒,作为时间设置和过滤条件使用时,一般会使用到时间区间,所以日期选择框分为以下3种:普通日期选择、区间日期选择、精准日期选择。

  • 普通日期选择:只可选择某年月日时间精度。
  • 区间日期选择:可选择不同年月日时间区间。
  • 精准日期选择:可选择年月日、时分秒高精度时间。

在这里插入图片描述

8. 单选/多选框

在一组可选项中进行单项/多项选择时。

注意组件的使用场景:单选/多选框看是简单又常见的组件,但是在实际项目中运用时也需要做到细致的区分,选项只支持单选时我们就采用合适的圆形单选框,支持多选时就采用方形的多选框,做好单选和多选的场景区分.

注意组件的状态区分:单选/多选框的样式虽然简单,但是也有3种显示状态:默认、选中、不可选。
在这里插入图片描述

9. 树

树型展示和树型选择控件。

树组件在B端系统中常用于权限设置,大部分的B端系统都会有权限设置的功能,当然在我实际工作中出来权限设置使用树结构外,还有其它的使用场景,比如:组织维护、职能维护、事项维护等等。

树结构可以清晰的展示层级关系,并且节约空间,但是在一些复杂的需求中,树结构比较难维护,所以在选择组件时也需要考虑实际业务场景和维护成本。

下图中左侧为展示效果的树结构、右侧为可操作(选择)的树结构效果展示,两种效果都可运用到上文提到的下拉选择框中使用。
在这里插入图片描述

10. 标签页

选项卡切换组件。

标签页分为2种形式:横向标签、纵向标签。

  • 横向标签:横向的标签样式是最常用的样式,包括在网站和移动端都会运用,标签样式分为文字+线条、文字+色块,分别区分选中和默认的状态形式,标签除了默认固定的标签外,还会有可编辑的标签,可满足增删除功能,所以这类标签会有“删除”标识,例如网页页签就是可编辑的标签样式。
  • 纵向标签:纵向标签有点类似左右结构的导航菜单,也是通过点击选中页签,实现页面内容的切换变化。

在这里插入图片描述

11. 输入框

文本输入框、数字输入框。

输入框是最为常见的组件了,这里就不做组件的介绍,主要还是分享一下关于输入框组件在不同显示器上排版布局的区别吧,例如在移动端输入框的文本和输入框一般会采用上下结构,因为移动端的尺寸比较小,可展示内容的区域有限。

而在web端,会根据此页面的内容量以及内容显示的形式来区分显示方式,例如弹窗中内容较少时,输入框样式一般会采用上下结构,内容较多页面空间较大时会选中左右结构排版,当然,这并不是固定的排版思维,而是需要根据实际情况选中合适的排版方式。
在这里插入图片描述

12. 表单

高性能表单控件,自带数据域管理,包含数据录入、校验以及对应样式。

表单在我认为,即多个输入框的组合,表单的样式可直接根据输入框的两种样式作区分展示,左右结构和上下结构,普通的表单是会根据实际业务情况固定输入的字段信息,而对于一些特殊的表单信息,用户可以增减表单的内容时,表单的样式则会和普通的样式作区分,并且交互方式也会有所区分。

例如下图右侧的表单样式即为可增减的表单,支持点击右下角的“添加”按钮增加一个和上面一样的表单内容信息,可点击表单模块右上角的“x”删除此表单,达到用户自定义表单内容数量的要求。
在这里插入图片描述

13. 上传

文件选择上传和拖拽上传控件。

上传的功能我们不少见,对于B端系统来讲,上传表单、文件是最为常见的操作,这里我总结了3种上传的组件样式:单件上传、图片上传、批量上传。

  • 单件上传:单文件上传一般是上传一个或者几个文件,常采用按钮或拖拽的交互形式。
  • 图片上传:简单的图片替换上传,常用于企业logo替换、登录页图片替换等场景,需告知用户图片上传的状态。
  • 批量上传:对于大批量的文件上传需要告知用户文件的状态,支持用户取消上传操作,例如:常用的百度网盘上传和下载文件。

在这里插入图片描述

14. 气泡卡片

点击/鼠标移入元素,弹出气泡式的卡片浮层。

由于B端产品内容量巨大,需要在有限的空间展示所有的数据不为是个难题,所以为了在有限的空间展示重要额内容,达到界面的可阅读性、采用次要内容隐藏的功能,通过点击或者悬浮展示全面的内容。

最常见的表格内容太长出现“…”,鼠标移入出现悬浮气泡显示完整的信息;名称后面跟随“?/!”图标,鼠标移入出现悬浮气泡显示注释的信息;数据分析图表,鼠标移入出现悬浮气泡显示数据的信息等等。
在这里插入图片描述

15. 表格

展示行列数据。

表格作为常见的组件,样式是多种多样的,并且每一种表格的交互都各不相同,使用的常见也各有差异,下图我只展示了2种表格的样式,但是实际上远不止于此,在我目前工作种涉及的一个项目中就采用了超过5种的表格样式,这里我就不做详细介绍,后期我会单独总结关于表格的不同样式以及使用场景
在这里插入图片描述

16. 警告提示

警告提示,展现需要关注的信息。

警告提示一般分为四个状态:成功、信息注释、警告、错误(失败).

根据提醒内容的显示以及是否需要用户手动操作,我总结了四种样式,如下图:
在这里插入图片描述

17. 弹窗/抽屉

信息展示和信息填写的浮层面板。

弹窗和抽屉都是内容展示的不同出现方式,组件的选择同样需要根据实际需求情况,比如需要参考页面信息填写表单信息,采用抽屉的样式则更为合理,这样就可以在右侧填写表单,在左侧参考数据对比,抽屉的样式可以是浮窗也可以是直接从右侧推出,左边内容被挤压得形式,这样得交互方式在我得实际项目中也是常用之一。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/643257.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

助力工业焊缝质量检测,YOLOv7【tiny/l/x】不同系列参数模型开发构建工业焊接场景下工件表面焊接缺陷检测识别分析系统

焊接是一个不陌生但是对于开发来说相对小众的场景,在工件表面焊接场景下常常有对工件表面缺陷智能自动化检测识别的需求,工业AI结合落地是一个比较有潜力的场景,在我们前面的博文开发实践中也有一些相关的实践,感兴趣的话可以自行…

菜鸡后端的前端学习记录

前言 记录一下看视频学习前端的的一些笔记,以前对Html、Js、CSS有一定的基础(都认得,没用过),现在不想从头再来了,学学Vue框架,不定时更新,指不定什么时候就鸽了。。。。 Vue2 01…

SQL Server多数据表之间的数据查询和分组查询

文章目录 一、多数据表之间的数据查询1.1内连接查询(Inner join)1.2 左外连接 (LEFT JOIN):1.3右外连接 (RIGHT JOIN):1.4. 全外连接 (FULL OUTER JOIN):1.5 交叉连接 (CROSS JOIN):1.6 自连接 (SELF JOIN):1.7 子查询: 二、分组查询2.1 分组查询2.2 查询…

静态分析C语言生成函数调用关系的利器——cflow(二)

大纲 环境准备选择项目分析代码简单分析高级分析坑:不能显示main函数所有调用函数的调用栈坑2:重定义错误坑3:缺失编译时产生的文件坑4:缺失工程的头文件包含路径指定坑5:操作系统的坑只存在于windows操作系统上的文件…

rabbitmq基础-java-1、快速入门

1、AMQP AMQP,即Advanced Message Queuing Protocol(高级消息队列协议),一个提供统一消息服务的应用层标准高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计,基于此协议的客…

Parallels Desktop 19 mac 虚拟机软件 兼容M1 M2

Parallels Desktop 19 for Mac 是一款适用于 macOS 的虚拟机软件。无需重启即可在 Mac 上运行 Windows、Linux 等系统,具有速度快、操作简单且功能强大的优点。包括 30 余种实用工具,可简化 Mac 和 Windows 上的日常任务。 软件下载:Parallel…

Linux目录结构:深入理解与命令创建指南

目录 摘要: 一.linux目录介绍 1.目录结果设置标准 2.目录结构介绍 二.linux命令 1.常见命令 # 与 $ 提示的区别 ifconfig查看ip地址 su 命令格式 cd 目录查看 查看文件内容 创建目录及文件 复制和移动 tar find chmod 2. vim一般使用 摘要: 前…

基于中文垃圾短信数据集的经典文本分类算法实现

垃圾短信的泛滥给人们的日常生活带来了严重干扰,其中诈骗短信更是威胁到人们的信息与财产安全。因此,研究如何构建一种自动拦截过滤垃圾短信的机制有较强的实际应用价值。本文基于中文垃圾短信数据集,分别对比了朴素贝叶斯、逻辑回归、随机森…

CentOS使用

1.使用SSH连接操作虚拟机中的CentOS 1.1 配置静态IP 想要使用ssh连接就需要获取虚拟机的IP,但若DHCP,则每次连接都要确定虚拟机的IP是否变化,故直接分配一个静态IP vmware中,编辑–虚拟网络编辑器,记住下方的子网掩…

windows和linux下SHA1,MD5,SHA256校验办法

今天更新android studio到Android Studio Hedgehog | 2023.1.1时,发现提示本机安装的git版本太老,于是从git官网下载最新的git。 git下载地址: https://git-scm.com/ 从官网点击下载最新windows版本会跳转到github仓库来下载发布的git&…

【趣味CSS3.0】粘性定位属性Position:sticky是不是真的没用了?

🚀 个人主页 极客小俊 ✍🏻 作者简介:web开发者、设计师、技术分享博主 🐋 希望大家多多支持一下, 我们一起学习和进步!😄 🏅 如果文章对你有帮助的话,欢迎评论 💬点赞&a…

sublime text 开启vim模式

sublime text 开启vim模式 打开配置文件 mac下点击菜单栏 Sublime Text -> Settings... -> Settings 修改配置文件并保存 添加配置 // 开启vim模式 "ignored_packages": [// "Vintage", ], // 以命令模式打开文件 "vintage_start_in_comman…

视频监控平台EasyCVR增加fMP4流媒体视频格式及其应用场景介绍

近期我们在视频监控管理平台EasyCVR系统中新增了HTTP-FMP4播放协议,今天我们就来聊聊该协议的特点和应用。 fMP4(Fragmented MPEG-4)是基于MPEG-4 Part 12的流媒体格式,是流媒体的一项重要技术,因为它能通过互联网传送…

【GitHub项目推荐--12 年历史的 PDF 工具开源了】【转载】

最近在整理 PDF 的时候,有一些需求普通的 PDF 编辑器没办法满足,比如 PDF 批量合并、编辑等。 于是,我就去 GitHub 上看一看有没有现成的轮子,发现了这个 PDF 神器「PDF 补丁丁」,让人惊讶的是这个 PDF 神器有 12 年的…

RabbitMQ进阶篇【理解➕应用】

🥳🥳Welcome 的Huihuis Code World ! !🥳🥳 接下来看看由辉辉所写的关于RabbitMQ的相关操作吧 目录 🥳🥳Welcome 的Huihuis Code World ! !🥳🥳 一.什么是交换机 1.概念释义 2.例…

【数据分析】matplotlib、numpy、pandas速通

教程链接:【python教程】数据分析——numpy、pandas、matplotlib 资料:https://github.com/TheisTrue/DataAnalysis 1 matplotlib 官网链接:可查询各种图的使用及代码 对比常用统计图 1.1 折线图 (1)引入 from …

51单片机LCD1602调试工具

参考视频:江协科技51单片机 LCD1602头文件代码 #ifndef __LCD1602_H__ #define __LCD1602_H__//用户调用函数: void LCD_Init(); void LCD_ShowChar(unsigned char Line,unsigned char Column,char Char); void LCD_ShowString(unsigned char Line,un…

【深度学习】线性回归模型与梯度下降法

线性回归模型与梯度下降法 线性回归模型与枚举法 线性回归模型定义: w:权重b:偏置#mermaid-svg-ZAxF27Mw5dXNQgw2 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ZAxF27Mw5dXNQgw2 .error-icon{fill:#552222;}…

机械硬件知识学习

目录 1.电机减速机、扭矩2.伺服电机、步进电机、直线电机3.电机马达的曲线运动是如何转化为轴的直线运动 大佬科普运动控制系统链接:https://www.cnblogs.com/cariohu/p/15508175.html 自己对机械知识的了解是盲区,学习下接触到的一些硬件知识&#xff0…

含源码|基于MATLAB的去雾系统(5种去雾算法+1种本文的改进算法)

去雾系统V2包括作者新加入的多尺度Retinex去雾算法以及改进去雾算法,以及4种评价去雾效果的客观指标。 00 目录 引言 去雾系统新增功能 结果分析 源码获取 展望 参考文献 01 引言 在作者前面写过的文章中,已经介绍过图像去雾算法的应用价值及研究现…