B端产品与与C端产品不同的是，B端产品往往更看重“能力”（为企业用户解决问题），而产品的销售方式与付费模式，也决定了产品体验并非首要关注的对象。由于B端产品通常针对企业用户，需要更长的研发过程，产品的体量和复杂性也相对较高。因此，除了产品解决问题的“能力”之外，产品还需要关注研发的效率及成本。成本是研发一个产品的通病，在有限的成本下首先能够解决核心问题从而产生价值是关键，但后续的更新与迭代也同样重要，B端产品研发是一个漫长而系统化的过程。这个过程通常伴随着商业业务发展与商业战略模式的不断调整。
B端产品设计构建的流程可以分为：初创期-成长期-成熟期-衰老期（初创期需要思考的问题：用户是谁？产品能够解决什么问题？问题是否普遍是否能够得到标准画的执行方案？从而确立：产品风格以及建立基础模型，同时也需要关注产品的体验例如：如何让产品体验最优化或者是产品路径最高效，是否能够解决用户核心痛点？是否合理？是都具备通用性？如何拥有完整的商业模式，从而达到长期的盈利预期。/// 成长期需要思考的问题：完善产品内容明确迭代方向进行产品扩张，解决更多用户问题扩张业务范围。完善功能体系搭建更为丰盛的功能矩阵。提升优化用户体验 /// 成熟期需要思考的问题：产品的形态是否稳定，并能够创造持续的商业价值，）
B端通常都以桌面端的形式展现 桌面端与移动端又有不小的差异比如屏幕空间 桌面端常以横向发展，而移动端的方向主要是纵向发展，同时桌面端
B端设计规范总结：可以分为ui样式规范与组件规范，UI样式规范包括色彩，字体、布局、图标。组件规范主要包括的按钮、面包屑、导航菜单、分页、下拉菜单、滑动条、选择框、标签页面、输入框、表单、气泡、卡片、表格、提示框、弹窗、抽屉
首页来说UI样式中的色彩：一个产品的系统色彩的核心必定是这个产品的主色（品牌色），其次为辅助色，中性色。主色的设定直接影响了产品气质与直观感受，也是产品的形象是第一眼的感官，主色要根据产品特性，用户的使用场景，产品定位等进行选取，尽量做好色彩的延伸性，主色的应用场景应该包括操作状态、按钮色、可操作图标等；辅色的设定主要用于提示其他场景与主色相互配合用于按钮色彩，辅助内容等；中性色主要用于文本、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制不透明的变化用来强调层次场景，从而表现不同层级结构；其它色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定，通过基本色彩衍生而来。
二UI样式中的字体：字体是构成界面的主要构成之一，字体的大小颜色可以区分出文字内容的层级；系统中字体大小为：12px、14px、16px、18px、20px、24px、26px、28px、30px、36px…字体行高设定：根据文字大小及使用场景设置行高，行高=文字大小+8px。常规默认的系统字体规范最小为 12px，关于不同分辨率下，不同显示器分辨率和布局的默认设置情况，字体规范会作不同的梯度
三UI样式中的布局：B 端系统的用户的主流分辨率主要为 1920、1440 和 1366，通过动态适配布局来完成在不同分辨率下展示内容。系统中存在的结构方式有：左右结构、上下结构系统适配：采用 24 栅格，左右结构布局是最常见最基本的布局方案，常见的做法是左边为导航栏并且固定宽度，顶部栏为固定高度，右边则为内容区域用来进行动态缩放；上下结构布局：常被用户上下布局的方案中最常见的就是顶部栏目固定下面的内容进行动态缩放，内容区域左右两边有固定的最小值；
四UI样式中的图标： B端系统图标以简洁为主、分类区分，便于识别，同时可以起到分类标识与点缀的效果，默认大小为16*16px
接下来说UI组件规范
组件规范一：按钮：按钮的作用主要为触发事件或者动作，让用户知道接下来会发生什么，按钮的主要类型有：主按钮、默认按钮、虚线按钮、文本按钮、链接按钮、危险按钮；主按钮：用于主行动点，一个操作区域只能有一个主按钮；默认按钮：用于没有主次之分的一组行动点，虚线按钮：用于添加操作；文本按钮：用于最次级别的行动点，链接按钮：用于外链的行动点；危险按钮：通常用于一个存在潜在危险的操作，在用户触发操作前通过视觉呈现给与用户警告。 按钮的状态常被分为四种分别是：正常、悬停、按下、禁用、正常：表示表示控件处于活动状态，但是当前并未使用；悬停：指鼠标移入时的状态 常见的有浮起，变色、装饰、抖动等；按下：点击的状态；禁用：无法使用的状态；
组件规范二：面包屑：面包屑是一种导航系统，显示当前页面在系统层级结构中的位置，并能向上返回。面包屑组件在 B 端系统是常用的组件，同时在网站中也是常用的，面包屑的样式分为 2 种：短面包屑、长面包屑；短面包屑：用户层级比较浅的页长面包屑：用户层级比较深的页面。
组件规范二：导航菜单：为页面和功能提供导航的菜单列表。导航菜单一般分为 2 种模式：左右结构导航、上下结构导航；左右结构导航：最常见的就是左右结构的导航，通常会采用图标+文案的形式呈现，并且有层级区分，采用点击展开的形式收缩二级目录，左右结构的导航一般都会支持左侧收缩的交互功能，为内容展示区域提供更大的展示空间，一键收缩或者鼠标左右拖动收缩，可根据实际情况而选择合适的交互方式上下结构导航：菜单排版在顶部左侧或者右侧，这样的导航方式在网站中比较常见，但是在 B 端系统中也会使用，主要运用于页面内容量大，导航无次级时
组件规范二：分页：用分页的形式分隔长列表，每次只加载一个页面分页的样式也是多种多样，在不同情况下也会选择不同的样式，最常见的有 3 种分页样式：常规样式、长版样式、简洁样式；常规样式：默认展示的样式即常规样式，控制在五个数字间，避免数字太多太混乱；长版样式：当数据信息量巨大的情况下，分页的数量也会增多，采用多数字可切换的样式；简洁样式：页数固定或最多不超过 10 页时，一般采用左右切换的样式
组件规范二：下拉菜单： 下拉菜单向用户显示操作或选项的列表下拉菜单样式总可分为 2 种：一级下拉、多级下拉；一级下拉：最简单的下拉选择样式，直接平铺可选择的选项内容；多级下拉：下拉框中存在层级关系（主次层级）、样式可分为左右分级展示、上下错位分级展示、树结构分级展示
组件规范二：滚动条：滚动条是作为产品中不可缺少的组件，无论是 web 端还是移动端，都会运用到，滑条的样式也都差距不大，没有很大的设计发散，主要是还是根据实际需求情况区分其交互形式，交互方式有一：滑条不会一直显示在界面中（避免页面整体视觉效果受到干扰），只有当鼠标移动到可滑动的区域才会出现滑条（告知用户页面内容可滑动看更多）二：滑动调一直展示
组件规范二：日期选择框： 输入或选择日期的控件对于 B 端系统来说，日期会根据业务的情况精度提取会不同，精确到日、时、分、秒，作为时间设置何过滤条件使用时，一般会使用到时间区间，所以日期选择框分为以下 3 种：普通日期选择、区间日期选择、精准日期选择；普通日期选择：只可选择某年月日时间精度；区间日期选择：可选择不同年月日时间区间；精准日期选择：可选择年月日、时分秒高精度时间（这个一般前端小哥有组件）
组件规范二：单选/多选框：在一组可选项中进行单项/多项选择时 ，注意组件的使用场景：单选/多选框看是简单又常见的组件，但是在实际项目中运用时也需要做到细致的区分，选项只支持单选时我们就采用合适的圆形单选框，支持多选时就采用方形的多选框，做好单选和多选的场景区分；注意组件的状态区分：单选/多选框的样式虽然简单，但是也有 3 种显示状态：默认、选中、不可选
组件规范二：标签页：标签页实际上是一种选项卡切换组件，可以用来切换页面切换内容等；标签页分为 2 种形式：横向标签、纵向标签；横向标签：横向的标签样式是最常用的样式，包括在网站和移动端都会运用，标签样式分为文字+线条、文字+色块，分别区分选中和默认的状态形式，标签除了默认固定的标签外，还会有可编辑的标签，可满足增删除功能，所以这类标签会有“删除”标识，例如网页页签就是可编辑的标签样式。纵向标签：纵向标签有点类似左右结构的导航菜单，也是通过点击选中页签，实现页面内容的切换变化。
组件规范二：输入框：主要可以分为：文本输入框、数字输入框，排版也比较简单就是上下结构与左右结构
组件规范二：表单：高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式，表单实际上就是多个内容结构的组合，表单的样式可直接根据输入框的两种样式作区分展示，左右结构和上下结构，普通的表单是会根据实际业务情况固定输入的字段信息，而对于一些特殊的表单信息，用户可以增减表单的内容时，表单的样式则会和普通的样式作区分，并且交互方式也会有所区分。
组件规范二：上传图片/文件： 上传方式主要分为单件上传或者是批量上传；上传形式也可以是拖拽或者点击选择文件。对于B端系统来说，上传表单、文件、图片这些内容都是非常常见的，单件上传：单个文件上传，最常见的是按钮或者拖拽上传的交互方式 ；图片上传：简单的图片替换上传，经常用于编辑图片信息头像更换等图片展示的地方 图片上传需要告知用户图片的上传状态 ；批量上传：多个文件内容同时在后台默认上传，对于比较多的文件上传需要告知上传进度并且伴有取消上传的操作按钮。
组件规范二：气泡卡片：点击/鼠标移入元素，弹出气泡式的卡片浮层，由于 B 端产品内容量巨大，需要在有限的空间展示所有的数据是个难题，所以为了在有限的空间展示重要内容，达到界面的可阅读性、采用次要内容隐藏的功能，通过点击或者悬浮展示全面的内容。最常见的表格内容太长出现“…”，鼠标移入出现悬浮气泡显示完整的信息
组件规范二：表格：同表单类似，样式较多，主要注意的是内容层级的排版
组件规范二：弹窗/抽屉：信息展示和信息填写的浮层面板，弹窗和抽屉都是内容展示的不同出现方式，组件的选择同样需要根据实际需求情况，抽屉的样式可以是浮窗也可以是直接从右侧推出，左边内容被挤压的形式，这样的交互方式在我的实际项目中也是常用之一。
