编辑导语：To C市场现在越来越饱和，获取流量越来越难。所以探索从To B到to To C的方法是大势所趋。对于很多设计师来说，习惯了C端的设计，转到B端后有点不知所措。作者总结了自己设计B端产品的经验，把这个指南分享给我们。
To C市场的表现是用户逐渐饱和，流量红利也在下降。延伸到To B已经成为To C产品探索的新方向，国内互联网巨头也在布局To B业务。
B端行业的需求越来越大，更多的B端设计师(互联网工作者)开始涌入。现在还在互联网C端折腾的互联网工作者，有一天可能会转向B端。无论C端还是B端选择哪个方向，都没有错。建议尝试一下，然后根据个人兴趣选择一个深耕方向一直探索。
接下来我就说说我对一些B端产品设计的看法。阅读本文后，您将了解到：
结尾B是什么？了解B端组件以及如何构建组件库3确定B端设计尺寸和标准4构建B端后台系统。
一、第一次认识B端B端设计从承接载体的角度来说是网页设计，只是行业属性和用户群体不同的代名词而已。
1.C端和B端的区别C端：消费者，通常用于满足消费者和个人终端用户在某一场景下的需求的客户端。如：微信、美团、JD.COM等b:业务，通常是为了前台业务系统更好的服务用户而做的，是各大企业中用户或业务使用的管理系统，如CRM、ERP、OA、工单系统等。
2.视觉体验设计的差异C端产品需要平衡“用户体验”和“商业变现”，所以会格外注重视觉体验的设计。不仅要让用户有好的体验，还要让用户对有趣的设计产生共鸣。用户的要求是好看、好用、好玩。
b端产品注重运营商的效率、成本和控制，追求服务的稳定性、保障能力和安全性。所以视觉体验大多是干净简洁的。
2.了解B端组件库的组件化，对设计师来说并不陌生。简单来说，组件化就是将产品中的通用模块进行拆解、排序、重组，形成一套“多维”的解决方案。组件化可以用在操作设计、UI、交互、动态效果、开发等很多方面。一个完整的组件库无疑会大大提高设计质量，改善产品、设计和开发。
1.了解UI框架。B端后台开发过程中，前端同学都是基于UI框架开发。介绍了一些开源的UI框架或者公司自建的UI框架。使用这些框架进行开发，可以将一些通用模块用代码封装起来，在项目中重用。
所以在设计的时候，要求我们掌握主流UI框架的设计规范，然后基于这个框架的规范进行设计和扩展。比如前端常用的Ant Design、Element、iview、Layui等ui框架。
蚂蚁设计等平台的这些组件只覆盖常见场景，无法满足一些定制化产品的需求。无论是单一产品还是产品线，由于品牌差异，在不断成熟的过程中都有自己的组件库(UI KIT)。
以下是我根据组件的不同类别和使用场景进行的分类。每个产品的组件应用是不一样的，我们需要根据项目的实际情况进行增删。主要包括基本组件、布局、导航、数据录入、数据显示、反馈、数据可视化等七个部分。
每个组件都有自己的应用场景。总之不要盲目借鉴其他产品。我们应该根据用户的使用场景来选择合适的组件。以提示设计为例：界面设计中我们什么时候需要强提示，什么时候需要弱提示？
2.构建UI组件库——原子设计理论原子设计理论是一种常用于构建统一丰富的设计体系的方法论，由原子、分子、组织、模板、页面五个层次组成。
Atom:界面中的基本元素不能再细分，比如颜色、文字、图标、分割线、阴影等。分子：由多个原子组成的简单UI组件，如按钮、弹出窗口、标签栏、搜索框等。组织：由原子和分子组成的模块，如商品卡、信息流卡等。模板：模板由原子和分子组织构成，类似于原型图，如信息列表原型、订单管理原型等。页面：放置实际内容(图片、文字等。)在特定的模板中形成页面，即视觉稿；下面是原子设计理论的示例图，即把界面中的元素、组件、模块、原型图、可视化草稿进行归纳、整理、重组为通用规范。
第三，确定设计尺寸和标准。事实上，庞大的web类别有很多种，根据产品属性和用户群体来划分：从前台页面到管理后台，设计师在判断web产品的框架和标准定义方面起着非常重要的作用。
1.确定设计尺寸在定义网页尺寸的时候，首先要考虑我们流行的显示器。
我记得N年前，页面的信息内容必须设计在800或者1000的宽度内，规则其实是正确的。但是随着设备和网络的发展，网页显示的分辨率在快速变化，为了兼顾大众的浏览体验，屏幕分辨率越来越大。
根据百度流量研究院的最新数据，市面上有各种尺寸的电脑屏幕。设备中占比最大的依然是19201080，分辨率最低的也是1024768。1024以下的屏幕分辨率可以忽略。
b端管理后台考虑最大和最小响应的屏幕。建议取1440900宽度的中号。在应对上从小到大很容易适应，但是从大到小的适应问题很多。选择这个尺寸的前端在适配上有较低的错误率。
确定宽度后，如何定义高度尺寸？虽然浏览器的垂直显示方向是无限的，但是不得不说第一屏在界面设计中的重要性。研究表明，首屏以上的关注度为80.3%，首屏以下的关注度仅为19.7%，这也解释了为什么我们在设计时要在首屏显示重要内容。
以1440900的中号为例。我们不能直接用900的身高作为基准尺寸。去掉系统任务栏、浏览器菜单栏、状态栏后，剩下的网页首屏内容控制高度约为720px(700-750PX范围)，是相对安全的区域。
取这个中间值可以照顾到80%左右的用户群体。蚂蚁设计的组件也是1440x720px，所以最终的子尺寸是1440x720px。
固定宽度的一般网页显示类型：页面中央区域的宽度通常设置为1200px(1000px -1400px范围)作为一个相对的设计标准，可以保证大部分浏览器能够显示全部内容。
2.布局规范对于数字产品设计来说，几乎所有可以在设计工具中完成的工作都可以用代码来创建和表示。但由于种种原因(从开发思路到基本设计规范)，可能是设计稿放不下地或者设计输出质量差给你带来了困扰。接下来我们来讨论一下设计前的一些准备工作。
1)盒子模型让你更懂开发思维。
框是CSS技术在网页设计领域最常听到的思维模式。是最常用、最高效的界面开发模型之一，也是提高设计人员和开发人员沟通效率的重要知识。
该模型包含以下属性：内容、填充、边框和边距。
2)确定网格的基准——基于8点网格
网格是页面网格系统的最小单位，8点/8点/8pt。建立8个单元的网格系统，用8的倍数指定内容元素(按钮、输入框、图片等。)和布局规则。
为什么网格是基于8pt定义的？尽量保证最小网格单位是偶数，实际上可以用2、4、6、8或10个点作为网格候选原子单位。偶数可以匹配大部分主流显示设备，最大程度避免半像素模糊。
根据国内主流PC分辨率的最新统计，只有“4，8”不能被1366整除，其他都可以。因为4太小，视觉上无法区分，所以我们选择8作为最小单位，然后所有的值都是8的倍数。8作为最小的网格单位，在后台系统中更常用。
网页常用的网格单位是8、10，需要分析最小单位应该是8、10还是多少。比如淘宝、JD.COM等电商网站都有1190px的内容区域，以10为最小网格单位。常规网页显示的类型较多，宽度固定，宽度可以被10整除。
以栗子为例：从下面的对比图可以看出，是否严格按照网格体系排列，好与坏的结果是有明显区别的。
站在巨人的肩膀上，关于iOS的@1x、@2x、@3x图片和材质设计的@1x、@1.5x、@2x、@3x、@4x都是以8点为基准，小控以4点为基准。
3)网格系统使设计更加有序
网格系统可以使设计更加有序和规则。简单来说就是用科学的方法排版。通过使用网格系统，我们将一个页面切割成N个网格单元(块)，以保证页面信息的每个区域都能有序排列。
然后我们把这个页面的宽度表示为W，网格单元的宽度表示为A，网格单元之间的间隙表示为I，然后把网格单元之间的间隙表示为A .计算公式：width=(网格宽度X数量)(数量-1)X间隙宽度，网格系统就得到，如下图所示：
继续举栗子，我们选择了确定的画布尺寸1440x720px(左右布局)，布局采用了24列网格。宽度为1152的内容区域分为24个网格，页面中网格的水箱设置为固定值，即如果浏览器在一定范围内伸缩，网格的列宽也会随之伸缩，但槽的宽度值是固定的。
以下风格公式化，数值仅供参考。复制时请小心。
PC上常用12格和24格。都可以分成2等份、3等份、4等份、6等份、12等份，也可以分成1:2:1、1336033602等等份。提供丰富的品种。
一般12列网格适用于中后端页面设计或展示业务信息承载密度低、信息承载松散的网站。24部分网格系统适用于业务信息量大、信息复杂的中后台页面设计，网格的选择视实际情况而定。
填充内容：基本网格建立后，我们可以将内容布局进行分块，使整体界面处于整体有序状态。将内容放置在块中，内容的开头和结尾尽量避免在水槽中，块的高度也要保持在8的倍数。
在示例24网格中，块内容占据8、6和12网格的布局。
可以不用网格设计吗？用网格没问题。很多优秀的作品并不刻意遵循传统的格子，而是更加灵动。
但是在你打破规则之前你必须知道规则。所谓的方法论和规范，只是基于前人积累的经验。当你的创新足够颠覆的时候，以前的规则就会变成刻板印象。
四。确定布局框架B端系统的框架一般是根据产品目标和用户的使用场景来定义的。一般有两种主流导航风格：侧边栏导航和顶部导航。其他的都是这两个主流导航的扩展或者不常用，就不详细列举了。例如，顶部导航和侧边栏导航相结合的混合导航。
顶部导航(上下布局):导航栏上部固定，工作区宽度固定，左右空白处动态扩展。常用于官网、产品展示等有用户停留目标的产品功能，如站酷、UI中国等。侧边栏布局(左右布局):侧边栏可以固定或折叠只显示图标，内容可以自适应显示。常用于高效率的产品功能，如saas系统、管理后台等。很多老铁路通常会把B端误认为侧边栏，C端误认为顶部导航。虽然大部分都是这样，但是等号不能画在这里。有些产品两种导航都有，或者同时混合使用，视项目实际情况而定。
布局确定后，我们可以根据设计规格和产品特性开始绘图。一般先确定产品的首页和主要功能页面，整个产品的视觉基调就已经定好了。其他的页面样式和布局都是根据首页来扩展的，还有一些列表页和弹窗复用性高的页面做成组件，然后就完成了。放一个小比例图做出来的渣的图解。
图例是Ant设计组件。
5.最后，以上是边肖在B端设计过程中的所思所想。通过对各种平台组件和相关标准的了解，可以点亮你的设计思路，让设计更快、更准、更稳，先避免一些原则性的错误，为后续的产品打下良好的基础。
随着B端市场的发展，更多的B端产品逐渐进入大众视野，但B端产品的用户体验远未达到行业标准。这里说的不是视觉表达，更多的是B端设计师对产品业务的理解和用户的运营效率，所以B端产品的体验设计还是我们的强项。
补充：B端内容区自适应。谈到适应性设计，我们可能经常听到响应式设计。适应性设计和响应式设计这两个概念很容易混淆：适应性是针对设备的，响应式是针对尺寸的。一张图就能明白什么叫有反应，什么叫适应。
本文由@代代龙原创发布。每个人都是产品经理。未经许可，禁止复制。
来自Unsplash的图像，基于CC0协议。
暂无讨论，说说你的看法吧
