Role
Product Designer
Timeline
2023/6 - 2023/8
Tool
Figma
Field
UI/UX，Interaction Design
项目背景
虚拟机是 CloudTower 运维管理平台的核心资源之一，它一直承载着不同行业客户的各类重要业务。因此，虚拟机相关功能的用户体验对于 SmartX 核心产品力至关重要。在 Tower 3.0 的产品周期内，我们收到了一线同事关于用户使用批量创建虚拟机功能的优化反馈。
用户需求与痛点
实际生产环境中，客户通常会使用虚拟机 IP 地址来命名虚拟机，包含连续的 IP Range 和独立编辑虚拟机名称两类场景。然而当前的虚拟机批量创建方式为两段式，命名方式上缺少一定的灵活性，难以满足用户的实际需求。
用户目标
需求点
灵活的 IP Range 命名
IP 独立编辑
产品现状
功能点
连续固定的 IP Range 命名
不支持独立编辑
核心问题：产品已有功能不能满足用户对于更灵活的命名方式的使用诉求。
具体来说，某些金融客户的虚拟机命名规范是：IP 地址 + 主机名，创建虚拟机时会将 IP 地址一起进行分配。已有的批量命名方式是，前半部分固定，后半部分依次顺延，然而客户的命名习惯却是前半部分顺延，后半部分固定。
其次，生产环境中分配到的静态 IP 通常不是连续的，而是哪个 IP 空出来了，就拿来分配给某个应用使用。因此，除了需要快速构建出连续的 IP Range 外，客户还存在自行填写或独立编辑某一个或某几个虚拟机名称的需求。
已有批量命名方式：前半部分固定 + 后半部分顺延
用户预期的命名方式：IP 地址顺延 + 独立编辑
设计目标
本次的设计目标是探索新的交互方式或流程，使用户能够根据自己命名习惯灵活快速地创建虚拟机，从而提高日常运维效率，降低操作成本。功能上需要达到以下 2 点：
支持灵活批量自定义虚拟机名称；
支持批量创建时独立编辑虚拟机名称。
概念设计
设计方案探索
用户反馈与「方案 3」
对于上述的两种方案，我个人更倾向于方案 2：设计上更直观，也可以满足较复杂的需求。但从一线同事的反馈中收获了不同视角的见解。
在此基础上，我继续探索，力求拿出一个两全其美的方案：既保留方案 1 和 2 优点，又可以规避两者的缺点。于是便有了下面的方案 3 。
1
基本信息
2
计算资源
3
虚拟盘
4
虚拟网卡
5
其他配置
从模板创建虚拟机
位置
集群
cluster-name
主机
自动调度至合适的主机
基本信息
虚拟机模板
template
创建个数
10
(1 ~ 10)
虚拟机名称 起始
示例虚拟机名称-
01
切换至高级模式
虚拟机名称 結束
示例虚拟机名称-10
描述（选填）
虚拟机组
ziruitest
取消
下一步
位置
集群：cluster-name
主機：自动调度至合适的主机
信息
虚拟机模板：template
创建个数：10
名稱：
描述：
虛擬機組：
計算資源
vCPU 分配 : 1 vCPU
内存分配 : 4 GiB
存儲資源
1 虚拟卷，共 40 GiB
1 CD-ROM
可用性
高可用（HA） : 启用
引導選項
固件：BIOS
配置規格
简单模式仅支持简单的「名称 + 数字」的 序列命名，无法满足用户批量灵活命名虚拟机的需求。批量创建虚拟机场景（包括从模板创建虚拟机和克隆虚拟机 2 类流程）新增「高级模式」交互流。
插入表达式
虚拟机名称 表达式
10.10.22.{{20+i}}
帮助
20
切换至简单模式
起始
10.10.22.21
展开
结束
10.10.22.30
Help Tip
使用表达式灵活自定义虚拟机名称
表达式支持递增的变量 ，代表第几个虚拟机。
支持对变量 进行数学运算（+，-，*，），写在表达式中形如 。
示例
10 个虚拟机，名称中包含连续的 IP 地址和主机名，虚拟机名称表达式填入：
192.168.17.{{ 17 + i }}-hostname{{ i }}
获得的虚拟机名称为：
192.168.17.18-hostname1
192.168.17.19-hostname2
...
192.168.17.27-hostname10
插入 {{i}}
{{ i - 1 }}
{{ 20 + i }}
{{i}}
{{i}}
高级模式支持表达式来批量命名虚拟机。
展开状态
1
10.10.22.22
收起
已修改
2
10.10.22.35
已修改
3
10.10.22.23
5
10.10.22.40
已修改
收起状态
虚拟机名称 表达式
10.10.22.{{20+i}}
帮助
20
切换至简单模式
起始
10.10.22.21
展开
结束
10.10.22.30
已修改 2 项
独立编辑：onChange 状态下，输入框中的值不符合表达式时，展示「已修改」状态。
二次编辑
虚拟机名称 表达式
10.10.22.{{20+i}}-Oracle
帮助
20
切换至简单模式
1
10.10.22.21-Oracle
收起
2
3
4
5
6
7
8
9
10
二次编辑：批量命名完成后，若对父级输入框的值进行二次修改，先前的修改项会被刷新，虚拟机名称展示为新的递增序列。
简单模式
虚拟机名称 起始
abc{{i-1}-Oracle
05
切换至高级模式
虚拟机名称 結束
abc{{i-1}-Oracle14
高级模式
虚拟机名称 表达式
abc{{i-1-Oracle{{i+4}}
帮助
20
切换至简单模式
起始
abc{{i-1-Oracle5
展开
结束
abc{{i-1-Oracle14
简单模式
虚拟机名称 起始
abc{{i-1}-Oracle
05
切换至高级模式
虚拟机名称 結束
abc{{i-1}-Oracle14
高级模式切换到简单模式时，虚拟机名称后缀值会继承到简单模式。
模式切换：从简单模式切换到高级模式时，高级模式虚拟机名称末尾根据简单模式起始值自动转换成对应的变量 {{i}} 形式。
虚拟机名称 起始
abc{{i-1}}
01
虚拟机名称不支持变量 {{i}} 及其数学运算（+，-，*）形式的输入。
切换至高级模式
虚拟机名称 結束
abc{{i-1}}10
简单模式下，为了简化复杂场景的处理，若用户输入了保留字，则禁止切换到高级模式。
虚拟机名称 表达式
abc{{i-1-Oracle{{i-1}}
帮助
20
高级模式下，虚拟机名称表达式末尾的运算结果不能为负值或 0。
切换至简单模式
起始
abc{{i-1-Oracle0
展开
结束
abc{{i-1-Oracle9
虚拟机名称 表达式
abc{{i-1-Oracle
帮助
20
高级模式下，虚拟机名称表达式需要包含变量 {{i}} 或其数学运算（+，-，*）的形式。
切换至简单模式
起始
abc{{i-1-Oracle
展开
结束
abc{{i-1-Oracle
虚拟机名称 表达式
abc{{i-1-Oracle{{i*+4}}
帮助
20
变量 {{i}} 仅支持加减乘（+，-，*）的数学运算。
切换至简单模式
起始
abc{{i-1-Oracle5
展开
结束
abc{{i-1-Oracle14
虚拟机名称 表达式
abc{{i*3}}{{i-1-Oracle{{i+3}}
帮助
20
切换至简单模式
起始
abc3{{i-1-Oracle4
展开
结束
abc30{{i-1-Oracle13
高级模式下，虚拟机名称表达式的开头或中间部分插入表达式变量时，不支持切换到简单模式。
高级模式场景下，输入的虚拟机名称为以下情况时，禁止切换到简单模式。
末尾的表达式值为「 0 或负数」；
不含任何表达式；
开头或中间含复杂 {{i}} 变量运算时。
虚拟机名称 表达式
10.10.22.{{20+i}}
帮助
20
虚拟机名称 10.10.22.21、10.10.22.23 已被使用。第 1、3、4 号虚拟机命名冲突。第 5、6 号虚拟机命名冲突。
切换至简单模式
1
10.10.22.21
收起
与第 3、4 号虚拟机命名冲突。
2
10.10.22.22
3
与第 1、4 号虚拟机命名冲突。
4
与第 1、3 号虚拟机命名冲突。
5
10.10.22.25
与第 6 号虚拟机命名冲突。
6
与第 5 号虚拟机命名冲突。
7
8
9
10
简单模式和高级模式通用
虚拟机名称 起始 & 虚拟机名称 表达式
根据起始和表达式计算出来的所有虚拟机名称中，是否存在与集群已有虚拟机重名的。
验证机制
Submit
提示方式
Inline
错误信息（单个）
虚拟机名称 %name% 已被使用。
错误信息（多个）
虚拟机名称 %name1%、%name2% 10.10.22.23 已被使用。
标红
虚拟机名称 起始 / 表达式 输入框
仅高级模式适用
虚拟机名称 表达式
根据表达式计算或手动修改后，虚拟机名称之间存在冲突。
验证机制
Blur + Onchange
提示方式
Inline：模板 & 具体的输入框
错误信息（模板）
第 X、Y 号虚拟机命名冲突。
错误信息（具体：两个冲突）
与第 X 号虚拟机命名冲突。
错误信息（具体：多个冲突）
与第 X、Y、Z 号虚拟机命名冲突。
虚拟机重名校验。
设计上，支持在不同 CPU 架构的集群和模板之间来回切换，降低了用户的操作成本。
位置
集群
os-cluster-3
仅支持与所选虚拟机模板的 CPU 架构兼容的集群。
VM-Template-a
存储于虚拟机所属集群
VM-Template-b
与所属集群 CPU 架构不兼容
VM-Template-ffn
与所属集群 CPU 架构不兼容
VM-Template-c
存储于虚拟机所属集群
只展示存储于虚拟机所属集群的模板
Before
集群
os-cluster-3
与所选虚拟机模板的 CPU 架构不兼容。
虚拟机模板
VM-Template-c
与所选集群的 CPU 架构不兼容。
After
Search…
elf-cluster-1
ELF
6.0.0
193.168.82.91
x86_64
elf-cluster-2
ELF
6.0.0
193.168.82.92
x86_64
os-cluster-3
OS
5.0.5
193.168.82.99
AArch64
集群 Select Menu
搜索集群…
1-VM-Template
存储于 3 个集群
x86_64
2-VM-Template
存储于 3 个集群
x86_64
3-VM-Template
Cloud-init
存储于 1 个集群
AArch64
模板 Select Menu