(一)前言与概念
很早就想试着捋一捋B端和C端，主要说B。话不多说，由于拖更太久今天直奔主题。
一、概念
1、C端和B端的产品分别是什么？
在国内，行业习惯将互联网产品划分成「B2C」或者「B2B」。
B2C 全称是 Business-to-Consumer 即企业到客户的服务，B2B 全称是 Business-to-Business，即企业对企业的服务。它们还会进一步缩写成「2C」或「2B」。
C 端产品，是面向终端消费用户的产品，对于使用者而言主要是用来满足自己的日常生活实践需求，例如娱乐、消费、学习、出行等等。
例如你身边手机种的：网易云音乐、美团/饿了么、优酷/爱奇艺、滴滴出行……
常见C端产品的页面
而 B 端产品，是面向企业用户的产品，用户通过它进行日常的商业活动，例如企业库存管理，销售统计，员工出勤考核等等。可以说，用来解决企业/组织需求的产品，都是 B 端产品。
手机里的钉钉、飞书都是……(不放图了)
虽然面向企业的产品对于很多人来说很陌生，听起来也很枯燥，但是 B 端产品的覆盖范围是非常广泛的。因为不同企业所处行业和业务形式不同，所以对 B 端产品的要求差异极大，产品运行的平台可能是手机，也可能是平板、定制安卓设备、桌面客户端、网页程序等。
一个常见的B端产品
B 端产品帮助企业或组织通过协同办公，解决某类管理问题，承担着为企业或组织提升效率、降低成本、控制风险从而提高企业收入，减少企业内部损耗的重要职责。B 端产品的工作是合理实现企业需求，提高产品核心竞争力，并提升市场价值。在国内互联网语境中，B 端产品的狭义解释也基本可以和面向企业的 「网页程序」 等同，用更接地气的称呼可以叫「管理平台」、「管理端」 。
(二)二者差异
B端和C端的直接差异——核心功能VS复合功能的集合体
最直接的是功能和体验上。功能上，C端可以说“一招鲜，吃遍天”。
C 端产品是为了解决用户的需求，从功能的制定到交互和设计都围绕目标用户展开。在一个核心功能体验精彩的情况下，有一些亮点的细节。C端产品就能打动人，例如网易云音乐比较的听歌功能加上人性化的推荐、评论、年度听歌报告等细节。
而B端因为它主要满足我们在工作中的需求，解决工作中的问题从而提高办公效率。这些需求和问题是复杂多样的，也就意味着对应它们不是能依靠单一功能来满足和解决。
体验层面上，好的C端产品一定需要带来好的体验，这取决于它服务用户的本质，以及激烈的C端市场竞争。一个C端产品问世，就意味着大片竞品就纷至沓来，你不好用不吸引我我就用其他的，这样C端赖以生存的流量也就跑掉了。
而B端产品而言，体验需要让步给团队协作和解决问题的效率、产品可用性等要素。B端是组织工作场景下的理性产物，不用去迎合甚至会部分制约“人性”，而应依从集体的指令和规则。
其他差异还有：
1. 从定义上：
B 端：To B 就是 To business，面向企业或者特定用户群体的企业级别产品；
C 端：To C 就是 To customer，产品面向普通大众消费者。
2. 从用户群体上：
B 端：产品一般是多种角色，有决策者、管理者和执行者，B 端往往是基于公司层面多人对某一问题解决方案进行整体评估。
C 端：用户群体较单一，或者是专注于某一领域群体，可根据性别，职业或行为偏好等关键属性进行分类。
3. 业务场景
B 端：业务场景多、逻辑复杂，根据每个人角色需要有不同的解决方案
C 端：业务场景较单一，或者专注于某个垂直的使用场景。
4. 用户的诉求：
B 端：控制成本、提高效率，注重安全和稳定
C 端：重视人性和用户体验
5. 盈利模式：
B 端：有明确的盈利模式和用户群体。
C 端：大部份 C 端产品都是使用免费，以此吸引用户使用，等积累到一定的用户数量，依靠流量红利或需要探索相应变现的路径。
(三)B端类型
常见的B端业务类型
在 B 端产品中，我们需要先认识几个最常见的业务类型。它们分别是：
1. ERP(Enterprise Resource Planning，企业资源计划)
ERP 是对企业所拥有、调动的资源进行统一管理的平台，包括商品的供应链，销售审计，库存管理，成本核算等等，是今天实业领域必备的系统。
例如，一家连锁零售商，首先以特定价格购入某货物，该货物被运输到仓库进行验收，然后货物再次运送到某家门店，并于特定日期以特定价格售出。那么系统可以追踪该货物的整个销售状况，并可以统计出最终的利润。
比较有代表性的 ERP 系统有用友、金蝶等厂商的产品。
2. OA(Office Automation，办公自动化)
OA 系统是通过程序的形式使办公流程自动化的解决方案，是一个企业除了生产控制之外的一切信息处理与管理的集合。
常见的使用场景：你做了一份报表需要领导审批确认，并且在确认后发给相关的责任方，那么当你在系统提交这份文件后，领导在系统中只要审核通过系统就会自动分发并备份，增加内部文件流通的效率。
比较有代表性的 OA 系统服务商有泛微、蓝凌、致远等厂商的产品。
3. CRM(Customer Relationship Management，客户关系管理)
CRM 是企业专门用来管理客户的工具，尤其对于零售服务行业来说，能更好的维系和客户之间的关系是提升销售额和复购率的重中之重。
在日常生活里，我们在商店里办的会员卡，还有填写的用户资料，就是记录到 CRM 系统中，后台可以查看和统计客户数据，消费额度，账户余额等等。多数情况下，我们手机收到的品牌促销推广，就是由 CRM 系统操作的。
比较有代表性的 CRM 产品有 Salesforce 和易享销客等。
4. SAAS(Software as a Service，软件即服务)
SAAS 是一个比较宽泛的概念，通常它指第三方提供给企业的线上软件服务，它既可以包含前面几种服务类型，也可以是一些更细化的需求。SAAS 是这几年发展最迅猛的 B 端服务类型。
例如，中小团队会使用一些 SAAS 软件来进行团队协作，如发布、追踪任务，分享内部文档和即时沟通等等。
比较有代表性的 SAAS 产品有 Teambition、Tower、Slack 等。
5. CMS(Content Manage System，产品后台)
产品后台是每一个互联网产品都必备的系统，也是 B 端产品中最常见，数量最多的管理平台。我们通过这个后台系统对前端的产品进行管理，包括发编辑内容，处理用户，统计数据等。
比如在社交应用内通常有一个举报按钮，用户可以举报违规内容，而这个举报的信息就会在产品后台中有对应提示，操作人员就可以进行审核并做出处理。
(四)B端设计的内容
1. 布局设计
B 端产品，就是一套商业系统，在这个系统需要包含众多的信息和操作功能，而设计的任务之一，就是定义一套布局框架，将信息和操作功能整合进去，实现有序、统一的操作体验。
通常，管理界面的布局会包含以下几种固定的内容：
①导航
②状态栏
③内容区域
④弹窗/边栏
比如常见的几种布局类型：
B端常见的布局类型
当然，布局的设计远不是到这里就结束了，除了部分具体的字段、链接以外，我们还要将自适应的前端技术考虑进去，如何在拉伸浏览器的同时，保证这套布局的正常使用。
比如在今天最主流的适配方式就是通过 CSS 删格等分体系，但这是一个非常复杂的话题，我们以后讨论。
2. 控件设计
作为 UI 设计的一部分，控件的设计自然也少不了。多数控件的设计和一般网页设计所需的控件差不多，类似按钮、菜单栏、分页栏、面包屑、通知栏、下拉菜单等等。
B端常见的控件类型
这部分内容设计起来没有技术难点，但我们前面讲过，B 端产品在交互反馈上的需求，使得我们对控件进行设计时要充分考虑它们的状态。
例如，一个按钮可以包含默认、鼠标悬浮、点击、已点击、不可点、加载中等多种状态，这些状态设计得越全面，则操作的体验就越好。
3. 表单设计
表单是一个接触频率非常高，但对新人来说很陌生的词汇。简单点理解，它就是用来在界面中键入信息的控件的合集。比如输入框、复选框、单选框、下拉选框等等。
B端表单
在 B 端设计中经常需要用一系列的表单控件组成一个完整的业务操作，比如在后台创建一个用户账号，可能就需要通过在输入框输入用户名、密码，然后用单选框选择性别，复选框选择爱好，日期下拉菜单选择生日等等。
或者，我们还会使用表单的内容进行高级的筛选操作，通过不同的表单控件来设置筛选条件，缩小结果的范畴。
4. 表格设计
在 B 端产品中，数据主要通过表格的形式展现。而多数设计师对于表格的理解一无所知，甚至连 Excel 都没有用过。
B端表格
表格是 B 端产品呈现信息和数据最重要的组件之一，无论是用户、产品、订单或者记录，我们都需要依靠表格的展现形式进行梳理。
但是，表格的设计并不只是枯燥的画好线条方格，而是要根据业务的属性、 字段的类型和显示数量灵活的调整，以及还要考虑如果对每一条数据进行编辑、选中、移动等操作的交互方式。
5. 图表设计
最后，就要讲讲图表的设计了。在大数据概念大热的今天，人们对数据的重视度越来越高，无论是在新闻还是在会议的 PPT 上，我们都会看见各种各样的数据内容。而这些数据，通常都以图表的形式呈现。
B端常见的图表
常见的图表包含折线图、扇形图、柱状图、曲线图等等，比较常见。但是，有一个普遍的谬误是，很多新手错误地将图表的设计理解成数据可视化设计。数据可视化是将数据以更复杂、多样的方式表现出来，不仅在设计上难度更高，且需要极其高昂的开发成本，我们会在后续的内容里说明。
所以，在 B 端设计中，我们对数据的展示只要专注于了解主流的图表类型，并明白如何根据数据展示的需要对它们进行运用即可。
(五)以Antdesign为例
Ant design是蚂蚁的一整套企业UI设计规范。它在介绍中这样说：
“蚂蚁的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们(蚂蚁金服体验技术部)经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。”
接下来说说它的构造：
01.整体框架图
Ant design整体框架图
首先，一般B端的页面展示如上图所示，按照功能模块，可以分为主导航、状态栏、标题栏、头部域、内容区域。
Ant design整体布局
02.主导航
①横向导航
横向导航
优点：
1. 通常使用比较少的菜单，简单，容易记忆；
2. 位于页面顶部，不占用横向空间；
3. 由于位于顶部，在视觉上更突出，更容易识别；
4. 菜单选项之间视觉权重的区分更明显，左边最强右边最弱。
缺点：
1. 扩展性有限，不能很好的承载大量和多层级菜单；
2. 占用屏幕高度，特备是当固定于屏幕顶部时；
3. 来回切换菜单选项时，横向移动鼠标的距离更长，操作效率更低。
②纵向导航
纵向导航
优点：
1. 能够承载的菜单项数量和层级更多，扩展性强；
2. 不占用屏幕高度且可以收起，为内容提供更多空间；
3. 在菜单间切换时鼠标移动距离短；
4. 能够更好地适应屏幕宽度较小的设备。
缺点：
1. 菜单数量多层级复杂时，不容易记忆；
2. 菜单选项文字不宜过长，可能会截断；
3. 各菜单选项之间的视觉权重差别不明显。
03.状态栏
状态栏
状态栏，它的定位是全局功能，或者是系统操作。比方说有一些全局搜索、设置、通知等功能，将会放在这里。设计上来说，难度不大。
04.标题栏
最常用的是第1、2种，第4种如遇特殊情况，对页面高度空间要求高，以及页面层级为单一层级时，可以去掉不用，因为在左侧的导航也有相应的title进行提示。
标题栏
标题栏是用来放置页面的名称的，目的是告诉用户现在所在的页面是哪，与整个网络是什么关系。一般会有4种展现形式，如下图。
最常用的是第1、2种，第4种如遇特殊情况，对页面高度空间要求高，以及页面层级为单一层级时，可以去掉不用，因为在左侧的导航也有相应的title进行提示。
05.头部区域.
头部区域一般是筛选功能。因为B端主要承载的是查看功能，所以筛选项会特别多。
值得注意的是，默认情况下查询按钮会放在筛选项之后，如果排满了，会放在筛选项右下角，如上图。有查看更多的话，“展开”按钮也会放在右下角。
头部区域有时候也会放置一些内容或者搜索项，如下图。
06.内容区域
内容区域主要以报表、表格、表单三种形式呈现。
A.报表
报表的布局一般是块状如下图。
报表的展现形式主要分为柱状图、条形图、折线图、饼图。
a.柱状图
适用于多个个体对一个变量数据维度的比较，由高到低进行排列，但有个特别的情况在于，如果可变量是时间，则按照时间顺序进行排列。
优点：
1. 一目了然地进行比较数据维度的增减；
缺点：
1. 数目太多时(超过12个)，分辨起来会比较困难，则适合折线图进行显示。
b.条形图
适用于多个主体对一个变量数据维度的比较，由高到低或者由低到高进行排列。
优点：
1. 一目了然，容易比较数据的增减；
2. 对比较个体数量容纳比较高，可以是几个，也可以是几十个；
缺点：
1. 需要更多垂直空间在屏幕上，有时需要用户上下滚动屏幕才能看到所有的个体。
c.折线图
适用于对趋势的展现，Y轴的起点需要从0开始，不建议展示每个节点，对比主体数量不建议超过4个，过多也会让用户辨识度降低。
优点：
1. 特备适合于对趋势的研究；
2. 对多个主体的对比效果很明显；
缺点：
1. 对比主体不能太多。
d.饼图
适用于研究单个主体与整体之间的关系，找到影响整体的主要因素。主体个数不超过5个，如果超过可以使用一个“其它”选项进行囊括；占比从大到小，从12点开始按照顺时针方向进行排列。
B.表格
表格适用于展示一些条例的细节，比较说充值/消费的流水、创建多条广告推广计划后的效果数据陈列等等。
在表格的设计事项中需要注意的是，每个属性对齐方式要注意。数字类的一般是左对齐，价格是右对齐。价格右对齐是方便比较金额数的多少，从左边突出的位数就能一眼看到哪个是最多与最少。如果价格一般固定在几位数的话，也可以考虑左对齐。
优点：
1. 方便check每一项的细节；
缺点：
1. 不太直观；
2. 对整体的情况缺乏大局信息的展示。
在设计的过程中需要注意，尽量精简字段，避免横向滚动。如果字段实在太长，一般会采取头几列，滚动时表头进行浮起，方便滚动过程中找到字段的主体。如果带有操作类的功能，则表尾也可以进行浮起。
C. 表单
百度百科的解释是表单在网页中主要负责数据采集功能。用通俗易懂的话来说，就是我们看到的页面需要填写较多相关信息的页面，都叫做表单，如下图。
表单的内容从设计的范围上来看，包含了两个方面：1. 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。2. 表单按钮：包括提交按钮、复位按钮和一般按钮。
表单的对齐方式今天来说说表单的对齐方式，一般情况下表单有如下几种对齐方式：
类型1优点：1. Label和Content关系紧密，容易识别和理解；2. 适合需要多语言切换的情况，能够兼容不同长度的文字(因为同一个词语不同语言翻译起来长短不一样，以日语和西班牙语最长)，使得界面布局稳定；
缺点：1. 占用纵向空间比较多；2. 当采用多栏排版时，去过其中某一项内容比较长存在换行时会在一定程度上影响布局稳定性。
类型2优点：
1. Label和Content关系紧密，容易识别和理解；2. 适合单栏排版；
缺点：1. 占用横向空间比较多，特别是当存在比较长的Label时；2. 在需要多语言切换时，有可能破坏布局视觉效果。
类型3优点：1.Label的扫描和阅读比较快；2.适合单栏排版；
缺点：1.占用横向空间比较多；2.在某些语言下，一部分的Label和Content之间的距离会比较远。
类型4优点：节省空间；
缺点：Label和Content不易区分，影响阅读；
选哪种比较合适类型4的基本使用不到，国内如果不考虑多语言的话，类型2对齐方式使用的频率最高，如果考虑海外场景的话，类型1最有普适性。
07.界面设计原则
除了以上介绍的设计内容之外，当遇到其它的设计问题时，可以采取如下的准则帮忙在设计的过程中进行决策。①. 一致性原则
整体操作的一致性，是做主要的原则。一致性可以减少用户思考的次数和时间，让用户的注意力更集中于当前的任务，进行自己业务上的判断，产生心流体验。
②. 简洁
简洁的阅读和操作使注意力更集中。那么怎样使页面更加简洁？以下有4种方法可以采用：删除
删除不必要的因素，进行页面元素的简化处理；隐藏
根据用户使用的场景，让元素进行隐藏，需要使用的时候再进行呈现；比方如下图。重组
也可以叫分类，可以将相近功能进行组织成新的分类，也可以将不常用的功能进行分类在“更多”这一栏中，比方如下图。转移
如果界面信息太多，可以将页面转移到新的窗口或者页面进行呈现，如下图。③. 奥卡姆剃刀原理：即简单有效奥卡姆剃刀原理称为“如无必要，勿增实体”，即“简单有效原理”。尽量在不影响用户主流操作的前提下，去增加不必要的功能。④. 数量上采取7加减2
一般人的短时记忆容量约为7个加减2个，即5--9之间。可以理解为7加减2个组块。比方说如下图，Apple官网的导航则设为7个种类。⑤. 明确目的性的点击
让用户明确知道自己要做什么，点击哪里，比单纯的减少点击次数更重要。⑥. 席克定律
席克定律是指，当选项增加时，下决定的时间也增加。
用户的在某一场景下对选项的反应时间取决于三个因素：
a.前期的认知和观察时
b.根据认知后，处理的时间
c.选项的数量
在人机交互界面中选项越多意味着决策时间越长，用户越不知道选择什么。
比方说如下图
