交互设计师要通过逻辑推导来产出合理方案，无论是产品、交互还是 UI。本文通过3个交互案例细节，帮你一窥交互设计的门道。更多交互设计案例：腾讯案例复盘！

交互设计师要通过逻辑推导来产出合理方案，无论是产品、交互还是 UI。本文通过3个交互案例细节，帮你一窥交互设计的门道。

更多 交互设计 案例：

腾讯案例复盘！B 端教育产品的情感化设计（交互篇） B 端产品设计如何兼顾产品工具属性与情感化体验？

阅读文章 >

一、人为推进效应 不知道大家有没有看过这么一个案例，大概是说，有人在洗车店做了个实验，给每个来洗车的顾客弄一张活动卡，这个卡上有八个空格子，顾客每次来洗一次车，就在空格子里盖一个章，洗满八次，也就是盖满八个章，就可以免费洗一次车。

送出去的卡分两类，一类是上面没盖过一个章，八个格子都是空的；还有一类是，上面有十个格子，但是有两个空格已经盖了章的。所以，前面一类卡是 0/8，后面这类卡是 2/10。

经过一段时间的验证，发现，后面这类卡的完成度要比前面这种高出 20%。

于是有人就给这个实验结果定义了一个名字，叫「人为推进效应」。

后来有人就把这样的概念用在了一些产品功能里，比如完善资料，签到，游戏进程等。所以我们经常会在一些产品里完善个人资料时，明明没填写过任何信息，但资料填写的进度就是 20%，原因是它把默认的头像和昵称 id 也算进去了，就会让人觉得还差一些就完成了。而如果进度是 0%，用户完善资料的动力就会下降。

甚至在一些产品里，洗车卡这个案例也被改了个方式，直接拿来用了，比如：

有些游戏任务，要杀死十只怪物，而任务的启动条件是用户在杀死一只怪物时，自动开启，这时候任务的杀怪数量是 1/10，那么用户完成任务的动力也会更强。

后来我找了些资料，来验证这个概念的真伪性，以及支撑依据，发现这么三个理论。

第一个是「蔡格尼克记忆效应」，它是指人们对于尚未处理完的事情，比已处理完成的事情印象更加深刻。 这个现象是由蔡格尼克通过实验得出的结论。

让设计更有说服力的20条经典原则：冯·雷斯托夫效应、蔡格尼克记忆效应 编者按：文章将设计理论运用到实际案例中进行分析，更有助于理解。

阅读文章 >

在读关于蔡格尼克记忆效应的资料时，我想到一些实例，觉得确实是这样。比如我在写一篇文章时，脑袋里总会想着这个论题，甚至框架与内容细节都很清楚；但只要一写完，丢进归档文件夹，很快就会忘记自己写这篇文章时的一些内容。

包括玩游戏时，一旦开始执行任务，就会想着这个任务还需要玩多少次才能完成，而不会去想着，已经完成了什么。

不过想想也觉得是废话，完成了谁还去想呢，这里对比的应该是「未开始」和「执行中」这两种情况，哪种印象会更深刻。当然，从主观情况来考虑，相比起来，执行中的事项一定是印象更深刻的。

这就与两类洗车卡的实验比较相关了。

第二个是「目标梯度效应」，意思是人类或动物具有接近目标时加快行动的效应，比如兔子快要接近食物时会跑得更快。

关于目标梯度效应的干货：

用心理学的知识，告诉你人们为什么喜欢使用「清单」 在二战中，波音公司推出了令人生畏的299型飞机，被称为「飞行要塞」，相比之前的轰炸机，它有4个更先进的引擎和近104英尺的巨大翼展，可以飞得更快、更远，携带的炸弹数量也是之前的5倍，可以说是军事领域的一大进步。

阅读文章 >

类比上面洗车卡的例子，当卡上的盖章数量越多，用户洗车频率就会越高，以为尽快完成洗车卡任务，拿到一次免费洗车的奖励。

比如在一些产品里填写地址，当要开始填写时，GPS 定位会自动获取城市定位，帮用户完成第一步，看起来是理所应当，但其实是传递出一种任务已经开始了的信息，主要是为了提高用户完成任务的动力。

有些注册比较麻烦的产品，也会故意通过这样的拆分方式，提高用户完成注册的转化率。

同时，因为用户在完成洗车卡任务后，任务会随之消失，用户也可能会流失，所以会通过发放二次洗车卡任务，而这个任务奖励会与第一次有所区别，通过这样的方式从而留下用户。

比如上图中的任务，任一模式完成一场，就可完成任务，领取奖励，但是领取完后会在这个任务的基础之上产生新的任务。好比王朝模式 2/2 完成后，就会变成 2/3。告诉你再玩一局，就可以领到更高的奖励。

第三个是「任务可视化效果」，与其通过数字告诉用户任务次数 2/10，不如把任务可视化，呈现出任务进度。

试想一下也是如此，看着卡片上如果写得是数字，譬如洗了 3 次车，还差 5 次，肯定不如一张卡片，上面盖了 3 次章来得更直观。所以在一些产品上，任务进度会通过有进程的进度条来表示目前情况：

二、禁用按钮的逻辑 最近收到的一则问题，大概是：在做设计的时候，经常会遇到一个问题，就是一个按钮，在同一页面的不同情况下，有时可用，有时不可用，我们到底是显示不可用时的禁用状态呢？还是直接隐藏这个按钮呢？

大家还是喜欢提这种通用性问题，希望有一个说法，可以概括所有情况。但我多次说过，不存在这样的好事，一定是具体问题具体分析的。

尤其是这个问题，想要聊透彻，得用不少例子来举证说明，不过也可以通过总结的方式长话短说了。

禁用按钮的使用，可以从两个维度来分析，分别是：「无效的禁用状态」和「有效的禁用状态」。

1. 无效的禁用状态

有一种情况是，在一个页面里，一个按钮，可能会有几种不同的情况存在。那人要问了，既然是一个页面，为什么会有多种状态同时存在的情况呢？

比如，在出行场景中，普通乘客发起订单，司机接单后是可以发送消息的（左图）。但是从第三方渠道来的乘客，司机是无法发送站内消息的，只能通过电话联系乘客（右图）。

不同渠道来的用户，司机端的页面会呈现不同的按钮状态。相同的页面，第三方渠道来的乘客，在司机端就不需要露出消息按钮了，这样可以减少无效信息对司机的干扰，还可以避免司机习惯性操作带来的无效反馈，比如点击消息，显示「无法发送消息」。或者显示禁用，也会影响司机的操作判断。

从这个案例中我们可以看出，当一个按钮在某种情况下始终无法被触发时，就会选择让它直接消失，而不是呈现禁用状态。

很多人在这类设计里会给按钮提供一个禁用状态，以免按钮消失而打乱页面布局。但是要知道，在某种情况下，按钮无用时，无意义的展示反而会产生干扰信息，就像上面说到的那样。

所以这里有一个结论是：禁用按钮需要可触发的时机，如果没有这个时机，禁用状态就没有存在的必要。如果存在，那它也是一个无效的状态。

既然是无效的，最好就不要出现了。

2. 有效的禁用状态

在上面的例子里，有一个前提不可忽略，那就是司机是否可以理解我们不显示的原因。当然，司机会接受相关培训，产品中也会有渠道标识，所以司机能够明白页面中存在的差异。

但在其他产品中，当状态不同，按钮变化无法自洽的时候，又怎么去处理呢？我们就需要通过合理的解释来消除用户潜在的困惑。

对于这点，比较典型的案例是在线上购物时，一件商品会有多个类型供消费者选择，比如不同的尺寸、型号等，当其中一种类型被抢光时，这个商品依然是可见的，只是无法选择，展示出了禁用状态。

在这种场景中，我们不能一下子把其他无法购买的类型隐藏，因为用户需要知道我们所有的商品类别，了解商品的全部属性，尽管当下无法购买，但有上新的可能，用户依然可以选择等待，并将其加入收藏，还是会有机会促成这笔交易。而且当可选类型变多的时候，只是禁用没有库存的类型，可以使其他可选项保持固定的位置，有利于我们二次搜索和加购。这种场景的禁用也是暂时的，直到商品下架或者上新。

但就像我以前说过的，常常我们见多了的东西，就认为是正常的，但它并不一定好的。禁用也是这种情况。

虽然我们现在还是会在各个地方看到禁用操作，但是禁用的原由始终没有给到用户合理的解释，以至于许多人见到类似的操作都是一头雾水。所以在设计过程中，尤其要谨慎对待，尽可能的避免出现无法解释的禁用操作。

好比淘宝的商品选择页面，如今也将原来的商品纯禁用按钮，替换成了「缺货」。选择缺货的商品之后，按钮会变成「提醒掌柜补货」。

从原来的用户单方面接收无法点击的按钮，到现在直观显示缺货，点击后同时提醒到商家，这样的操作从功能角度来说是一个升级。

这就是我说的，有效与无效的禁用按钮之间的区别。禁用不该是真的禁止使用，而是告知用户，它如何可被使用。

3. 小结

如果一个按钮在不同的阶段有禁用和可用的状态显示，那么意图是很明显的。比如一些活动页面，某个按钮的禁用状态是倒计时，就像电影的前期宣传，为电影的上线制造话题和热度，来鼓励更多人的观看一样。

对于按钮来说，显示禁用则代表它在满足一定条件后即可拥有可点击性，让我们明确地了解它就在这里，未来是可操作的。按钮也有很多的设计空间来为未来的使用做好铺垫，特别是营销类的活动，像是「明日 8 点可抢」、「提醒商家补货」的按钮文案，无一不在传达「可用性」的信息，引导用户持续性的关注。

但是还有一类禁用状态只是静默地提示，多出现在表单中，当用户没有完成输入的时候则无法点击，因为看的多了，我们就以为这是正常的。但我们都知道它仍可优化，比如，在它以禁用状态出现时，用更为友好的方式去提醒用户应如何激活，而不是漆黑一片，且完全不知道它所存在的意图。

我们要知道的是，禁用按钮本身不是一个特殊的对象，只是禁用状态在页面中是一个特殊的存在，它是产品设计中的一种规则。为什么按钮不可用，或者说一定场景下为什么功能不可用，当无法依靠用户直觉理解的时候，是需要作出解释的，也就是怎么禁的问题。

但是最开始设计时就应该去想的是，禁用状态对用户和产品的意义在哪里，这和我们设计方案时脑海中涌出的无数目标一样，是一个基础的出发点。而后，一切迎刃而解。

三、领导用控件的方式不对，但说服不了他，怎么办？ 读者提问，他是这样说的：

呆呆，我发现一个比较玄幻的现象。就我公司，不管是产品还是领导都会把开关控件当作是一个内容切换的控件使用，就很容易造成歧义。我有提过这个问题，但是他们就会觉得这个就应该这样用。我该怎么说服他们呢？

这样的事情其实有很多，我们甚至会在许多产品上看到各种错用控件的情况。但就像我之前说过的，人们常常会把习以为常，似作理所应当。这是不对的。

但是，在工作中遇到类似的问题，仅仅只是靠说，是不够的，毕竟领导看的是最终的业务成果，而不是从某个元素去考虑使用的合理性。

好比，在你参与之前，大家对这个问题已经经过多次讨论，定下最终方案，你一句「控件」用的不对，就要改变整个页面的展示内容，那不是打人脸了么，还是一整个团队的脸。

反过来想一下，如果用户给你提反馈，你的态度是怎么样的。

做产品设计的同学肯定知道，我们平时会收到许多用户的反馈，这些反馈来自于各个渠道，比如一些社交平台、应用市场、用户社群，甚至是调研搜集等。这些反馈有的是给产品功能提建议的，有的是直接吐槽功能难用的，还有的，可能是认为产品本身就有问题的。难道我们要对每个用户提出的反馈都去思考合理性？不太可能。

那能怎么办呢？如果真想改变这种情况，你就得根据这个业务出一个比之前好的方案去说服他们，而不是只从某个控件或元素的角度去说事情。

我通过一个小案例来帮大家理解一下。

Raluca Budiu 是产品可用性方面的专家，同时也是卡内基梅隆大学的博士生导师。

她之前在上一场线上直播课的过程中遇到一个问题 —— 始终无法打开产品的麦克风。

刚开始上课的时候，Raluca 无论怎么点击，静音按钮都处于「关闭」状态，直到试了几分钟后，甚至重启了软件几次，才反应过来，原来当前本就已经是非静音状态了，再点击才是静音。

意识到自己的行为后，显得有些尴尬的笑了笑。于是，她开始思考类似的产品设计的问题。

可能许多人看到这种情况，都会觉得这没什么问题，甚至觉得是理解不了的人的问题。但就像我前面说的，常常看到的东西，习以为常，不代表它就是对的。

按钮的设计，有许多可分析的地方，比如当前按钮的显示，是一种状态，还是一种指令；或者，文案标签的显示是对当前状态的提示，还是对按钮的静态说明。

这些东西在设计过程中都是需要去仔细思考的。

譬如，开关控件的显示逻辑，其实是一种显示状态，而不是指令。

你看到的开关状态，就是它当前所处的情况，上面是关闭，下面是开启。我们一般很少在优秀的产品里看到给开关控件加文字的，因为它已经很明显，通过颜色反馈状态。

而我们平常在看视频的时候，画面播放时，底部显示的是暂停键，屏幕暂停时，底部显示的是播放键。

它区别于前面开关的使用逻辑，是以指令的方式呈现的。

这就是一个按钮，状态与指令的差异。

那么文案作为提示与静态说明的差异是什么意思呢？

比如上面静音案例的图里，按钮下面的文案是不会因为是否开启静音而发生变化的，它只是告诉用户，这个按钮的名字叫静音。类似于底部标签栏里，告诉你那个圆圈的名字叫「发现」一样，它本身不会有任何变化。

这就是静态说明。

而提示，是动态的，也就是按钮发生变化，那么文案也就会发生变化，它的作用是提醒用户，可以通过操作改变当前状态。

比如：

题外话。微信的这个锁定界面，虽然显示了已锁定，但是并没有从识别角度告知用户如何解锁。如果是我，我可能会这样改：

不过这不是讨论的重点了，我这里主要想告诉各位，文字的作用，分为动态提醒和静态说明。

于是，理清了这类 按钮设计 逻辑后的 Raluca 教授提出了相应的规则，并发表了文章。如今，再看开头那个分不清是否已静音按钮的产品，改成了如下图所呈现的形式。

无论是图标状态，还是文案处理，都做了相应的改进，看起来就清晰多了。

通过这三个小案例是想告诉各位，虽然，我们在工作中不可能去做这样的研究，但是各位在提出自己的建议时，也要从方案本身出发，而不是仅仅从元素样式上去做无用功。

交互设计师，一定要有自己的思想。大概是这样：-）

交互细节科普！帮你掌握返回、关闭和取消的用法 交互设计细节中，最常见的「返回」、「关闭」和「取消」应该如何运用？

阅读文章 >

有话直说，我觉得现在很有可能，B 端设计工作比较容易陷入以下 4 个误区：以偏概全的认知、理解和谈论 B 端设计不带入用户角色，飘在半空做设计盲目“B 端 C 化”，照搬 C 端的表现形式容忍简陋，认为“美”不重要不熟悉B端设计的先看这篇掌握基础：万字总结！B端产品设计基础思维与方法本文作者从 2015 年开始进...

有话直说，我觉得现在很有可能，B 端设计工作比较容易陷入以下 4 个误区：

以偏概全的认知、理解和谈论 B 端设计 不带入用户角色，飘在半空做设计 盲目“B 端 C 化”，照搬 C 端的表现形式 容忍简陋，认为“美”不重要 不熟悉 B端设计 的先看这篇掌握基础：

万字总结！B端产品设计基础思维与方法 本文作者从 2015 年开始进入 B 类产品的打造，前后几年时间进行了行业内容的探索，从概念产品的提出，到产品营收千万以上，从产品 1.0 的两三个功能到后续迭代二三十个功能的平台产品，沉淀了一些个人观点与经验，在此分享出来与大家讨论交流，希望能与大家有更多讨论。

阅读文章 >

误区 1. 以偏概全的认知、理解和谈论 B 端设计 “B 端设计”这个概念具体包含哪些产品类别呢？

B 端产品包括 OA、BI、ERP、WMS、CRM、TMS、电商分销系统、开发 API 管理系统、项目、企业内部协同工具、云计算 PAAS、统一认证中心（Passport）等等等等满足企业或组织业务需求的产品。

“B 端”是一个很大的很模糊的概念。比如教培机构做教师端的设计师小明与电商平台做商家端的设计师小花，他们所认知到的 B 端设计，天然存在很大的差异。如果小明和小花一起来聊 B 端设计应该怎么做，如果不花 1 个小时聊清楚场景，有可能说不到一块去。

10 年前也就是 2012 年的时候，我在惠普的 ES 软件服务部门为北京的几家大型通信公司提供企业级的软件服务。那时没有人讲“B 端设计”，我只知道我在为企业域管理类的 web 软件做 UI 设计，当时的行业归类叫做“IT 软件”。时至今日，我当时做的事情现在叫做“企业数字服务”，当时做的几个卖 license 的产品现在都叫做 Saas，而围绕这些事情做的设计工作，统一被叫做“B 端设计”；

2015 年的时候，我在百度的搜索用户体验中心为大搜的商业产品、运营产品体系做交互设计，那时也没有人讲“B 端设计”，大家想的是怎么为企业提供更好的服务体验，从企业那里赚到更多的钱。那时没有人讲“B 端 C 化”，我们在跟真实用户的接触中不断调整自己对新用户群体的认知，努力做到像蘑菇一样思考。

在后来移动互联网蓬勃发展的那几年中，大部分设计师都不想做 PC 端的事情，因为如果不会做 App，意味着找不到未来的工作。

回顾这十年来，不知道从什么时候起，“B 端设计”这个词像是一个越滚越大的雪球，盲目且粗暴的概括几乎所有不面向 C 端用户的所有设计工作。这样或许可以做一个简单的区分，把设计工作粗暴的分为差异巨大的 B 端设计和 C 端设计。但“B 端设计”这个分类方式和概念词汇，会给刚入行 B 端的设计师带来很多混淆和困扰。

所以建议：

不要笼统的去谈“B 端设计”，因为很有可能你、我、他接触到的“B 端”产品本身差异特别大； 选择 B 端深耕很好，同时还要进一步在“B 端”中找到适合自己的行业和赛道。 （PS：本文的观点也不一定对，因为笔者也没有 B 端的全局视野，谈论 B 端设计这个话题也无法避免自己的认知局限，所以笔者也有可能处在这个误区之中。）

误区 2. 不带入用户角色，飘在半空做设计 一个好的演员为了演好自己的角色，会花很长时间去体验这个角色所需要的真实生活，这样才能真实的进入角色。设计师在开始设计工作之前也需要做类似的准备，在可以把自己带入用户角色之后，才有可能做好具体的设计工作。

我在百度工作时做过一个客服系统沟通工具（百度商桥）的设计，在设计 B 端 IM 工作界面的时候，我们把客服人员自己的头像放的比较大，认为用户会把自己美美的头像放上去看着会舒服很多，并且作为设计师也会自然而然的觉得界面上有个圆形的头像会更好看。但后来真实用户给我们的反馈是他们每天的工作压力非常大，根本没时间、没心情处理自己的头像，并且自己的头像 C 端用户也没必要看到。

1. 因为接触用户困难就放弃接触用户

设计工作无论大小、无论 B 端 C 端，都应该按照“共情——定义——创想——原型——测试——改进”这样的流程来推进。设计思维的第一步就是用户共情。设计师区别于程序员和部分产品经理的最大不同，就是我们从用户角度出发思考问题。所以不能因为现在做B端接触到用户的难度变大了，就跳过这个环节、没见过真实用户就直接开始动手出图。

这是飘在半空中做设计，不接地气。

作为 B 端的设计师，不能只是对用户信息道听途说，没有一手经验，在日常的设计协作过程中也容易被别人牵着鼻子走。

2. 不面对真实用户，通过用户画像简单粗暴的理解用户

谈一谈你对你做的这个产品的用户的理解，是我在面试过程中经常会问到的问一个问题。及格的回答是人群画像，描述年龄、性别、收入、地域这几个基本属性；优秀的回答是就用户画像谈一下对用户人群的个人理解，并展开说明用户使用产品时的场景和痛点，有人还会提到 B 端决策者和使用者之间的不同。

用户是活生生的人，并不是几个数据的集合。只有一些人群画像的基本概念，没有具体面对面的接触过用户，就不能有效的与用户共情，只能按照自己的所谓设计逻辑来做设计。

作为 B 端的设计师，如果只能通过几个简单粗暴的用户属性数据来“想象”用户，是不能帮助我们完成设计工作的。

3. 不尊重用户习惯

B 端用户往往需要长时间沉浸使用产品，所以做任何改动需要充分尊重用户习惯，不能单方面的把自己认为好的设计强推给用户，这样的结果往往被骂个狗血喷头。

所以建议：

没有机会就创造机会，去用户的真实工作场景看看。采用实地观察法直观的感受用户的工作场景，运用自己的感官理解用户；把用户叫到公司来也可以，但还是没有实地到访更好； 保持跟用户沟通，尽可能高频率的与用户沟通，沟通形式无所谓，当面聊、电话聊、IM 打字聊都可以； 每天看用户反馈，了解用户在吐槽什么，为什么吐槽； 对于用户重度使用的 B 端产品，做任何改动都需要谨慎，不要轻易做改版。 误区 3. 盲目“B 端 C 化”，照搬 C 端的表现形式 我在上一篇文章《B 端 C 化，行得通吗》中有过探讨，“B 端 C 化”这个说法从几年前出现到现在，不知怎么，它从一个简单的概念慢慢演变成了一种“理念”，如果仅仅是一个概念可能还好，但如果作为理念来指导工作，就会出问题。在 产品设计 过程中盲目进行 B 端 C 化，就会容易进入一些误区。

越来越流行的B端C化行得通吗？来看高手的分析！ 用To C的方式去设计B端产品是否行得通？

阅读文章 >

1. 把工作重点放到表面化的视觉设计包装

你可以去做更情感化的、更炫酷的东西来做体验升级和产品包装，但那并不是核心设计问题；

尝试颠覆 B 端产品的刻板印象，进行更个性化、娱乐化、IP 化的设计尝试，企图通过一些新的形式让用户感受到产品的“新潮”和不同，这样的东西可能短期内可以博人眼球，但与用户的真实痛点没有关系，与 B 端产品的销售和复购没有关系

2. 盲目去表格化

认为表格是一种老套的过时形式，想用卡片之类的形式来代替所有表格。然而，表格实际上是大部分用户快速理解复杂信息的一种基础结构，盲目去表格化，进行卡片化设计，可能并不一定适合你的 B 端产品；

表格是对复杂的信息一种结构化的加工形式，是一种人类都可以快速理解和应用的概念模型。盲目去表格化，会让用户的理解成本变高、影响操作效率。

3. 模仿 C 端的方式建立 B 端的设计语言

B 端的设计语言不会与 C 端趋同，现在 B 端的设计系统已经有很多发展的较为成熟，B 端产品追求确定性、高效率、重操作，C 端产品鼓励用户探索、看留存、重浏览，B 端设计语言在用色、造型、布局等方面都与 C 端有明显差异。有可能趋同的是产品内的配图的视觉风格，B C 两端都会受到设计趋势的影响，这并不能理解为 B 端学习模仿了 C 端。

误区 4. 容忍简陋，认为美不重要 显而易见的是，现在外部环境的变化对 B 端客户体验提出了更高的要求。原来 B 端产品的基本要求只是功能跑通，现在 B 端设计比以往都要重视用户体验的打磨。

跑通功能只是勉强“能用”，就像人在没钱的时候只追求温饱就可以了，现在日子慢慢富裕了，人就会开始追求一点“优雅”。现在菜市场的卖菜大姐都会在闲暇的时候拍一条抖音，加美颜滤镜分享自己的工作。

在企业端，很多大型企业都开始注重“员工体验管理”工作，除了关心员工的业绩和 KPI，还会关心自己的员工在自己公司工作的开不开心。他们在为员工加码工作强度、抓牢工作效率的同时，还为员工准备可口的餐食、宽敞的茶水间、成排的按摩椅，以及更友好的办公系统。

好的企业即要效率，也要好的员工体验。

1. 效率和功能，与美并不矛盾

B 端的产品设计有一种实用的功能主义的基因，因为功能可以让客户买单。

迪特·拉姆斯也是功能主义的代表，但博朗的设计有他独特的审美风味。他在向世界表达自己的设计理念时也说过——好的设计是美的。产品的审美品质也是实用性的一部分，日常使用的器具影响着人们的生活环境和幸福感受。只有真正优秀的产品才能是美的。

B 端设计也要追求美，B 端设计的美与 C 端不同，它应该是克制的、弱风格化的。

2. 注重效率并不是忍受粗糙和简陋、丧失设计追求的借口。

虽然很多人不这么说，但他们的内心会认为效率就是 B 端设计的全部。

的确，效率是 B 端体验设计的核心问题，帮助用户更高效的完成任务是最重要的事情。但注重功能和效率并不是忍受粗糙和简陋、丧失设计追求的借口。

虽然也有不少优秀的 B 端产品设计，但相比 C 端，B 端产品的设计整体质量普遍较低，老旧的界面感受、超低的自用性、密密麻麻的功能和信息堆砌，这些都是设计师要解决的问题。那这么多问题是如何不断沉淀、累积到现在的呢？原因就是在过去的时间里大家对 B 端的体验设计不够重视，认为跑通功能就可以了。

作为设计师，一旦我们放弃了对美的追求，那么跟美相关的很多事情，比如优雅、情感、人性、品质、品牌气质、趣味性、创造力等等这些促使我们走上设计道路的初心和原动力也会离我们渐行渐远。放弃这些东西，只追求数据和效率，难道你可以拼得过比设计师更加业务专精的产品经理吗？

如果这么把自己玩几年，没准会把自己变成一台 AI，也说不定。

从用户体验角度，分析微信视频号的「双赞」设计 最近微信视频号上线了大拇指和爱心两个点赞，到底它们之前有何不同？

阅读文章 >

欢迎关注作者微信公众号：「柴林的设计笔记」

编者按：B端产品较为复杂，如何帮助用户快速上手，提高使用体验？本文用5个章节，帮你学会构建B端产品的多维帮助体系。用户体验设计的入门书籍 Steven krug 的《点石成金》想必大家都看过，书中提到如何提升用户的好感度：不要让用户思考—让产品简易明了；尽量减少操作步骤—如果步骤无法缩减，那请确保每个步骤都是无需...

编者按：B端产品较为复杂，如何帮助用户快速上手，提高使用体验？本文用5个章节，帮你学会构建B端产品的多维 帮助体系 。

用户体验设计的入门书籍 Steven krug 的《点石成金》想必大家都看过，书中提到如何提升用户的好感度：

不要让用户思考—让产品简易明了； 尽量减少操作步骤—如果步骤无法缩减，那请确保每个步骤都是无需思考、明确无误的选择； 省略多余的文字—让每个页面的所要传递的信息被突出，降低视觉噪点，减少对用户判断及操作的干扰； 必要的帮助和支持。

当然，还有尼尔森的十大可用性原则、格式塔原理（对于表达页面信息主次关系、布局设计很有帮助）等等，都能运用在后台产品的用户体验设计上。

用超多案例，帮你掌握尼尔森十大可用性原则 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。

阅读文章 >

近万字干货！带你全面了解格式塔原则 好的设计师理解心理学在视觉感知中的强大作用。

阅读文章 >

可能有人会问：“如果是 2B 的后台产品，产品体量大，用户角色多样，使用场景及业务流程复杂交错，这时候这些准则还管用吗？” 自然是有用的，虽然对 2B 的产品用户定位是具有专业知识的公司员工，不同的角色往往对应不同的工种，但是随着数字化产品的不断发展，人们对于后台产品的要求以及认知都是在不断提升的，公司希望员工能提升工作效率、降低用人成本，所以 B 端产品的体验近些年逐渐被重视起来，公司希望通过将不同的流程标准化,并且不断优化操作链路，从而降本增效。

影响人们选择使用哪款 B 端产品的因素有哪些？—— 主要有产品定价、销售团队能力、产品功能完善度、产品营销能力、产品知名度、企业需求、SaaS/独立部署等等。这里提到的企业需求，既指由企业业务类型、工作流程所产生的对产品的功能需求，也指企业对于希望利用产品来达到“赚钱”（降本增效、资源整合）的需求。那么如何提升B端产品的使用效率呢？建立一个能够自我运行的帮助体系就非常的重要了，你需要让产品自我解释，当用户在使用上遇到困难时，立即给予解答或者引导。

不管是 C 端还是 B 端，最终与产品进行交互的都是“人”这个个体，还是能通过“以人为本的设计理念”为根基，去进行 2B 后台产品的体验设计。

好的帮助体系不仅能够帮助用户快速有效地完成任务，还能够降低产品的培训成本，让用户对品牌产生信任感。将产品的隐藏特性、新特性、重要特性传递给用户，提高用户活跃度；将新手用户转化成中间用户或者专家用户。

接下来我们就进入本篇文章的正题：为 B 端产品建立多维的帮助体系

多维帮助是从不同使用场景和不同用户群体出发，满足不同用户不同场景下的帮助需要。产品用户体量较大且产品功能复杂的时候，帮助系统能够给用户更多的支撑。但要知道，有些用户可能会需要完整详细的帮助系统，但绝大多数用户是不会使用这个系统的，作为用户体验设计，我们也期望那些没有足够耐心甚至使用频率较低的用户得到帮助支持。如果你从事的 B 端业务，怎么让新手用户能尽快尽可能轻松过渡到熟练用户是一个值得思考的问题。

「宜家式客户体验」不知大家是否有耳闻，家具家居用品是刚需低频消费品，但是人们总是三番五次的跑去逛街式消费，这究竟是为什么？小编第一次进入宜家时，明显感觉整个商场流程清晰，各种指示牌，所需的用品都是放在触手可及，一眼可见的位置。逛宜家一般流程是自上而下的，先从顶层的样板间浏览，逛完出口是餐厅，或者向下走是零售及提货区，到一楼是结账，结账区之外就进口食品区+小食餐饮区。宜家的动线设计，没有人为的引导，而是通过路线设计、指示牌引导客户浏览整个商场，在样板间和零售区都设置了捷径通道，针对目的性明确的客户就能节省时间快速到达目的地。

网络世界都是现实生活的映射，所以如果把这种动线设计运用到产品的体验设计上，我们把后台产品想象成宜家商场，用户可以分为新手用户（免费体验产品），就像是漫无目的闲逛的，以及目的性明确的老用户。针对新手用户我们可以设置不同的引导，去帮助他们完成一定的任务，有效的向用户展示产品价值，从而提升转化与留存；针对老用户，我们可以通过用户在产品上留下的“痕迹”，以及用研手段，去提升产品的体验设计，并挖掘新的需求，通过新功能的帮助引导将产品的特性传递给用户，提升老用户粘性及活跃度。

针对 B 端产品的帮助体系我们可以分为：新手引导、更新预告、帮助提示、帮助中心、实时支持。

一、新手引导 新手引导不仅仅指新用户，发布产品新功能对于留存用户来说，此时也亦成为了新手。SaaS 类的 B 端产品，用户往往会通过免费体验期的使用感受来决定是否继续/付费使用，如果用户在登录你的产品后，到处摸索试图搞清楚操作方法与步骤，试图完成一项任务却失败，那这个用户多数就会流失了，你把 产品设计 的像迷宫一样，进去之后用户就找不到明确的道路走到目的地。

1. 交互式弹窗引导

最佳适用场景：用户首次登录的时候或者是有较大版本的更新。

在用户使用产品前先给用户营造好产品的基调和氛围，宣传产品功能和亮点或告知用户最核心的操作方式。

2. 动画视频引导

最佳适用场景：专注于用户行为和任务的引导。

动画、视频、GIF 的共同优点是非常直观并且具有吸引力。用户可以根据动态演示，很快地理解产品功能，特别是一些强调用户行为的功能。但这类引导方式内容不宜过长，尤其是动画和 GIF 图这类用户无法自己控制演示进度的展示方式，建议控制在 10 秒以内,而视频也应控制在 3 分钟以内。传递的信息量太大会导致用户失去耐心的同时也不利于用户记忆。

3. 气泡提示引导

最佳适用场景：告知用户有新功能上线、引导用户使用核心功能，或告知用户一些隐藏菜单的内容。

采取气泡提示的情境反馈式引导是基于行为触发，而不是基于时间触发。用户可以清晰看到因自己的某“行为”继而触发引导的过程，此类提示是具有较强的情景性的，这样的反馈引导能起到较好的教学目的。

用户通过点击带有”暗示的红点”菜单继而触发引导的过程

还有一种常见的气泡式引导就是全局游览式引导，它可以完美捕捉用户的注意力的。新用户进入产品后，被带入全局游览，可以用来触发他们采取关键行动。这种方式也是专注于产品功能引导的最佳载体之一。许多产品会在首次用户登陆的时候就默认开始整个全局游览，而这样强制带用户进入的过程会分散用户注意力，并且给用户一种被剥夺控制力的不良体验，这种情况下多数用户会在烦躁的情绪下选择退出整个流程。因此设计建议不妨在开始教学前询问用户是否愿意现在就开始，或是以后再看。

我们可以在新用户成功注册后弹窗欢迎新用户的到来并且告诉用户接下去会开始一个全站功能引导的流程，但作为用户有权利选择跳过整个步骤，马上开始自己的探索。若用户选择开始整个流程，依然可以随时中断整个流程。设计使用气泡弹窗在一个蒙版上依次点亮每个一级菜单，对每一个板块进行功能介绍，包含功能文案甚至动画指引告诉用户这是什么，并且需要用户点击“下一步”来推进整个流程。但是整个全局游览过程非常长，且功能无先后和简易之分，可能造成用户忽视和遗忘一些真正有用的产品价值，其教学传播有效性不佳。

新手用户往往对于一些复杂功能的学习并不是迫在眉睫，类似这样冗长的 User Onboarding 会消磨用户的耐性，往往忽视了一些现在看来无关紧要但在未来却可能与他们想要的高度相关的重要内容。因此设计建议在用户主动退出后全局游览后，依然有入口重新唤起整个流程，确保用户在他们真的需要该功能的时候可以更容易的获得帮助。

4. 场景任务引导

「预加载任务」用户进入产品后，自动为用户创建了一些和产品流程相关的任务，而不是留给用户一个空页面。

注意：强流程单一角色的可以将任务排序展示，非强流程且多角色的可以选择无序卡片式展示

在引导的同时突出了产品的特色，借用本身的形态让用户沉浸在产品的真实场景中去学习，在后续产品的使用中上手速度更快。通过数据，访谈等形式梳理用户画像，这里主要是区分出新手用户，中级用户和专家用户，了解不同用户的使用诉求；梳理用户任务，构建用户任务地图，这里需要根据第一步骤的用户类型建立关联，按照用户类型划分任务，就算同一个任务，不同用户类型的操作也存在差异。

5. 空状态引导

空状态页面从来都不应该是空的，它应该作为用户引导流程的一个起点，整个产品体验的重要一环而存在，推动用户前进，是你的产品服务的重要入口。

商品管理页面的空状态引导设计，突出三种添加商品的方式，引导用户操作图片

用户添加过商品后的界面，以展示数据为主图片

二、更新预告 如何建立面向用户的产品迭代 SOP？如果是 SaaS 类的产品，往往在发布新功能/改版前至少一个月在产品内明显地展示出更新预告，并且通过监测得知多少比例的用户查看过，有效的预告不仅能够缓解用户在新改版/功能上线后的的陌生感与不安全感，同时也能让用户感受到尊重。甚至很多产品为了给用户适应缓冲期，在新改版的后台增加了返回到旧版界面的入口，一方面可以通过此入口直观地了解到用户对新版本的接受度，另一方面让用户能够在有安全感的基础上慢慢适应，从而提升改版后的用户满意度。

对于非 SaaS 的后台产品，客户一般都是中大型企业，使用的后台产品往往会有中或高度定制，面对这样的客户产品发布新功能或者要进行改版都是非常谨慎的，就算产品本身是敏捷开发快速迭代的，但是发版的频率可不能高频，一点小的改动都有可能对客户的业务产生影响，因此产品及开发人员需充分评估该功能可能造成的不同影响，充分告知客户，并且在产品功能规划之时，就要与客户沟通清楚。

三、帮助提示 1. 文字提示

强提示-影响任务操作效、进程、结果的提示应该常驻在页面上，预防错误，确保用户能根据提示正确完成任务操作；弱提示-不影响主线任务，对内容进行扩充解释，需要用户主动触发。

正如宜家对于顾客动线的设计，我们需要在合适的地方给予合适的指引，让用户流畅而顺利的完成任务，切记 Steven krug 的准则“省略多余的文字—让每个页面的所要传递的信息被突出，降低视觉噪点，减少对用户判断及操作的干扰”，用户需要的是恰到好处的帮助。此时可以通过预设好的埋点获得数据并进行分析，充分掌握用户行为，通过数据驱动进行帮助体系的优化。

2. 消息提示

全局消息提示常见的有两种展示方式，一种是置于页面的顶部，另一种是浮层展示，并通过不同的消息颜色向用户传递信息的性质。例如：蓝色、灰色代表消息通知；绿色代表成功，红色代表错误，橙色代表警示等。产品及时对用户的操作进行反馈，能够帮助用户判断下一步操作该如何进行。

3. 模态弹窗提示

使用模态弹窗提示的目的是希望用户聚焦于此内容，会打断用户的当前操作，比如当当用户操作完成时，出现模态弹窗的提示，基本是由于该操作大多为不可逆的操作（类似删除、关闭且不可再启用或是提交不可撤回）。

4. 标记提示

常见的标记：红点提示、数字气泡，这些标记往往会出现在图标或按钮的右上角，表示内容更新或有未处理的信息，此类提示符合绝大部分用户认知。红点提示更弱，数字气泡会给用户带来更大的心理压力，所以要控制使用场景，切勿滥用，同时需注意控制数字显示的长度。

帮助提示的交互形式多种多样，需按照场景配合使用。比如常见的错误校验，在用户输入、提交表单的时候，会进行错误校验，此时表单对应位置会出现报错，其文案内容应明确指引用户纠正内容，此时会使用强文字提示，同时配合消息提示。

四、帮助中心 帮助中心，作为 2B 产品的标配，会涵盖常见问题、搜索、新手教程（视频或文档）、版本更新、使用手册的下载、直播课、社区等等，通过各种形式培养用户解决问题的主动性，并且让用户能够得到相应的帮助。注意展示结构清晰，应该与产品本身功能模块相对应，支持关键字搜索，文档应图文并茂或结合操作演示视频，文档的措辞统一规范，且通俗易懂，专业词汇要有名词解释。

当用户未找到解决方案时，能够寻求其他方式解决，比如在线客服、智能客服、客服热线等。

帮助中心并不是整理出一套文档放在网上就能帮助用户解决问题，需要根据用户画像预设用户使用过程中会遇到的问题，给出行之有效的解决方案及操作步骤，同时随着产品的发展，帮助中心的内容也要同步的去迭代更新。

五、实时支持 实时支持可分为：AI 智能客服 、客服热线/在线客服、24 小时客户支持团队

SpeedShop POS 产品中的智能客服

智能客服通常悬浮在界面右侧，通过加入品牌形象 IP、情感化设计来提升用户体验，建立产品品牌形象。

传统的人工客服培训成本高，因此目前大多采用智能客服+人工客服的形式，先由智能客服解决七八成的共性问题，其他无法解决的问题再转到人工客服，这样能够精简客服团队，提高效率和降低成本；如果是大企业客户，还会有一支专属团队 24 小时待命，为客户的每一步发展提供帮助。

写在最后 从用户和场景构建多维帮助系统； 帮助系统不是指特定的帮助方式，只要能够帮助用户理解和认知产品理念与操作的，都是这个系统的组成部分； 构建怎样的多维帮助体系，需要结合公司现状、成本和产品特点考虑。

8000字干货！B端用户「帮助体系」搭建指南 阅读前须知： 文章有点偏学术性的设计课题研究范畴，所以可能读起来可能会有一点晦涩。

阅读文章 >

欢迎关注作者 微信 公众号：「Gtech UED」

编者按：交互设计改版如何从零开始？本文从什么是交互设计改版，交互设计改版的5个步骤，帮你快速掌握交互设计改版方法。更多改版教程：如何系统化的思考设计改版？

编者按：交互设计改版如何从零开始？本文从什么是交互设计改版，交互设计改版的5个步骤，帮你快速掌握交互设计改版方法。

更多改版教程：

如何系统化的思考设计改版？我总结了这个流程！ 最近有小伙伴问我，设计改版时候要怎么启动，该怎么思考？

阅读文章 >

悦姐，最近遇到一个问题：产品改版了，但用户普遍还是更认可老版本，怎么办？到底该怎么进行 设计改版 ？

首先要说一下，设计改版之后用户更认可老版是一种非常常见的情况，先莫惊慌。借用俞军老师的话：用户价值=新体验-旧体验-切换成本。改版初期，因为改变了用户习惯，切换成本是非常高的，需要多观测一段时间的用户反馈和数据表现，才能够对改版结果下定论。

今天呢，我再向大家介绍一下 交互设计 改版的操作流程。

一、What | 什么是交互设计改版？ 交互设计改版，这种说法在行业里很少见，从用户体验 5 要素来看：

图 1 设计迭代的原因

交互设计师的核心工作主要是在结构层和框架层，位于中间层次。

如果产品定位、功能发生变化，配套的也会进行交互及视觉的调整，这种自底向上的改版方式，我们称之为产品改版，或者是品牌升级。

如果产品定位、功能几乎不变，通过结构层和框架层的改变来提升产品体验、操作效率或者其他核心指标，我们称之为交互改版。（本次我们就聚焦在这一层次来展开介绍）

如果产品交互几乎不变，通过改变视觉风格来顺应或引领行业设计趋势或用户偏好，我们称之为视觉改版。

在实际工作中，如果产品定位、功能不发生大的变化，产品整体的信息架构基本上是不会变的，所以交互设计师日常所做的交互设计改版（提案），通常只是单独的功能或者核心界面的改版，比如售后链路优化、短视频拍摄功能改版（结构层+框架层，单个功能全链路设计优化），首页改版、商详页改版（框架层：页面布局优化）等。

二、How | 如何进行交互设计改版？ 回到我们之前做设计提案的思路：

图 2 设计提案的整体思路

研究阶段：做正确的设计；

设计阶段：正确地做设计；

验证阶段：验证设计的正确性；

设计是解决问题的过程，所以我沿袭设计提案的思路，将交互设计改版总结成五大步骤：

图 3 交互设计改版的步骤

1. 确定设计目标

在做设计改版之前，重要的不是设计方案，而是设计的目标：到底希望通过改版达成什么目标。

目标和方向正确了，才有可能到达终点，否则只会南辕北辙。

设计改版相对日常需求，是个“劳民伤财”的事，资源消耗大，周期长。做设计改版需要有充足的理由和价值。

设计师日常多以承接需求/解决问题为主，真正要自己发起设计改版，很多设计师往往找不到方向，这里我结合过往经验，给大家三个方向作为参考：

产品战略强相关 业务目标强相关 体验价值强相关 如果不满足这三点，别说改版之后用户不买账，项目团队也很可能不买账，整个方案只能束之高阁，白白浪费自己的时间和精力。

如果设计目标/方向满足这些条件，建议设计师在开始之前就和业务方同步确认，确认方向的可行性和项目的支持力度，甚至可以让产品经理协助提供相应的数据或功能决策，保证自己的方案在一开始就是众望所归的。

2. 定位设计问题

结合目标，拆解现状，找到设计现状中存在的问题和可优化的设计点。如何定位设计问题，在交互小课堂前期的课程中我们做过总结：

图 4 如何定位体验问题

这里没有什么捷径，要想能定位到核心问题，需要按照我们设计分析的维度：设计自查、数据分析、用户分析、竞品分析 4 大维度，按部就班的一点点去体验、对比、思考，将所有感觉有体验问题的地方一一洞察并记录下来。

这一通操作下来，事无巨细，发现的问题往往特别多，这个时候，我们可以借助数据可视化地图或者用户体验地图，将问题可视化，聚焦关键问题，也让项目成员更容易理解和接受问题，认可问题改进的必要性。

图 5 将体验问题可视化

关于用户体验地图的教程：

学会这5个关键点，产出一张完整清晰的用户体验地图！ 前言 1. 什么是用户体验地图？

阅读文章 >

设计问题梳理完毕后，建议跟产品经理一起明确哪些问题是可以解决的，聚焦需要解决的高优问题，开始制定设计策略。

3. 制定设计策略

明确了设计问题，但我们并不能本着把问题一一解决的方式来达成目标。

爱因斯坦说，我们需要回到问题发生的层面了解问题，但不能寄希望于在问题发生的层面就解决问题，因为问题的解决往往在更高的层面上。

所以我们可以借鉴前人的智慧，在成熟的方法论的指导下，补充我们缺失的思考维度和设计策略，来更加全方位的达成目标。

图 6 常见设计策略参考

这要求大家身处任何一个行业，都需要关注其行业动态，研究头部企业的设计方法和理论，学以致用，积累沉淀更加符合自己业务的设计方法论。

4. 完善设计方案

这里可以借鉴之前之前《一个公式教你搞定场景化设计》和《如何在交互细节中体现专业性》两篇文章中提到的核心要点：

用一个公式，从3个方面教你搞定场景化设计 之前我们讲了用户画像，让大家可以通过构建用户画像，去深入了解用户的行为、态度、痛点和需求。

阅读文章 >

如何在交互细节中体现专业性？我归纳了4个层次！ 如何判断一个交互作品的专业性？

阅读文章 >

图 7 场景化设计要点

通过为不同用户提供不同的内容/服务，或者在不同的时间、地点，为不同用户提供不同的选择，或者基于用户前置的行为，当下的行为、设备当前的状态为用户提供更适合的选项，保证用户达成目标的同时，认知成本更低、操作成本更低，情感体验更愉悦。

图 8 交互细节专业性的三个层次

通过提升交互设计方案的完备性、精准性和直观性，让项目成员更容易理解并认同设计方案，减少内部阅读和沟通成本，共同完成并推进方案的落地。

5. 验证设计方案

验证设计方案从低成本到高成本有 3 种方式：

走廊测试：直接在公司或者用户出没的地方守株待兔，逮住用户直接让用户使用 demo 并询问用户对设计方案的看法，发现问题持续迭代。 可用性测试：按要求筛选合适的典型用户，设计测试任务，邀请用户按照测试大纲，循序渐进地完成测试任务，发现问题持续迭代。 线上 AB 测试：开发两套不同的设计方案，灰度上线，观察不同方案的用户使用行为数据，发现问题持续迭代。 小结一下，从流程上讲，进行交互设计改版就这样五个步骤：

图 9 交互设计改版的步骤

确定设计目标：确保其与产品战略、业务目标、体验价值强相关； 定位设计问题：从设计走查、用户调研、数据分析、竞品分析 4 大维度全面梳理体验问题； 制定设计策略：借鉴行业成熟的设计方法论，补充缺失的思考维度，制定全面的设计策略； 完善设计方案：通过场景化设计和设计细节迭代，完善设计方案； 验证设计方案：通过走廊测试、可用性测试、线上 AB 测试等方法验证方案的合理性。 但这 5 个步骤并不是线性进行，一次性结束的，当设计验证以后，发现 2/3/4 哪个环节存在问题，就需要回到哪个环节，重新思考并迭代方案，一个成功的改版往往会伴随好几轮的细节迭代优化才能取得最优的改版效果，所以大家千万不要看到第一轮数据不符合预期就马上放弃，而是要针对具体问题有针对性的进行迭代，以让改版的价值最大化。

好了，交互设计改版到这里就结束了。

更多改版案例：

如何进行体系化大改版？京东 APP 11.0 深度解读！ 在受到不确定性扰动的外部环境下，今年的 APP11.0 升级格外不同。

阅读文章 >

欢迎关注作者微信公众号：「悦姐聊设计」

编者按：B端产品较为复杂，如何帮助用户快速上手，提高使用体验？本文用5个章节，帮你学会构建B端产品的多维帮助体系。用户体验设计的入门书籍 Steven krug 的《点石成金》想必大家都看过，书中提到如何提升用户的好感度：不要让用户思考—让产品简易明了；尽量减少操作步骤—如果步骤无法缩减，那请确保每个步骤都是无需...

编者按：B端产品较为复杂，如何帮助用户快速上手，提高使用体验？本文用5个章节，帮你学会构建B端产品的多维 帮助体系 。

用户体验设计的入门书籍 Steven krug 的《点石成金》想必大家都看过，书中提到如何提升用户的好感度：

不要让用户思考—让产品简易明了； 尽量减少操作步骤—如果步骤无法缩减，那请确保每个步骤都是无需思考、明确无误的选择； 省略多余的文字—让每个页面的所要传递的信息被突出，降低视觉噪点，减少对用户判断及操作的干扰； 必要的帮助和支持。

当然，还有尼尔森的十大可用性原则、格式塔原理（对于表达页面信息主次关系、布局设计很有帮助）等等，都能运用在后台产品的用户体验设计上。

用超多案例，帮你掌握尼尔森十大可用性原则 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。

阅读文章 >

近万字干货！带你全面了解格式塔原则 好的设计师理解心理学在视觉感知中的强大作用。

阅读文章 >

可能有人会问：“如果是 2B 的后台产品，产品体量大，用户角色多样，使用场景及业务流程复杂交错，这时候这些准则还管用吗？” 自然是有用的，虽然对 2B 的产品用户定位是具有专业知识的公司员工，不同的角色往往对应不同的工种，但是随着数字化产品的不断发展，人们对于后台产品的要求以及认知都是在不断提升的，公司希望员工能提升工作效率、降低用人成本，所以 B 端产品的体验近些年逐渐被重视起来，公司希望通过将不同的流程标准化,并且不断优化操作链路，从而降本增效。

影响人们选择使用哪款 B 端产品的因素有哪些？—— 主要有产品定价、销售团队能力、产品功能完善度、产品营销能力、产品知名度、企业需求、SaaS/独立部署等等。这里提到的企业需求，既指由企业业务类型、工作流程所产生的对产品的功能需求，也指企业对于希望利用产品来达到“赚钱”（降本增效、资源整合）的需求。那么如何提升B端产品的使用效率呢？建立一个能够自我运行的帮助体系就非常的重要了，你需要让产品自我解释，当用户在使用上遇到困难时，立即给予解答或者引导。

不管是 C 端还是 B 端，最终与产品进行交互的都是“人”这个个体，还是能通过“以人为本的设计理念”为根基，去进行 2B 后台产品的体验设计。

好的帮助体系不仅能够帮助用户快速有效地完成任务，还能够降低产品的培训成本，让用户对品牌产生信任感。将产品的隐藏特性、新特性、重要特性传递给用户，提高用户活跃度；将新手用户转化成中间用户或者专家用户。

接下来我们就进入本篇文章的正题：为 B 端产品建立多维的帮助体系

多维帮助是从不同使用场景和不同用户群体出发，满足不同用户不同场景下的帮助需要。产品用户体量较大且产品功能复杂的时候，帮助系统能够给用户更多的支撑。但要知道，有些用户可能会需要完整详细的帮助系统，但绝大多数用户是不会使用这个系统的，作为用户体验设计，我们也期望那些没有足够耐心甚至使用频率较低的用户得到帮助支持。如果你从事的 B 端业务，怎么让新手用户能尽快尽可能轻松过渡到熟练用户是一个值得思考的问题。

「宜家式客户体验」不知大家是否有耳闻，家具家居用品是刚需低频消费品，但是人们总是三番五次的跑去逛街式消费，这究竟是为什么？小编第一次进入宜家时，明显感觉整个商场流程清晰，各种指示牌，所需的用品都是放在触手可及，一眼可见的位置。逛宜家一般流程是自上而下的，先从顶层的样板间浏览，逛完出口是餐厅，或者向下走是零售及提货区，到一楼是结账，结账区之外就进口食品区+小食餐饮区。宜家的动线设计，没有人为的引导，而是通过路线设计、指示牌引导客户浏览整个商场，在样板间和零售区都设置了捷径通道，针对目的性明确的客户就能节省时间快速到达目的地。

网络世界都是现实生活的映射，所以如果把这种动线设计运用到产品的体验设计上，我们把后台产品想象成宜家商场，用户可以分为新手用户（免费体验产品），就像是漫无目的闲逛的，以及目的性明确的老用户。针对新手用户我们可以设置不同的引导，去帮助他们完成一定的任务，有效的向用户展示产品价值，从而提升转化与留存；针对老用户，我们可以通过用户在产品上留下的“痕迹”，以及用研手段，去提升产品的体验设计，并挖掘新的需求，通过新功能的帮助引导将产品的特性传递给用户，提升老用户粘性及活跃度。

针对 B 端产品的帮助体系我们可以分为：新手引导、更新预告、帮助提示、帮助中心、实时支持。

一、新手引导 新手引导不仅仅指新用户，发布产品新功能对于留存用户来说，此时也亦成为了新手。SaaS 类的 B 端产品，用户往往会通过免费体验期的使用感受来决定是否继续/付费使用，如果用户在登录你的产品后，到处摸索试图搞清楚操作方法与步骤，试图完成一项任务却失败，那这个用户多数就会流失了，你把 产品设计 的像迷宫一样，进去之后用户就找不到明确的道路走到目的地。

1. 交互式弹窗引导

最佳适用场景：用户首次登录的时候或者是有较大版本的更新。

在用户使用产品前先给用户营造好产品的基调和氛围，宣传产品功能和亮点或告知用户最核心的操作方式。

2. 动画视频引导

最佳适用场景：专注于用户行为和任务的引导。

动画、视频、GIF 的共同优点是非常直观并且具有吸引力。用户可以根据动态演示，很快地理解产品功能，特别是一些强调用户行为的功能。但这类引导方式内容不宜过长，尤其是动画和 GIF 图这类用户无法自己控制演示进度的展示方式，建议控制在 10 秒以内,而视频也应控制在 3 分钟以内。传递的信息量太大会导致用户失去耐心的同时也不利于用户记忆。

3. 气泡提示引导

最佳适用场景：告知用户有新功能上线、引导用户使用核心功能，或告知用户一些隐藏菜单的内容。

采取气泡提示的情境反馈式引导是基于行为触发，而不是基于时间触发。用户可以清晰看到因自己的某“行为”继而触发引导的过程，此类提示是具有较强的情景性的，这样的反馈引导能起到较好的教学目的。

用户通过点击带有”暗示的红点”菜单继而触发引导的过程

还有一种常见的气泡式引导就是全局游览式引导，它可以完美捕捉用户的注意力的。新用户进入产品后，被带入全局游览，可以用来触发他们采取关键行动。这种方式也是专注于产品功能引导的最佳载体之一。许多产品会在首次用户登陆的时候就默认开始整个全局游览，而这样强制带用户进入的过程会分散用户注意力，并且给用户一种被剥夺控制力的不良体验，这种情况下多数用户会在烦躁的情绪下选择退出整个流程。因此设计建议不妨在开始教学前询问用户是否愿意现在就开始，或是以后再看。

我们可以在新用户成功注册后弹窗欢迎新用户的到来并且告诉用户接下去会开始一个全站功能引导的流程，但作为用户有权利选择跳过整个步骤，马上开始自己的探索。若用户选择开始整个流程，依然可以随时中断整个流程。设计使用气泡弹窗在一个蒙版上依次点亮每个一级菜单，对每一个板块进行功能介绍，包含功能文案甚至动画指引告诉用户这是什么，并且需要用户点击“下一步”来推进整个流程。但是整个全局游览过程非常长，且功能无先后和简易之分，可能造成用户忽视和遗忘一些真正有用的产品价值，其教学传播有效性不佳。

新手用户往往对于一些复杂功能的学习并不是迫在眉睫，类似这样冗长的 User Onboarding 会消磨用户的耐性，往往忽视了一些现在看来无关紧要但在未来却可能与他们想要的高度相关的重要内容。因此设计建议在用户主动退出后全局游览后，依然有入口重新唤起整个流程，确保用户在他们真的需要该功能的时候可以更容易的获得帮助。

4. 场景任务引导

「预加载任务」用户进入产品后，自动为用户创建了一些和产品流程相关的任务，而不是留给用户一个空页面。

注意：强流程单一角色的可以将任务排序展示，非强流程且多角色的可以选择无序卡片式展示

在引导的同时突出了产品的特色，借用本身的形态让用户沉浸在产品的真实场景中去学习，在后续产品的使用中上手速度更快。通过数据，访谈等形式梳理用户画像，这里主要是区分出新手用户，中级用户和专家用户，了解不同用户的使用诉求；梳理用户任务，构建用户任务地图，这里需要根据第一步骤的用户类型建立关联，按照用户类型划分任务，就算同一个任务，不同用户类型的操作也存在差异。

5. 空状态引导

空状态页面从来都不应该是空的，它应该作为用户引导流程的一个起点，整个产品体验的重要一环而存在，推动用户前进，是你的产品服务的重要入口。

商品管理页面的空状态引导设计，突出三种添加商品的方式，引导用户操作图片

用户添加过商品后的界面，以展示数据为主图片

二、更新预告 如何建立面向用户的产品迭代 SOP？如果是 SaaS 类的产品，往往在发布新功能/改版前至少一个月在产品内明显地展示出更新预告，并且通过监测得知多少比例的用户查看过，有效的预告不仅能够缓解用户在新改版/功能上线后的的陌生感与不安全感，同时也能让用户感受到尊重。甚至很多产品为了给用户适应缓冲期，在新改版的后台增加了返回到旧版界面的入口，一方面可以通过此入口直观地了解到用户对新版本的接受度，另一方面让用户能够在有安全感的基础上慢慢适应，从而提升改版后的用户满意度。

对于非 SaaS 的后台产品，客户一般都是中大型企业，使用的后台产品往往会有中或高度定制，面对这样的客户产品发布新功能或者要进行改版都是非常谨慎的，就算产品本身是敏捷开发快速迭代的，但是发版的频率可不能高频，一点小的改动都有可能对客户的业务产生影响，因此产品及开发人员需充分评估该功能可能造成的不同影响，充分告知客户，并且在产品功能规划之时，就要与客户沟通清楚。

三、帮助提示 1. 文字提示

强提示-影响任务操作效、进程、结果的提示应该常驻在页面上，预防错误，确保用户能根据提示正确完成任务操作；弱提示-不影响主线任务，对内容进行扩充解释，需要用户主动触发。

正如宜家对于顾客动线的设计，我们需要在合适的地方给予合适的指引，让用户流畅而顺利的完成任务，切记 Steven krug 的准则“省略多余的文字—让每个页面的所要传递的信息被突出，降低视觉噪点，减少对用户判断及操作的干扰”，用户需要的是恰到好处的帮助。此时可以通过预设好的埋点获得数据并进行分析，充分掌握用户行为，通过数据驱动进行帮助体系的优化。

2. 消息提示

全局消息提示常见的有两种展示方式，一种是置于页面的顶部，另一种是浮层展示，并通过不同的消息颜色向用户传递信息的性质。例如：蓝色、灰色代表消息通知；绿色代表成功，红色代表错误，橙色代表警示等。产品及时对用户的操作进行反馈，能够帮助用户判断下一步操作该如何进行。

3. 模态弹窗提示

使用模态弹窗提示的目的是希望用户聚焦于此内容，会打断用户的当前操作，比如当当用户操作完成时，出现模态弹窗的提示，基本是由于该操作大多为不可逆的操作（类似删除、关闭且不可再启用或是提交不可撤回）。

4. 标记提示

常见的标记：红点提示、数字气泡，这些标记往往会出现在图标或按钮的右上角，表示内容更新或有未处理的信息，此类提示符合绝大部分用户认知。红点提示更弱，数字气泡会给用户带来更大的心理压力，所以要控制使用场景，切勿滥用，同时需注意控制数字显示的长度。

帮助提示的交互形式多种多样，需按照场景配合使用。比如常见的错误校验，在用户输入、提交表单的时候，会进行错误校验，此时表单对应位置会出现报错，其文案内容应明确指引用户纠正内容，此时会使用强文字提示，同时配合消息提示。

四、帮助中心 帮助中心，作为 2B 产品的标配，会涵盖常见问题、搜索、新手教程（视频或文档）、版本更新、使用手册的下载、直播课、社区等等，通过各种形式培养用户解决问题的主动性，并且让用户能够得到相应的帮助。注意展示结构清晰，应该与产品本身功能模块相对应，支持关键字搜索，文档应图文并茂或结合操作演示视频，文档的措辞统一规范，且通俗易懂，专业词汇要有名词解释。

当用户未找到解决方案时，能够寻求其他方式解决，比如在线客服、智能客服、客服热线等。

帮助中心并不是整理出一套文档放在网上就能帮助用户解决问题，需要根据用户画像预设用户使用过程中会遇到的问题，给出行之有效的解决方案及操作步骤，同时随着产品的发展，帮助中心的内容也要同步的去迭代更新。

五、实时支持 实时支持可分为：AI 智能客服 、客服热线/在线客服、24 小时客户支持团队

SpeedShop POS 产品中的智能客服

智能客服通常悬浮在界面右侧，通过加入品牌形象 IP、情感化设计来提升用户体验，建立产品品牌形象。

传统的人工客服培训成本高，因此目前大多采用智能客服+人工客服的形式，先由智能客服解决七八成的共性问题，其他无法解决的问题再转到人工客服，这样能够精简客服团队，提高效率和降低成本；如果是大企业客户，还会有一支专属团队 24 小时待命，为客户的每一步发展提供帮助。

写在最后 从用户和场景构建多维帮助系统； 帮助系统不是指特定的帮助方式，只要能够帮助用户理解和认知产品理念与操作的，都是这个系统的组成部分； 构建怎样的多维帮助体系，需要结合公司现状、成本和产品特点考虑。

8000字干货！B端用户「帮助体系」搭建指南 阅读前须知： 文章有点偏学术性的设计课题研究范畴，所以可能读起来可能会有一点晦涩。

阅读文章 >

欢迎关注作者 微信 公众号：「Gtech UED」

编者按：交互设计改版如何从零开始？本文从什么是交互设计改版，交互设计改版的5个步骤，帮你快速掌握交互设计改版方法。更多改版教程：如何系统化的思考设计改版？

编者按：交互设计改版如何从零开始？本文从什么是交互设计改版，交互设计改版的5个步骤，帮你快速掌握交互设计改版方法。

更多改版教程：

如何系统化的思考设计改版？我总结了这个流程！ 最近有小伙伴问我，设计改版时候要怎么启动，该怎么思考？

阅读文章 >

悦姐，最近遇到一个问题：产品改版了，但用户普遍还是更认可老版本，怎么办？到底该怎么进行 设计改版 ？

首先要说一下，设计改版之后用户更认可老版是一种非常常见的情况，先莫惊慌。借用俞军老师的话：用户价值=新体验-旧体验-切换成本。改版初期，因为改变了用户习惯，切换成本是非常高的，需要多观测一段时间的用户反馈和数据表现，才能够对改版结果下定论。

今天呢，我再向大家介绍一下 交互设计 改版的操作流程。

一、What | 什么是交互设计改版？ 交互设计改版，这种说法在行业里很少见，从用户体验 5 要素来看：

图 1 设计迭代的原因

交互设计师的核心工作主要是在结构层和框架层，位于中间层次。

如果产品定位、功能发生变化，配套的也会进行交互及视觉的调整，这种自底向上的改版方式，我们称之为产品改版，或者是品牌升级。

如果产品定位、功能几乎不变，通过结构层和框架层的改变来提升产品体验、操作效率或者其他核心指标，我们称之为交互改版。（本次我们就聚焦在这一层次来展开介绍）

如果产品交互几乎不变，通过改变视觉风格来顺应或引领行业设计趋势或用户偏好，我们称之为视觉改版。

在实际工作中，如果产品定位、功能不发生大的变化，产品整体的信息架构基本上是不会变的，所以交互设计师日常所做的交互设计改版（提案），通常只是单独的功能或者核心界面的改版，比如售后链路优化、短视频拍摄功能改版（结构层+框架层，单个功能全链路设计优化），首页改版、商详页改版（框架层：页面布局优化）等。

二、How | 如何进行交互设计改版？ 回到我们之前做设计提案的思路：

图 2 设计提案的整体思路

研究阶段：做正确的设计；

设计阶段：正确地做设计；

验证阶段：验证设计的正确性；

设计是解决问题的过程，所以我沿袭设计提案的思路，将交互设计改版总结成五大步骤：

图 3 交互设计改版的步骤

1. 确定设计目标

在做设计改版之前，重要的不是设计方案，而是设计的目标：到底希望通过改版达成什么目标。

目标和方向正确了，才有可能到达终点，否则只会南辕北辙。

设计改版相对日常需求，是个“劳民伤财”的事，资源消耗大，周期长。做设计改版需要有充足的理由和价值。

设计师日常多以承接需求/解决问题为主，真正要自己发起设计改版，很多设计师往往找不到方向，这里我结合过往经验，给大家三个方向作为参考：

产品战略强相关 业务目标强相关 体验价值强相关 如果不满足这三点，别说改版之后用户不买账，项目团队也很可能不买账，整个方案只能束之高阁，白白浪费自己的时间和精力。

如果设计目标/方向满足这些条件，建议设计师在开始之前就和业务方同步确认，确认方向的可行性和项目的支持力度，甚至可以让产品经理协助提供相应的数据或功能决策，保证自己的方案在一开始就是众望所归的。

2. 定位设计问题

结合目标，拆解现状，找到设计现状中存在的问题和可优化的设计点。如何定位设计问题，在交互小课堂前期的课程中我们做过总结：

图 4 如何定位体验问题

这里没有什么捷径，要想能定位到核心问题，需要按照我们设计分析的维度：设计自查、数据分析、用户分析、竞品分析 4 大维度，按部就班的一点点去体验、对比、思考，将所有感觉有体验问题的地方一一洞察并记录下来。

这一通操作下来，事无巨细，发现的问题往往特别多，这个时候，我们可以借助数据可视化地图或者用户体验地图，将问题可视化，聚焦关键问题，也让项目成员更容易理解和接受问题，认可问题改进的必要性。

图 5 将体验问题可视化

关于用户体验地图的教程：

学会这5个关键点，产出一张完整清晰的用户体验地图！ 前言 1. 什么是用户体验地图？

阅读文章 >

设计问题梳理完毕后，建议跟产品经理一起明确哪些问题是可以解决的，聚焦需要解决的高优问题，开始制定设计策略。

3. 制定设计策略

明确了设计问题，但我们并不能本着把问题一一解决的方式来达成目标。

爱因斯坦说，我们需要回到问题发生的层面了解问题，但不能寄希望于在问题发生的层面就解决问题，因为问题的解决往往在更高的层面上。

所以我们可以借鉴前人的智慧，在成熟的方法论的指导下，补充我们缺失的思考维度和设计策略，来更加全方位的达成目标。

图 6 常见设计策略参考

这要求大家身处任何一个行业，都需要关注其行业动态，研究头部企业的设计方法和理论，学以致用，积累沉淀更加符合自己业务的设计方法论。

4. 完善设计方案

这里可以借鉴之前之前《一个公式教你搞定场景化设计》和《如何在交互细节中体现专业性》两篇文章中提到的核心要点：

用一个公式，从3个方面教你搞定场景化设计 之前我们讲了用户画像，让大家可以通过构建用户画像，去深入了解用户的行为、态度、痛点和需求。

阅读文章 >

如何在交互细节中体现专业性？我归纳了4个层次！ 如何判断一个交互作品的专业性？

阅读文章 >

图 7 场景化设计要点

通过为不同用户提供不同的内容/服务，或者在不同的时间、地点，为不同用户提供不同的选择，或者基于用户前置的行为，当下的行为、设备当前的状态为用户提供更适合的选项，保证用户达成目标的同时，认知成本更低、操作成本更低，情感体验更愉悦。

图 8 交互细节专业性的三个层次

通过提升交互设计方案的完备性、精准性和直观性，让项目成员更容易理解并认同设计方案，减少内部阅读和沟通成本，共同完成并推进方案的落地。

5. 验证设计方案

验证设计方案从低成本到高成本有 3 种方式：

走廊测试：直接在公司或者用户出没的地方守株待兔，逮住用户直接让用户使用 demo 并询问用户对设计方案的看法，发现问题持续迭代。 可用性测试：按要求筛选合适的典型用户，设计测试任务，邀请用户按照测试大纲，循序渐进地完成测试任务，发现问题持续迭代。 线上 AB 测试：开发两套不同的设计方案，灰度上线，观察不同方案的用户使用行为数据，发现问题持续迭代。 小结一下，从流程上讲，进行交互设计改版就这样五个步骤：

图 9 交互设计改版的步骤

确定设计目标：确保其与产品战略、业务目标、体验价值强相关； 定位设计问题：从设计走查、用户调研、数据分析、竞品分析 4 大维度全面梳理体验问题； 制定设计策略：借鉴行业成熟的设计方法论，补充缺失的思考维度，制定全面的设计策略； 完善设计方案：通过场景化设计和设计细节迭代，完善设计方案； 验证设计方案：通过走廊测试、可用性测试、线上 AB 测试等方法验证方案的合理性。 但这 5 个步骤并不是线性进行，一次性结束的，当设计验证以后，发现 2/3/4 哪个环节存在问题，就需要回到哪个环节，重新思考并迭代方案，一个成功的改版往往会伴随好几轮的细节迭代优化才能取得最优的改版效果，所以大家千万不要看到第一轮数据不符合预期就马上放弃，而是要针对具体问题有针对性的进行迭代，以让改版的价值最大化。

好了，交互设计改版到这里就结束了。

更多改版案例：

如何进行体系化大改版？京东 APP 11.0 深度解读！ 在受到不确定性扰动的外部环境下，今年的 APP11.0 升级格外不同。

阅读文章 >

欢迎关注作者微信公众号：「悦姐聊设计」

有话直说，我觉得现在很有可能，B 端设计工作比较容易陷入以下 4 个误区：以偏概全的认知、理解和谈论 B 端设计不带入用户角色，飘在半空做设计盲目“B 端 C 化”，照搬 C 端的表现形式容忍简陋，认为“美”不重要不熟悉B端设计的先看这篇掌握基础：万字总结！B端产品设计基础思维与方法本文作者从 2015 年开始进...

有话直说，我觉得现在很有可能，B 端设计工作比较容易陷入以下 4 个误区：

以偏概全的认知、理解和谈论 B 端设计 不带入用户角色，飘在半空做设计 盲目“B 端 C 化”，照搬 C 端的表现形式 容忍简陋，认为“美”不重要 不熟悉 B端设计 的先看这篇掌握基础：

万字总结！B端产品设计基础思维与方法 本文作者从 2015 年开始进入 B 类产品的打造，前后几年时间进行了行业内容的探索，从概念产品的提出，到产品营收千万以上，从产品 1.0 的两三个功能到后续迭代二三十个功能的平台产品，沉淀了一些个人观点与经验，在此分享出来与大家讨论交流，希望能与大家有更多讨论。

阅读文章 >

误区 1. 以偏概全的认知、理解和谈论 B 端设计 “B 端设计”这个概念具体包含哪些产品类别呢？

B 端产品包括 OA、BI、ERP、WMS、CRM、TMS、电商分销系统、开发 API 管理系统、项目、企业内部协同工具、云计算 PAAS、统一认证中心（Passport）等等等等满足企业或组织业务需求的产品。

“B 端”是一个很大的很模糊的概念。比如教培机构做教师端的设计师小明与电商平台做商家端的设计师小花，他们所认知到的 B 端设计，天然存在很大的差异。如果小明和小花一起来聊 B 端设计应该怎么做，如果不花 1 个小时聊清楚场景，有可能说不到一块去。

10 年前也就是 2012 年的时候，我在惠普的 ES 软件服务部门为北京的几家大型通信公司提供企业级的软件服务。那时没有人讲“B 端设计”，我只知道我在为企业域管理类的 web 软件做 UI 设计，当时的行业归类叫做“IT 软件”。时至今日，我当时做的事情现在叫做“企业数字服务”，当时做的几个卖 license 的产品现在都叫做 Saas，而围绕这些事情做的设计工作，统一被叫做“B 端设计”；

2015 年的时候，我在百度的搜索用户体验中心为大搜的商业产品、运营产品体系做交互设计，那时也没有人讲“B 端设计”，大家想的是怎么为企业提供更好的服务体验，从企业那里赚到更多的钱。那时没有人讲“B 端 C 化”，我们在跟真实用户的接触中不断调整自己对新用户群体的认知，努力做到像蘑菇一样思考。

在后来移动互联网蓬勃发展的那几年中，大部分设计师都不想做 PC 端的事情，因为如果不会做 App，意味着找不到未来的工作。

回顾这十年来，不知道从什么时候起，“B 端设计”这个词像是一个越滚越大的雪球，盲目且粗暴的概括几乎所有不面向 C 端用户的所有设计工作。这样或许可以做一个简单的区分，把设计工作粗暴的分为差异巨大的 B 端设计和 C 端设计。但“B 端设计”这个分类方式和概念词汇，会给刚入行 B 端的设计师带来很多混淆和困扰。

所以建议：

不要笼统的去谈“B 端设计”，因为很有可能你、我、他接触到的“B 端”产品本身差异特别大； 选择 B 端深耕很好，同时还要进一步在“B 端”中找到适合自己的行业和赛道。 （PS：本文的观点也不一定对，因为笔者也没有 B 端的全局视野，谈论 B 端设计这个话题也无法避免自己的认知局限，所以笔者也有可能处在这个误区之中。）

误区 2. 不带入用户角色，飘在半空做设计 一个好的演员为了演好自己的角色，会花很长时间去体验这个角色所需要的真实生活，这样才能真实的进入角色。设计师在开始设计工作之前也需要做类似的准备，在可以把自己带入用户角色之后，才有可能做好具体的设计工作。

我在百度工作时做过一个客服系统沟通工具（百度商桥）的设计，在设计 B 端 IM 工作界面的时候，我们把客服人员自己的头像放的比较大，认为用户会把自己美美的头像放上去看着会舒服很多，并且作为设计师也会自然而然的觉得界面上有个圆形的头像会更好看。但后来真实用户给我们的反馈是他们每天的工作压力非常大，根本没时间、没心情处理自己的头像，并且自己的头像 C 端用户也没必要看到。

1. 因为接触用户困难就放弃接触用户

设计工作无论大小、无论 B 端 C 端，都应该按照“共情——定义——创想——原型——测试——改进”这样的流程来推进。设计思维的第一步就是用户共情。设计师区别于程序员和部分产品经理的最大不同，就是我们从用户角度出发思考问题。所以不能因为现在做B端接触到用户的难度变大了，就跳过这个环节、没见过真实用户就直接开始动手出图。

这是飘在半空中做设计，不接地气。

作为 B 端的设计师，不能只是对用户信息道听途说，没有一手经验，在日常的设计协作过程中也容易被别人牵着鼻子走。

2. 不面对真实用户，通过用户画像简单粗暴的理解用户

谈一谈你对你做的这个产品的用户的理解，是我在面试过程中经常会问到的问一个问题。及格的回答是人群画像，描述年龄、性别、收入、地域这几个基本属性；优秀的回答是就用户画像谈一下对用户人群的个人理解，并展开说明用户使用产品时的场景和痛点，有人还会提到 B 端决策者和使用者之间的不同。

用户是活生生的人，并不是几个数据的集合。只有一些人群画像的基本概念，没有具体面对面的接触过用户，就不能有效的与用户共情，只能按照自己的所谓设计逻辑来做设计。

作为 B 端的设计师，如果只能通过几个简单粗暴的用户属性数据来“想象”用户，是不能帮助我们完成设计工作的。

3. 不尊重用户习惯

B 端用户往往需要长时间沉浸使用产品，所以做任何改动需要充分尊重用户习惯，不能单方面的把自己认为好的设计强推给用户，这样的结果往往被骂个狗血喷头。

所以建议：

没有机会就创造机会，去用户的真实工作场景看看。采用实地观察法直观的感受用户的工作场景，运用自己的感官理解用户；把用户叫到公司来也可以，但还是没有实地到访更好； 保持跟用户沟通，尽可能高频率的与用户沟通，沟通形式无所谓，当面聊、电话聊、IM 打字聊都可以； 每天看用户反馈，了解用户在吐槽什么，为什么吐槽； 对于用户重度使用的 B 端产品，做任何改动都需要谨慎，不要轻易做改版。 误区 3. 盲目“B 端 C 化”，照搬 C 端的表现形式 我在上一篇文章《B 端 C 化，行得通吗》中有过探讨，“B 端 C 化”这个说法从几年前出现到现在，不知怎么，它从一个简单的概念慢慢演变成了一种“理念”，如果仅仅是一个概念可能还好，但如果作为理念来指导工作，就会出问题。在 产品设计 过程中盲目进行 B 端 C 化，就会容易进入一些误区。

越来越流行的B端C化行得通吗？来看高手的分析！ 用To C的方式去设计B端产品是否行得通？

阅读文章 >

1. 把工作重点放到表面化的视觉设计包装

你可以去做更情感化的、更炫酷的东西来做体验升级和产品包装，但那并不是核心设计问题；

尝试颠覆 B 端产品的刻板印象，进行更个性化、娱乐化、IP 化的设计尝试，企图通过一些新的形式让用户感受到产品的“新潮”和不同，这样的东西可能短期内可以博人眼球，但与用户的真实痛点没有关系，与 B 端产品的销售和复购没有关系

2. 盲目去表格化

认为表格是一种老套的过时形式，想用卡片之类的形式来代替所有表格。然而，表格实际上是大部分用户快速理解复杂信息的一种基础结构，盲目去表格化，进行卡片化设计，可能并不一定适合你的 B 端产品；

表格是对复杂的信息一种结构化的加工形式，是一种人类都可以快速理解和应用的概念模型。盲目去表格化，会让用户的理解成本变高、影响操作效率。

3. 模仿 C 端的方式建立 B 端的设计语言

B 端的设计语言不会与 C 端趋同，现在 B 端的设计系统已经有很多发展的较为成熟，B 端产品追求确定性、高效率、重操作，C 端产品鼓励用户探索、看留存、重浏览，B 端设计语言在用色、造型、布局等方面都与 C 端有明显差异。有可能趋同的是产品内的配图的视觉风格，B C 两端都会受到设计趋势的影响，这并不能理解为 B 端学习模仿了 C 端。

误区 4. 容忍简陋，认为美不重要 显而易见的是，现在外部环境的变化对 B 端客户体验提出了更高的要求。原来 B 端产品的基本要求只是功能跑通，现在 B 端设计比以往都要重视用户体验的打磨。

跑通功能只是勉强“能用”，就像人在没钱的时候只追求温饱就可以了，现在日子慢慢富裕了，人就会开始追求一点“优雅”。现在菜市场的卖菜大姐都会在闲暇的时候拍一条抖音，加美颜滤镜分享自己的工作。

在企业端，很多大型企业都开始注重“员工体验管理”工作，除了关心员工的业绩和 KPI，还会关心自己的员工在自己公司工作的开不开心。他们在为员工加码工作强度、抓牢工作效率的同时，还为员工准备可口的餐食、宽敞的茶水间、成排的按摩椅，以及更友好的办公系统。

好的企业即要效率，也要好的员工体验。

1. 效率和功能，与美并不矛盾

B 端的产品设计有一种实用的功能主义的基因，因为功能可以让客户买单。

迪特·拉姆斯也是功能主义的代表，但博朗的设计有他独特的审美风味。他在向世界表达自己的设计理念时也说过——好的设计是美的。产品的审美品质也是实用性的一部分，日常使用的器具影响着人们的生活环境和幸福感受。只有真正优秀的产品才能是美的。

B 端设计也要追求美，B 端设计的美与 C 端不同，它应该是克制的、弱风格化的。

2. 注重效率并不是忍受粗糙和简陋、丧失设计追求的借口。

虽然很多人不这么说，但他们的内心会认为效率就是 B 端设计的全部。

的确，效率是 B 端体验设计的核心问题，帮助用户更高效的完成任务是最重要的事情。但注重功能和效率并不是忍受粗糙和简陋、丧失设计追求的借口。

虽然也有不少优秀的 B 端产品设计，但相比 C 端，B 端产品的设计整体质量普遍较低，老旧的界面感受、超低的自用性、密密麻麻的功能和信息堆砌，这些都是设计师要解决的问题。那这么多问题是如何不断沉淀、累积到现在的呢？原因就是在过去的时间里大家对 B 端的体验设计不够重视，认为跑通功能就可以了。

作为设计师，一旦我们放弃了对美的追求，那么跟美相关的很多事情，比如优雅、情感、人性、品质、品牌气质、趣味性、创造力等等这些促使我们走上设计道路的初心和原动力也会离我们渐行渐远。放弃这些东西，只追求数据和效率，难道你可以拼得过比设计师更加业务专精的产品经理吗？

如果这么把自己玩几年，没准会把自己变成一台 AI，也说不定。

从用户体验角度，分析微信视频号的「双赞」设计 最近微信视频号上线了大拇指和爱心两个点赞，到底它们之前有何不同？

阅读文章 >

欢迎关注作者微信公众号：「柴林的设计笔记」

编者按：设计师应该学习哪些前端基础知识，才能和工程师顺畅沟通？本文用深入浅出的案例，帮你快速掌握基础的前端开发术语。在实际项目中，直至开发扣完最后一行代码之前，UI 所输出的视觉稿其实并不算是产品的最终形态。

编者按： 设计师 应该学习哪些前端基础知识，才能和工程师顺畅沟通？本文用深入浅出的案例，帮你快速掌握基础的 前端开发 术语。

在实际项目中，直至开发扣完最后一行代码之前，UI 所输出的视觉稿其实并不算是产品的最终形态。因此，设计-开发这一上下游的协作对你的视觉落地起着决定性的重要影响。

但是！由于工种本身的性质，我们和开发之间的沟通是个棘手又麻烦的历史遗留难题。

我们一方面厌恶那些“div”“margin”类的开发术语，另一方面又渴望开发能够意会我们的稿子，像复刻机一样完美得把它实现出来，但排除那些极少数本身有很好审美的开发外，这件事本身就是个可遇不可求的幻想。因此，理解一些开发术语和开发的工作流，对于设计-开发的协作效率的提升无疑是极为有效的。

想一想，从“这个和那个能不能分开一点“这种开发眼里极富乡土气息的白话到“两个字段的 margin 增加到 20”这种专业的逻辑语言，中间可以省下多少宝贵的时间啊让我们去充（xiao）电（sa）啊。

我知道你们不想去 W3school 吭哧吭哧学代码，所以我花了大量时间研究了它们，并主动请教了几位开发，再用极具想象力的方法带各位熟悉代码的世界、以及开发小哥的日常~各位读完之后，基本有能力解决 90%因为沟通产生的难题！

欧克，废话不多说，雷斯够！

更多基础教程：

写给设计师的前端指南：一小时搞懂 CSS 属性应用 这个系列会用所有人能看懂的讲解方式，帮助大家掌握 HTML 和 CSS 的基础。

阅读文章 >

一、Html、Css 和 JavaScript Html 是最基本的“骨架”代码，术语叫超文本标记语言。形象点儿说，这玩意儿主要是用来贴名牌的。我们的浏览器其实是个眼神和脾气都不太好的门卫大爷（原谅这个蹩脚的比喻），元素们只有添上他们独有的名牌，才能被它认出来并允许进入，大部分还得正反都贴。

比如，a、p和 img 就分别代表了链接、段落和图片的名牌。一旦有个家伙没贴，就立刻 OUT 出局。但是，他们懒啊，自己不想动，这时就轮到我们的正义使者——开发小哥闪亮登场了！

辛勤的开发小哥用神奇的 Html 语言，为每个懒货贴上属于他们自己的名牌，进入浏览器大闸的行为也就变得名正言顺。

左下图就是用 Html 贴上名牌（标签）的链接、段落和图片，右下图就是他们在浏览器中的反映。

但是，问题来了——

这些倒霉孩子实在是太杂太多了，成天四处乱跑杂乱无章，为了将他们进行管理和约束，开发小哥们就用 div 这类标签建立了一个个班级，按照设计师给出的视觉稿，把关系更相近、密切的元素们划分到一个班级去，从而实现对元素们的高效管理、收纳。

然后，开发小哥再根据视觉稿中的具体样式，用css（层叠样式表）来装扮这些元素。

首先在代码中加入