Role

Product Designer

Timeline

2023/7 - 2023/9

Tool

Figma

Field

UI/UX,Interaction Design

项目背景

SmartX 作为一家超融合基础设施产品厂商,其核心产品线为超融合操作系统 SMTX OS。随着客户规模的扩大和部署节点的增加,一些客户希望通过独立的资源池来实现计算与存储的灵活扩展。这种架构好处是:

  1. 通过精准配置资源,有效降低设备采购成本;

  2. 更好地控制故障域,确保单一节点故障时不会同时影响计算和存储。

为了满足这一需求,公司计划推出独立的虚拟化计算产品 SMTX ELF。该产品可以独立销售、部署和扩展,为客户提供更灵活、高效的计算资源管理方案。

SMTX ELF

SmartX 原生虚拟化平台

在此项目中,我负责除安装部署模块外的所有功能模块设计,该产品的首个版本于 2023.12 正式发布。

SMTX ELF

SmartX 原生虚拟化平台

在此项目中,我负责除安装部署模块外的所有功能模块设计,该产品的首个版本于 2023.12 正式发布。

SMTX ELF

SmartX 原生虚拟化平台

在此项目中,我负责除安装部署模块外的所有功能模块设计,该产品的首个版本于 2023.12 正式发布。

SMTX ELF

SmartX 原生虚拟化平台

在此项目中,我负责除安装部署模块外的所有功能模块设计,该产品的首个版本于 2023.12 正式发布。

需求理解与分析

复杂型业务产品的特点之一便是技术术语多,业务难理解。对我来说,设计前的最大的挑战之一就是要快速理解所有功能的需求背景,掌握相关的技术概念、功能之间的相互联系等等。

技术术语众多

如接入虚拟 IP、虚拟网络等

需要专业的业务知识

产品如何使用,各类的资源之前的关系

多资源配合使用

如为 ELF 集群配置关联存储、使用存储前配置好业务网络和系统网络等等

单周期链路长

部分资源的创建需要很长的步骤指引与功能配置才能完成

由于该需求涉及众多业务模块和广泛的功能范围,在具体设计前,我首先梳理了产品的功能架构和相关技术术语。其次,我根据不同需求的特点进一步梳理设计任务,同时针对关键节点预先提出问题并记录,以便在后续与 PM 和设计团队沟通时使用。最后,在需求沟通中,我还补充了 PM 遗漏的一些边际场景(如关联存储异常场景的影响)。

技术术语整理

技术术语整理

设计任务拆分

设计任务拆分

产品架构梳理

产品架构梳理

关联存储功能设计

01 功能介绍

经过上述准备后,我对 SMTX ELF 的功能需求和设计任务有了整体性的了解。接下来,我将开始具体的设计工作,首要任务是新增的核心功能——关联存储的设计。

关联存储

关联存储是指为 SMTX ELF 计算集群提供存储的 SMTX ZBS 存储集群。

  • 产品定义上,ELF 必须绑定 ZBS 使用,不支持关联其他的存储产品。

  • 首个版本中,ELF 集群仅支持关联单个 SMTX ZBS 存储集群且不支持移除。

  • 使用准备上,在使用 SMTX ELF 虚拟化服务前,用户需要根据自己的业务特性与实际需求,提前规划好相应的 SMTX ZBS 集群。

02 设计思考

关联存储作为一个全新的功能模块实体,如何被用户感知,如何解释自身,并引导用户使用?

该功能的核心思考框架:

  1. 如何被用户感知——即功能入口设计如何呈现——取决于功能的产品定义和功能的属性信息;

  2. 如何解释自身——即功能本身的设计形式如何呈现——取决于功能的属性和行为(状态 + 操作)且受到问题 1 影响;

  3. 如何引导用户使用——即功能的使用链路如何呈现——受到该功能的前后链路的操作影响。

03 方案设计

关联存储

为 SMTX ELF 集群提供存储支持

关联存储作为一个低频操作,仅在集群设置页提供其操作入口。

关联存储

为 SMTX ELF 集群提供存储支持

关联存储作为一个低频操作,仅在集群设置页提供其操作入口。

关联存储

为 SMTX ELF 集群提供存储支持

关联存储作为一个低频操作,仅在集群设置页提供其操作入口。

关联存储

为 SMTX ELF 集群提供存储支持

关联存储作为一个低频操作,仅在集群设置页提供其操作入口。

关联存储配置作为一个低频操作,仅在集群设置页提供其操作入口。首个版本中,SMTX ELF 集群仅支持关联单个 SMTX ZBS 存储集群且关联存储不支持移除。

ZBS-Cluster-name

已使用

30

TiB

失效

0

B

空闲

70.25

TiB

总容量

100.25

TiB

编辑

跳转到详情

数值展示规范

已使用、失效、空闲、总容量字段

展示规则

小数点后 2 位

无需补 0

最小单位

B

包含小数时,需要保留小数后两位;没有小数时,不用补 0;数值为 0 时,展示该数值的最小单位。

接入虚拟 IP

是否为空,是否符合 IP 地址的格式要求

验证机制

Blur + Onchange

Submit

展示方式

Inline

错误文案

请提供正确格式的 IP 地址。

SMTX ELF 集群是否存在运行中的虚拟机

验证机制

Submit

展示方式

Footer

错误文案

SMTX ELF 集群存在运行中的虚拟机。

密码

是否为空

验证机制

Blur + Onchange

Submit

展示方式

Inline

错误文案

请填写密码。

编辑关联存储

编辑集群 #%ELF-Cluster-Name%# 的关联存储。

连接协议

iSCSI

接入虚拟 IP

192.168.17.223

用户名

留空则不更新

密码

······················

取消

保存

接入虚拟 IP 支持回填

用户名不支持回填

密码不能为空

关联存储的展示与编辑操作。

更多关联存储方案细节请点击 🔗 Figma 链接 查看。

关联存储

关联存储异常场景的处理

关联存储作为 SMTX ELF 计算集群的引擎,一旦出现异常,SMTX ELF 集群的大部分功能都将受到影响。因此,设计前我优先考虑了可能的异常场景及其在界面操作上给用户带来的影响。以集群 Header、集群列表和存储类卡片的设计为例。

关联存储

关联存储异常场景的处理

关联存储作为 SMTX ELF 计算集群的引擎,一旦出现异常,SMTX ELF 集群的大部分功能都将受到影响。因此,设计前我优先考虑了可能的异常场景及其在界面操作上给用户带来的影响。以集群 Header、集群列表和存储类卡片的设计为例。

关联存储

关联存储异常场景的处理

关联存储作为 SMTX ELF 计算集群的引擎,一旦出现异常,SMTX ELF 集群的大部分功能都将受到影响。因此,设计前我优先考虑了可能的异常场景及其在界面操作上给用户带来的影响。以集群 Header、集群列表和存储类卡片的设计为例。

关联存储

关联存储异常场景的处理

关联存储作为 SMTX ELF 计算集群的引擎,一旦出现异常,SMTX ELF 集群的大部分功能都将受到影响。因此,设计前我优先考虑了可能的异常场景及其在界面操作上给用户带来的影响。以集群 Header、集群列表和存储类卡片的设计为例。

  • Org-name

    Datacenter-Name

    ELF-Cluster-Name

    未配置关联存储,虚拟机、虚拟卷、资源优化、监控分析与快照计划等功能无法正常使用。

    配置关联存储

    概览

    主机

    虚拟机

    监控分析

    设置

    全部

    未配置关联存储

    打开「关联存储」页面

    Org-name

    Datacenter-Name

    ELF-Cluster-Name

    关联存储对应的 SMTX ZBS 集群(接入虚拟 IP:192.168.17.173)尚未被当前 CloudTower 管理,虚拟机、虚拟卷、资源优化、监控分析与快照计划等功能的相关操作受限。

    关联集群

    概览

    主机

    虚拟机

    监控分析

    设置

    全部

    关联存储对应的 SMTX ZBS 集群尚未被当前 CloudTower 管理

    打开「关联集群」页面

    Org-name

    Datacenter-Name

    ELF-Cluster-Name

    存储服务异常,虚拟机、虚拟卷、资源优化、监控分析与快照计划等功能的相关操作受限。

    概览

    主机

    虚拟机

    监控分析

    设置

    全部

    存储服务异常

    关联存储异常场景在集群 Header 的不同处理。

    集群类型

    SMTX ELF

    SMTX OS

    SMTX ZBS

    关联存储

    zbs-clsuter-name

    -

    -

    已配置关联存储

    集群类型

    SMTX ELF

    SMTX OS

    SMTX ZBS

    关联存储

    未配置关联存储

    -

    -

    未配置关联存储

    集群类型

    SMTX ELF

    SMTX OS

    SMTX ZBS

    关联存储

    192.168.55.25

    -

    -

    未被当前 CloudTower 管理

    关联存储对应的 SMTX ZBS 集群未被当前 CloudTower 管理

    集群类型

    SMTX ELF

    SMTX OS

    SMTX ZBS

    关联存储

    zbs-clsuter-name

    -

    -

    存储服务异常

    存储服务异常

    关联存储异常在集群列表页的不同处理。

    存储

    共 2.42 TiB

    已使用

    1.2%

    1.71

    TiB

    失效

    9.8%

    152.6

    GiB

    空闲

    111.88

    GiB

    88.8%

    最多还可分配

    45.88

    TiB

    2 副本

    37.29

    TiB

    3 副本

    关联存储

    ZBS-cluster-namelongggggggg99

    ggg

    存储

    缓存

    共 2.42 TiB

    总缓存

    常驻缓存

    已使用

    7.1%

    1.71

    TiB

    失效

    9.8%

    152.6

    GiB

    空闲

    111.88

    GiB

    88.8%

    预留常驻缓存

    20%

    496.64

    GiB

    关联存储

    ZBS-cluster-name

    总缓存

    缓存

    共 2.42 TiB

    总缓存

    常驻缓存

    预留

    100%

    496.64

    GiB

    已使用

    1.2%

    1.71

    TiB

    空闲

    111.88

    GiB

    88.8%

    最多还可分配

    45.88

    TiB

    2 副本

    37.29

    TiB

    3 副本

    关联存储

    ZBS-cluster-name

    常驻缓存

    存储

    无存储资源

    未配置关联存储

    存储

    无法获取关联存储

    关联存储对应的 SMTX ZBS 集群尚未被当前 CloudTower 管理

    存储

    共 2.42 TiB

    已使用

    1.2%

    1.71

    TiB

    失效

    9.8%

    152.6

    GiB

    空闲

    111.88

    GiB

    88.8%

    最多还可分配

    45.88

    TiB

    2 副本

    37.29

    TiB

    3 副本

    关联存储

    ZBS-cluster-name

    存储服务异常

    展示前端缓存的数据

    关联存储异常在「存储」、「缓存」Widget 的不同处理。

虚拟机管理

创建虚拟机

创建虚拟机是 CloudTower 最核心的功能之一。在 CloudTower 中,可以通过「创建空白虚拟机」、「从模板创建虚拟机」、「克隆虚拟机」、「重建虚拟机」和「导入虚拟机」5 种方式来创建虚拟机。

虚拟机管理

创建虚拟机

创建虚拟机是 CloudTower 最核心的功能之一。在 CloudTower 中,可以通过「创建空白虚拟机」、「从模板创建虚拟机」、「克隆虚拟机」、「重建虚拟机」和「导入虚拟机」5 种方式来创建虚拟机。

虚拟机管理

创建虚拟机

创建虚拟机是 CloudTower 最核心的功能之一。在 CloudTower 中,可以通过「创建空白虚拟机」、「从模板创建虚拟机」、「克隆虚拟机」、「重建虚拟机」和「导入虚拟机」5 种方式来创建虚拟机。

虚拟机管理

创建虚拟机

创建虚拟机是 CloudTower 最核心的功能之一。在 CloudTower 中,可以通过「创建空白虚拟机」、「从模板创建虚拟机」、「克隆虚拟机」、「重建虚拟机」和「导入虚拟机」5 种方式来创建虚拟机。

不同场景创建虚拟机场景的关联存储的展示。

位置

集群

ELF-Cluster-name

关联存储

请选择关联存储

主机

自动调度到合适主机

虚拟机放置组(选填)

选择放置组

主机

若未选择集群时,禁用选项;

若选中集群为 ELF 集群,但未选中关联存储时,禁用选项;

默认选择「自动调度到合适主机」选项。

关联存储

ZBS-cluster-name

关联存储

请选择关联存储

ZBS-cluster-name

5.5.0

192.156.92.32

ZBS-cluster-name

5.6.0

存储服务状态异常

ZBS-cluster-name

5.5.0

192.156.92.32

ZBS-cluster-name

5.5.0

与 CloudTower 连接异常

关联存储

当选择的 ELF 集群仅有一个关联存储时,展示 Value;

当选择的 ELF 集群有多个关联存储时,展示关联存储 select;

若存储服务状态异常或与 CloudTower 连接异常,禁用该选项。

关联存储在创建虚拟机场景中的展示。

SMTX ELF

对其他功能的影响

SMTX ELF 作为新的独立产品线,也需要支持 CloudTower 中的各类高级功能或服务,包括数据保护(资源优化)、网络安全、可观测性、SKS 等。

SMTX ELF

对其他功能的影响

SMTX ELF 作为新的独立产品线,也需要支持 CloudTower 中的各类高级功能或服务,包括数据保护(资源优化)、网络安全、可观测性、SKS 等。

SMTX ELF

对其他功能的影响

SMTX ELF 作为新的独立产品线,也需要支持 CloudTower 中的各类高级功能或服务,包括数据保护(资源优化)、网络安全、可观测性、SKS 等。

SMTX ELF

对其他功能的影响

SMTX ELF 作为新的独立产品线,也需要支持 CloudTower 中的各类高级功能或服务,包括数据保护(资源优化)、网络安全、可观测性、SKS 等。

开启动态资源调度,需保证集群连接正常且满足以下条件之一:

版本为 5.1.0 及以上且虚拟化平台为 ELF 的 SMTX OS 集群;

版本为 6.0.0 及以上的 SMTX ELF 集群。

取消

创建

创建优化规则

名称

Label

资源类型

虚拟机

资源优化功能仅支持虚拟化平台为 ELF 的集群:

SMTX OS 集群需版本为 4.0.0 及以上、已部署高级监控应用或已关联版本为 1.2 及以上的可观测性服务;

SMTX ELF 集群需版本为 6.0.0 及以上且已关联版本为 1.2 及以上的可观测性服务。

范围

所有受支持的集群

部分集群

elf-cluster

Label

Label

Label

SMTX ELF 集群支持 DRS 和资源优化的功能。

Design System

沉淀设计组件与模式

设计系统的搭建主要分为 3 类:Component、Pattern、UI Map。通常在复杂需求设计完成后,会进一步整理出项目中可复用的部分,同步团队并持续维护,提高产品设计的一致性与团队效率。

Design System

沉淀设计组件与模式

设计系统的搭建主要分为 3 类:Component、Pattern、UI Map。通常在复杂需求设计完成后,会进一步整理出项目中可复用的部分,同步团队并持续维护,提高产品设计的一致性与团队效率。

Design System

沉淀设计组件与模式

设计系统的搭建主要分为 3 类:Component、Pattern、UI Map。通常在复杂需求设计完成后,会进一步整理出项目中可复用的部分,同步团队并持续维护,提高产品设计的一致性与团队效率。

Design System

沉淀设计组件与模式

设计系统的搭建主要分为 3 类:Component、Pattern、UI Map。通常在复杂需求设计完成后,会进一步整理出项目中可复用的部分,同步团队并持续维护,提高产品设计的一致性与团队效率。

Search…

60x-17.96-DBF

ELF

6.0.0

未配置关联存储

60x-17.95-2PAC

ELF

6.0.0

193.168.82.91

MLAG-60x-17.99

OS

6.0.0

193.168.82.92

包含 SMTX ELF 和 SMTX OS 集群类型的 Menu

Search…

4.x-17.72-3PAD

ZBS

4.0.8

存储服务异常

6.x-19.28-ZBS

ZBS

6.0.0

关联的 SMTX ELF 集群:60x-17.95-2PAC、60x-17.96-DBF、60x-hygon-vhost-rdma-19.95

6.x-arm-feiteng-21.51

OS

6.0.0

193.168.82.92

包含 SMTX ZBS 和 SMTX OS 集群类型的 Menu

需根据具体场景判断是否需要展示关联的 SMTX ELF 集群

在引入 SMTX ELF 集群后,CloudTower 中部分集群选择转换为混合集群选择场景。抽象混合集群选择的 Pattern,方便团队后续复用 。

常规

集群基本信息

集群连接信息

软件许可

集群升级

SNMP 传输

网络

虚拟 IP

DNS 服务器

NTP 服务器

IPMI 信息

虚拟化

虚拟机 CPU 兼容性

虚拟机工具

高可用(HA)

热迁移选项

存储

存储策略

常驻缓存

块存储

常规

集群基本信息

集群连接信息

软件许可

集群升级

SNMP 传输

网络

虚拟 IP

管理 IP

DNS 服务器

NTP 服务器

IPMI 信息

计算平台集成

vCenter Server

ESXi

存储

常驻缓存

常规

集群基本信息

集群连接信息

软件许可

SNMP 传输

网络

虚拟 IP

DNS 服务器

NTP 服务器

IPMI 信息

虚拟化

虚拟机 CPU 兼容性

虚拟机工具

高可用(HA)

热迁移选项

存储

关联存储

存储策略

常规

集群基本信息

集群连接信息

软件许可

集群升级

SNMP 传输

网络

虚拟 IP

DNS 服务器

NTP 服务器

IPMI 信息

存储

常驻缓存

集群设置导航 UI Map 整理了 CloudTower 管理的 4 类集群,从左到右依次为:SMTX OS(ELF)、SMTX OS (VMware)、SMTX ELF、SMTX ZBS。

整理系统配置导航 UI Map ,定义 CloudTower 展示规则:

  • 若 CloudTower 内包含多个集群类型,集群配置导航展示多个集群支持功能项的并集。

  • 若 CloudTower 内未关联任何集群,隐藏集群相关功能,包括:升级中心、高级监控、可观测性、Syslog 服务器、SNMP 传输、CloudTower 代理。