B端产品从0到1设计规范，看这篇就够了

B端产品从0到1设计规范，看这篇就够了
随着互联网的发展，现在B端业务的迅速发展，B端产品未来可期，很多设计师开始接触B端产品的设计，但在面对这个完全不懂的复杂的B端产品时，经常一头雾水，导致工作过程中时常会力不从心！
下面我根据自己工作中遇到的问题和相关解决方案，总结各路大咖的一些精髓以及我的一些想法，汇聚成相对比较全的关于B端产品的文章。

里面大致包含有“B端和C端的相同之处和不同处”以及“设计B端产品的思路和相关设计规范”，文章比较长，但耐心看完，会对刚接触B端的新手们有一定的帮助，能帮大伙提高效率，节约不少时间的。

目录：
1.什么是B端产品和C端产品
2.B端产品和C端产品的不同点
3.B端产品和C端产品的相同点
4.B端产品设计思路
5.B端产品设计规范
1. 什么是B端产品和C端产品 B端产品：B全称Business。

指商家、企业。

表示它主要是为企业或组织服务，解决他们的某类经营问题，实现他们的商业目的而设计的系统型软件、工具或平台。

例如员工出勤考核，企业库存管理，销量统计等等. 常见的B端产品如下：SAAS：全称Software as a Service，通常指第三方给企业的线上软件服务。

CRM：全称Customer Relationship Management，企业管理客户的工具。

OA ：全称Office Automation，办公流程自动化工具。

ERP ：全称Enterprise Resource Planning，企业资源统一管理平台。

CMS：全称Content Manage System，产品后台。

C端产品：C全称Constomer。

指消费者、用户。

表示为消费者、个人用户或终端用户服务而设计的。

对于它的使用者来说，主要是用来满足自己的生活需求。

我们每天玩手机上用到的大都是C端产品。

例如聊天用的微信、购物用的淘宝，刷短视频用的抖音、看新闻用的的头条，听歌的网易云，打车用的滴滴，保存资料的百度云盘等等。

在使用这些APP中，你会发现：C端的这些产品围绕一个核心功能去设计，例如：核心功能是聊天，刷剧，看书，听歌，交友等的产品；除这些核心功能之外，还会有其他的辅助功能,例如评论、打赏、分享，或增值功能引导用户消费，VIP会员、内容付费服务等。

即使没有后面的辅助功能，也对前面的核心功能影响不大，只是体验感没那么好而已。

而B端产品却是同时拥有很多个核心功能，并且每个功能都很重要，缺一不可。

它是用一套流程或者多项功能，去完成“企业或组织”的一个工作目标。

例如：人事OA系统里的新员工入职流程，需要员工提交申请、领导审批、HR录入、申请提交成功反馈等一个完成的流程下来，才完成这个功能。

另外，B端产品大部分都是依靠功能付费、人头付费、维护付费等方式盈利。

如图所示：
2. B端产品和C端产品的不同点
开发周期：B端产品研发周期长C端产品研发周期短
目标用户：B端产品，目标用户是企业或组织，满足这一类角色的通用需求，而不是某一个人的个性化需求。

（B端用户大部分情况下，相对C端的更垂直）。

用户群体比较少。

C端产品，目标用户是个人，主要是终端消费者，它的用户群体很多很广泛。

需要特别考虑用户的年龄，职业，城市，收入，喜好，使用习惯等用户画像。

战场：B端产品，主战场是PC端；C端产品，主战场是移动端。

业务目标：B端产品，业务目标有两部分：一部分，为服务的企业或组织，提高效率，降低成本、控制风险，最大程度的满足付费者（企业或组织）的需求；第二部分，打造好产品，利用更系统化、更高效的功能，吸引越来越多的企业或组织，付费使用它。

C端产品，业务目标是帮用户解决个人痛点，从而获取大量的用户，为后期变现（比如评论、打赏、分享，或增值功能引导用户消费，VIP会员、内容付费服务等—）做铺垫。

大致包含拉新、提升留存、提升活跃度、提升转化率、增加成交量等。

设计规范：B端平台产品逻辑比较复杂，它的设计规范其实就是整个业务组件化的规范。

竞品非常少，对设计师来讲是极具考验的，因为，设计师在工作中，几乎没有可以参考的对象，需要不断地与相关人员交流和对产品进行反复调试优化。

C端平台产品逻辑相对简单，它的设计规范通常解决的是单线程的协同问题。

竞品较多，设计师可参考的竞品非常多，因此同质化也非常严重。

设计风格：B端产品,偏理性（像男性，注重目的和结果）。

主要以相对舒服的设计风格来稳定用户情绪，从而帮助用户专注高效的使用产品。

设计逻辑主要以工作目标为导向，专注于用户特征中的群体职业身份，考虑系统化地解决体验问题和企业的需求痛点。

在设计风格上，会比较克制和简洁。

（随着社会的发展，能大致判断出未来toB产品的新方向会是：B端逐渐C化。

因为C端产品从最开始的提倡“花里胡哨”到如今的“高级感”演变过程走了很长，接下来B端也跟随着从“克制/简约”进化到了“高级感”。

）所以，这就需要有非常严谨的设计思维，以及对行业有一定的理解能力的设计师，才能驾驭并更贴合它的商业需求。

C端产品，偏感性（像女性，注重过程和感受），主要以品牌视觉的差异性和创意性来吸引用户的注意力；以娱乐，购物和社交内容居多，针对不同的用户和活动，视觉表达也千差万别。

视觉上通常会
追求情感化、个性化、品牌化，冲击力、创造力。

另外，还会融入一些有趣的交互或游戏之类的内容。

所以，C端产品会比较需要具有视觉创造力的设计师。

使用场景：B端产品，主要是在工作期间解决问题使用，时间相对固定，非工作时间一般不需要用。

C端产品，围绕着用户个体的衣、食、住、行等全方位的日常生活展开。

使用时间不固定，几乎都是随时随地的碎片时间。

产品特点：B端产品，围绕着多个核心功能进行设计，业务功能优先于用户体验。

首先重视的是业务流程和提高业务的功能上，其次才关注并确保产品有最基本的用户体验。

C端产品，围绕一个核心功能设计，注重用户体验，小到一个按钮或图标，大到一个页面布局，每一个细节都需要用心设计。

依赖运营：B端产品，不怎么依赖运营，运营也决定产品的生死。

主要是企业内部员工使用，自上而下推行使用系统，不担心员工不用。

C端产品，严重依赖运营，运营的好坏直接决定产品生死存亡。

相关产品多如牛毛，同质化非常严重，导致用户转移成本过低,一旦运营不到位（即解决不了用户的某个需求痛点）的话，就很容易流失用户。

变现方式：B端产品，大多通过帮企业解决经营问题，间接提高企业收入以变现。

（备注：“SaaS系统”除外，因为它的变现方式主要是按用户数、功能模块收费等，是可以直接带来收入的）。

C端产品，通过内容、广告（头条，抖音等），增殖服务变现（QQ，游戏等），平台抽层等，依靠的是规模经济。

B端产品最大的不同于C端的一点就是“多点网络化”。

意思是说：一项任务的完成，需要以任务为中心，需要多角色参与协作，共同完成。

而不是以某个职能角色为中心。

所以，我们在设计B端产品时，要有全局观，千万不能用C端的做法遵从“用户至上”原则的，不然就会在一些不必要的“点”上，耗费过多资源，从而失去对整体目标的掌控。

3. B端产品和C端产品的相同点
都是“人”在使用：不管是聊天，打车和网上购物或者叫外卖等各种app的C端产品；还是逻辑复杂上手难的企业级业务系统的B端产品，它们都是需要人来使用的。

都要兼顾“业务功能”和“用户体验”达到一定平衡：不管是面对C端产品还是B端产品，用户都喜欢好用且效率高的产品。

目前为止，C端产品基本上实现了用户体验做到极致的阶段。

但B端产品由于起步比较晚，且业务繁杂，用户体验方面实施起来也会比较困难，但随着B端产品迅猛发展，它良好的用户体验指日可待。

都为了盈利：都在想尽办法，通过各种方式让目标用户为产品或服务付费买单，创造利润，就是搞钱了。

以上如图所示：
4. B端产品设计思路大家都知道C端产品APP，用户在初次使用他们时，会花短暂时间提高操作它的认知能力，但当用户养成了一款C端产品，例如某电商购物类的app，再给他几个其他的电商APP，用户都是可以迅速上手并且轻易满足自己需求的。

而B端产品却没办法这么轻易的做到。

B端产品超级庞大架构非常复杂，逻辑非常严密，且竞品特别稀缺，作为设计师的我们在接到设计任务后，前期工作将会比设计本身要复杂麻烦得多。

首先，B端产品不同行业的门槛很高，它的用户基本上都在该行业待了一段日子的。

所谓“隔行如隔山”，作为设计师，我们在设计它之前，就需要对这个行业和它的业务本身深入了解，越熟悉该行业和业务，对我们的设计越有帮助；
其次，B端产品，不管是政府医院的工作业务流成系统，还是商家的进销存管理，或者是企业内部的产品，除了不同行业有门槛外，对企业内部产品和相关信息大都有“保密协议”。

信息不互通，导致参考的竞品严重短缺，它还不像C端产品APP一样随便就能在各大软商店满大街下载使用。

再次，为了适应社会发展，企业内部会划分出类似行政、财务，销售，采购，产品、设计，研发等不同的职能和部门分工协作，让企业运行井井有条，更有效率。

但这些独立的部门也会导致员工只认为自己工作、领域是最重要的，没办法站在全局思考和反馈问题。

所以即使在工作中我们有接触和使用到B端产品，也会因为我咱们的职业角色不同而受到权限限制，不能像超级管理员一样能够接触到它的整体功能；
最后，B端产品设计没有固定不变的功能架构和商业模式，对负责它的相关人员的逻辑思维能力要求比较高。

所以，做B端，作为设计师的我们，这个时候就不能用专业思维只关心做界面了；一定要有跨界思维，多接触跨领域知识，主动多跟产品经理和各行业各部门人员沟通交流，对产品进行更深入了解思考和研究，确保产品的合理性，
避免浪费团队的时间和资源，让整个产品遭受“降维打击”。

刚接触B端产品的设计师们需要不断提升自己的以下几方面的能力： 1. 前期对业务一定要做好调研工作，提前了解熟悉各个角色的工作流程和痛点。

2. 不要受限于自己专业理论知识，积极主动跨界学习其他领域知识融会贯通。

3. 不要“面面俱到”什么都想做到最好，更不要“只做加法不做减法”。

“面面俱到”：就意味着所有的功能都平等，花的精力都是相同的，那产品的优势就得不到加强，等于白白浪费了资源；
“只做加法不做减法”：频繁添加新功能，导致产品界面复杂，操作难。

平时还不做维护，那加出来的冗杂功能不仅不能让企业良性发展，反而还会拖后腿，让产品越来越臃肿，运行越来越缓慢。

，后续还得花更多精力时间去优化调整，不但没带来好处，还增加了不可预知的风险。

4. 在面对各方来袭的产品需求时，不管对方是厉害领导还是销售大功臣，都要坚守自己的“主心骨”，不卑不亢，客观的分析需求的合理性，不要变成一个“全面”满足甲方爸爸们的做需求机器。

4. B 端产品设计规范
我们制定设计规范，主要是为了规范化设计语言，提高工作效率，有助于团队协作，以及方便后续的产品迭代。

但B端产品和C端产品制定设计规范差别还是蛮大的，最主要的差异大致是：C端产品的设计规范，目标几乎都是为了更好的打磨用
户体验的一致性和标准化；B端产品设计规范，由于用户体验更复杂，学习成本更高，所以它的目标侧重点是：除了布局的不同外，相同业务场景下，相同产品功能需要有一致的，标准化的体验，降低学习成本，提高工作效率，即统一体验。

当设计师接到一个全新的B端产品项目任务时，首先确定设计风格和设计尺寸，以及它的页面布局是做居中固定式，还是全屏响应式。

如果是全屏响应式的网页设计，那要选择怎么样的屏幕来做效果？带着这些问题，接下来我们从分别从设计风格、设计尺寸、页面布局、文字、颜色、表单、图标等角度讲解。

B端产品设计风格B端产品的设计风格大致分为三种：纯白风（网页大背景是纯白色;文字背景是线框or轻淡色（灰）;文字一般用黑色）；轻淡风(网页大背景是浅灰色;文字背景是白色;文字一般用黑色）；深色风（网页大背景是深色;文字背景是带有透明度的纯色；文字一般用白色
设计师在开始设计之前，要确定好使用哪种风格，一旦确定下来，后面的所有页面和元件的设计，都得基于这个风格来设计。

据数据显示，目前市面上比较流行的是：轻淡色背景风+全屏响应式的设计风格，也是相对比较保守安全的设计。

5. B端产品设计尺寸设计规范中，分辨率尺寸的问题，一直以来是咱设计师最热衷讨论的。

大家都觉得它应该就是个固定的死板的尺寸数字，但在这里也许我们就得让惯性思维改变下。

目前市面上主流
的排在前3的屏幕分辨率为1920*1080，1440*900，1366*768.
而我在做B端产品时，一般都会采用的是1440*900（其实是1440X820)的尺寸设计。

那我为什么不用市场占有率最高的1920*1080和1366*768呢？由于B端产品的特殊性，它的尺寸分辨率大小，其实是取决于它的用户即公司内部员工使用的电脑设备条件。

由于员工电脑显示屏大部分都是统一采购的，尺寸也就大致统一，所以开发适配的分辨率可以按这个统一尺寸进行设计。

（而互联网上得出来的尺寸大小，仅供参考。

) 决定产品设计尺寸分辨率大小的因素大致包含以下两点：1.市场占有率（主流）。

2.兼容能力。

假如你产品的用户用的设备主要是市面上占有率最高的24寸办公室显示器，也就是1920*1080分辨率的话，那毫无疑问，在选择设计尺寸上，直接选择1920*1080分辨率。

但是如果像我们的产品，主要是房地产经纪人使用，那不管是固定办公还是移动办公，这些销售人员使用的办公设备（电脑）屏幕一般都是相对偏小的，有1440*900，也有1366*768，以这两种为准主。

那这个时候，我们在设计时就会同时考虑它的占有率和兼容能力了。

结合以上，所以在我们的设计稿里，会使用1440*900的尺寸，因为它的兼容能力会比较强，向上适配或者向下适配误差会比较小，不管是市场占比最高的主流1920*1080尺寸，还是一般般的1366*768尺寸，都完全可兼容。

同时，别忘了设计出极端情况（宽度为1280，以及宽度为1920）的效果图，力求前端开发实现的效果
和高保真设计图误差最小。

目前显示器分辨率主要有： 16:9 的有：1920×1080、1600×900、1366×76816:10的有：1920×1200、1680×1050、1440×900所以设计师们在选择尺寸上，一定要脑袋灵光点灵活使用，不能一味的认死理只选择1920 或1440某一尺寸，而是要对您的产品用户的具体情况做好分析，从而得出最适合你们产品的设计稿的尺寸。

另外，如果希望开放的小哥哥们能把我们的设计稿完全还原的话，还特别要考虑浏览器的适配，因为目前大多数的B 端产品，都是通过浏览器打开和呈现给用户使用的。

我们在做设计中，也就必须要考虑浏览器的因素，比如说它的顶部固定区域（当前网址，书签栏等的高度）必须排除在外，剩余的部分才是我们设计稿的真实高度。

拿我们常用的谷歌浏览器举例，如下面公式所示：设计实际高度=电脑分辨率 -（网址栏+书签栏+页签高度)
由上图可以得出结论：导航布局（针对B端产品中后台,电商WEB 暂不在我们的考虑范围内）如果导航选项内容比较多的话，从美观和操作难易程度来评估的话，左侧导航是最适合B端产品使用的。

因为在导航选项内容不多的情况下，顶部导航横着放也还好。

但是，由于B端产品的特殊性，通常导航选项内容都是比较多的，如果用顶部横向导航的话，就会显得很拥挤，并且还需要隐藏显示不算的内容（按照人的行为习惯，几乎不会给它再整个横向的滚动条）；而左侧纵向的导航选项内容即使很多，用户也会很自然的向下滑动滚动查看更多。

另外，横向导航一般有“展开”，“折叠”，和“收起”三种状态，加上内容很多的情况下，横向导航就特别难做到尺寸适配。

而纵向导航的相对简单，且只有“展开“和”收起”两种状态，在不同屏幕情况下，宽度的自适应也能更加得心应手。

另外，各位有没有留意，咱们用的各大设备，不管是PC还是MAC，它们系统页面的导航，几乎青一色的都在左侧。

所以左侧纵向导航是比较符合使用习惯的。

如图这样比较下来，B端产品的导航，如果内容选项确定很少，就没那么多限制，“左侧纵向”'顶部横向'都好使用；要是不能确定导航选项内容多少，或者已经确定比较多的话，
就可以毫不犹豫的选择“左侧纵向”布局了。

特别要注意的是：
1. 同一个产品需要考虑它的统一性，不能这里使用顶部横向，那里用左侧纵向。

2. 如果是个更新迭代的版本，就还得考虑老用户之前的使用习惯，避免引起不必要的麻烦。

在确定好导航的布局后，就基本上能确定整个产品的页面布局了。

页面框架一个完整的页面框架一般有以下三种:
左右布局左右布局包括：'左侧菜单栏、顶部栏、主体内容'三大区域。

其中顶部菜单栏、左侧菜单栏是固定不变的，右侧主体内容根据分辨率进行自适应动态缩放。

左右布局时，左侧菜单是支持收缩或展开，收缩状态下也需要有固定的宽度。

上下布局上下布局包括：'顶部菜单栏、主体内容'两大区域。

其中顶部菜单栏是固定不变的，主体内容根据不同分辨率进行自适应动态缩放。

另外还需要把主体内容左右两边空白区域最小值确定好；其他的布局实践中，几乎很少会有，这里就不展开说了。

如上所示：B端产品，一般会在整个页面的左上角放企业的LOGO，顶部栏高度48+8n，侧边栏宽度200+8n。

我常用的是顶部栏高度56px或80px，侧边栏宽度200px，侧边栏收缩状态宽度56px或80px，右侧的侧浮窗宽度400px。

（具体高度宽度尺寸，设计师可根据具体情况来定，不需要按部就班这么死板）。

同时需要确定好主体内容的上下左右边距，以及主体内容区域中各模块的安全距离，内容超出区域的，通过滚动查阅更多。

风格然后考虑这个后台尺寸是
做居中固定式，还是全屏响应式。

全屏响应式的网页设计，选择怎么样的屏幕来做效果，就显得有些主观了，除非有规定，否则你可以选择任意主流尺寸作为基尺寸来设计网页。

当然，不管选择什么尺寸，都得基于做好一个后台而开展工作。

文字 B端产品（后台系统）常用的字体：
Windows系统：中文Microsoft YaHei(微软雅黑），英文Arial；Mac字体：中文PingFang SC（平方字体），英文 Helvetica；常用字体大小为12px、14px、16px、18px、20px、24px、26px、28px、30px、34px（一般都是采用偶数字号，文字大小12+4n）。

在设计过程中，设计师对字号应该有一个全局观，在同一个界面内，尽量少用大小太接近的字号。

比如一个页面中，如果同时用了12px、13px、14px、15px、16px、18px排版，文字的层级对比会比较弱，没有主次之分，用户阅读困难，视觉效果也显得凌乱。

所以，刚接触B端产品的小白设计师，如果不知道怎么运用不同字号字体的情况下，可以直接以这组字号12px、14px、16px、20px、34px的字号为参考使用，这样的分布会层次明晰，能够有个比较不错的布局结构。

“行高”根据文字大小和使用场景来定，公式如下，行高=文字大小+8px（或6px，视情况而定，我常用8）例如：12号字体的行高=12+8=20px
菜单标题字体大小：16px ≤菜单标题字体大小≤20px正文标题字体大小：24px ≤正文标题字体大小≤34px正文内容字体大小：14px ≤正文内容字体大小≤16px设计师如果喜欢，还可以用这些字体：思源黑体、segoe UI、Hiragino Sans GB。

特别注意：
同一个界面中，一定不要出现长得像的不同字体。

尽量选择用户设备里自带的字体来进行设计，比如说WIN系统默认用系统自带的“微软雅黑”，退而求其次是“宋体”。

不能使用特殊字体（比如隶书，兰亭黑体之类的）如果必须要用特殊字体，建议用图片替代。

因为，如果用户的设备里没有你使用的这些字体的话，会默认显示设备的系统自带字体，最终效果就会和你的设计稿大不一样，就跟某宝上买衣服的照片效果，一个卖家版一个买家版的感觉一样一样的，影响用户的阅读体验。

从视觉方面来讲，为了让整体界面更简洁具有美感，体验感更好，在使用字体方面，一般字体种类不超过2种，越少越好。

因为页面的层次感主要是靠字号大小拉开层次，如此此时字号在变，字体种类也各种变化，整体就会感觉很凌乱，没有美感可言了。

颜色（标准色）：基本上包含“品牌色”、“辅助色”、“中性色”三部分。

品牌色：即产品主色调，主色调的设定直接影响产品气质和直观感受，也是产品的对外的形象。

品牌色是根据这ju个产品的特征和定位、用户群，以及使用场景等考虑最后确定的。

品牌色的一般用于LOGO 、操作状态、按钮颜色、其他一些可操作图标等。

品牌色一般建议选择冷色系。

这样有效避免与“错误提醒”的红色、黄色相冲突，让人误解。

但要是被硬性要求必须选暖色系作为主色调，就得格外注意调节好主色调与错误提醒的区别了。

2，注意选的品牌色（主色调）不要太刺眼。

要保证用户长时间使用也不至于颜色太亮太刺眼，而产生的视觉疲劳。

辅助色：辅助色一般用于“提示”。

类似：成功、失败、警告、无效等内容等，如图：
中性色：中性色涵盖黑、白、灰三个不同层级，通常在文本、背景、边框、分割线用到它们。

同一色相，只要改变它的透明度就能表现出不同的层级。

B端产品的文字中，一般会有：一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字、说明文字等。

为了区分层级，提升用户的阅读体验感，通常会根据具体需求，把字体颜色的深浅，大致分成3到5个层级。

常见的有#333333、#666666、#999999这个组合，这个组合的层级区分比较分明，适应性比较广，设计师在设计时可以直接作为参考。

像数据可视化、统计图、多个标签的不同配色方案，可以根据具体情况而设定。

表单
B端产品中，表单几乎在所有类型的的网页都会出现，它是由多个列表项构成的比如：登录注册、搜索、信息录入、选择器等都能看到表单。

而列表项又是由：标签和输入框组成，常见的表单有“输入框、单选框、复选框、普通按钮、开关按钮、下拉菜单”等控件，而且都会有自己的一套逻辑和顺序。

一个输入框通常包含：标签名称（英文：label）、提示信息（英文：placeholder，输入信息后提示文字消失）、初始值（英文：value，需手动删除）。

如果是必填的表单，一般会在标签的前面，加上红色*号。

也有用别的方式提醒的。

表单的边框和圆角：由于B端产品一般比较正式和严谨，所以我们在设计表单输入框时，边框线为1px，圆角弧度一般不大于4px (常。