大家都知道C端产品APP，用户在初次使用他们时，会花短暂时间提高操作它的认知能力，但当用户养成了一款C端产品，例如某电商购物类的app，再给他几个其他的电商APP，用户都是可以迅速上手并且轻易满足自己需求的。而B端产品却没办法这么轻易的做到。 B端产品超级庞大 架构非常复杂，逻辑非常严密，且竞品特别稀缺，作为设计师的我们在接到设计任务后，前期工作将会比设计本身要复杂麻烦得多。
• 首先，B端产品不同行业的门槛很高，它的用户基本上都在该行业待了一段日子的。所谓“隔行如隔山”，作为设计师，我们在设计它之前，就需要对这个行业和它的业务本身深入了解，越熟悉该行业和业务，对我们的设计越有帮助；
• 其次，B端产品，不管是政府医院的工作业务流成系统，还是商家的进销存管理，或者是企业内部的产品，除了不同行业有门槛外，对企业内部产品和相关信息大都有“保密协议”。信息不互通，导致参考的竞品严重短缺，它还不像C端产品APP一样随便就能在各大软商店满大街下载使用。
• 再次，为了适应社会发展，企业内部会划分出类似行政、财务，销售，采购，产品、设计，研发等不同的职能和部门分工协作，让企业运行井井有条，更有效率。但这些独立的部门也会导致员工只认为自己工作、领域是最重要的，没办法站在全局思考和反馈问题。所以即使在工作中我们有接触和使用到B端产品，也会因为我咱们的职业角色不同而受到权限限制，不能像超级管理员一样能够接触到它的整体功能；
• 最后，B端产品设计没有固定不变的功能架构和商业模式，对负责它的相关人员的逻辑思维能力要求比较高。所以，做B端， 作为设计师的我们，这个时候就不能用专业思维只关心做界面了；一定要有跨界思维，多接触跨领域知识，主动多跟产品经理和各行业各部门人员沟通交流，对产品进行更深入了解思考和研究，确保产品的合理性，避免浪费团队的时间和资源，让整个产品遭受“降维打击”。
1，前期对业务一定要做好调研工作，提前了解熟悉各个角色的工作流程和痛点。
2，不要受限于自己专业理论知识，积极主动跨界学习其他领域知识融会贯通。
3，不要“面面俱到”什么都想做到最好，更不要“只做加法不做减法”。
意味着所有的功能都平等，花的精力都是相同的，那产品的优势就得不到加强，等于白白浪费了资源；
频繁添加新功能，导致产品界面复杂，操作难。平时还不做维护，那加出来的冗杂功能不仅不能让企业良性发展，反而还会拖后腿，让产品越来越臃肿，运行越来越缓慢。，后续还得花更多精力时间去优化调整，不但没带来好处，还增加了不可预知的风险。
4，在面对各方来袭的产品需求时，不管对方是厉害领导还是销售大功臣，都要坚守自己的“主心骨”，不卑不亢，客观的分析需求的合理性，不要变成一个“全面”满足甲方爸爸们的做需求机器。
我们制定设计规范，主要是为了规范化设计语言，提高工作效率，有助于团队协作，以及方便后续的产品迭代。
但B端产品和C端产品制定设计规范差别还是蛮大的，最主要的差异大致是：
C端产品的设计规范，目标几乎都是为了更好的打磨用户体验的一致性和标准化；
B端产品设计规范，由于用户体验更复杂，学习成本更高，所以它的目标侧重点是：除了布局的不同外， 相同业务场景下，相同产品功能需要有一致的，标准化的体验，降低学习成本，提高工作效率，即统一体验。
当设计师接到一个全新的B端产品项目任务时，首先确定设计风格和设计尺寸，以及它的页面布局是做居中固定式，还是全屏响应式。如果是全屏响应式的网页设计，那要选择怎么样的屏幕来做效果？
带着这些问题，接下来我们从分别从设计风格 、设计尺寸、页面布局、文字、颜色、表单、图标 等角度讲解 。
B端产品设计风格B端产品的设计风格大致分为三种：纯白风（网页大背景是纯白色;文字背景是线框or轻淡色（灰）;文字一般用黑色）；轻淡风(网页大背景是浅灰色;文字背景是白色;文字一般用黑色）；深色风（网页大背景是深色;文字背景是带有透明度的纯色；文字一般用白色
设计师在开始设计之前，要确定好使用哪种风格，一旦确定下来，后面的所有页面和元件的设计，都得基于这个风格来设计。据数据显示，目前市面上比较流行的是：轻淡色背景风+全屏响应式的设计风格，也是相对比较保守安全的设计。
• 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×768
16: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的字号为参考使用，这样的分布会层次明晰，能够有个比较不错的布局结构。
21
“行高”根据文字大小和使用场景来定，公式如下，
行高=文字大小+8px（或6px，视情况而定，我常用8）
例如：12号字体的行高=12+8=20px
本文地址：百科生活频道 https://www.neebe.cn/live/903126_2.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
