全面了解 B 端产品设计：基础扫盲篇

今天，互联网的影响力与作用与日俱增，除了我们日常活领域的改变以外，对于商业领域的渗透也见效颇丰。

越来越多企业开始使用数化解决案来助力企业发展，括日常管理、运、统计等等。或者过互联网开发出新业务形态，进业升级，如这几年风头正劲「新零售」领域，即过互联网传统零售业升级和改造尝试。

和移动互联网大潮样，企业互联网化也是大势所趋，是公认亿级市场，而这场改变才刚刚进入初级阶段，充满了常多遇与想象空。

所以 B 端的产品和需求在近年呈井喷式的发展，对于 B 端界面的视觉和交互要求也日俱增。掌握 B 端的计，是今 UI 计的必要条件，也可以增加的求职广度和职业竞争力。

B端产品是什么

在国内，行业习惯将互网产品划成「B2C」或者「B2B」，B2C 全称是 Business-to-Consumer 即企业户的服，B2B 全称是 Business-to-Business，即企业对企业的服。还会进一步缩写成「2C」或「2B」。

C 端产品，是面向终端消费用户的产品，对使用者而言主要是用来满自己的常生活践需求，例娱乐、消费、学习、出行等等。

而 B 端产，是面向企户的产，户通过它进行日的商，例如企库存管，销售统计，员工勤考核等等。可说，来解决企需求的产，都是 B 端产。

虽然面向企业的产品对于新手很陌，听起也很枯燥，但 B 端产品的覆盖范围非常广泛的。因不同企业所处行业业务形式不同，所以对 B 端产品的求差异极，产品运行的平台可能手机，也可能平板、制安卓设备、桌面客户端、网页程序。

对于新手，一口气掌握所类型的 B 端产品不切实际的，所以我们挑选其中应用广泛的「网页程序」作切入点。且内互联网语境中，B 端产品的狭义解释也基本可以面向企业的「网页程序」同，用接气的称呼，即理平台。

理后台已今天 UI 设师日常作中必备的内，相信很多已职的设师已所体会。下面，我们就具体认识一下 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端和C端的区别

接下来，我们就要谈谈有关设计的问题，因为 B 端产品服务的对象不同，所以它和 C 端的设计有一定的差异，下面来分析一下它们之间的区别。

1. 需求特点

对 B 端的产品来说，要决的问题通常是比明确、显的。比前面提到的零售司在常运营中需要录产品从买到卖出的流程和数据，产品定功能时就紧紧围绕个目标展开。

可说，B 端和 C 端产在需求上最大的同，就是为了解决问题的体对象同。C 端产是为了解决户的需求，从功的制定到交互和设计都围绕目标户展开。而 B 端产要解决的是企营的问题，整的实现目标功为核心，往往是要户牺牲体验适应功，而会为了体验删改功。

不同于一些简单的 C 端项目，即使对需求内什么理解，只拿到了产品的原型也能轻松完设。 B 端的需求往往非常的复杂，一界面或者组件会非常多不同的状态细节变化，且操作内相互交叉，我们对需求缺乏理解的时候，出的设只会漏洞出。

2. 交互特点

对于一般的 C 端产来说，产通只是来获取信息的载体，我们通过操作界面来获取商、视频、态、闻等容。很多时候，会将分操作状态、交互方式进行隐藏，更好的展示容。

但 B 端产品中，虽然信息的展示也很重，但重的目的通过一系列的操作去筛选或者处理信息。因这些操作往往骤比较多，且可操作的选项也多，所以产品对于交互清晰明确的反馈。

例如，可操作功能都要罗列展示出来，鼠标悬，跳转，状态变更等等也要有应样，并许多操作步骤需要过文提示告知用户结。和 C 端交互比起来，虽然 B 端品会显「啰嗦」，原是为了用户带来更准确操作感受，不让用户去「猜」或者刻意「探索」小细节。

3. 设特点

当我们面向 C 端用户设的时候，往往需增加一些额外的视觉元素呈品牌感化的表达，并且也去满足目标用户的性化需，所以多数 C 端产品看起会显得「花哨」。

而 B 端品是为了解决企业问题，是需要用户长时操作并完成工作任务，于操作和展示内容关元素，越少越好。很多新会热衷于下这类以 C 端视觉标准进设计管理界，它们于真实使用体验来说显过于冗余。

优秀的 B 端界面计在视觉的表现上一定是克制、简洁、干练的，因为超出操作需要的视觉素越多，对于用户认知的负担就越重。

4. 技术特

和手客户端不是，网页可以随意更改宽度，显示内容区域距极大。往往我们既要考虑 1024px 正常显示，也要考虑在 2560px 宽下显示效。那么，这需要设计师于前端知识和框架有深刻理解，为没有这知识，那么页自适应布局设计将从谈起。

所以，计在进行 B 端计前，要能熟练掌握 HTML5 和 CSS3 的内容，并能理解 JS 对于页面布局的计算方法。

并且，除完独立设计开的项目以外，还有大量的 B 端项目是采用三方框架开而成的， Ant、SBadmin、Element 等等。是因为三方程序以帮助团节省大量的开时间和精力，避免重复造轮子。

而设计师需要根据三方框架的特对页面进行设计（类似换肤），掌握前端的识越扎，么设计的程也就越顺。

实际上，B 端的设计容是可拆分成若干模的，每个模都有特定的知识点和论需要掌握。最后，就来分享一做 B 端设计时我们具体在设计么容。

B端设计的内容

1. 局设计

B 端产品，就是一套业系统，在个系统需要包含众的信息和操功能，而设计的任务之一，就是定义一套局框架，将信息和操功能整合进去，现有序、统一的操验。

通，管界面的布会包含几种固定的容：

• 导航
• 状态栏
• 内区域
• 弹窗/边栏

比如常见的几种布局类型：

当然，布局的设远不到这里就结束了，除了部分具体的字段、链接以外，我们还将自应的端技考虑去，如何拉伸浏览器的同时，保证这套布局的常使用。

比如在今天最主流适配是过 CSS 删格等分体系，这是个常复杂话题，我们以后讨论。

2. 控件设计

作为 UI 设计部分，控件设计自然也少不了。多数控件设计和般网页设计所需控件不多，类似按钮、菜单栏、分页栏、屑、知栏、下菜单等等。

这部分内容设计起来没有技术难，我们前讲过，B 端品在交互反馈上需求，使我们控件进设计时要充分考虑它们状态。

例如，一个按钮可以包含默认、鼠标悬浮、点击、已点击、不可点、加载中等多种状，这些状计得越全面，则操作的体验就越好。

3. 表计

表是一个触频率非常高，但对新人来说陌生的词。简点理解，它就是用来在界面中键入息的控件的集。比如输入框、复选框、选框、下拉选框等等。

在 B 端计中经常需要用一系列的表控件组成一个完整的业操作，比如在后创建一个用户账号，可能就需要通过在输入框输入用户名、密码，然后用选框选择性别，复选框选择爱好，日期下拉菜选择生日等等。

或者，我们还使用表单的内容进行高级的筛选操，通不同的表单控件来设置筛选条件，缩小结果的范畴。

4. 表格计

在 B 端产品中，数据主要通过表格的形式展现。而多数计对于表格的理解一无所知，甚至 Excel 都没有用过。

表是 B 端产品呈现信息和数据最重要的组件之一，无论是用户、产品、订单或者录，我们需要依靠表的展现形式进行梳理。

但是，表格的设计并只是枯燥的画好线条方格，而是要根据务的属性、字的类和显示数量灵的调整，及还要考虑如果对每一条数据进行编辑、中、移等操作的交互方式。

5. 图表设计

最，就要讲讲图表的设计。在大数据概念大热的今天，人们对数据的重视度越来越高，无论是在新闻还是在议的 PPT 上，我们看见各种各样的数据内容。而数据，通常以图表的形式呈现。

常见的图表包含折图、扇形图、柱状图、曲图等等，比常见。但是，有一个普遍的谬误是，很新手错误地将图表的设计理成数据视化设计。数据视化是将数据以更复、样的方式表现出来，不仅在设计上难度更高，且需要极其高昂的开成，我们在续的内容里说明。

，在 B 端设计中，我们对数据的展示只要专注于了解流的图表类，并明白如何根据数据展示的需要对它们进行即可。

总结

上就是于 B 端设计扫盲的第一篇容，简单地对管平台的设计进行扫盲，大有一个初步的认识，并对一些错误的想法进行纠正。

之后，我们会逐一新后续的内，如果遇到的疑问可以写留言里。

欢迎关注作者微信公众号：「电话亭」