在我们的工作中，我们经常会提到C面和B面。两者还是有很大区别的，尤其是在业务和设计方面，考虑的角度也不一样。在我看来C端的设计更注重视觉和营销，而B端更注重业务和功能。今天就不过多介绍C端和B端的区别了。不太了解的可以多看C端和B端的文章。B端系统主要针对我们使用的管理系统，比如我们常用的：ERP系统、CRM系统、OA系统、WMS系统、SaaS系统等。虽然这些系统统称为B端系统，实际业务会有差异来区分，下面我总结一下我在工作中踩过的几个坑。提前考虑系统是否需要自适应。根据用户使用的显示器制定字体渐变规范。准备系统颜色规格以适应所有客户主题颜色。提前考虑系统是否需要自适应。B端系统主要用于Web端。对于系统来说，很少做大量的适配效果。我们常见的自适应效果只是根据尺寸的变化适当改变界面中元素的尺寸，而模块在界面中的位置不会变化太大。以前B端系统很少涉及自适应效果的展示，所以我在工作中没有考虑自适应效果，但是设计稿完成后，前端开发完成的时候，产品经理建议需要做。以适应不同的分辨率。听到这个消息，我立马愣住了，因为项目的设计工作基本完成了，前期也没有人提到需要适配效果，我也没有把这个当成设计（由于惯性）之前的工作经验），突然提出这个要求，无疑是对设计的推翻。需要重新考虑各个接口的自适应效果。这个工作量也是巨大的，而我们最常见的适配效果基本上都是官网等一些内容页面，B端系统确实很少见。例如：一开始做设计要求时，没有考虑大尺度的自适应效果。以下设计稿开发完成后，只改变每个数据分析图模块的尺寸，整体位置不变。至于自适应效果，会涉及到位置的变化，包括搜索过滤条件的位置显示都会受到影响。大分辨率下，以上设计稿为1920px分辨率下的显示效果。界面一屏显示页面内所有内容，数据分析分模块展示。两个数据分析模块的内容可以同时横向排版。在没有大规模自适应的情况下，改变浏览器的宽度只会改变页面内容中各个模块的大小，布局位置不会改变。在小分辨率的情况下，上图中设计稿的显示效果为1280px分辨率。由于分辨率大大降低，界面中各个数据分析模块的位置也在大范围自适应的情况下发生变化。进行了更改以使用户能够在不同分辨率下更好地浏览界面中的内容。在分辨率大小相同的情况下，会根据项目的实际情况细分不同的情况。比如我们WEB常用的分辨率有960~2560px的尺寸范围，尺寸范围比较大。我们需要考虑不同的分辨率下呈现出不同的效果，这样设计稿才会出现各种风格。这些需求需要在设计初期就考虑到，否则在设计完成后再考虑会比较费时费力，影响项目的进度。根据用户使用的显示器，字体渐变规范的设计规范是在设计初期准备的，文字规范也不例外。这些基本的设计规范相信大家都不会陌生。我们常用的文字规范直接来自于最小的字体。对最大字体进行标准定制，比如一般的文字标准会设置文字大小，粗细，最大最小字体限制，如下：但是这个字体标准是针对同一个分辨率定制的，对于各种字体在市场分辨率显示，如果我们直接采用一套字体规格，在小分辨率下会出现字体过大显示内容过小的问题，而在小分辨率下字体显示过小内容过大在大屏幕上密集。有一点需要特别注意：部分显示器的默认分辨率不是100%。根据系统实际用户使用的显示器统计：大部分用户使用1440小分辨率的显示器，系统默认推荐25%和50%缩放布局，很少有用户会手动更改。更改显示的默认设置会导致我们原先设置的字体和布局规范受到影响。针对这些情况，我们总结了一套解决方案：将字体规格分为三种渐变，以适应不同情况下的小显示器：将字体规格分为三种渐变，在基础设计稿中更改字体，增加或增加缩小相同的字体大小，保证最小字体为12px，可以解决不同分辨率下显示内容过少或过大的问题。同时开发者也可以更方便的调整全局字体，后期的系统维护也更容易。.适配所有客户主题色，做好系统颜色规范。当然，我不会在这篇回避文章中分享。对于我们常规的配色规范，我们一般会整理出整个系统会使用的配色方案。在设计稿中可以直接使用颜色说明中的颜色。比如我这里要分享的是如何将企业定制的配色方案与合作客户的平台配色相结合，让每个企业的配色各不相同，与整体系统协调。一致的效果，这也是我在工作中遇到的一个真实的项目问题。由于大部分B端系统项目都是企业自主开发的，企业必须有属于该项目的主题色和详细的配色方案，但这种配色方案并不适合其他企业，因为颜色每个公司的独立系统的搭配，必须以自己企业文化定义的主题色和配色方案为基础，不同公司使用的系统会贯穿始终，因此需要考虑在不同系统之间穿梭，统一界面风格。例如：企业系统主题色为蓝色，合作企业主题色为橙色。当然，合作客户希望自己使用的系统可以换成自己品牌的颜色（橙色），这样可以直观的达到企业使用的系统。团结。对于这样的情况，我们需要从自主研发的系统配色入手。当然，默认版本的主题色依然采用企业主题色。我们使用系统中使用的颜色作为变量。界面使用的颜色和主题色有相关的，采用一键控制颜色变化，就是给系统增加了主题色设置功能。由于设置了一键设置主题色的功能，前端不能硬编码与主题色相关的各个界面颜色。需要随着设置而改变，设计者在设计时也要考虑全局。能否实现一键设置，更改所有颜色？这里可以直接使用主题色透明度的变化来区分颜色，避免使用过多的颜色，否则会出现不协调感，让整个界面与主题色相关的配色可以一键控制颜色变化，实现系统与不同企业系统的匹配，达到视觉风格统一的效果。
