腾讯B端产品C化设计，原来这样探索出的

一、为什么思考B端C化？

B端C化这个概念最早是听一位深耕B端多年的设计前辈提出的，本文会思考B端C化是因为我认为互联网的发展阶段产生了改变：

互联网设计在大方向上一直分为B、C两端，原因在于互联网服务需面向不同特性的群体类型，提供不同种类的服务，因此使用场景、服务方式、商业化模式也有所不同。

为了降低开发成本，提高开发效率，互联网产品需要使用工业化流水线生产的思维，将产品形态模式化分类，区分B端C端就能快速划分大致的用户群体和业务模式，形成较统一的产品形态，复用相类似的设计和开发思维，就可以快速上线产品。这是互联网产品快速发展时期的开发思维。

然而现在的B端群体与传统意义上的B端用户画像可能差距逐渐变大。以前我们认为的B端用户群可能是有成千上万人的中大型公司的职员，数十年从事着专业性很强的领域。然而现在社会工种逐渐细分，许多强专业领域的使用场景被拆分，职场流动性高，导致很多行业专业知识密度降低，新人用工成本增加。

另外，小型公司和个体公司越来越多，这群用户专业性相比更低，更习惯用C端的思维使用B端业务，自然会觉得这些互联网早期为了追求“可以用”的B端产品非常难用了，这个时候就会被“B端产品更追求效率和稳定性”的理由说服自己：B端产品体验不重要。但B端产品的体验真的不重要吗？

所以在B、C端用户差异逐渐缩小的背景下，B端C化的设计方式，可以一定程度上解决上述发展阶段的问题，借鉴C端设计思维的优势帮助B端产品提升使用体验。

二、B、C端产品特点

上图从几方面简单列举了B、C端相比较下的客观特点，这导致B端产品天生就要比C端复杂：专业知识需要时间深耕沉淀、理解成本高；状态多、链路繁琐复杂；页面信息密度高、信息底层关系复杂；操作链路长、影响面大等。

 

最初我认为这些问题虽然存在，但只要对B端用户加以一次性培训就不是问题。但后续在工作中我发现：

• 所谓的专业人员也只是针对某一个特定模块比较熟悉，但涉及到不常用的上下游或相邻模块时，他就不熟悉了，此时的专业人员变成了另一个领域的半小白用户
  
  
• 工作中，许多产品能力会分给外包同学或其他团队使用，一整个产品流程下来涉及到的人员很多，可能涉及大量人员变动，如果上手麻烦的话，交接工作和培训工作成本都很高。如果让他们自己看文档，这种学习方式本身就比较枯燥，更难以保证上手质量

所以B端C化设计的本质思路就是在一定范围内尽可能降低B端产品的使用难度（大多数情况下，B端产品难度通常无法低于C端产品的难度），从而提升体验。

三、B端C化思路

我们可以分层思考这个问题。大部分讨论B端C化都是从以下两点出发：

• 视觉层：B端C化最直接的方式就是把B端产品做的跟C端产品一样好看，个性化，降低视觉专业门槛，增加信息获取效率。用户不必因为看不懂产品而责怪自己知识不够丰富从而产生焦虑和愧疚感。
  
  
• 交互层：逐步引入C端的交互习惯。举个例子：之前在做C端设计时，会考虑用户手指在屏幕上点击的便捷程度，对按钮大小的控制更是精细到像素级，生怕用户在视觉和触觉上产生点击不到的感觉。在B端设计中，不光屏幕大了，还多了鼠标与键盘之间的切换，因此也需要考虑视线流和操作流的流畅程度，鼠标移动的距离、鼠标键盘间切换的频率以及按钮命中的准确率

而大部分半专业用户在使用传统B端产品时的困惑点在于：这些产品仿佛有层天然屏障让人看不懂，说不上来哪里很复杂，但就是不明白，也不太敢用。

因此以上两点只是B端C化比较浅层的方式。如果把专业人员使用B端产品比喻为司机在机动车道上开车，那么C化的目标应该是让这个道路“指路牌清晰可读、道路修建完整、路面平顺、增加安全护栏，增加绿化完善道路美观”。

那么类比来看，B端C化需要不仅仅完成视觉层和交互层的改变，最重要最根本在于改变用户心智层的体验。

路牌清晰，路径完整的道路，即便路面坑坑洼洼也会有人走；而路面干净平整但如迷宫一般不知所向的道路，即便能到达目的地，也因为可能出现反复的错误而少有人选择。

所以B端产品在心智层的优化应该是：减少传统产品使用时因为“不知道”和“担忧”造成的焦虑感。

我在对需求的过程中，有时产品同学会提出这样的疑问：用户怎么会不知道呢？我们有产品文档呀。

正是因为产品策划对业务底层逻辑非常清晰，日常接触多，会产生“我知道他们也应该会知道”的错觉。而交互相比产品没那么了解业务，就更容易用半小白用户的视角去判断用户是否会用，从而判断他们可能真的不知道，而且也真的懒得看产品文档。

四、如何在心智层优化产品设计？

1、我看不到

一切认知操作的基础都来源于信息输入，如果用户从一开始就看不到页面提供了什么信息，需要用户做什么，那么后续功能都是空谈。因此心智层优化首先需要强化视觉重点，用用户的视觉习惯引导用户。

下图是某产品接入流程页面多个功能模块的其中一个小模块：

这个模块乍一看可能会觉得信息展示非常清晰，有解释文字和操作按钮。但当它融入页面其余模块一起看后，会发现页面有非常多文字按钮和灰色文本。

从操作重要程度来看，页面上其余的文字按钮均是以阅读文档为目的的入口，属于用户可点可不点的信息，但“下载需求”是用户必须要操作的信息，却被淹没在页面中捕捉不到。因此工作人员经常反馈说用户因为看不到这个按钮，总是不下载需求，导致后面的流程出问题需要返工。

因此在优化这个模块时，除了补齐现网原本就缺乏的状态展示之外，还强化了下载的视觉重点

用户会在该模块收到前置操作成功与否的反馈，并得到全部或任意几个需求文件，均需要用户下载。可以通过彩色提示条为用户提供正负向心理反馈，并把用户视线集中在该页唯一有颜色的部分。

下方展示文件图标和文件名，看到这种文件样式，用户会因为视觉习惯知道自己收到了新文件，这种生理反应就跟玩游戏时见到宝箱和发光点就想过去看看是一个道理。这样就能很大程度吸引用户关注文件相关的信息并进行操作。

2、我看不懂

这一类包括用户不理解的语句意思，可能不理解某种产品专有名词，或是某种数据统计的展示方式，或是某条操作流逻辑等。用户对于这类信息的学习成本是一次性的，可以根据用户理解的难易程度，综合页面的信息密度情况提供一定的提示。

可以是一句话提示；可以是文字链跳转的文档教程；位置不允许时，可以是图标hover提示。

3、我不知道

用户产生我不知道该怎么操作的情况可以分为三种：

A、“无路可走”

一款上线的产品当然不会出现不能用的功能或路径，但有些情况会给用户造成不知道该怎么办的疑惑。

比如在下面例子中，发起任务时，由于其中一个选项需要前置注册才可在当前页面配置，但这项前置注册的重要程度又不至于完全阻挡这次任务的发起，因此需要告知用户如果前置注册没有完成，可能会影响到一部分任务的完成。

产品同学最早提供的方案是这样的：

在新建任务页面的配置B旁出现提示icon，hover可以了解此项配置需要前置注册操作，如果用户忽略该前置配置，点击保存后，系统会提示部分游戏的配置没有注册过。

产品同学希望借此告诉用户哪些游戏的配置无法执行任务，可以等下次注册完再发起一次任务就好了，所以言简意赅写了一句话，产品同学本身对这件事非常熟悉，也就默认用户看得懂了。

然而作为用户，面对这个仅陈述客观事实的提示：

• 没有点开过气泡提示的用户：“这什么东西？为什么不能新建任务呢？”然后返回前一个页面重新看有没有遗漏
  
  
• 点开过气泡提示的用户：一是疑惑“所以呢？会有什么影响么？”，二是即便猜到了可以先执行部分任务，之后再发起一次新任务，但依然担心这项操作会不会影响到到上千万的玩家，并且担心下一次再发起任务会不会有什么问题。于是在这个选择的关头开始犹豫，转头开始求助其他同事

但如果可以将这个操作的前因后果交代清楚，并为用户指一条产品允许的明路，增强这种对话感，可以很好缓解用户“无路可走”的焦虑。

上图方案中，用户每次进入新建任务弹窗时，都会出现3s并自动消失的的气泡提示，在不打扰的前提下保证用户能前置知道这件事，建设心理预期。提示页面信息交代了问题产生的原因以及导致的结果，并且告知可以如何操作，这种官方保障会让用户安心很多。

B、“太多路可走”

在面对许多选择时，C端产品的设计会根据7±2法则尽量减少选择数量，但B端产品的选择数量一般来说很难减少，如果没有任何指引，不仅会给用户操作添加负担，可能会导致产品功能达不到预期效果甚至出现反作用。

比如，为了保证游戏中不能出现敏感或非法的内容，工作人员需要在管理侧配置安全策略，以屏蔽不良内容。

这简单的配置功能看似没有任何操作难度，但工作人员可能并不清楚需要勾选哪些选项，于是可能就全都勾选了。这样一来，一是增加了游戏中可能误屏蔽的内容量，二是增加了后续其他相关配置的工作量。

下图产品同学提供的这个方式就能很好解决用户“选择困难症”的问题：

平台拥有多款游戏的配置数据，产品可以借此将其他游戏的选择率作为提示，指引用户该如何选择，这就非常类似C端产品内容分发的思维中的“X位好友看过”、“X人喜欢”。

我在这个基础上做了点设计优化：根据选择率的高低，提供两种不同颜色的标签，强化视觉重点，更容易指引用户勾选高选择量的策略。

C、路线凌乱

由于业务复杂，数据量逐渐庞大，后台调整的工作量大，许多B端产品的框架在达不到一定难用程度的时候，ROI都不允许做大调整。所以在产品演化迭代的过程中，原本通畅的操作路径就逐渐变得越来越复杂，因此操作路径凌乱往往是B端产品最大的问题。 

比如下图的数据配置页面中，每一条ID对应了ABCD4种工具和ABCD4种文件，在多条ID中，需要将其中一条ID配置上架，历史配置过的ID可以沉淀展示。这个逻辑很简单，因此早期的表格框架能够支持该功能。

但之后的工作中发现，如果只想修改其中一个文件时，需要一并把其余的工具和文件都要再配置一遍，非常麻烦也非常容易出错。于是产品希望可以将工具和文件的配置分开展示，4个工具依然需要捆绑修改，而4个文件可以单独拆开修改。于是就有了下图左边的方案。

左图中，将工具和文件拆成上下两个模块后，就可以支持分别修改了，再分别将每个工具和文件设置上架编辑能力。 但是站在半专业用户的角度来看，我不知道这个页面我该干什么了。产品方案存在的问题是：弱化了“上架”概念，不细看就不知道该页面配置了上架ID；同时也不清楚上架ID需要配置哪些内容，担心有遗漏。

此外在下方模块中，每个文件的列表信息样式很相似但内容不同。数据量大时，用户在向下滚动页面的过程中可能会有信息丢失感，担心自己是不是因为没有细看而漏看了什么，从而产生凌乱和焦虑的使用体验。

因此在设计时，在完成拆分工具和文件的要求下，增加了“已上架配置”一栏，让只关注上架配置的用户可以在首屏就能获得相关信息，其余的配置项作为待操作项放在页面下方，用页签做区分。这样一来，大部分的用户可以在首屏以及轻微滚动的屏幕范围内完成所有操作，只有在查看历史时才需要多次翻页或下滚。

这个需求能够在解决产品痛点的前提下优化凌乱的路径，主要在于划分清楚信息的大关系。

4、我担心

在操作流程跨度长或需要多方多平台协调的功能中，用户的丢失感会非常强。比如担心操作内容丢失、找不到下次进入的入口、无人回应、找不到对接人、不了解当前进度等等情况。这就需要对类似下图的页面节点做细节设计，以减小用户的不安感。

在多方协作的长操作流产品中，需要为用户考虑每两个操作环节中间的操作和信息获取节点。设计时，可以视具体情况尽可能在每一个节点上都保证用户可以获取到对应信息。

除了上述情况外，还有一种可能会造成用户担心的情况，不是针对某款产品的问题，而是市面上大部分产品都这么做导致用户形成的潜意识层的担心。

比如用户想要在某产品官网体验他们的产品时，总会在体验到关键部分时出现需要登录的页面，这个时候用户会产生两种心理：

• 没注册过的：“还要注册好烦，又要我个人信息”或“可是我没有符合条件注册的邮箱或电话啊”
  
  
• 注册过的：我刚刚输入的内容，在登录完后还能保留吗？

当用户被这类产品多次打断，就会对在线体验类型产品产生“它又在埋坑等我跳”的心理感受。 

但站在产品角度，需要用户登录是有原因的，一是便于找到有真实诉求的用户，二是防止体验功能被恶意使用。

我们为用户提供在线体验内容检测的能力时，在提供检测结果前需要用户登录，但如果按照上图的方式（竞品），用户的体验流程被登录注册打断，不仅体验中断，还造成不好的心理感受。但由于这一步不能省略，于是我觉得最好的方式就是提前告知：

用户在登录前，直接在左下角提醒用户需先登录再体验，在用户已登录的情况下，为了防止用户遗忘已登录的状态再次担心体验过程被中断，可以在原本登录的位置标注“已登录”的状态，让用户可以安心体验产品。

B端产品不需要像体验部分C端产品拉新的方式那样骗取流量，毕竟骗来的流量无法转化达成有效转化。B端用户如果能找到该产品，说明是有诉求的，因此产品坦诚把需求提前告知用户，更加尊重用户，才能有助于产生信任。

5、我迷茫

在一些流程节点较多、耗时较长或前置选择较为关键的产品功能中，需要时刻为用户提供“定位”，让用户向前看得到目标，向下看得到现在，向后看得到历史，减少用户在使用过程中因为遗忘导致的迷茫。

下图是工作人员在填写反馈工单时的操作页面：

现网的逻辑是：在第一页选择工单类型和填写方式后，跳转至新页面填写工单内容，若需要重新选择工单类型，则可点击下方按钮返回第一页重新选择。

理论上，如果用户记得自己从第一页的哪个入口进来的话，这套流程并没有什么问题。但就跟有些人出门需要反复确认门是否关好，钥匙是否拔掉一样，总有人在最后提交时想要再核实一下前面所有操作；又或者工作人员在填单的过程中被其他事打断，再回来继续填单子时，就忘记正在填哪种单据类型了，毕竟每种类型单据的填写内容类型非常相似，这个时候用户就会产生迷茫感。

因此如果可以把多步骤内容呈现在同一个页面，减少页面跳转的话，用户便可以随时定位和判断目前的操作节点。

五、简单总结

B端C化的本质就是将原本复杂的B端产品，借鉴C端产品设计的思路和方式做得更简单好用，以满足专业性不断减弱的B端用户。

B端C化可以从视觉层、交互层、心智层三个层面进行。心智层的C化分为以下几方面：

原创设计团队：腾讯游戏CROS美术设计团队

腾讯游戏CROS美术设计团队，负责CROS公共研发运营体系下游戏生态、增长等周边系统，及覆盖游戏研发运营全生命周期的产品服务体验设计，包括腾讯先锋云游戏，超核玩家，潘多拉，游戏知几，腾讯成长守护，蓝鲸，WeTest，Gcloud等业务。我们致力于以体验、美学提升设计价值，助力业务达成目标。匠心设计，为体验而行！

---

想要学习或者练习体验/交互设计的朋友，可以了解一下「体验设计学习社」。

作品集详细点评+答疑+免费训练营&学习打卡等活动，更有各类大厂内推：

如果你只是想要多认识一些同行，也可以加入我们无广告的纯粹体验研讨微信群：

本篇文章来源于微信公众号: 体验进阶