B端组件化设计规范

一、为什么要建设设计规范

我们要了解设计规范的定义基础，它是围绕在某种风格或者大型设计下的，同时设计规范也分宏观与微观。宏观规范通常用来描述感受（抽象的），我们不希望苹果的设计看起来像诺基亚；微观规范更加可视化，数据化，是针对相对独立的体系建立的一些视觉遵守条款。我们都不希望看到新浪这样大的平台，各个频道间的设计差异明显，感觉点击后跳到搜狐平台，而这些针对用户层都是非常重要的体验。

我们很多设计师无法理解规范的意义可能都是因为这种思考。当然是，但我们的变化与扩展应该是基于某种基础上的，这看起来是不是更有挑战了？借用变形金刚艺术总监Alex Jaeger的一段内容，体会一下这段话。

总结下来，在B端产品建立设计规范主要目标是这一下三个方面：

保证设计一致性对内部，对内多设计师合作，依然能保证设计风格统一，对用户提高用户体验，提升操作效率，加深对产品的记忆

提升开发效率：与前段有效沟通的工具，提供设计还原度，降低对接成本，开发可以建立公共组艰苦，极大的提高开发效率

方便产品迭代：随着产品的业务变化，发现一些问题或者需要优化用户体验的时候，针对单个控件进行调整，就可以影响全局，十分便捷。

二、设计规范遵循什么设计原则

一致性：

与现实生活一致：与现实生活中的流程、逻辑保持一致，遵循用户习惯的语言和概念

在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈：

控制反馈：通过界面样式和交互动销让用户可以清晰的感知自己的操作。操作前可预知。操作中有反馈，操作后可返回

页面反馈：操纵后，通过页面元素的变化清晰得展现当前状态

效率：

简化流程：设计简介直观的操作流程

清晰明确：语言表达清晰且表意明确，让用户快速理解进而做出决策

帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担

可控：

用户决策：根据场景可给予用户操作建议或安全提示，但不生代替用户进行决策。（比如用户想删除，可以提供一个气泡你要删除某个内容，不能因为删除是负向操作就不允许操作。）

结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

三、什么是设计规范

目前常用的有三大组件库：有赞、阿里、饿了吗。（文章最后有组件的下载附件）组件里面也划分了非常多的模块。理解运用设计规范有两种划分维度。

我们可以从原子、分子的角度来划分。色彩、字体、间距、圆角可以划分为原子，而通过原子构成了分子，比如字体、间距、圆角就可以构成输入框。组件由分子构成，比如时间选择器、输入框等可以构成筛选组件。模块由组件构成，模块可能是页面中的某个卡片某个页面。页面由多个模块构成，两者之间是层层递进的关系。

也可以换一个角度，通过应用场景来理解设计规范。通用就是上面提及原子分子级的组件，颗粒度比较小却无处不在。导航组件帮助我们知道我现在在哪里，去哪里，怎么到达，主要是查找的作用。B端主要解决数据录入的增删改查，那么数据录入的组件，就是解决数据的增改查。数据展示组件主要展示数据的收纳与更好的展示出来。反馈组件主要是给用户操作后的信息反馈，对应了设计原则之一的反馈原则。业务组件根据业务需求制作的组件，不是所有行业产品都会用到业务组件，视情况而定。比如电商平台可能会用到会员卡，商品列表等。

四、通用组件：

通用组件上面内容有提及，包括色彩、文字、边框和圆角、按钮、间距、栅格。下面逐一对这些内容详细讲解。

4.1色彩

色彩是最基本的通用组件，划分为主色、功能色、中性色

4.1.1主色

如何定义主色呢？首先定义一个基础颜色，尽量选择冷色系，是因为功能色里面包括告警色。避免和错误、告警色冲突，产生歧义。然后把颜色的明度、饱和度进行调整的就得到主色及其延展颜色。选择主色的时候应该避免颜色饱和度、亮度过高，需要考虑到用户是长时间使用产品工作的，所以要避免用户视觉疲劳。

上图两个黑线中间可以定义为冷色系

应用场景

主色主要运用在按钮、选中状的、hover状态、高亮提醒。比如下图举例的步骤条的选中态、标签页的选中态，导航的选中态等等。

常见小问题：

Q：为什么我的颜色总是发灰？

A：sketch——首选项——颜色配置——sRGB

Q：如何定义同色系不同明度、饱和度的颜色？

A：定义一个蓝色，降低不透明度，比如80% 60% 40% 20%...做弱化。颜色加深的处理方式是在原始颜色基础上，加纯黑色，调整黑色的不透明度20% 40%...做加深。好处在于这么调整出来的颜色肯定是同色系的。

Q：如何一键更换主题色？

A：选中颜色后后面看下图

4.1.2功能色

成功色

通常情况下是绿色的，绿色在情绪板中象征着积极向上、安全健康。

警告色：

通常选用黄色或者橙色，表示错误发生前的预警。选择黄色是因为可读性没有那么强，长时间观看容易造成视觉疲劳。

错误色

通常错误色选用红色，与日常生活也是有关联。比如红绿灯，警告灯，红牌警告

4.1.3中性色

颜色较深的三种黑N1-N3，用在文字不同层级的黑。其他稍微浅色一点通常用在边框分割线。页面的背景色也尽量选用N8最浅的颜色。在选择用色的时候尽可能往蓝色调偏一偏，看起来会相对更纯净一些。

4.2文字

字体

苹果系统  中文：pingfang     英文：San francisco

win系统    中文：Microsoft YaHei    英文：Arial

字重

苹果：regular  Medium  Semibold

Win：400 500 600

（注：win系统用前端描述400 500 600，分别对应苹果的三种字重）

字号

页面不同层级文字可以选择用26 20 18 16 14 12。正文字体建议：14号，14号字看起来是最舒适的。在同一个页面，不建议超过4种字号

行高

字体本身高度就是字号。行高是字距离下一行字的高度。对于多行文字，1.3倍行高看起来会略显紧凑，1.7倍又过于宽松。所以通常为设置为字号的1.5倍，如果乘上1.5不是整数，可以取整数即可。

4.3边框和圆角

边框一般规范1px就可以了，圆角常用的是2px 4px，2px用于按钮，4px用于输入框和卡片。

不推荐用大圆角，因为PC后台经常出现连续的button，如果大圆角，视觉感官连贯性弱很多。B端后台偏严谨，如果用大圆角，会偏向于可爱，亲和力，情绪板会少了严谨的感觉。

4.4按钮

通常定义三种按钮即可，小按钮，中按钮，大按钮。区分原因在于容器大小，不同的框宽高。小按钮多用于气泡内；中按钮多用于弹窗；大按钮多用于页面内。

按钮长度：设置一个按钮宽度，如果当文字超过按钮宽度，可以设置一个padding一般是8的倍数，推荐16。最好按钮文字不超过6个字，按钮需要用户快速做抉择，过长对于用户不是很好

按钮状态：常规态  hover态 active态， loading态  disable态

按钮功能：主按钮、次按钮、提示按钮、警示按钮、切换按钮、icon按钮

按钮应该怎么放？

参考按钮分布位置以及阅读习惯。通常吸顶的按钮阅读顺序是从又想走。正文下面的跟随按钮是从左到右。吸底按钮是从右往左的阅读顺序。那么根据已知的阅读顺序就可以定义出不同位置的按钮摆放顺序。

4.5间距

建议间距选用8的倍数就可以，比如8 16 24 32 40 ...一些特殊情况也可以定义8的1/2、3/2。

市面上大部分的屏幕分辨率1920*1080 1366*768 1400*900，其他分辨率就相对小众一些。而这些宽度能被4 6 8 10 12整除的只有4和8，又因为能整除4的数字过多，所以我们通常规定，间距选选择8的倍数。

4.6栅格

一般选用24栅格：24栏+23个水槽+2页边距

栏宽度计算方式：页面宽度减去两个页边距减去23个水槽宽度（一般是8的倍数）再除以24就是页面宽度。

栅格系统系统怎么用呢？

以24栅格为例，三等份就每一块划分8个栏，这样就可以规范的划分3个栏。以此类推，两等分就是一个模块划分12个栏。

五、导航组件

导航主要分为全局导航和局部导航。全局导航包括了顶部导航、侧边导航、混合导航，主要存在于全局控制层；局部导航包括了面包屑、标签页、步骤条、分页，一般在内容层，偶尔会出现在临时层。

5.1全局控制层

由状态栏和全局导航构成，少数情况下会有帮助引导（一般在SaaS中存在），类似于帮助中心。状态栏一般会放消息，个人信息，搜索，面包屑。

5.1.1顶部导航

使用场景，适用于一级导航数量较少，内容较为简单的系统。

追求沉浸式阅读操作的系统，多用于官网首页

优点：占用屏幕空间小，为内容区流出更多空间；对视觉的干扰小，符合从上到下的阅读习惯；一般采用固定版心的方式，更容易适配。

缺点：随着业务的发展，拓展性变差；二三级导航后隐藏，不利于用户记忆与查找。

5.1.2侧边导航

使用场景：适用于更专注功能和快速操作的系统；多用于较为复杂的后台系统。

优点：拓展性强，一级导航的树木可以展示更多；层级清晰，一二三级导航都可以流畅展示；来操作效率高，用户在操作和浏览中可以快速定位和切换当前位置。

缺点：视觉分割较为明显，内容区沉浸感不是很强，如果不是非得做强势分割，导航做黑色等颜色的，就可以做一个简单分割，灰色 白色即可；视觉动线左右折回，比顶部导航更容易疲劳，内容区的排版空间更小，需要考虑适配问题。如下图案例，有时候针对小屏幕用户，帮助栏是支持收起的，甚至于有时候导航栏也支持收起。如果调研发现用户大部分是大屏电脑，就没有必要了。

5.1.3混合导航

使用场景：适用于功能很多，结构复杂的网站；多用于政府、公共事业部门的后台系统

优点：层级拓展性强，可达到四五级

缺点：操作难度上升，视觉动线更复杂。内容区展示会受到很大影响。

5.1.5三个导航之间的对比

5.2局部导航

局部导航分为面包屑、标签页、步骤条、分页

5.2.1面包屑

什么是面包屑

面包屑最为辅助和补充的导航方式，它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点。最常见的面包屑样式是：横向的文字链接，由大于号“>”分开，这个符号也暗示了他们的层级关系。其实就是一个导航、路标的作用。告知用户在哪儿，且可以快速回到上几级导航

面包屑的分类

1.基于永辉所在的层级位置：基于位置的面包屑用于告知用户在当前网站中所在的结构层级。用在具有多级导航（通常具有2级以上导航）的网站中

2.基于产品的属性：这类面包屑通常出现在具有大量类别产品和服务的网站中，如电子商务网站，网上教学服务等。

3.基于用户的足迹：显示用户浏览的轨迹，面包屑之间没有明显的层级关系

面包屑的好处：

1.面包屑作为用户寻找路径的辅助手段，能方便他们定位和导航

2.面包屑可以减少用户返回上一级页面所需的操作次数

3.临时性，动态性，占用屏幕空间小，干扰性小

4.降低网站王文哲的总体跳出率（当用户从别处链接到网页，或者从搜索引擎找到网页，则面包屑的存在能帮助用户快速了解当前的层级位置，并引导用户查看网站的其余部分，减少了看完直接跳走的用户数量。）

使用场景：两级及两级以上层级，最多不超过5级。使用的时候注意每一级导航点击后，都必须有页面承载。

页面位置：有时候会用在状态栏上，有时候会用在内容区的卡片上，有时候会用在背景层里面。建议如果没有其他内容可以用在状态栏上，好处在于不会占用其他空间。

5.2.2标签页

标签页也可以帮助用户在一个页面内速切换不同类型内容，提升单个页面整体的拓展性。多用于不同类型数据集合的切换，导航的属性更强。在用户的心智模型里，这就是一个导航。

卡片样式也是顶部中部都可以用，多用于同类数据，不同状态的切换

胶囊样式，多用于试图模式切换，或者数据可视化页面中。

5.2.3步骤条

默认横向步骤条。存在常规、进行中、错误等情况。也有竖向步骤条的。

5.2.4分页

主要用在表格列表类型的页面比较多，分页的好处就是当你打开表格页的时候，其实只加载第一页。为了减少前端数据接口的读取压力。

分页器从样式上分为基础分页器、自定义页数分页器、简约版分页器、迷你分页器

六、数据录入组件

数据录入组件分为输入框、单选框、多选框、选择器、日期选择、时间选择、开关、步进器等。通常用在表单页和表格列表页。主要是数据的增和查。

6.1输入框

输入框有5种状态，常规态、hover态、激活态、失焦态（激活后，鼠标移出或者点击回车）、不可用态。

除了最基本的输入框以外，还有长文本输入框适用于大段文字录入。设计的时候切记不要忘记右下角的字符限制。超出字数限制后，加一个红框提醒。除此之外也有拓展延伸出来带关联选项的输入框，输入内容时候带有联想的，通常用在搜索状况下比较多。

6.2单选框

主要有选中、未选、未选失效、已选失效四种状态，常用的状态是，未选中和已选中。排版有两种方式 横竖。看内容多少而定，不需要保持一致。从基础样式衍生出的胶囊选择，特点是点击面积更大，同时更强调选项。

6.3多选框

5种状态：未选中项、已选中项、未选失效项、已选中失效项、部分选中

应用场景：非常广泛，列入表单、表哥、下拉框。没有数量限制。

6.4选择器

选择器与前面的单选框多选框不同的是，上面都是平铺的，选择器是点击下拉。下拉选项最好控制在8个选项以内，超出加入滚动。选择器也支持多选。超出的可以换行或者是省略号，根据业务决定是否有全部展开的必要。

6.5级联选择

当选项很多且有分组的情况运营级联选择，比如：OA系统选择部门 员工信息。

6.6树选择

比起级联选择，把横向延伸变成纵向延伸，只用一个下拉框解决问题，适用于二三级菜单比较少的情况。而且也支持多选。

6.7日期选择

蓝框表示默认今天日期，帮助用户尽快定位选择，比较友好。也可以选择某一个时间段

6.8时间选择

时间选择更聚焦于时分秒

6.9日期时间选择

时间选择和日期选择两个组件的结合

6.10开关

使用场景：适用于具有对立意义的选项。

切记：开关不要与确定、取消一起用。因为大部分用户的心智模型和使用习惯，切换开关后立即生效，你又给了一个确认开关按钮，用户会不清楚是否生效。所以给及时的反馈更符合他的使用习惯。

6.11步进器

分为三种状态

应用场景：选择一个数字。大部分的步近期还包括辅助说明，如果不符合还会有错误体制，有些还有单位。选中一种即可，不建议多种一起使用。

6.12滑动输入条

使用原理：有明确的使用区间。

声音、视频、招聘调节、薪资等产品会使用这类组件

6.13穿梭框

穿梭框选择要穿梭的内容。穿梭后左侧列表就消失到右侧显示。只是做交互，整体的选项是一致的。右侧穿梭过去的数据，也可以再穿梭回左侧。

6.14文件上传

七、数据展示

7.1徽标

应用场景：一般出现在同时图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。

定义封顶值：是10+  99+ 999+，当数值为0的时候不显示。

定义距离：一般定义为距左侧图形的距离，也可以自定义文字内容。

7.2标签

小标签：通常用在表格里面

中标签：通常用在弹窗

大标签：通常用在页面中

7.3走马灯

走马灯，类似于轮播banner，有四种用法，基础用法、带切换箭头、卡片化、切换动效果

基础用法：水平（垂直）显示

带切换箭头：水平显示，带箭头

卡片化：页面宽度方向空间有空余，但高度方向空间匮乏时使用的风格

切换动效果：无效果、渐显、定时切换下一张，间隔3s

7.4 文字提示

鼠标移入时出现，移出时小时，不承载任何操作。一共有12个方向，根据button不同位置。hover状态

7.5气泡卡片

鼠标点击/移入时出现，适合文字较多的情况，可以承载相应的操作。

7.6折叠面板

折叠面板可以更好的收纳内容取悦，提高页面利用率。主要包括：无边框有底色样式、有边框有底色样式、无边框无底色样式、无底色样式。

7.7表格

使用场景： 当有大量结构化的数据需要展现时；当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时.

常见的表格样式：

什么是表格页？

表格被公认为是展现结构化数据最为清晰、高效的形式。长和按钮、搜索、筛选、分页等其他界面元素一起协同，构成表格页。由行、列、单元格、表头组成表格。

优点：结构简单、分隔和归纳明确，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。

表格的风格样式：

极简样式：当你的数据内容并不多，列数并不多的情况用极简样式足够，如果你想查看每一行，可以在hover状态下显示背景色做成斑马样式。首推样式

斑马：行数很长，列数很多，数据很复杂，甚至要滚动才可以查看内容，选择斑马纹的会更好

分割线：列数非常非常多，可能10几 20列的情况下，选择分割线版本，省去间隙直接用直线来划分清楚。以及有的带分组的表头，选择分割线也是有必要的。

要注意的三个点

一个系统内结合具体情况也可以用两种样式，目前企业级B端产品很少带有斑马纹，大多是hvoer状态下显示斑马。分割线样式尽量轻盈，不要抢视觉，

去掉不必要的装饰和颜色，比如下图的案例。没必要加icon，也没必要加五颜六色。颜色越多反而增加很多视觉亮点，降低用户选择效率。比如右图不同的状态可以用彩色小圆点来注释。用户在操作按钮是没有使用倾向的，可以并列排放即可。点击向上是从小到大（正向排序），点击向下是从大到小（逆向排序）

八、反馈

反馈组件分结果模态、过程模态、非模态三个。结果模态组件包括轻提示、通知提示、警告提示；过程模态组件包括进度条、加载；非模态组件包括弹窗、抽屉。模态组件是不会打断用户操作的，而非模态会打断用户操作。

8.1轻提示

通常会出现在页面上面顶部出现2-3秒消失，文案内容尽量20字以内，简介。

多用于系统级同志的被动提醒，常伴随页面的变化。

8.2通知提示

常常出现页面右上角，如果右上角有重要的内容，可以放子右下角。

也分为普通信息，成功信息，警示信息。多用于系统级主动推送，内容往往复杂，6-8秒后消失。卡片的拓展性比轻提示强很多。

通知提示分为两种表现形式：基础通知提示、带图标通知提醒

8.3警告提示

提示类型有且仅有 4 种形式，常规、成功、预警、失败。

可以带叉关闭的，可以i带为你链接的，可以带按钮的，也可以加载GIF的。也可以设置成N秒后消失。

8.4弹窗

在保留当前页面状态的前提下，告知用户并承载相关操作

弹窗由标题，内容区，操作区。操作去，标题区根据业务需求可有课没有。

操作区按钮一般情况下是右下角。但是当弹窗页面非常大的情况下，会选择居中对齐

弹窗宽度

一般会定义为3种宽度，会有一个最小高度和最大高度。最小高度200px  最大高度560px，如果内容超出了最大高度，就通过滚动展示。小弹窗560px宽  中弹窗720px。大弹窗960px，都是8的倍数方便记（不考虑自适应的情况下）

弹窗内容规范

定义好标题栏操作栏的高度，内容区的边距。自适应的情况下，定义好的边距是不变的，这个就能满足视觉一致性。

弹窗类型

1提示弹窗，内容区只有文字提示，一般采用小弹窗。

2.自定义弹窗，内容区嵌套表格或者表单，一般采用中弹窗或者大弹窗。

弹窗的优点

没有跳出父级页面，弹窗任务完成后仍然会留在父页面继续进行操作，感觉上步骤少了很多  焦虑感 等待感觉少了用户操作中的步骤体感

弹窗的缺点

信息承载量少，当信息内容过多的时候，弹窗会降低用户的操作效率。尤其是左右滚动，在PC端要极力避免的。强行承载会降低用户的操作效率

弹窗使用规则

1.判断是否有使用弹窗的必要

如果说一个内容用弹窗承载太过于强行打断，用气泡卡片提示可不可以？内容是否用气泡卡片提示，取决于这个内容在业务上是否关键。如果不那么关键给一个气泡就可以了，如果必须强提醒，还是得选择弹窗

提示弹窗

犯错误的成本很高，必须强打断新用户当前操作的情况，提示文案较长的情况下。

2.不建议超过两种操作选项

如果承载的操作和表单项特别多的情况下，建议新跳转tab页面，不再原页面左操作

3.信息量过大的时候，建议用页面承载

多步骤操作，选择用页面承载。

4.尽量避免弹窗叠弹窗

弹窗叠弹窗的业务逻辑是对的，但是怎么避免呢？我们可以考虑第一个弹窗是否可以考虑用页面承载呢？或者第二个弹窗是否可以考虑用气泡下拉选择承载呢？或者第一个弹窗已经存在了，第二个弹窗可不可以气泡卡片呢？

5.如果一定要重叠，二级弹窗任务复杂度应该低于一级弹窗。

要满足一个形式上的平衡，遵循从大到小的原则。二级弹窗最好只有一个单一任务，以及弹窗任务复杂度，应该低于原有页面。也可以选择覆盖的方式，减少弹窗层级。

8.5抽屉

抽屉跟弹窗很多属性是相似的。区别在于信息承载量和页面比肩。又具备了弹窗的优点。所以抽屉兼具了弹窗的优点属性的组件。

抽屉的弹出方式是上下左右都可以。通常为从右向左弹出，符合用户的心智模型之外，同时不遮挡数据的原标题的优点。

优势：空间大，可以承载复杂的表单和字段较多的详情。

劣势：相比于弹窗，尺寸灵活度较低，高度固定，只能调节宽度。

总结

以上就是整个B段组件库设计规范的总结。

希望能对你有所启发有所帮助，设计的小伙伴一起加油吧！

最后再次感谢有赞设计师@美芳在CCtalk的分享，我们是一群本着提升B端体验汇聚在一起的团队，欢迎关注公众号【且曼B端产品设计】交流探讨。

参考文献：《CCtalk B端产品设计课》by 美芳

本文由whiplash_G 原创,未经许可，禁止转载。