问题与现状
刚加入 SmartX 时，内部设计系统 CloudTower UI 的组件设计说明文档存在诸多不足，具体表现为：
CloudTower UI 1.05 部分组件已经过时，无法与 CloudTower UI 1.1 对应。
CloudTower UI 1.1 仅包含 Figma 组件，缺少组件开发所需的行为描述，如 hover 状态、视觉参数、场景使用指南、必要的交互说明等。
CloudTower UI 1.0.5 部分组件过时且设计说明不够完善。
CloudTower UI 1.0.5 部分组件描述文档概览。
CloudTower UI 1.1 仅面向设计师提供了可用的组件，缺乏相应的设计说明。
此外，鉴于 CloudTower 已步入 3.x 版本周期，众多组件需依据新的业务需求与场景进一步优化升级或增添变体，以更契合实际业务场景需求。例如：
Tag 增加 Split 样式与 Hover 状态
部分组件需要增加加载样式的说明
部分输入控件的禁用样式未统一，或需要设计优化
Accordian 组件需要增加展开收起 Icon
Tooltip、Popover、Card 缺乏规范的组件定义
…
外因方面，在 CloudTower 3.5 周期内，Tower 开发组有了 UI Kit 的项目（Eagle）并且有专门的人力投入，可对组件进行对齐和补全开发。
综上所述，本次设计系统的完善驱动力主要源于以下三方面：
设计层面：组件内容陈旧，部分组件无法满足新功能场景需求；部分组件类型缺失；组件的设计说明文档不完备。
研发层面：线上组件还原度欠佳，项目走查费时费力；前端组件库的开发与维护长期无专门资源投入。
时间节奏：至 CloudTower 3.x 周期，团队内设计师手中大多积累了部分业务组件或变体，这些内容需进一步沉淀为设计说明文档并交付前端开发，否则不同项目中均需不同研发人员重新实现，浪费研发人力。
综合以上原因，设计团队在 3.5 周期内确定了设计系统文档完善的任务与目标，新版本的设计系统更名为 CloudTower UI 1.5。
设计目标
CloudTower UI 1.5 DS 的设计目标是依据设计系统计划，优先完善组件文档。设计交付将以无业务逻辑的组件描述为核心，同时整理 Design Patterns 和 UI Map，最终建立完善的设计指南。
Design System 完善计划表。
组件优化设计流程
组件设计流程包含了从组件拆分到组件实现后走查的全流程。
组件文档撰写结构
因为 Design Manager 希望我们探索各自的文档写作和视觉风格，所以组件文档的撰写并未设定严格细致的写作规范，但总体上都遵循着以下 6 大结构：
Example
组件在真实业务场景下的案例展示
元素构成
拆解构成组件的最小原子，了解组件构成
类型汇总
组件所有类型的展示
交互说明
组件的关键交互细节说明
视觉参数
未研发工程师标注出关键部分的视觉参数
边缘与异常场景
特定组件会包含空状态、错误状态等样式参考
实际写作中，不同组件根据实际业务需求的不同，可能会在此基础上省略或增加一些特定的模块。内容简单的一些组件，例如 Legend、Badge、Link 等通常会省略视觉参数部分；复杂一些的组件，Resource Selector 、Tree、Tabs 等会给出 Design template 供设计师直接取用等等。
设计成果输出
我参与的设计系统的完善工作主要包含 Component、Pattern、UI Map 3 部分。下面展示部分项目案例：
⚛️
Component 文档示例
组件设计模块中，我主要负责导航类的组件优化，包含 Breadcrumb、Link、Pagination 等小项目。因为项目开始时，同步进行优先级更高的业务项目，所以这类项目的参与并不是很多。
由于文件过大，完整内容请参考 Figma 链接🔗
Breadcrumb
用于展示当前页面在层级结构中的位置，并支持向上返回。
使用场景
搭配其他导航类组件，作为辅助导航使用。
支持单层级返回。
Related Components
PageHeader
作为辅助导航使用，传达页面层级关系
Org-Name
Datacenter-Name
Resource-Name
创建
Label
Label
Label
Label
Label
Label
虚拟机恢复点
事件
Hygon-centos7
fe-test
windows-2019
cluster-name
cloudtower-test-cluster111111111111111111111111111111111cloudtower-test-cluster11111111111111111111111111
1111111cloudtower-test-cluster111111111111111111111111111111111
时间选择器
恢复点
2021-11-24 2:00
2021-11-23 2:00
2021-11-22 2:00
2021-11-21 2:00
2021-11-20 2:00
2021-11-19 2:00
备份文件大小
2.21 GiB
2.21 GiB
2.21 GiB
2.21 GiB
2.21 GiB
2.21 GiB
备份有效容量
2.21 GiB
2.21 GiB
2.21 GiB
2.21 GiB
2.21 GiB
2.21 GiB
备份类型
全量备份
增量备份
增量备份
增量备份
增量备份
增量备份
执行类型
自动执行
手动执行
自动执行
自动执行
自动执行
自动执行
压缩比
-
-
1.44
1.44
1.44
1.44
恢复
恢复
恢复
恢复
恢复
恢复
共 7 项
搜索虚拟机…
间距
Label
Label
Label
Label
Resource-Name
4
4
Truncate
空间不足时，截断某些面包屑标签项。至少保留两个页面标签，鼠标 Click 时，使用 Select Menu 展示省略内容。
页面宽度不足以展示两个 Label 时，单个 Label 文本最大宽度为 350px，超出部分截断打点（…），Hover 展示 Tooltip 提示完整内容。
Label
Label
Label
Label
Label
Label
Label 1
Label 2
Label 3
Label with a short name
Labelonglonglonglonglonglonglonglonglonglonglonglong…
Labelonglonglonglonglonglnglonglonglonglonglonglonglonglonglong
交互行为
面包屑的分隔符不可点击，点击 Label 跳转至对应的页面。
Hover 样式
Active 样式
默认样式
Label
Label
Label
Label
Label
Label
所有变体
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
NO Truncation
Truncated
✡️
Pattern 文档示例
Pattern 是从业务场景中抽离出来的可供复用的设计模式。Pattern 的沉淀与维护可为团队其他设计师提供良好的最佳实践，使产品更好用，让目标更加专注。以「资源计数」、「无法操作的场景处理」为例。
以「资源计数」、「无法操作的场景处理」为例。由于文件过大，完整内容请参考 Figma 链接🔗
Pattern
SmartX
资源计数
背景
借文档工程师制定 CloudTower UI 英文文案单复数写作规范的机会，整理了 CloudTower 中资源计数的展示规范。
通用规范
资源计数的展示仅支持 2 种形式：「数字 + 对象」和「对象：数字」，不支持「对象 + 数字」的展示方式。
「数字 +对象」：适用于 Tower 中的绝大部分场景，包含 Widget、表格、列表等常用组件容器
「对象：数字」：多用于 Menu 组件内的辅助信息展示
例如：
Repo-name
已连接
可用容量：16.5 GiB
总容量：55 GiB
--------------------------------------------------
80%
Repo-name
连接异常
可用容量：16.5 GiB
总容量：55 GiB
--------------------------------------------------
80%
搜索
T4-16Q
缓存大小：16 GiB
vGPU 数量：7
vGPU 可使用：6
Tesla V100-PICE-16GB
GPU 资源不足
复制服务
共 12 个
replica-service-1
2.0.1
关联集群
3
复制计划
10
replica-service-2
2.0.0
正在升级
关联集群
4
复制计划
2
异常
replica-service-3
2.0.1
关联集群
4
复制计划
2
replica-service-4
2.0.1
关联集群
2
复制计划
4
% 服务器池 name %
网关：192.168.0.1
健康检查监视器 4
不健康 1
数字 + 对象
✅
对象 + 数字
❌
对象：数字
✅
动态资源调度设置
编辑
动态资源调度
启用
自动化级别
手动
敏感度
标准
特例规则
4 虚拟机
design: test
app: dev
12 个虚拟机生效
design: test
app: dev
12 个虚拟机生效
Widget 空间不足场景的处理
Tag 文本过长导致英文展示空间不足时，遵循以下处理：
Tag 主语与所描述字段的主语一致时，使用 Icon Tag 方式展示计数，Hover 展示 Tooltip，点击跳转到相应的详情展示（需根据具体场景定义跳转的详情页面）。
Tag 主语与所描述字段的主语不一致时，需在 Icon Tag 中保留主语，Hover 展示 Tooltip，点击跳转到相应的详情展示（需根据具体场景定义跳转的详情页面）。
调整前
主语一致
主语不一致
调整后
集群
共 11 个
超融合集群
SMTX OS（ELF）
2
SMTX OS（VMware ESXi）
3
虚拟化集群
SMTX ELF
4
2
分布式存储集群
SMTX ZBS
2
集群
共 11 个
超融合集群
SMTX OS（ELF）
2
SMTX OS（VMware ESXi）
3
虚拟化集群
SMTX ELF
4
2 存储服务异常
分布式存储集群
SMTX ZBS
2
2 集群存储服务异常
Cluster-name-1
Cluster-name-2
2
Beijing-IDC-longlong-name111
版本
1.0.1
升级中…
Controller 状态
3
1
1
分布式防火墙已关联集群
4
2 ER 代理异常
虚拟专有云网络已关联集群
4
已开启功能
2
Beijing-IDC-longlong-name111
版本
1.0.1
升级中…
Controller 状态
3
1
1
分布式防火墙已关联集群
4
2 代理
虚拟专有云网络已关联集群
4
已开启功能
2
查看详情
2 代理
查看详情
3 代理
observability-SH
版本
1.0.1
observability-SH
版本
1.0.1
关联集群
5
3 代理
☸️
UI Map 文档示例
UI Map 是对单一页面在不同版本中迭代功能的 Track 工具，方便设计师更好的追溯先前的设计决策，也为后续的设计提供更多的上下文。
以「移除集群」UI Map 为例。由于文件过大，完整内容请参考 Figma 链接🔗
Pattern
SmartX
移除 SMTX OS & SMTX ELF 集群
移除集群
取消
移除
如果集群还存在于特定的功能范围内，则展示这段内容，并列出具体的范围信息。Tooltip 時換行展示名称，按名称排序。
移除 SMTX ZBS 集群
从 CloudTower 中移除 SMTX OS & SMTX ELF 集群后，回收站内的虚拟机、使用相同内容库资源的集群、系统服务虚拟机都会受到影响。
可能包含以下情况：
该 ZBS 集群中存在内容库资源（虚拟机模板/ISO）
移除集群
确认从 CloudTower 中移除集群 %cluster-name% 吗？
移除后，集群将不再受 CloudTower 管理。
回收站内该集群的 3 个虚拟机将立即被永久删除，无法恢复。
chongyu.zhang.cluster1
%VM-name%
%VM-name%
1
移除集群后，以下内容库资源对应的 iSCSI LUN 将会从集群中被删除：
%resource-name%
%resourcename111111111111111111111111111111111111111111111111111111111111111%
内容库中的如下资源使用该集群作为唯一的所属集群。移除集群后，其他集群将无法使用以下资源：
ISO-Image-1
ISO-Image-2
VM-template-1
该集群连接异常。
取消
移除
该 ZBS 集群中不存在内容库资源（虚拟机模板/ISO）
移除集群
确认从 CloudTower 中移除集群 %cluster-name% 吗？
移除后，集群将不再受 CloudTower 管理。集群内的资源不会受到影响。
该集群连接异常。
取消
移除
2
1
移除内容库资源对应的 iSCS LUN
前提条件：ZBS 集群关联的 SMTX ELF 集群中不存在虚拟机
影响：删除存储在该集群的内容库资源及对应的 iSCSI LUN 存储资源
2
移除内容库资源对应的 iSCS LUN
如果该集群具有唯一一份共享内容（其他集群没有），那么在解除关联的时候进行提示：
先展示 ISO，再展示模板
同类型内部按照名称排序
1
集群包含运行 SKS 系统服务的虚拟机
SKS 服务卸载后，当集群连接异常时，允许移除集群。
按功能分区，每个分区展示功能名称和虚拟机列表，虚拟机列表中系统服务虚拟机图标和名称。
包括：
镜像仓库（对应 registry 虚拟机）
SKS 管控集群
注：图标使用系统服务虚拟机图标。
SMTX ELF 集群暂未实现
仅 SMTX OS 集群
（其他部分同时适用 OS 和 ELF）
备注
Tower 关联集群的任务进行中时，UI 上禁止移除集群，但可通过 API 移除集群。