我知晓身边有很多设计师都不愿意做B端项目，因为相对C端而言，B端界面显得更为枯燥，可设计性不强。但其实，想把B端设计做好并不是一件容易的事。
01
B端和C端有什么不同
首先我们需要了解B端与C端究竟有什么不同。
1.C端
即 Customer，我们一般手机上使用的大多数软件都属于C端，是用户接触最为广泛的界面。
C端的用户群体相对单一且固定，一般为个人的单一维度。不同用户拥有着相对统一标准的用户流程。C端的设计注重使用简单，流程简洁，更注重个人的用户体验。
△微信APP，图片来源于网络，侵删
2.B端
即 Business，一般多用于企业使用，ERP、OA等都属于B端产品。
B端的用户群体面向多角色、多维度。不同的用户在同一个界面可能会有不同的用户操作流程，不同用户之间的流程差异较大，因此业务场景比较复杂。不同行业不同的客户使用，还需要不同的专业解决方案。B端的设计注重工作效率、成本的管控，更追求稳定性和安全性。
△企业管理后台，图片来源于网络，侵删
3.需求来源差异
在设计需求调研阶段，这种不同更为明显。
C端需求一般来自产品或运营，根据产品发展进行功能性需求，或对产品数据分析进行相应需求调整，对于某些冷门功能可能会进行删减等需求调整。
而B端需求来自于客户，哪怕再冷门的功能，都不能随意删减。还有一些企业因为原先内部的工作流程规范性就不足，工作流程不合理等等，在给予优化建议后，仍认为还是保留原先的流程时，还是得按照原先有缺陷的流程进行设计。因为，对于这些需求，企业用户只要一句“我需要”就够了。
就像前面说的，B端面向多角色多维度，为了让多角色第一时间获取自己所需的信息，一般会对界面进行模块化设计处理。需要更为精细优化的界面，有时还可以提供自定义组合模块的功能。
B端最常见的设计组件非表单、列表莫属。所以设计优化最先应先从这两方面入手。
02
表单
B端中，企业的业务操作往往需要录入大量的信息。怎么高速而准确的录入就是我们的设计之重。
1.布局
在最初我尝试了很多种布局，都是一些常见的布局方法。那孰优孰劣呢？其实这可以通过视觉动线解决。
△视觉动线示意图
视觉动线就是当用户进入一个页面时，视觉所经过的路线。
最好的布局应当是视觉动线距离最短的布局，视觉动线的距离长短意味着阅读速度的快慢。
这是在理论上。而在事实上，在我采用上下布局后，我的产品经理告诉我，我们客户觉得这种布局太浪费空间，他们希望在一屏内尽可能多的展示所有内容。我想了想，从用户的角度来说，的确是这样的。在很多表单信息需要输入的时候，输完一部分，去滚动页面再输入另一部分的体验的确不是很好。表单内容很多也不适宜进行一列的布局，采用多列布局，哪怕是方式3的布局，也需要视线进行“之”字阅读，无疑增加了动线距离。于是最终采用了方式二。
方式一与二的差别在于对齐方式。右对齐的方式使得字段名更靠近输入框，用户输入时能更快地获取所需输入的名称。
总结一下：当表单呈现一列时，建议采用方式3的布局。当表单信息较多，呈现2列以上时，还是建议采用方式2的方式。
2.排列顺序
这里的排列顺序是指表单中字段的排列顺序要符合逻辑顺序。
△排列顺序示意图
一般的思想逻辑已在平时的生活工作中形成，不要随意挑战。
3.输入框长度匹配
在进行输入时，输入框的长度要与将输入的长度相匹配，使用户在输入前就对将输入的内容长度有所预期。
△输入框长度示意图
但又不是每一项输入框都需要刚好与将输入的内容相匹配，需要考虑整体表单的统一性，避免错落杂乱。所以还是需要根据具体内容具体分析。
4.输入自动筛选匹配
有时候B端用户在输入表单时，会需要输入一些复杂而难记忆的信息。更常见的是在搜索信息时，比如搜索订单号等等。
△输入自动筛选匹配示意图
提升体验的一个很好办法就是输入时进行自动筛选匹配，给出可能的相关项让用户进行直接选择。这个在很多大型网站中其实也非常常见。百度等搜索软件中更是常见。
5.能选择的尽量不输入
这是一个很重要的设计原则。当输入的信息只能为确定的几项内容时，采用选择而不采用输入的方式，一是为了减少输入出错，二是为了增加输入速度。
△选择项示意图
对于选项较多的下拉选择框，还可以采用可输可选并自动筛选匹配的方式。
6.区分必选和可选字段
在B端，不可避免的存在着大量的表单内容，而对于业务本身而言，很多情况下并不是所有表单内容都必须填写完整的。这时候区分必选和可选就显得尤为重要。
一般采用加星号标红的方法表示必选项，并将必选字段集中放于表单前面，是用户可以集中处理必填字段。
△必选项示意图
有一种特殊情况是表单中大多数都是必填项，只有少数是可选字段，这时候其实建议也可以反过来设计，只标注出可选字段。
03
表格
1.利用线或色块区分
可以利用最不起眼的列表描边或填充，对列表进行显隐变化设计，增强视觉突出。一般多采用色块划分的方式，来强调行的区分，增强横向信息的连贯性。
△表格区分示意图
其实利用隐藏或弱化纵向的线，也可以强调突出行的特性。
而对横向的线进行隐藏或弱化处理后，则会增强上下行之间的对比性。
2.数据对齐方式
对表格中的数据进行规范性的对齐，有助于用户的视觉统一，更迅速的找到自己所需要的内容。
△对齐方式示意图
对于一般的文本类信息通常采用左对齐的方式，因为人的阅读习惯是由左往右，符合正常的逻辑。但是对于一些数据信息则应采用右对齐方式，更加直观的表现数字的大小对比。
3.表格计算
在涉及一些统计数据或数据分析型表格时，可以进行一些自动计算处理。
比如在采购清单中，用户需要输入采购物品、单价、数量与金额。在用户输入单价及数量之后，若自动计算出金额并填入，无疑是非常增加用户友好度的一件事。
4.长表格的设计交互
由于B端的复杂性，常常会导致需要有着大量数据而产生的长表格，一页显示不下。这时就会需要通过水平滚动查看。
考虑用户需要第一时间或者自己所需要的数据，因此首页的表格可以展示一些重要信息，其余不太重要或者是非常规的数据可以隐藏，水平滚动后再查看。
△长表格的设计示意图
表格的首列往往是数据的对象，在滚动时，将首列固定，可以使用户更好的将数据与对象相匹配。
表格的尾列有时包含对列表的操作，这时也可以将其固定，方便用户随时操作。
5.表格的操作
表格的操作按钮常见的有两种：一种放置于表格外部（大多数情况是上方），另一种则放置于表格内部。
△表格操作示意图
放置于表格外部的操作按钮通常是对表格的批量操作；而内部的操作通常是对于所在行的单独操作。
有时候由于功能的不断迭代，发现导致表格的操作按钮越来越多，显得十分杂乱。其实在B端设计中，权限设计是很重要的一环，当按钮太多时，还可以通过对权限的控制隐藏那些岗位并不需要的功能。这里暂且不做深入探讨。
03
总结
B端设计也许看上很枯燥乏味，但其实你静下心来，会发现有很多值得去研讨的地方。做B端并不比做C端容易，甚至在做C端设计时，你自己本身就是一个用户，而B端却可能是一个你从来没接触毫无下手之地的行业。这个时候才是锻炼你如何“以用户为中心的设计”的时候。
这里只做了一些简单常用的设计总结，希望你能有所收获！
联系客服
