案例 06

CSP 组件库

CSP 设计组件库是基于 Semi Design 的分支库，是 CSP 团队在内容安全的业务背景下派生出来的子组件库。

  • 为字节跳动的内容安全平台搭建了 CSP：一个从 Semi Design 衍生的业务组件库。
  • 从设计师和前端工程师提出的问题出发，保留 Semi 的质量，补上信息密集、以审核为主的界面所需的模式。
  • 被 20 多个内部平台采用。
技能
组件库搭建 · 团队协作 · 业务背景分析
时间
2021 年 5 月 – 2022 年 1 月（任职期间）
20+内部平台

组件库的复用方式：最底层是 CSP 基础组件，其上是通用物料（筛选器、复制 ID、用户信息卡片、序号输入框）和业务物料（人工审核、机器审核、风险管理、数据），最上层是各个平台和场景封装（人工审核模板、自定义看板、安全数据看板、热点事件日历），被直播安全、抖音安全、电商安全、西瓜安全复用组件库的复用方式：最底层是 CSP 基础组件，其上是通用物料（筛选器、复制 ID、用户信息卡片、序号输入框）和业务物料（人工审核、机器审核、风险管理、数据），最上层是各个平台和场景封装（人工审核模板、自定义看板、安全数据看板、热点事件日历），被直播安全、抖音安全、电商安全、西瓜安全复用

流程

1. Discover

  • 收集设计师和前端（FE）提出的问题
  • 调研其他相关的设计系统
  • 为设计和开发排期确定优先级

2. Define & Design

  • 参考之前设计师的设计，为了一致性和统一性，了解设计背景和业务背景
  • 评估直接修改 Semi 对接的可能性

3. Carry out

  • 持续开发
  • 在新平台上做试用实验
  • 建议 PM 直接上手试用

CSP 组件与 Semi 组件的区别

Semi 的雷达图：组件数量、UI 品质、可定制性高，交互品质稍低，业务属性和组件功能拆分的粒度低Semi 的雷达图：组件数量、UI 品质、可定制性高，交互品质稍低，业务属性和组件功能拆分的粒度低 Semi

CSP 的雷达图：组件数量、UI 品质、交互品质、业务属性高，组件功能拆分的粒度较高，可定制性较低CSP 的雷达图：组件数量、UI 品质、交互品质、业务属性高，组件功能拆分的粒度较高，可定制性较低 CSP

CSP 是基于 Semi 派生出来的业务组件。它的组件数量、UI 品质和交互品质与 Semi 保持一致，可以减少前端开发的工作量。Semi 被很多设计团队使用，所以可定制性非常高；CSP 为它赋予了业务属性，在内部统一了业务背景和设计方法，并被很多人使用。因为涉及更细致的用户使用习惯和功能，CSP 的设计更加细致。同时它也反哺 Semi，提供更好的设计方案。

Branding

铺满关键词的深色背景上的口号：“Bytedance 安全，守护美好时光”

黄金圈（WHY、HOW、WHAT）与品牌的对应：品牌主张、价值主张“Bytedance 旗下的内容安全平台”、口号、关键词“保护、科技、安心”、受众“安全任务执行者”，以及产品支撑黄金圈（WHY、HOW、WHAT）与品牌的对应：品牌主张、价值主张“Bytedance 旗下的内容安全平台”、口号、关键词“保护、科技、安心”、受众“安全任务执行者”，以及产品支撑

ByteSafe 的标志：蓝绿色的 S 形图形及其含义（GUARDIAN、安全、五维空间），以及白底和黑底的标志

价值观

Cautious

服务于内容密度高、复杂而深入的场景

Flexible

提供更细致的业务场景，简化复杂的布局，沉淀紧凑的审核布局所需要的尺寸和样式

Efficient

服务于平台型产品，提升用户效率，根据业务需求定制交互

设计思路

  • Atom：颜色、字体、icon、圆角、shadow…
  • Molecule：Input、Select、Checkbox / radio、Upload、Datepicker…
  • Organization：Dropdown、Navigation、List、Card、Popover / tooltip…
  • Modular：Filter、Diff display、Bulk operation…
  • Page：Form、Data dashboard、Task detail page…

Components Library 目录

分为四组的组件目录。输入类：Button、Floating Action Button、Radio / Checkbox、DatePicker、TimePicker、Input、Rating、Select、Slider、Switch、TreeSelect、Transfer、Upload。导航类：Anchor、Breadcrumb、Top Navigation、Side Navigation、Pagination、Steps、Tabs、Tree、Page Header。展示类：Avatar、Badge、Calendar、Card、Collapse、Description、Dropdown、Empty、List、Modal、Popover、Sidesheet、Table、Tooltip、Tag、Timeline。反馈类：Banner、Notification、Progress、Skeleton、Spin、Toast分为四组的组件目录。输入类：Button、Floating Action Button、Radio / Checkbox、DatePicker、TimePicker、Input、Rating、Select、Slider、Switch、TreeSelect、Transfer、Upload。导航类：Anchor、Breadcrumb、Top Navigation、Side Navigation、Pagination、Steps、Tabs、Tree、Page Header。展示类：Avatar、Badge、Calendar、Card、Collapse、Description、Dropdown、Empty、List、Modal、Popover、Sidesheet、Table、Tooltip、Tag、Timeline。反馈类：Banner、Notification、Progress、Skeleton、Spin、Toast

字体

字体规范：中文 PingFang SC，英文 Inter；从 header-1（32，semi bold）到 paragraph-small（12，regular）的字阶，以及主题色、功能颜色和自定义颜色字体规范：中文 PingFang SC，英文 Inter；从 header-1（32，semi bold）到 paragraph-small（12，regular）的字阶，以及主题色、功能颜色和自定义颜色

颜色

主题色、功能颜色、自定义颜色的 token，以及各自的 hover、active、disabled 状态主题色、功能颜色、自定义颜色的 token，以及各自的 hover、active、disabled 状态

色板：红、粉、橙、蓝、青绿、紫、青、琥珀、紫罗兰、灰、绿、黄、青柠、靛蓝、浅蓝、浅绿各十阶，以及黑和白色板：红、粉、橙、蓝、青绿、紫、青、琥珀、紫罗兰、灰、绿、黄、青柠、靛蓝、浅蓝、浅绿各十阶，以及黑和白

Icon

组件库的图标一览

组件

Button

Interaction Styles

按钮的状态包括默认（default）、悬停（hover）、按下、状态保持和禁用（disabled）。不同类型按钮的交互如下图所示。

主要按钮被悬停和按下的过程

主要、次要、第三和无边框按钮的各个状态（默认、悬停、按下、状态保持、禁用）

Visual Styles

按钮有四种类型（常规尺寸和小尺寸）：主要、次要、第三和无边框。每种类型对应不同的强调程度和不同的使用场景。此外还有无背景按钮、块级按钮、链接按钮和分割按钮。常规按钮的高度是 32px，在空间有限的场景下可以使用小尺寸（24px）按钮。

常规尺寸和小尺寸的按钮类型

Side navigation

侧边导航

Top navigation

顶部导航

Pagination

分页

Steps

横向和纵向的步骤条：完成、警告、错误、进行中、未开始的状态

Data Input

Input

Input 的类型：默认、前缀 / 后缀、输入组合、多行输入、序号输入 在默认输入框中输入文字的过程

Select

Select 的类型

Date picker

Date picker 的类型

Data Display

Table

Table 的类型：带选择和操作、固定列或表头、表头排序、表头筛选、可展开表格、树形数据展示、拖拽、表格分组 在表格中选择行并做批量操作的过程 展开可展开表格中某一行的过程

List

List 的类型

Information Display

Tag

Tag 的类型

Tooltip

悬停时出现 tooltip 的过程

Popover

Popover 的类型

Data Visualization

数据可视化组件

Feedback

两种样式的 Toast（信息、成功、警告、错误、加载中），以及操作成功时的弹窗

Banner：信息、成功、警告、错误

两种样式的 Notification：信息、成功、警告、错误

Empty（空状态）

Spin（加载中）

Skeleton：默认、自定义、表格

Filter 使用表格上方筛选器的过程：搜索、下拉筛选、排序

Diff display（差异对比）

Timeline

Field display（字段展示）

Bulk operation（批量操作）