设计案例：Fisheye Dashboard

重新设计一个数据繁重的企业产品，并建造一套设计语言。

ROLE

Product Designer

TIMELINE

2017

PLATFORM

Web

CONTRIBUTOR

Designer: Paula

MY CONTRIBUTION

UI / UX Design

Motion / Illustration

Data Visualization

Design System

项目介绍

SmartX 是中国领先的超融合产品与企业云解决方案提供商，SmartX 通过软件重新定义数据中心，将类似 Google 等互联网公司数据中心的架构带给企业，为企业构建更快速，更易扩展，更灵活的数据中心。

Fisheye Dashboard 是 SmartX 超融合系统的可视化数据平台，为 IT 管理员提供监控、预警、管理硬件及资源等功能。在更新了 2 个大版本后，我们设计团队对 Fisheye 进行了完整的重新设计，并以此创建了公司产品的第一个设计系统。

本次重新设计过程中采用了 Design Sprint 和 Atomic Design 的设计方法，在短时间不断尝试并验证设计思路，并从最小的界面元素开始逐步构建整个系统。

在设计完成后整理了详细的 UI Kit。

为什么重新设计？

SmartX OS 是为超融合架构设计的操作系统, 帮助客户构建敏捷高效的现代数据中心。Fisheye 是 SmartX OS 的 Web 端控制台，为系统管理员提供最直观的监测系统状态和数据指标的平台。

在过去两年时间里完成了 2 个大版本的功能迭代，增加了虚拟机管理、快照、存储池等多个重要功能，即将迎来 3.0 版本的更新。在之前版本中，设计上更关注于完成每个版本规划的功能，设计聚焦在如何设计好这一个功能出发，缺少系统性的设计思考，另外设计师的工作是按照功能模块划分，不同设计师产出的设计组件也会有差异，导致在设计和前端开发上经常产生一些重复工作，例如同一个组件在不同版本中被设计多次，样式和交互上却不是完全一致。

组件重复，影响开发效率

设计组件库和前端代码中存在大量重复的组件，降低设计和开发效率，需要精简。

体验不一致

冗余的组件在样式和交互上不一致，造成使用体验上的不一致。

信息架构扩展性差

3.0 版本会增加更为复杂的机架感知、网络等功能，现有的信息架构无法满足大量数据信息和复杂交互的功能。

因此，设计团队决定对产品设计进行一次彻底的梳理和重构。

设计目标

建立统一的设计规范，规范设计和前端组件，为用户提供可靠、一致、友好的使用体验；

重新规划产品信息架构，优化现有交互设计，并满足未来扩展需求；

初步确立品牌特征，在设计中融入更多品牌元素。

设计难点

1. 数据繁重

Fisheye 中有大量的计算、存储相关的数据需要实时监测，并以直观的形式展示给系统管理员，如何区分不同数据的优先级，如何选择合适的数据呈现形式，是设计的重点。

2. 交互形式多样，信息架构复杂

产品功能设计中包含多种数据展现形式，除最常见的列表外，有不同形式的图表，还有反应实际拓扑结构的网络页面，模拟实际数据中心机房的机架感知页面等。信息架构需要兼容多种交互形式。

3. 警报、通知

企业客户对产品的可靠性有更高的要求，如果出现问题一定要被系统及时监测到，并能以最直观的形式通知给用户，避免造成更大的损失。这也就要求我们理解所有对用户有价值的通知，区分出通知的优先级，并找到最合适的通知方式。

4. 为未来的功能扩展留出空间

未来产品功能会更丰富，会加入更复杂的功能，因此在交互设计和信息架构上都要足够灵活，为未来的功能扩展留出空间。

设计方法

1. Design Sprint

决定重新设计产品后，我们采用了 Design Sprint 设计方法，在一周内快速探索设计方案，验证设计想法，找到最合适的解决方案。

周一，列出产品想要为客户解决的所有问题，为问题列出优先级；

周二，开始设计，尝试不同设计思路解决提出的问题；

周三，评估所有设计完成的方案，找到最合适的解决方案，准备制作原型；

周四，制作可交互原型；

周五，测试原型，评估方案，收集团队成员反馈，确定设计方向。

我们用一周时间，重新理解用户遇到的问题，探索多种设计解决方案，集合团队的智慧，通过理解问题、设计、测试、验证，最终确定了设计方向。

2. Atomic Design

进入设计阶段，我们采用了 Atomic Design 设计方法，从最小的设计元素开始设计，然后组合成组件，最终拓展出设计的全貌。

2.1 Design Token - 颜色字体等品牌特征视觉元素

最基础的视觉元素，包括颜色、字体、页面布局、阴影、转场动画效果等贯穿整个重新设计的基础设定。为了能在产品中建立品牌特征，将品牌色融入系统的设计中，颜色纯度较高，可作为选中效果、文字链接等高亮颜色。在使用中系统会监测很多硬件及服务的状态，包括服务器、硬盘、虚拟机等，并将状态实时反应到 Fisheye 界面中，因此除品牌色外，还要预先设置反应不同状态的颜色，最常见的状态包括：运行中、暂停、错误、已关机。

2.2 Atoms - 基础设计元素

有了基础的视觉元素，开始设计最小的设计组件，例如图标、按钮、输入框、单选框、卡片等。

2.3 Molecules - 由基础元素组合而成的控件

将最小的设计组件根据需要进行简单的组合，可以形成用在页面中的一个个控件，例如面包屑导航、Tab、下拉菜单、通知、Loading、翻页按钮等。

2.4 Organisms - 复杂控件

用多个简单组件再进行二次组合可以产生复杂的页面控件，比如包含弹窗、通知菜单、包含搜索、筛选、切换视图功能的列表操作栏等。

2.5 Templates - 页面布局、交互方式等通用形式

完成基本的控件样式后，我们开始了信息架构上的探索，为 Fisheye 尝试灵活、扩展性好的交互形式。下面是在产品中运用到的几种：

多视图展示

列表是系统中最常见的元素，很适合展示大量数据，方便管理员进行对比、筛选和批量操作，但对于部分存在依赖关系的功能，列表并不能直观反映出数据之间的关系，比如主机在机架中是如何组织的，一个主机下有几个虚拟机在运行？为此我们针对部分功能在列表视图基础上，为管理员设计更直观的视图。

机架视图：按照机架组织用户的资源，方便用户定位机器，及时了解资源情况和解决问题。

自适应列表 + 侧栏

系统中监测的数据繁多，设计时需要先判断数据的重要程度，再决定展示在系统哪一个层级：首页展示最重要的指标数据；单项功能列表展示该功能相关的核心指标数据；对于更详细的次要信息，我们统一呈现在侧栏中。侧栏用于展示所有的辅助信息，并且可以切换 Tab 查看不同维度的详细数据；另外用户的屏幕分辨率多种多样，我们对列表进行了自适应设计，在宽度不足以展示所有列表项时，或侧栏展开时，列表将支持横向滚动，并且固定列表标题一列，便于用户理解。

全屏窗口

在系统中创建一个资源需要多个步骤，填写很多信息或进行复杂的设定，以往的设计中创建资源功能或者通过弹窗完成，或者通过新建页面来完成。但都存在着缺陷：弹窗空间有限，需要将流程拆分成多个步骤，操作时需要点击进行上下步骤的较为繁琐，同时如果内容检查有错误，也不方便定位；使用新建页面，脱离了原来的情境，需要在资源页面和新建页面跳转才能完成创建，而且创建完成不能及时看到结果。为此我们新增了可容纳更多信息的全屏弹窗，支持用户在不离开页面的情况下创建资源。

全屏窗口分为两种：Transaction Modal 和 Wizard，前者用于展示一个全屏窗口中的多个部分，点击名称可以在不同区域间跳转，后者用于多步骤的操作，例如创建资源等。