Timeline: September 2020 – October 2020
Role: Product Designer
Tools: Figma
Field: UI/UX，Interaction Design

时间：2020 年 9 月 – 2020 年 10 月
角色：产品设计师
工具：Figma
领域：UI/UX，交互设计

Introduction

介绍

Designed user interfaces for web-based IT management software

为基于 Web 的 IT 管理软件设计用户界面

The team started designing the web-based user interface for the new CloudTower software in late 2019. During the development process, we gathered a lot of feedback through internal trials. Later in development, the team decided to redesign the user interface (excluding requirements-defined features) based on internal feedback and accumulated design experience. I led and was responsible for this redesign.

团队从 2019 年底开始为全新的 CloudTower 软件设计基于 Web 的用户界面。在研发过程中，我们通过内部试用收集到了许多反馈。在研发的后期，团队决定基于内部反馈和积累的设计经验，重新设计用户界面（不包括需求定义的功能）。我主导并负责此次重新设计。

The concept screens in the design are shown here. They are not the same as the final user interface, so there may be cases where non-focused content has been omitted and left blank. Most of them have been used as final interfaces, while a few have been put on hold due to project time constraints. At the end of this article, I will show examples of the final user interface.

这里将展示设计稿中的概念画面，它们并不等同于最终用户界面，因此可能存在非重点内容被省略置空的情况。它们当中大部分都已经作为最终用户界面，而有一小部分受项目时间限制而暂时被搁置。在本文的末尾，我将展示最终用户界面的示例。

Core Experience

核心体验

Web-based interactive prototype for conceptual design

为概念设计编写的 Web 版可交互原型

You can click to view the interactive prototype and experience some of the design effects.

您可以点按访问可交互原型，体验部分设计效果。

Design

设计

Design of feature pages

特征页面的设计

I will briefly outline the most central design decision and its rationale, but this article may not cover it in as much depth as other projects. I will have the opportunity to add more useful information later. Thank you for your understanding.

我将简要概述最核心的设计决策和它的根据，但本文可能无法像其他项目那样深入地介绍。后续有机会补充更多有用信息。感谢您的理解。

Back to Login

返回登录

The software’s security mechanism causes it to automatically log out after a specific period of inactivity. However, it is usually the user himself who comes back to log in again, so the user name is retained and the user simply enters the password to log in again. The eye-catching and modern greeting not only hints at the current user, but also adds a human touch to the product — providing consumer-level ease of use is part of the product’s business value.

软件的安全机制会令其在特定的不活跃时长后自动退出登录。但通常再次回来登录的就是用户本人，因而保留用户名，用户只需输入密码即可再次登录。醒目而现代的问候语不仅可以暗示当前用户，更能为产品增添人性化的感知——提供消费级的易用性也是该产品的商业价值之一。

Overview

概览

The overview brings together all paginated entries under the current resource level. At the same time, distilled information is presented for important entries. The wide inner margins in the right-hand area allow for a natural separation of the left and right spaces without the need for dividing lines.

概览汇集了当前所处资源层级下所有分页的入口。同时，对于重要的入口也能呈现提炼的信息。右侧区域采用的宽内边距，使得左右空间能自然而然地区分开来，而无需使用分割线。

The Shortcut Button

快捷按钮

The user can create the corresponding resource on each page. However, when a user wants to create a resource, he or she may stay on any page and it takes more time to go to the page of target resource. Shortcut buttons can make the process much more efficient. The menu of buttons will also display the resource on the current page first (e.g. VM of VM pages). When creating a resource, if you need to set the location of the data center, cluster or host where the resource is located, it will be populated with the location of the current page by default.

用户可以在每个页面创建相应的资源。但当用户想要创建资源时，可能正停留在任何一个页面，转到相应页面则需要耗费较多时间。快捷按钮可以大幅提升操作的效率。按钮的菜单还会将当前所在页面的资源（如虚拟机）靠前显示。创建资源时，如果需要设定资源所在的数据中心、集群或主机位置，则会默认填充为当前页面的位置。

Modern Style

现代风格

The resource list is a common interface, and here is an example of the virtual machine resource list. The elements of the entire interface are in a modern style, e.g. more eye-catching headings that allow the user to understand the content of the interface at a glance. The topmost level of the left (collapsed) tree resource list, “Infrastructure”, is the most frequently used level, so it has been specially enlarged to make it easier to click on and access. Also, as the highest resource level, it displays the connection status of all resources at the same time, making cluster management easier. This button is also almost an iconic symbol of the software.

资源列表是常用的界面，这里以虚拟机资源列表为例。整个界面的元素采用现代风格，例如更醒目的标题让用户对界面内容一目了然。左侧（收起的）树状资源列表最顶部的层级“基础设施”，是最经常使用的层级，因此专门扩大了它的尺寸，更易于点按进入。同时，作为最高资源层级，同时显示所有资源的连接状态，可以令集群管理更加便捷。这个按钮也几乎是该软件的标志性符号。

Batch Operation

批量操作

When a user checks multiple resources, it is often to perform a batch operation. And batch operations are also close to a modal state and are temporary. So highlighting the toolbar for batch operations fits the profile here — eye-catching but not breaking the interface.

当用户勾选多个资源时，往往是要进行批量操作。而批量操作也接近模态的状态，而且是临时状态。因此对批量操作的工具栏进行突出，符合此处的特征——醒目却不会破坏界面。

Association Function

底部提供相关功能

The design is based on an understanding of what users need. Users can view resources at a specific level in a list on the “Infrastructure” page, or they can manage resources in a unified way through other functional pages, including the “Resource Optimization” feature. Usually, the user enters the feature page to perform administrative actions on the resource, so it should also be possible to see the relevant action options directly when viewing the resource. For example, for the resource optimization function, it can directly display how many “zombie VMs” are available for optimization at the current level of resources. In other words, the two entries apply to different entry points. This not only increases the usage of the feature, but also makes it easier for users who only manage some of the resources in the tier to see the information instantly and make targeted actions.

这项设计基于对用户所需的理解。用户可以在“基础设施”页面通过列表查看特定层级的资源，也可以通过其他功能性页面对资源进行统一管理，其中就包括“资源优化”功能。通常，用户进入功能页是要对资源进行管理操作，因此也应当能直接在查看资源时看到相关的操作选项。例如针对资源优化功能，可以直接显示当前层级的资源有多少个可以被优化的“僵尸虚拟机”。也就是说，两个入口适用于不同的进入角度。这样做不仅可以提升功能特性的使用率，也方便只管理部分层级资源的用户即时看到信息并做出针对性操作。

Alerts Preview

警报预览

Alarm messages often need to be addressed by the user as soon as possible. Providing a preview panel allows you to see alert messages without leaving your current work environment and without having to immediately go to the alert page. Distinguish the message hierarchy with prominent shading to focus attention.

警报信息往往需要用户尽快处理。提供预览面板可以在不离开当前工作环境的情况下看到警报信息，无需立即转到警报页面。通过显著的阴影区分信息层级，聚焦关注点。

Tasks Preview

任务预览

Similar to the alert message preview, users often need to keep an eye on the progress of asynchronous tasks. The task may be in progress when the user views it, or it may have just recently been completed, so it is also important to be able to see the most recent history.

与警报信息预览类似，用户往往需要随时关注异步任务的进展。当用户查看时，任务可能正在进行中，也可能刚结束不久（可能是成功或失败状态），因此能看到最近的历史记录和完成情况也很重要。

Immersive Modal Dialog

沉浸式模态对话框

This is a dialog box that fills the entire interface and is often used as a wizard for resource creation. The processed background allows to highlight more the items that need to be filled in.

这是一种充满整个界面的对话框，经常作为资源创建的向导。经过处理的背景可以更加突出需要填写的项目。

Enhanced Components

服务于用户意图的增强组件

Immersive dialogs may also appear when editing settings. Enhanced components can be set up for certain use-specific scenarios. For example, for “rules” editing, which allows enabling and disabling rules, if switching the enabled state is a high-frequency operation, then the “switch” as a general leader can be more visible and more in line with the user’s intention, which can improve the efficiency of the operation.

沉浸式对话框还可能在编辑设置时出现。针对某些特定用途的场景，可以设定经过增强的组件。例如对于“规则”的编辑，允许启用和禁用规则，如果切换启用状态是较为高频的操作，那么作为总领的“开关”便可以更加醒目，更符合用户意图，可以提升操作效率。

Dialog Box

对话框

The expanded dialog box looks more spacious, with a modern style that brings focus and leaves plenty of breathing room for operation. The volume of the appearance is more proportional to the information density of the overall interface.

尺寸扩增的对话框看起来更加舒展，现代风格令重点更加突出，对于操作则留出了足够多的呼吸空间。其外观体量和整体界面的信息密度更加相称。

Sidebar

侧边栏

When a resource is to be managed in a targeted manner, a sidebar is expanded. However, there is a lot of information in the sidebar, and it would be more efficient to allocate space and information if the most frequently used operations and information could be distilled. For example, for basic information, only the fields that users care about most are displayed by default, and these fields are more dynamic or serve as identifiable markers, while more information that does not change much can be put away and expanded when needed.

当要针对性地管理一个资源时，则会展开一个侧边栏。但侧边栏中的信息较多，如果能提炼出最为常用的操作和信息，则能提升空间和信息的分配效率。例如对于基本信息，默认仅展示使用者最为关心的字段，这些字段更多是动态的，或者作为可辨别的标志符，而更多不怎么变化的信息则可以收起，待需要时再展开。

Sidebar with Full Features

包含完整功能的侧边栏

The interface layout and appearance of each information module are designed for the management scenario of virtual machines, aiming to improve the efficiency of information presentation and make it easier for users to perceive the information.

针对虚拟机的管理场景，设计了每个信息模块的界面布局和外观，旨在提升信息的呈现效率，令用户更容易感知信息。

Sidebar Located Below

在下方的侧边栏

Sometimes users need to manage multiple resources horizontally, and sometimes they are managing specific resources in detail. Providing the right spatial layout can help improve operational efficiency. If both scenarios exist, then consider providing the best experience of each at the same time. This is where the sidebar that is at the bottom comes from. Due to the different spatial relationship, it and the sidebar located on the right side display the same content but have different layouts, but it is still responsive enough to feel familiar to the user.

有时用户需要横向管理多个资源，也有时候是对特定的资源进行细致的管理。提供合适的空间布局有助于提升操作效率。如果两种场景同时存在，那么可以考虑同时提供各自的最佳体验。这就是处于下方的侧边栏的由来。由于空间关系不同，它和位于右侧的侧边栏虽然展示了相同的内容，但却有着不同的布局，但它的响应式程度仍能让用户感到熟悉。

Sidebar in Normal Mode

普通模式的侧边栏

Not all resource management scenarios are high-frequency, thus only the common resource management is targeted. Common resources are to be paired with a common mode sidebar, and also, this sidebar is used as the default appearance.

并非所有的资源管理场景都是高频的，因而仅对常用的资源管理做针对性的设计。普通资源要搭配普通模式的侧边栏，同时，这种侧边栏也作为默认外观。

Search Results Panel

搜索结果面板

The content in the search results panel makes clever use of spatial location relationships to match the order in which users operate when searching and the importance of the information.

搜索结果面板中的内容，巧妙地利用了空间位置关系，符合用户搜索时的操作次序和信息的重要程度。