2019年C端市场热度逐渐消退，头部C端企业开始收割用户，会员/服务付费/补贴降低/投资保守是整个2019年的主旋律。在大经济环境不好的时候，对于企业来说，最核心的需求是盈利（即提高收益，降低成本）一方面扩宽C端业务还没触及的存量市场，一方面寻找新的业务增长方向，一方面整合已有资源降低成本和提高效率。
业务的扩展，如三、四五线城市消费人群触达（拼多多是最成功的例子）；如老年人群体（微信小程序成为了最好的触达平台-其中“小年糕”表现最好）。新业务的增长，各大公司纷纷布局海外市场。
而B端逐渐浮出舞台，它同时具备存量市场（企业、中小商家）、新业务（SAAS服务）、降低成本及提高效率（中台)。
数据来源QUEST MOBILE
B类产品早在2019年以前就已经在市场上存在并使用了，只不过国内的发展较为缓慢，到今年中台概念的兴起及C端产品发展的成熟，B类产品再次出现在大家的视野中。
如淘宝的商家后台，具备交易管理、物流管理、宝贝管理、客服管理等主要功能模块，通过后台的操作，再上线至淘宝的店铺呈现给用户。
图为淘宝商家后台
C端上线后
如在线文档协作工具类的石墨文档，即时在线协作，在线分享，不需要下载安装软件。云端储存，多端设备同步查看操作。
图为石墨文档-在线文档协作工具
ToB并不仅是web端，在移动端也同样存在着ToB的产品，如美团的商家版、滴滴车主。To-B（即针对商家或企业），To-C（针对消费者个人）。
美团商家/滴滴车主移动端
ToB产品有三种服务模式，即SaaS、PaaS、IaaS
一、软件即服务（SaaS）
企业或商家根据自身的需求，向SaaS供应商租赁或定制软件服务，无需购买硬件、建设机房、自主设计，有的可以直接省掉开发人员。SaaS软件的设计，也是基于企业或商家普遍存在的需求和痛点的设计，如石墨文档解决的是企业内部的在线文档协作（包括云端储存和多端同步）的需求。
石墨文档会员费用
禅道解决的是项目开发过程中整个项目高效管理（包括项目进度管理、成员任务管理、测试与bug修复的在线协作等）的需求。
禅道
有赞解决的是中小商家业务扩展需求（包括商品管理、运营手段、营销渠道扩展、数据分析等）。这些类型的产品服务针对的需求具备通用性。
有赞微商城
针对通用性行业的软件服务
而针对企业内部管理的需求不具备通用性，所以一般中大型企业都会更具自身需求定制开发（如OA系统和ERP系统）但是本质上还是给内部员工提供的基于企业内部规则的软件服务。
某企业OA流程
如上图的企业OA，具备报销管理、财务管理、人事管理、研发管理等功能流程，在企业中请假或者报销，通过该系统可以快速线上处理，并能记录在案。省时省力。
平台即服务（PaaS）-厂商向客户提供开发环境或虚拟服务器
PaaS基于有技术团队，想要自主开发设计产品，厂商直接提供稳定的平台和云服务器，相较于SaaS来说，灵活性更强，也更能创造出不一样的产品体验和产品价值，并且能更具企业需求和市场环境进行调整。
基础设施即服务（IaaS）-厂商提供场外服务器，储存和网络硬件，客户可以租用
大家都知道一个能被大家使用的软件产品，背后需要有服务器，需要有数据储存，而机房建造和维护成本又很高，如果用户量不够大，建立多个服务器既有风险又很不划算。早期的互联网公司基于自身的需求已经在全国拥有大量的服务器机房，建设成本和维护成本每年都在支出，针对PaaS服务，以云服务器的形式线上租赁给中小型企业，针对安全性要求更高的企业直接提供IaaS服务。
阿里云和腾讯云都有相应业务提供。
回到设计角度，小浮在实际工作中涉及到了多个B端产品从0到1的设计，从整体难度来看，B端产品的难点主要在于理清业务之间的逻辑关系，而视觉设计部分多为表单、表格、图表、筛选样式，多平台可以复用，所以在视觉层，更重要的是组件的规范性，及设计能更高效的达成业务目的。
目前已经存在很多B类产品设计的设计语言和组件规范，对于前端开发和UI来说非常友好，在设计之初，完全可以以某家的设计语言为基础规范，在此基础上进行开发设计，可以大大的节省时间和人力。下图为常用的设计语言和规范，文末会附上链接。
antdesign设计语言
B端设计语言及规范网站
下面会讲解小浮在实际项目设计过程中的思考，不具备唯一性和标准性，主要从布局、基础元素、表格、筛选组、弹窗、表单、图表来进行讲解。
二、关于布局
布局主要分为上下布局和左右布局两种主要样式，布局方式的选择需要根据导航的层级深度来选择，并相应要考虑面包屑导航的呈现形式和是否采用栅格布局。
以下四个屏幕尺寸覆盖95%以上的用户，在设计时一般选用1440*900px，向上向下适配都较为合适，如果是给自己内部使用，完全可以根据内部通用机型来设计画布。
通用电脑屏幕尺寸
如果产品功能的结构层级不深，在三级和二级以内，很适合采用以下布局样式，该样式左侧导航栏为200px,且固定，内容区12栅格，每栅格宽度为50px,内容区左右上下间距为20px。
1.栅格布局
产品功能的结构层级在三级以内，但二级导航内容过多，且需要进行分类，可采用以下形式，此时侧边导航占据空间较大，需要有折叠功能来为内容展示腾出更多空间。折叠后的ICON要注意比折叠前的ICON大，且鼠标houver图标要有名称提示，便于用户识别和理解。
网易七鱼使用该样式
当产品功能的结构层级大于三级，一般该B端产品提供的服务很多，多采用上下布局和混合布局，这种布局形式可以承载更多大小分类样式和搜索条件。
腾讯云
三、基础元素
字体的选择，字体多采用默认字体，在MacOS上使用默认字体“苹方”，在Windows系统上多使用中文字体“微软雅黑”和英文字体“Arial”。正文字体大小为14px，最小字体不要小于9px。
颜色的使用不宜过多，多定义一个品牌色为主色调，B端产品设计更注重使用者效率，大面积使用颜色过多会导致视觉混乱，对于功能的操作体验和内容浏览都不友好，且功能色彩要和色彩情绪相呼应。
基础规范
按钮具备四种状态（默认、悬浮、点击、置灰），最小不小于高度24px，一般的按钮为32px。
基础规范
四、表格
表格的可操作性太高了，在设计之初要考虑清楚内容的对齐方式，文字一般居中，金额数字（一般财务的观看习惯是居左）。表头背景可以填充较淡的色彩做凸显，当表内容过多时，向下滑动，需要固定列头，方便用户实时查看表头。
通用表格规范
当列头过多时，需要有自定义列功能，针对不同角色关注内容不同，可以自定义自己关注的列，也可以固定重要的列，当左右滑动时，固定列不会随滑动消失，一般操作项必须固定。
自定义列显示
做多选样式时，需要考虑清楚，多选针对当前页还是表格中所有数据，一般针对当前页。针对所有数据，当数据量过多时，会导致页面卡顿，一般导出表格内容会单独给个”导出“功能按钮。
单/多选样式
页面载入后的排序为初始排序，首先初始排序的规则就应该以用户最关心的数据为主，如时效性较强的列表，默认排序应该是时间降序，金额比较重要的列表，默认排序应该是金额降序。
当表格内有多列具备排序功能时，需要考虑排序的切换逻辑。同时只能应用一种排序，在应用新排序的同时旧排序失效，不然会起冲突。
内容升降序
当内容过多时，可以内容折叠显示，通过点击展开折叠内容。当单个文本信息过长时也可以限定内容长度，当鼠标houver时，浮窗展示所有信息。
多内容折叠列
字段过长时
分页标签，分页标签较为重要的功能是当前页的展示数量了，表格的默认展示行数一般与屏幕大小和用户查看习惯有很大的关系，当行数展示过少，用户需要不断翻页，会打断用户沉浸浏览，而当前页内容展示过多，又会导致页面加载缓慢，所以这里我根据主要用户使用电脑的屏幕高度,来限定表格高度，默认展示行数20行。
分页指示器
说到表格自然少不了查找组，查找组包括关键字搜索，和条件筛选。一般的筛选样式是左文案介绍右筛选框，但是当筛选条件一多，这种样式会特别占空间，这样对于内容的查看很不友好，在这种情况下会把介绍文案和筛选框结合，以节省空间。如下图所示。
做内容区分
如上图处理确实可以承载更多筛选样式，但是筛选+搜索还是会占据不少的空间，此时可以通过收起来增大内容展示区。可以全部收起，也可以收起部分，全看使用者需求。
全收起
收起部分
当查找内容没有那么多时，可以和操作按钮并列处理，更大程度的去节省空间，如下图所示。
查找条件不多
还可以通过动态交互的形式来做更好的设计，但是开发成本会比较大，在产品发展中后期可以使用。
来源Dribbble
内容太多了，分上下两篇出吧！还剩余弹窗、表单、图表三种样式。如果对你有帮助，点个”在看”吧。最后分享一下设计语言的链接，对于中小型公司来说，直接使用大公司的开源设计组件，是非常节省成本的且有利的一件事。
