在工作中，一般图文并茂的C端界面相对容易做得出彩，也较容易找到同类型的参考。但枯燥的B端页面则会感觉无从下手；在最近一年的工作中接触到很多B端的页面设计需求， 过程中遇到过很多坑，也有些自己在视觉层面的思考和总结，所以打算写下来分享；

原因

页面干巴巴的原因一般为：页面元素几乎都是文本信息和操作按钮。

而这种情况又是业务性质决定的，或者没有交互设计介入，什么信息都要展示，塞得密密麻麻，这就导致了本身信息难以处理；C端界面要做得出彩很大程度要靠精致的图标、banner之类的图像类表现；而在B端界面则没有那么多图像类的元素给设计师发挥，很难发挥；

交互层面

如果没有专业的交互设计介入，那么请了解好需求背景以及页面逻辑。因为产品经理不是全能的，他们在画原型图的时候更多的是思考业务逻辑，很容易忽略界面交互不合理的地方，例如密密麻麻的信息、不合理的分组、甚至相互冲突的操作……

了解页面逻辑会让你了解每个界面元素存在的理由，以及它们之间的关系；在了解的前提下，对界面的设计自然就会更加的从容，而不仅仅是给原型图上个色；

例如步骤非常繁琐的页面，我们可以尝试在交互逻辑上做减法，将多个操作按照先后顺序分解到不同的页面处理。

信息密密麻麻的页面就将信息层级梳理清楚，根据优先级将信息做重要次要展示，折叠，二级页面或删除。

视觉层面

• 提炼图像元素

一般有两种，图标与辅助画面；当然增加图像类的前提是功能优先，不要为了美观而颠倒优先级；

适当地添加图标会达到很好的视觉引导效果，以及点缀画面的作用；比如多个不同的信息分组里面，图标会起到视觉引导的作用，让用户很清晰地知道信息的分组，以及降低阅读文字的疲倦感；

辅助画面是指添加一些具象的画面，来帮助用户快速理解当前页面的功能；例如一大段描述类的文本，在开头添加一个具体的辅助画面会让画面更加的美观以及也能让迅速了解当前页；

在平面设计里面有个概念叫做“图版率”，当页面全都是文本的时候，图版率为0%，反之100%； 如果图版率为0，那么页面阅读是非常疲倦的，在这个时代已经很少有人能够拿起一本全是字的书来看了，何况B端页面相当于功能书…… 所以在保证功能优先的前提适当增加图像元素吧。

• 增加画面层级

在不适合增加图像元素的情况下，可以考虑增加文本的层级，以及用卡片划分信息的分组；在某种程度上，这有点抽象图像化的概念（大字号、卡片都有些图像化）；

根据内容的优先级合理地划分文本的大小、颜色层级可以便于理解内容层级，也起到分组的作用，同时页面也会更加的美观；但文本的字号与颜色的层级都不易过多，而且要统一，例如可点击、置灰颜色全局统一;

还有卡片设计是非常适合用在B端页面，它可以起到信息分组、界面美观的作用；但要注意一点是在原生界面里面尽量少加大量重复的投影，例如一个卡片列表页面，每个卡片都有投影的话页面可能会出现卡顿情况，最好是靠颜色区分上下层级，像淘宝的个人页面；

还有一个划分页面层级的方法是颜色区分，例如页面头部一般可以用颜色作为背景加上大标题，这样可以达到页面层级划分的目的，同样也有些抽象图像化，间接增加了图版率；

• 关注视觉细节

UI与视觉有一个大区别在于：动态与静态；

我们在设计海报时候更像画画，静态、整体地处理整个视觉效果；但 UI 则会关注信息的优先级，按钮、文本不同的状态样式等，动态地考虑页面元素。以至于很容易过于关注功能层面的而忽略视觉效果；或许我们也应该在满足交互以及信息层级的情况下，要静态看待页面有哪些视觉层面的不足；

而往往我们只能在现有的元素上做细微调整（尤其是缺乏图像类元素时），所以细节就尤为重要；在扁平化成为主流的今天，很多时候我们会尽量少用投影、描边等元素，一起从简；但这些在B端页面其实蛮重要的，这些细节可以轻易做到信息分组而又不干扰功能，不要为了简洁而简洁；

B端往往是基于公司层面多人对某一问题解决方案进行整体评估，基本不存在冲动购买，更看重价值，在购买前需要建立足够的信任度。

B端产品硬件的出发点是以市场为核心关注点，更多是基于已有的“业务”形态，把传统线下工作，通过程序化、系统化、信息化转换为线上行为，使业务的流转效率更高，办公成本更低。所以更要求产品设计者能熟练掌握相应的行业知识、捋清业务逻辑。

B端：做业务，看商业模式，相对来讲生命周期比C端要长。

B端产品通过付费定制获取收益。对于面向组织的B端产品，因为组织天然的“封闭”特性，并不需要获取大量外部流量，只针对组织内外生产关系，满足需求即可，而每个组织的业务和架构又都有不相同 B端产品就需要根据不同的生产关系做个性化定制。

B端：偏服务解决方案，对项目的实施管理培训大于C端诉求。

很多设计师一开始接触 B 端产品设计的时候还是会以 C 端设计的思维在做，但往往会在设计时发现有些方面遗漏或者不适合的地方，那是因为虽然两者都是设计产品，但两者在设计侧重点上还是有区别的。本篇文章会以个人经验谈谈 B 端设计。

B 端产品和 C 端产品

首先我们来整理一下两者的区别。从字面意思上看，B 端产品的 B 即 Business，C 端产品的 C 即 Customer，前者是面向企业，后者则是面向普通消费者，所以两者服务的用户是不一样的。因为用户的不同，用户需求必然是不一样的，所以产品解决需求类型也不一样。B 端产品解决的类型仅限于功能层面而C 端产品除了要解决功能上的需求外，还需要满足额外的需求。因此，必然会形成两个截然不同的产品。用 C 端产品的设计思维是不适用去设计 B 端产品的。

那么究竟在设计 B 端产品的时候应该怎么设计呢？本人刚开始接触的时候也是以 C 端设计思维在设计 B 端产品，但结果就是你设计的地方可能不是用户关注的，你觉得正确的状态设计也是有错误的。本文我将从用户、场景、业务这三方面来阐述我的经验。

用户

上面说到 B 端产品是面向企业的，企业可以是一个组织、商家或者团队，在企业里的每个人都是带有他自己特定的角色，即职务。在日常工作中，不同岗位的人的工作内容不同，管理层人员会因为本身职务的原因拥有别的员工没有的权利。 B 端产品是为用户提供新的协作或办公方式的软件，要如何设计一个功能、行为路径复杂但使用起来效率高的软件呢？我归纳一个原则：界面轻量化。

首先在颜色方面，因为本身是办公软件，而且用户种类众多，年龄层跨区大，整个对于个性化的需求不大。所以可以看到市面上大多数的 B 端产品采用的还是本身品牌的颜色为主色调，并且多以蓝、绿为主的商务色。我们需要利用颜色将区域划分，靠颜色将不同功能或者不同层级的内容隔开，让用户一眼就能了解整体软件的结构。在区域划分的颜色上，最好采用黑白灰的对比关系，将大面积的白色留给主要的内容展示。

其次可以灵活运用点线面。点即文字，线是分割线，面可以是按钮，也可以是卡片。如果层级关系比较简单的且想要突出内容的，建议可以使用点线面。如一些视频剪辑/图形编辑软件，将大面积的面留给的主要的剪辑内容，内容突出方便用户找寻所需的片段内容，也有一些可视化图形比较多的数据内容展示的软件也是将色彩的运用留给内容，对于区块的划分，则用点线面。

但更多的软件其实是两者兼容，即用色彩分区，也用点线面去做区域内内容的分割，用户在视觉上整个软件关系明了，从而减轻使用时心理上的负担。

题外话，在考虑用户的时候我们特别需要明白客户是谁，用户是谁。在 C 端产品里一般情况下两者的身份是重叠的，所以我们会将客户=用户的想法潜意识地印在脑海里。但在 B 端产品里不是这样的，我们 B 端产品买单的是客户，但使用的不一定是买单的人。产品经理需要考虑两者的需求，但我们在做设计的时候需要知道我们当下在设计的页面或者步骤是用户中谁使用。

场景

场景是指用户是在什么环境什么氛围什么地点下使用软件。前面我们知道 B 端产品一般是工作时用的软件，那这里我们就需要知道使用我们软件的用户是在一个怎样的环境下使用，有时甚至也要考虑时间这个因素。

将我司的产品 MeshKit 作为例子。MeshKit 是一个用于人工测量采集数据的软件，其实就是工人在建筑工地上，使用此软件操控无人机来采集数据，为了降低学习成本产品经理把流程归纳出三个大步骤，所以我们在设计的时候用颜色来区别这三个步骤。虽然达到了区分的效果，但却忽略了一个问题。就是用户在什么环境下工作并且使用这个软件，导致用户在使用时抱怨界面看不清从而影响了工作的效率。通过实地勘察，用户反馈以及数据的分析，发现用户的使用环境是在非常强光的情况下工作的，因为需要观察无人机的飞行状态和位置，所以用户无法在一个可以遮挡的地方操控，且用户基本是在上午时间里完成工作，即使是下午大多数是在光线比较好的时间内。因为还有一个情况，无人机是无法在雨天使用的，因为雨和风会对无人机以及无人机数据影响比较大。因此我们需要对界面做一个优化，我们采取的方法是在不改变流程的情况下，将颜色的对比度调高，将暗色的背景全部换成白色底，保证用户在强光下也能对于数据和步骤作出反应。使用品牌色作为关键区域的主色，而且也通过运用字体大小以及粗细关系来分开同区域里主次的层次关系，从而突出关键部分的内容。

业务

业务在这里不仅是指产品的销售方式，也是指在整个垂直领域里的专业知识。它是 B 端产品区别于 C 端非常特殊的一个要素。了解产品的销售方式可以知道我们的产品是以什么模式销售出去，它会影响产品内容的呈现，当然这部分更多的是产品经理需要关注的。但后者关于垂直领域里的专业知识，则是需要设计师认真去学习和理解的。

还是以我们 MeshKit 产品作为例子。前面提到了我们的产品是要联动无人机的，在版本更新的时候就接到需要将拍照按钮更新的要求，这里就遇到了一些之前没有碰到过的问题。早期在做设计的时候我们是没有将拍照按钮给显示出来的，因为在无人机拍照过程中我们的软件是自动化的，所以潜意识将这一过程与平时在用的各种拍照软件同化，觉得是一个简单的过程。这里第一步就犯了对无人机领域知识不够熟的问题，在这一个看似简单的过程里，其实一直是 手机里的 App-无人机-无人机相机模块 这三者不停联动的过程，一旦中间出现问题，就会导致任务失败，所以是需要在界面上显示出来来告知用户的。第二个问题就是在设计当中，将三者间会出现的问题都表达出来了，但还是漏了一些与无人机相关的状态，如相机过热。所以看似一个简单的拍照过程，也是一个很复杂的关系，是需要我们通过图形来帮助用户理解。

总结

本文提到的一些要素不是一定要运用在每一次的设计当中，而是作为一种补充和提示来告诉大家在 B 端产品的设计中需要注意 用户、场景、业务 这三方面，当然也可以通过分析这三个方面得出自己的设计经验，目的都是提升自己在 B 端产品当中的能力从而越来越专业。

产品运营在大多数的运营者来说是面向C端的，B端的产品运营比较少，而且B端产品运营相对于C端来说，可玩可创造的方式方法会少一些。比起C端在内容运营，活动运营，用户运营等几个大方向衍生出许多专业领域，B端似乎内容、活动、用户很弱，发声也很少。C端运营是服务于个人客户，运营的工作分类比较成熟，有着完整的运营框架和知识体系，而B端运营服务的是企业客户，有些企业做平台如阿里云腾讯云，有自己的研发也会接入很多产品提供者和需求者，有些企业则是自主研发如商汤科技和旷世等。整体来说，B端运营的框架知识体系是比较欠缺的。

作为一个运营新人或者已经从事了1-3年的B端运营者来说，要搭建一个B端产品运营的框架，那么应该从那几个方面入手呢?

整体来说B端的产品运营可以从3个方面开展:产品运营、数据运营、客户经营来搭建完整的产品运营体系。

产品运营

产品运营包含4个方面:建立运营流程、产品培训、问题处理、产品优化。

1.建立运营流程

一开始运营工作必然是杂乱无序的，必须从中理出一些思绪去考虑搭建一些框架出来，让无序的工作变得有序，必然要把工作规范化、制度化，有了制度避免各部门间的掰扯，使部门间的协同效率更高。但是也要强调一点，不是所有的职能边界都可以划分的很清晰，工作边界划分的界限与不断发展的工作内容有时间上的滞后性。事情在未划分清楚前一同面对解决是要保持的良好工作习惯，事情第一，分歧第二。

运营流程的建立包括签约流程、客服流程、结算流程、新需求流程、产品培训流程等多个方面。

签约流程

客户签约要注意的事项包括签约时效和签约过程。签约时效看公司合规的要求，有些公司流程比较简单，有些公司就比较复杂，大体上受国家监管的行业流程都会比较长。一些小的公司可能填写一张盖章申请表找若干领导签字就结束了，复杂的公司可能内部要企划、财务、法务等各个部门各层级领导逐一审批。所以，签约的流程一定要根据公司的现状制定，切不可脱离实际。我们以比较复杂的公司举例:





需要注意的几点:

1.各环节的处理时效要求;

2.各环节的对接人事前要明确，做好沟通;

客服流程:

客服流程旨在建立售后服务标准，搭建与客户的联系桥梁，及时响应客户需求，提高产品在行业内的口碑。客服流程的建立需要明确客户服务的目的和适用范围，涉及的部门和各部门承担的角色职责，客户服务的实施计划和系统工具，客户服务的处理流程，各环节的处理时效和时效追踪机制，客户服务的时间和方式(是否7*24小时，工作日、非工作日联系方式，重大问题联系机制)。对外的客户服务信息一般都会提供客户服务经理的手机和邮箱，有些公司也会提供在线提交生产问题(BUG)或者操作类问题的工具类似于工单系统。

例如阿里云或者腾讯云这样的云服务平台，以阿里云为例:

阿里云的工单平台主要解决三个问题:售前咨询、账户以及财务问题(下图1)，并且阿里云罗列了客户可能产生疑问的地方做了详尽的Q&A(图2)，这点做的非常好。

图1

广告华为云联接短信_实发率高的通道才是好通道_自动补发_实发扣费.^^全球运营商合作,一点接入,覆盖全球.

图2

结算流程:

结算方式有一次性付款、预存和按约定结算包括月度结算和季度结算。比如阿里云就有充值(预存)，腾讯云也是。一次性支付适用实施交付类型的，按季度结算比较适用于按使用量收费的项目。结算要按照合同约定的结算方式和结算时间，把握好结算各环节的处理时效。

新需求流程

客户上线运营一段时间后，不可避免的客户、BD包括运营本身都会提出一些新需求，需求一多容易导致需求在技术开发那边排队等待发版上线，这时候就需要运营对新的需求进行把控，最有效的方式就是做好需求的过程管理，同时，对需求进行分级，可以按照L1-L2-L3-L4来对需求进行分级，分级的同时要说清楚不同级别的需求是如何定义的。

制作新需求流程的时候要明确各部门的角色和职责。



广告主要从事游艇码头厂家项目,拥有自己的实体工厂,所有主要材料都是自主设计自主生产.^^浙江中亚游艇码头厂家项目遍布海内外



2.产品培训流程

特别强调下产品培训流程，这里一定要在产品上线前做好产品培训，整个流程的制定可以从培训前、培训中和培训后三个阶段考虑，培训的目的是让内部、外部客户了解、熟悉产品。





在上线前做好培训其实是一件很不容易的事情，如果是提供API或者SDK，只需要对接技术就行了，产品的使用客户会内部消化掉。某些产品是提供一整套系统服务，涉及到客户方的诸多部门和人员，每个人的接受能力、理解能力和学习态度都是不同的，这时候想要做好培训的难度是极大的，极具挑战性。做不好，上线后会产生大量的操作问题，严重影响客户的使用效率和产品口碑。

如何做好培训呢，有几个要点一定要把握:

1)产品使用手册要简单，易懂

我见过产品经理给客户的培训手册是一个非常专业的产品文档，专业词汇解读，流程说明的很详细，专业人士一看就明白是啥。但是，作为一个小白用户呢，看到文档一定是俩眼一抹黑，每个字看上去都懂，连在一起就不知道是啥了。

最专业的不一定是客户最适合的，客户最需要的是一个简单的能看的明白的，最好是告诉客户第一步你要做什么，第二部你要做什么，一个给大妈都能够看懂的文档;

2)建立考核机制

为了确保客户的员工能尽快掌握产品，最好和客户一起建立产品使用培训考核机制，推动客户的员工尽快熟悉产品;

3)不间断培训

在产品使用过程中，发现问题总结问题，不断加强培训。

3.生产问题处理

产品上线后的问题处理一般可以分为三类:生产类问题(主要是BUG)，操作类问题和运营管理类问题。

生产类问题

BUG在测试环境下很难完全检测出来，即使在测试环境下没有问题，在生产环境中也会跳出一些，尤其是在产品上线之初。运营是站在产品第一线的角色，如何正确的搭建生产问题处理流程呢，我觉得可以从三个方面开始:问题复现、分类、协调处理。

问题复现就是将产品报错的截图，详细信息描述等发给技术去处理;

分类就是将问题划分为几个不同的类型进行归类，重点是去总结、分析，降低同一类型问题发现的概率;

协调处理就是协调开发、测试等资源修复问题。

操作类问题一般会在产品上线前的一周内集中爆发，这类问题要逐一登记根据重复出现的问题做Q&A重点解答。

运营管理类问题主要是客户的内部管理，这类问题可干预的空间不大。

4.产品优化

产品优化的逻辑要几个方面来开展:

定位产品存在的问题;分析产生问题的原因;对存在的问题按照优先级排序;协同PM、IT、测试等部门排期迭代开发;测试、验证。

数据运营

产品运营的效果如何，需要用一种量化的方式来呈现，通过建立业务核心指标直观的表现产品的运行效果，就是需要做好产品数据的运营。

不同的产品核心指标不同，比如电商，电商的核心指标是销售额=流量*转化率*客单价。与流量相关的指标又有UPPV，新用户、老用户等核心指标与衍生指标。建立核心指标，通过核心指标找到衍生指标，进行形成一个数据指标集合，我们把它称之为数据指标体系。不同的产品数据运营体系皆不同，要想做好数据运营第一要务是了解产品，了解产品的关键核心并拥有极强的抽象能力。

常见的数据分析方法有:

漏斗分析 行为分析A/B测试 聚类分析 决策树等等

客户经营

80%的收入由20%的客户提供这是市场不变的定律，然而资源的总量是恒定的。我们在运营工作中投入的资源是有限的，这就决定了资源分配的不均衡性。因此，在实际的运营工作中我们必须做好2件事情客户分类、资源费配。

客户分类也可以叫客户分级体系，不同类型的公司对于客户分类的方法也不同，但是原理一致:根据客户的重要程度进行分类。我习惯的分类方法是S、A、B、C。

S类客户是指对于公司的战略有重大影响或者在公司的营收中占比很高。这类客户一般是行业龙头，与我们的合作不仅仅期望提供服务，并希望借此合作机会对双方的品牌影响力都有提升。这类客户必须抽调最优质的运营资源比如专属的运营服务团队，研发团队等;

A类客户是指该类型的公司在公司的战略方向，并且在行业内有一定的影响力，或者该公司的营收占比较高，这类客户可以提供专属的运营人员和产品经理等，提供1对1或者1对2的服务;

B、C类用户提供无差别的服务，按照运营工作的部署正常运营。

不同的2B服务制定的服务标准都不一样，具体我们要如何制作客户分类标准要根据企业实际提供的服务来看，不可生搬硬套。

• C端产品关键词包括免费使用、迅速上手、体验为王、你能让我做什么；

• B端产品的关键词则是付费购买、上手缓慢、效率第一、你能为我做什么。

统一尺寸

据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。

适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可。

页面框架

页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。

栅格布局

栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。

需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。

谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。

尺寸设定

一般在整体区域左上角放置产品 LOGO 及产品名称，大部分系统顶部栏高度 48+8n，侧边栏宽度  200+8n。我常用的是顶部栏高度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。

相对间隔

定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。

后台产品设计规范

以下数值为参考，请结合特定产品灵活运用。

1. 页面布局

统一尺寸

据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。

适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。

页面框架

页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。

栅格布局

栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。

需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。

谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。

尺寸设定

一般在整体区域左上角放置产品 LOGO 及产品名称，大部分系统顶部栏高度 48+8n，侧边栏宽度  200+8n。我常用的是顶部栏高度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。

相对间隔

定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。

2. 标准色

颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。

品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。

辅助色用于提示其他场景，比如成功、失败、警告、无效等。

中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。

其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。3. 标准字

后台系统常用的字体：windows 系统，中文 Microsoft YaHei，英文 Arial；Mac 字体，中文 PingFang SC，英文 Helvetica；除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。

后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。

行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。

4. 图标

图标是 UI 设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。

除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较高效方便的方法是在 iconfont 提供的图标模板上用 AI 绘制，画板 1024*1024，提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展，绘制完成后生成 svg 格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。

5. 按钮

按钮是后台产品进行交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。

按钮的交互状态包括默认、悬停、点击和不可用。

按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。

规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。

填充按钮之间间距最小为 10px。

6. 导航

导航的类型有很多种，常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。

各类导航中的字体大小可进行统一设定。

顶栏菜单多为一级菜单，点击切换，或作为下拉菜单的父级，将子级菜单合理分类。

侧栏菜单为垂直导航菜单，可以内嵌子菜单。

下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。

步骤条引导用户按照流程来完成任务，一般步骤不得少于两步。

分页的高度设定为 24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等。

面包屑用于说明层级结构，使用户明确当前所在位置，并且可以回到任一上级页面。

徽标数用来通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。

7. 表单

表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。

字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合 PC 端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。

输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。

输入框的尺寸可按照8的倍数进行设定，比如 24px、32px，也可根据系统实际情况进行设定，我常用的输入框高度为 30px，宽度视情况而定，无圆角。上下布局的多个输入框上下间距为 20px，有错误提示时候竖向增加 10px 或横向显示在输入框右侧（预留出位置）。

表单中标题文字左对齐，输入框左对齐，标题文字距离输入框20px（多个长度不同的输入框算最长的）；标题文字右对齐，输入框左对齐，也是常用的方式。输入框内正文字体 14px，文字和左右两边边框的边距 10px。

选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。

搜索框和选择框的高度为 30px 或按照 8 的倍数自行设定，通常和输入框保持一致。搜索框距离右侧按钮 4px，内部文字 14px。

单选多选框尺寸 16*16px，多个选项横向排列间距 16px，纵向排列间距 8px。

开关按钮外框 40*20px，内部圆形 16*16px。

8. 表格

表格在后台产品 UI 设计中占比非常大，用来展示数据、统一管理、作为详情入口，是最清晰、高效的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。

表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；表头展示列标题，一般具有排序功能；正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；底栏显示分页、总数统计等。

表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。

行高

表格行高可设置为表格内字体高度的 2~3 倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。

行数

表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是 20 或 50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多于每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。

列宽

列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以「…」展示，鼠标悬停出现完整内容（比如详情、描述）。

列数

表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。

对齐方式

表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，SHA1 虽然是一串数字但是其实那并不是数据而是一串编码，所以可以像文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似 IP 地址、MD5、SHA1、域名这样的信息，也可以根据产品需要在文本前面增加「复制」图标，方便用户调用。

详情入口

表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。

9. 反馈

包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。

弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。

弹框

弹框出现时，主题内容增加一层遮罩 #000，透明度 50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭， 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。

侧滑框

侧滑框又称抽屉，出现在右侧，固定宽度 400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。

骨架屏

为某些特定数据提供数据加载等待时的占位图形组合。

全局提示

建议停留时间 3s，可根据文字字数调整停留时间，文字内容限制在 30 以内。

警告提示

用不同颜色和样式展示需要关注的信息。

通知提醒

消息通知和警告信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留 3s 后自动关闭。

10. 缺省状态

绘制不同类型的情感化插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。

页面需要一个默认的底色，错误文字使用 14px，与情感化插画间距 20px，与按钮间距 30px。

11. 数据可视化

数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。

功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做得更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。

考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。

B 端产品解决的类型仅限于功能层面而C 端产品除了要解决功能上的需求外，还需要满足额外的需求。因此，必然会形成两个截然不同的产品。