B端设计如何进行简单优化

2017年，从业以来一直在做各类C端设计的我，有幸参与了一个B端项目，前后经历了整整一年的时间，期间为了做好B端设计，查阅了很多资料，参看了很多前辈的经验总结。

而目前，我知晓身边有很多设计师都不愿意做B端项目，因为相对C端而言，B端界面显得更为枯燥，可设计性不强。但其实，想把B端设计做好并不是一件容易的事。

一、B端和C端有什么不同

首先我们需要了解B端与C端究竟有什么不同。

1.C端

即 Customer，我们一般手机上使用的大多数软件都属于C端，是用户接触最为广泛的界面。

C端的用户群体相对单一且固定，一般为个人的单一维度。不同用户拥有着相对统一标准的用户流程。C端的设计注重使用简单，流程简洁，更注重个人的用户体验。

△微信APP，图片来源于网络，侵删

2.B端

即 Business，一般多用于企业使用，ERP、OA等都属于B端产品。

B端的用户群体面向多角色、多维度。不同的用户在同一个界面可能会有不同的用户操作流程，不同用户之间的流程差异较大，因此业务场景比较复杂。不同行业不同的客户使用，还需要不同的专业解决方案。B端的设计注重工作效率、成本的管控，更追求稳定性和安全性。

△企业管理后台，图片来源于网络，侵删

3.需求来源差异

在设计需求调研阶段，这种不同更为明显。

C端需求一般来自产品或运营，根据产品发展进行功能性需求，或对产品数据分析进行相应需求调整，对于某些冷门功能可能会进行删减等需求调整。

而B端需求来自于客户，哪怕再冷门的功能，都不能随意删减。还有一些企业因为原先内部的工作流程规范性就不足，工作流程不合理等等，在给予优化建议后，仍认为还是保留原先的流程时，还是得按照原先有缺陷的流程进行设计。因为，对于这些需求，企业用户只要一句“我需要”就够了。

就像前面说的，B端面向多角色多维度，为了让多角色第一时间获取自己所需的信息，一般会对界面进行模块化设计处理。需要更为精细优化的界面，有时还可以提供自定义组合模块的功能。

B端最常见的设计组件非表单、列表莫属。所以设计优化最先应先从这两方面入手。

二、表单

B端中，企业的业务操作往往需要录入大量的信息。怎么高速而准确的录入就是我们的设计之重。

1.布局

在最初我尝试了很多种布局，都是一些常见的布局方法。那孰优孰劣呢？其实这可以通过视觉动线解决。

△视觉动线示意图

视觉动线就是当用户进入一个页面时，视觉所经过的路线。

最好的布局应当是视觉动线距离最短的布局，视觉动线的距离长短意味着阅读速度的快慢。

这是在理论上。而在事实上，在我采用上下布局后，我的产品经理告诉我，我们客户觉得这种布局太浪费空间，他们希望在一屏内尽可能多的展示所有内容。我想了想，从用户的角度来说，的确是这样的。在很多表单信息需要输入的时候，输完一部分，去滚动页面再输入另一部分的体验的确不是很好。表单内容很多也不适宜进行一列的布局，采用多列布局，哪怕是方式3的布局，也需要视线进行“之”字阅读，无疑增加了动线距离。于是最终采用了方式二。

方式一与二的差别在于对齐方式。右对齐的方式使得字段名更靠近输入框，用户输入时能更快地获取所需输入的名称。

总结一下：当表单呈现一列时，建议采用方式3的布局。当表单信息较多，呈现2列以上时，还是建议采用方式2的方式。

2.排列顺序

这里的排列顺序是指表单中字段的排列顺序要符合逻辑顺序。

△排列顺序示意图

一般的思想逻辑已在平时的生活工作中形成，不要随意挑战。

3.输入框长度匹配

在进行输入时，输入框的长度要与将输入的长度相匹配，使用户在输入前就对将输入的内容长度有所预期。

△输入框长度示意图

但又不是每一项输入框都需要刚好与将输入的内容相匹配，需要考虑整体表单的统一性，避免错落杂乱。所以还是需要根据具体内容具体分析。

4.输入自动筛选匹配

有时候B端用户在输入表单时，会需要输入一些复杂而难记忆的信息。更常见的是在搜索信息时，比如搜索订单号等等。

△输入自动筛选匹配示意图

提升体验的一个很好办法就是输入时进行自动筛选匹配，给出可能的相关项让用户进行直接选择。这个在很多大型网站中其实也非常常见。百度等搜索软件中更是常见。

5.能选择的尽量不输入

这是一个很重要的设计原则。当输入的信息只能为确定的几项内容时，采用选择而不采用输入的方式，一是为了减少输入出错，二是为了增加输入速度。

△选择项示意图

对于选项较多的下拉选择框，还可以采用可输可选并自动筛选匹配的方式。

6.区分必选和可选字段

在B端，不可避免的存在着大量的表单内容，而对于业务本身而言，很多情况下并不是所有表单内容都必须填写完整的。这时候区分必选和可选就显得尤为重要。

一般采用加星号标红的方法表示必选项，并将必选字段集中放于表单前面，是用户可以集中处理必填字段。

△必选项示意图

有一种特殊情况是表单中大多数都是必填项，只有少数是可选字段，这时候其实建议也可以反过来设计，只标注出可选字段。

三、表格

1.利用线或色块区分

可以利用最不起眼的列表描边或填充，对列表进行显隐变化设计，增强视觉突出。一般多采用色块划分的方式，来强调行的区分，增强横向信息的连贯性。

△表格区分示意图

其实利用隐藏或弱化纵向的线，也可以强调突出行的特性。

而对横向的线进行隐藏或弱化处理后，则会增强上下行之间的对比性。

2.数据对齐方式

对表格中的数据进行规范性的对齐，有助于用户的视觉统一，更迅速的找到自己所需要的内容。

△对齐方式示意图

对于一般的文本类信息通常采用左对齐的方式，因为人的阅读习惯是由左往右，符合正常的逻辑。但是对于一些数据信息则应采用右对齐方式，更加直观的表现数字的大小对比。

3.表格计算

在涉及一些统计数据或数据分析型表格时，可以进行一些自动计算处理。

比如在采购清单中，用户需要输入采购物品、单价、数量与金额。在用户输入单价及数量之后，若自动计算出金额并填入，无疑是非常增加用户友好度的一件事。

4.长表格的设计交互

由于B端的复杂性，常常会导致需要有着大量数据而产生的长表格，一页显示不下。这时就会需要通过水平滚动查看。

考虑用户需要第一时间或者自己所需要的数据，因此首页的表格可以展示一些重要信息，其余不太重要或者是非常规的数据可以隐藏，水平滚动后再查看。

△长表格的设计示意图

表格的首列往往是数据的对象，在滚动时，将首列固定，可以使用户更好的将数据与对象相匹配。

表格的尾列有时包含对列表的操作，这时也可以将其固定，方便用户随时操作。

5.表格的操作

表格的操作按钮常见的有两种：一种放置于表格外部（大多数情况是上方），另一种则放置于表格内部。

△表格操作示意图

放置于表格外部的操作按钮通常是对表格的批量操作；而内部的操作通常是对于所在行的单独操作。

有时候由于功能的不断迭代，发现导致表格的操作按钮越来越多，显得十分杂乱。其实在B端设计中，权限设计是很重要的一环，当按钮太多时，还可以通过对权限的控制隐藏那些岗位并不需要的功能。这里暂且不做深入探讨。

四、总结

B端设计也许看上很枯燥乏味，但其实你静下心来，会发现有很多值得去研讨的地方。做B端并不比做C端容易，甚至在做C端设计时，你自己本身就是一个用户，而B端却可能是一个你从来没接触毫无下手之地的行业。这个时候才是锻炼你如何“以用户为中心的设计”的时候。

这里只做了一些简单常用的设计总结，希望你能有所收获！如果觉得有所帮助，请点个赞，谢谢！

更多内容，请搜索关注我的微信公众号：夜的UE笔记，谢谢！