干货总结！！B端系统全方位剖析！！
分享自己对B端的一些总结和思考，欢迎设计师们交流，共同进步。
写在前面
近几年企业互联网化跟当初的移动互联网大潮一样，呈井喷式发展，这个刚刚起步的万亿级市场，充满了机遇与空间。与此同时，B端产品的设计需求也与日俱增，掌握B端设计已然是UI设计师的必备技能，也可以增加我们的求职广度和职业竞争力。
目录
B端是什么
B端和C端的区别
B端产品如何设计
B端是什么
B端，全称是Business，代表企业用户商家，是面向企业用户的互联网产品。B端往往是基于公司层面多人对某一问题解决方案进行整体评估，更看重价值，设计师通过合理的设计手段，使业务的流转效率更高，办公成本更低。简而言之，用来解决企业需求的产品，即为B端产品。在国内互联网语境中，B 端产品的狭义解释也基本可以和面向企业的「网页程序」等同，用更接地气的称呼，即是管理平台。
B端常见产品类型
1. ERP (Enterprise Resource Planning，企业资源计划)
对企业所拥有、调动的资源进行统一管理的平台，包括商品的供应链，销售审计，库存管理，成本核算等等，是今天实业领域必备的系统。比如用友、金蝶等。
2. OA (Office Automation，办公自动化)
通过程序的形式使办公流程自动化的解决方案，是一个企业除了生产控制之外的一切信息处理与管理的集合。
3. CRM (Customer Relationship Management，客户关系管理)
企业专门用来管理客户的工具，尤其对于零售服务行业来说，能更好的维系和客户之间的关系是提升销售额和 复购率的重中之重。
4. SAAS (Software as a Service，软件即服务)
通常它指第三方提供给企业的线上软件服务，它既可以包含前面几种服务类型，也可以是一些更细化的需求。
5. CMS (Content Manage System，产品后台)
是每一个互联网产品都必备的系统，也是 B 端产品中最常见，数量最多的管理平台。
B端和C端的区别
定义——
B端：to B，就是to Business，即面向企业用户或特定用户组织
C端：to C，就是to Consumer，即面向普通消费者个人用户
目标用户——
B端：一般是多种角色对同一解决方案作出整体评估，根本不存在冲动购买
C端：用户群体较单一，非理性化，凭感觉做决策，可根据性别、职业或特定行为偏好等关键属性进行分类
使用场景——
B端：场景多、较为复杂，不同权限的用户有不同的解决方案
C端：场景较为单一，或专注某垂直领域的使用场景
用户需求——
B端：解决企业问题，提高企业效率、降低成本
C端：满足用户个性化需要，注重用户体验
设计风格——
B端：简洁、克制，对于操作和展示内容无关的元素越少越好
C端：品牌化、情感化、个性化
交互特点——
B端：操作步骤比较多，可操作的功能要尽可能罗列出来，悬停、跳转等要有对应样式，有时需要通过文字来反馈给用户操作结果，给用户带来更准确的操作感受，保证信任感和安全感
C端：产品通常是用来获取信息的载体，有时会将部分操作状态进行隐藏以便更好的展示内容
生命周期——
B端：做业务，产品生命周期相对C端较长
C端：做产品，周期短
盈利模式——
B端：有明确的盈利模式，一般通过付费定制获取收益。对于面向组织的B端产品，因为组织天然的“封闭”特性，并不需要获取大量外部流量，只针对组织内外生产关系，满足需求即可
C端：一般通过流量获取收益，流量基数越大收益就越大。服务于生活场景，并解决我们在生活便利和情绪方面的问题，让我们享受这些服务并为此买单。
B端产品如何设计
知道了B端和C端的区别，不难发现，B端是以解决问题为主，实用性大于美观性，无需像C端那样加入额外的设计元素。因为对于真实的用户体验来说，超出视觉需要的元素越多，用户的认知负担就会越重。原研哉说过：“设计是对信息的提取、整理和呈现。”那么B端产品该如何设计呢？信息如何呈现呢？下面将以三个阶段来阐述我自己设计的思考过程。
第一阶段：
需求分析
1. 分析产品的背景是什么，要做什么，要给用户呈现怎样的视觉效果？有无竞品，（多数情况下，B端产品的竞品极少），如果没有竞品，那么用户工作场景下有没有常看的网站，也可参考帮助确定设计方向
2. 目标用户有哪些？他们大概有什么特征？（无需像C端用户画像那样具象，有个大概特征即可）
3. 产品主要解决企业的什么问题？对产品和行业要有一定的基本认知。
使用场景
1. 用户是在什么场景下使用该产品的，是如何使用的
2. 了解用户的硬件设备，根据主流屏幕分辨率做设计。市面上主流的几种PC屏幕分辨率为1920*1080px，1366*768px，1440*900px，这里要具体情况具体分析，如果用户工作是用小屏笔记本办公，那么显然1920的设计稿做适配会相对拥挤，这个时候1440的设计稿适配起来会更加方便一些。
梳理流程
拿到原型图之后，不要直接开始画图，一定要先跟产品经理把整个流程梳理一遍。梳理过程中遇到的问题要及时解决。比如，产品的业务流程是怎样的，有没有竞品，我们的产品跟别人对比起来，有什么特点或者优势等等。做B端产品的设计要对业务有基本的了解，倒也不是说要达到产品经理那样的深度，但基础的比如界面之间是如何跳转的，点哪里跳转，跳转成功与否，状态如何展示等等都要梳理清楚。
视觉风格
思考了解了这么多，到这一步，相信设计师们心里也有个大概的界面视觉风格走向了。B端产品的设计以解决企业问题为主，设计风格上尽量简洁，实用性大于美观性，减少不必要的视觉干扰。
第二阶段：
布局
无论你的产品想满足用户的什么需求，让用户知道产品当下的状态和每一步操作之后的结果是对用户最基本的尊重。这里将以导航栏位置为基准，布局方式一般分为三种，如下：
水平导航布局：
较为经典的网站导航模式。一般主导航放置于页面的顶端，通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，适用于导航内容较少、篇幅较长的产品。
垂直导航布局：
一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。
一、二、三级导航项目可以更为顺畅且具关联性的被展示，可以快速的定位和切换当前位置，操作效率高。页面横向空间有限时，侧边导航可收起。
混合导航布局：
结合了水平导航和垂直导航的特点，适用于信息层级多的系统。
布局方式的不同，也就意味着适配方式各不相同。
水平导航布局，适配方式是：两边留白区域设定最小值，当留白区域达到最小值时对中间主要内容区进行动态缩放。
垂直导航布局和混合导航布局，适配方式是：左侧导航区域固定，右侧主要内容区动态缩放。
说到布局方式，不得不提到经典的24栅格系统。栅格系统是从平面栅格系统中发展而来。简而言之，就是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。这是个非常庞大的话题，设计的时候遵守规范，一般就莫的问题了，具体的应用及解释网上有很多相关文章，大家可自行了解，如图：
颜色
颜色上大致分为品牌色、功能色、 中性色。品牌色可根据业务属性来定，功能色遵循用户对色彩的基本认知，比如红黄绿蓝灯成功、出错、失败、提醒、链接等，中性色多用于文字，此外背景色、分割线、边框等也很常见。其他色如统计图、数据可视化、多个标签的不同配色方案根据项目具体情况来单独设定。
字体字号
在B端系统中优先使用系统默认的界面字体，常用中文字体有微软雅黑、苹方、思源黑体，英文字体有Arial、Helvetica 。 字体大小常见的有12px、13px、14px、16px、20px、24px、30px等，一般提示性文字为12-13px，正文字号为14-16px，小标题字号为18-20px，大标题字号为24-30px，并不绝对，还是要根据具体系统情况来定。
组件
在设计B端产品时经常会有接到比较紧急的需求的情况，这就需要我们做东西时要有组件化思维，去总结分析页面模块中的一些共性。
如果组件库服务的是B端或者中后台系统，有很多可参考的开源组件框架：Ant Design、ElemetUI、Layui等，做之前可以多查看这些大厂的开源组件库，可以帮助团队节省大量的开发时间，避免重复造轮子。值得注意的是，不同的框架用到的前端技术不一样，兼容的浏览器版本也不一样，这要配合前端同学根据你们的技术情况作调整。如有需要，可结合业务特色来定制自己的组件库，以后接到紧急项目时，可起到事半功倍的效果。
推荐几个官方组件库：
1. 蚂蚁金服官方组件库：https://ant.design/docs/spec/introduce-cn
2. 饿了么官方组件库：https://element.eleme.cn/#/zh-CN/component/installation
3. layui官方组件库：https://www.layui.com/admin/std/dist/views/
第三阶段：
设计走查
完成所有设计之后，要整体进行设计走查，信息层级、文字大小、各种状态效果等都要认真核对。
设计交付
设计稿命名一定要清晰规范，现在好多切图标注的插件，一键生成切图标注（比如pxcook、蓝湖等），方便开发团队查阅。
项目跟进
进行到这一步，基本接近尾声了。设计稿给到开发同学后，要随时沟通跟进。项目上线后要对线上效果进行实时UI校验，保证开发同学对设计稿的高度还原。还有对设计上线后的验证工作，用户的反馈是优化产品的重要途径，及时收集反馈为下次界面优化改版、提升用户体验做准备。
写在最后
设计的本质是——满足客户需求，为客户创造价值。不管B端还是C端，我们都是通过设计手段解决实际问题。B端产品相对而言，应用场景、需求、功能、业务流程、要比C端更复杂，所以B端在设计风格上尽量做到简洁，实用性大于美观性，无需像C端那样“花哨”。功能上，需要结合用户场景作出取舍，思考它的易用性、信息层级的呈现等。所以想要做好B端设计，一定要去了解基本业务，明确用户需求。
以上是我在做B端设计中的一些思考和总结，希望能帮到有需要的同学，欢迎沟通交流，一起进步。
一个人可以走很快，但一群人可以走很远。
共勉。
