重塑数字运维体验，打造高效统一平台

在数字化时代的浪潮中，高效、稳定且用户友好的工具平台是企业不可或缺的利器。本次分享的是网络运维平台的全案设计。

本文将带您深入了解这一项目的全过程，从信息收集与分析、设计规划到最终方案的实施。文章将分享如何通过跨平台整合、信息架构优化、品牌一致性提升以及情感化设计等手段，重塑数字运维体验，打造高效统一平台。

无论您是设计师、产品经理还是技术专家，相信这篇案例都能为您提供宝贵的见解和启发。让我们一起踏上这场设计之旅，探索如何通过精心的设计，让复杂的运维工作变得简单而高效，从而为企业带来更大的价值。

基础设施网络运维部主要负责保障公司整体网络系统的稳定运行以及硬件设备的正常运作，同时也为其他业务部门提供必要的运维支持和服务，包括但不限于安全数据支撑等关键任务。面对日益增长的业务需求量，现有的一线运维人员数量不足，导致了较大的工作压力。因此，需要开发线上化工具以提高工作效率。同时，对接的业务部门希望能够实时查看运营状态及相关数据，这要求有一个更加透明和高效的沟通渠道。

对内，该部门承接的业务体量较大，但一线业务人员人数不足，导致运维压力非常大。为了提高工作效率，他们需要线上化的工具来帮助业务人员提升工作效能。

对外，该部门对接的业务部门需要查看实时运营状态和运维过程中的数据。为了满足这些需求，部门进行了线上化工具的摸排。目前，他们使用了一些外部工具平台（例如Prometheus）以及自建的小平台。工作中，这些工具需要交叉使用，内部权限部分开放给业务人员，但权限内容有限。业务人员在需要某些数据时，仍需向运维人员人工请求，这进一步增加了运维人员的工作压力。

介入这个项目后，首先是对现有的产品进行了用户反馈的收集。共收集到了52条来自一线人员的需求反馈。通过对这些需求进行整体的问题分类和梳理，为后续的设计体验升级和业务功能优化提供了重要的参考依据。在这个过程中，也发现了一些现代产品所不具备的功能，以及某些业务流程的机会点。

在明确了业务诉求和用户反馈后，我们梳理出了接下来进行竞品调研需要重点关注的四个维度。这些维度将帮助我们深入了解市场上的同类产品，为我们的设计提供指导性的依据和结论。

：分析竞品在业务功能方面的实现情况，包括其提供的核心功能、扩展功能以及用户体验。

：研究竞品的品牌形象、视觉风格和整体调性，以确保我们的平台在品牌一致性上达到高标准。

：评估竞品的信息架构设计，了解其如何组织和展示信息，以便优化我们平台的信息结构。

：分析竞品的页面布局和结构设计，找出其在用户体验和操作流程上的优点和不足。

通过这些维度的调研，我们能够针对特定模块和方向给出具体的指导性意见，为后续的设计提供有力的支持。

在完成所有的根因问题梳理后，确定了此次设计目标并对目标进行策略拆解，首先聚焦于扩展业务能力，建设统一平台。优化业务流程，打破信息孤岛。构建多维标准，提升使用效率。重塑品牌形象，打造流畅体验。通过整套组合拳，打造一个既强大又易于使用的系统，真正解决用户的痛点问题，并且在这个过程中不断迭代和完善我们的解决方案。

：基于我们之前的用户反馈以及对竞品业务功能的调研，我们得出结论：在现有的产品信息框架上需要增加八个维度的能力。在增加这些能力的过程中，我们也会对整体的信息架构进行改版重构。改版重构的主要目的是优化整体业务流程，打破信息孤岛的情况。具体来说，我们将通过两个例子来说明这一改进：首先是提供一个高度定制化的首页，其次是引入数据驱动的功能，以增强用户的决策能力。这样不仅可以提升用户体验，还能提高系统的整体效率和数据利用效率。

：基于我们之前的用户反馈以及对竞品业务功能的调研，我们得出结论：在现有的产品信息框架上需要增加八个维度的能力。在增加这些能力的过程中，我们也会对整体的信息架构进行改版重构。改版重构的主要目的是优化整体业务流程，打破信息孤岛的情况。

具体来说，我们将通过两个例子来说明这一改进：

：提供一个高度定制化的首页，使用户能够快速找到自己最关心的内容或功能。

：引入更多数据分析工具和服务，帮助用户基于准确的数据做出更好的决策。

此外，我们还针对告警中心进行了改进。原本的业务流程中，告警信息从第三方平台集成到我们的平台时，缺乏一个统一的告警集成映射关系，导致不同平台的语言不一致，使得告警信息较为混乱。为了解决这个问题，我们添加了一个集成映射功能，并对事件进行了整体记录。这样，在用户需要追溯告警规则时，可以找到明确的依据，从而打破了信息孤岛的现象。

考虑研发、运维成本，我们使用了自建设计系统所提供的样式配置，将前端和设计进行统一标准化。在项目的整体规划中，90%的基础组件将使用标准化的组件库，而剩下的10%则会根据业务特色或特定场景进行自定义。同时，我们还会补充相应的业务规范，以提升整体效率，并限制前端的一些自定义，从而保证整体的一致性。

用户在看到界面时，对其产生认知和形成认知的主要因素有两个：文字和图形。对于我们的平台而言，文字映射包括动作命令、解释说明、专业名词和标点符号等。在前期的体验梳理中，我们发现平台在这方面的能力较弱，信息较为混乱且存在缺失场景。因此，在下一步的设计规划中，我们需要着重关注文案的精准表达，确保其符合用户的心智模型，并进行重点编写。

在图形方面，我们需要提供并增加数据可视化的能力，以帮助用户进行决策。同时，我们将引入当前流行的设计趋势，为产品的调性赋能，并在运维场景下增加情感化设计，提升用户体验。通过这些改进，我们可以增强品牌形象的一致性和专业性，从而更好地满足用户的需求。

前面讲的都是基于对设计策略的规划，而实际在设计落地过程中，中间的协作过程是非常重要的。我们发现，由于许多团队成员不是设计专业出身，且与设计团队的合作较少，他们对设计能够带来的价值、设计的范畴以及工作路径不太了解。为了解决这一问题，我们进行了一次整体的宣贯和对齐，结合前面制定的一些策略，最终达成了设计目标的一致性。通过这次宣贯，业务方对我们的后续方案表示支持，并且对设计过程有了更清晰的理解。这样可以确保我们在后续的设计工作中得到更多的支持和协作，从而更好地实现设计目标。

前面所讲的都是基于整体业务大盘的需求分析和设计规划。对标到我们第三季度的实际工作内容，这个项目的需求是在7月底提出的，实际的设计时间是8月和9月。我们从三个方面进行了考虑和推进：

：在7月底和8月初，我们的主要工作是定位产品的问题，并帮助提供整体的解决方案。

：从8月中旬到9月初，我们专注于关键模块和一些核心板块的产品建设。前期因为有交互设计师的参与，我主要负责UI设计工作。后来由于中心业务较为繁忙，项目中没有了专门的交互设计师，我开始承担更多的优化职能。

：在整个过程中，我们还会进行一些业务层的规范制定，以确保整体质量的一致性和高标准。

通过这些步骤，我们能够更好地推进项目，并确保设计工作的顺利进行。

第三部分是我们的设计方案。为了举证上述设计策略，挑选了部分页面进行说明。

：我们在整体架构设计上，将一个大的平台集成了八个子平台。通过顶部平台导航，用户可以方便地选择不同的子平台。在一级页面中，我们暴露了一些关键信息，帮助用户进行初步的信息检索。当用户点击具体的子平台时，会跳转到对应的二级平台，并且侧边会有导航栏，重新对内容进行了分类，以帮助用户更好地理解。

：

在之前的旧平台中，用户初次进入时看到的是一个空的表格页，这个页面没有提供任何有价值的信息，也没有传达整体的品牌调性。为了解决这一问题，我们进行了改版，基于整体运营运维场景下的数据驱动，提供了一个可视化监控能力的看板。

：

：新的初始页面是一个可视化监控看板，展示八个子平台的所有重要数据。

：通过这个大盘看板，运维人员可以在初次进入时就能获取关键信息，帮助他们快速做出运维决策。

通过这种改版，我们不仅提供了有价值的信息，还增强了用户体验，并且更好地传达了品牌调性。这样，用户在初次进入平台时就能获得全面的数据概览，从而更高效地进行运维工作。

以网络设备页面为例，该页面的生产条件非常多，目前有16个。经过摸排实际使用情况和业务诉求后，发现这16个条件都是在运维场景下必需的，无法减少。为了降低信息量和认知难度，我们在设计时采取了以下措施：

：部分信息之间存在层次关系，例如机房模块和机柜，必须一层一层筛选下来。因此，在具体的页面设计上，我们将这些信息设计成树状结构，减少了查询条件的数量。

：我们提供了一个整体的模糊搜索框，并支持关键条件的模糊搜索。对于一些较弱化的条件，则放在高级搜索中，从而保持整个页面的简洁高效。

：

在网络设备页面的具体信息展示方面，现有的交互形式是将信息放在页面上进行折叠展开，这种方式不利于后续的延展。因为后续可能会基于业务场景展示更多的数据监控信息，所以在页面的整体设计上，我们决定采用二级页面来展示详细信息。这样不仅可以保持主页面的简洁，还能更好地扩展和展示更多细节。

通过这些设计改进，我们不仅提升了用户体验，还确保了设计符合交互原则和工程原理，使得用户能够更高效地进行运维操作。

前面提到，我们会使用样式配置平台来确保整个平台的一致性。因此，在技术组件的本质设计上，我们花费的时间非常少。具体来说：

：90%的基础组件只需要在样式配置平台上进行简单的配置，就能达到一致性。这样可以大大减少设计和开发的工作量。

：

我们在线上提供了一个基础样式，并且提供了可配置的接口。在设计规范中，我们需要明确指出前端可以调整的范畴，以确保一致性和灵活性。

如果提供的基础组件没有现有的样式，那么需要对整体的样式以及其使用业务场景进行定义。这包括详细说明组件的外观、行为和适用场景，确保其符合整体的设计规范。

从整个大平台的角度来看，这套页面及规范定义能够覆盖我们后续50%的页面，从而确保整个平台在视觉和用户体验上的一致性。

通过这些方法，我们不仅能够高效地实现平台的一致性，还能灵活应对不同的自定义需求，确保所有组件在不同业务场景下都能保持统一的风格和用户体验。

在业务场景下的情感化表达中，空状态是一个重要的方面。虽然大家对空状态都不陌生，但不同场景下的空状态有着显著的区别。

：在这种情况下，用户输入了查询条件但没有找到任何结果。这种空状态通常需要传达一种“未找到匹配项”的信息，并且可以提供一些帮助或建议来引导用户进行下一步操作。

：在告警模块中，如果没有任何数据，这意味着系统当前没有问题，这是一种非常正向和积极的状态。为了直观地传达这一点，我们在图形设计上使用了一个运维形象的小人，并配以一个“OK”的手势。这种设计不仅明确传达了当前没有需要处理的问题，还对运维人员进行了积极的心理暗示，让他们感到安心和满意。

通过这种情感化的设计，我们不仅提升了用户体验，还增强了用户对系统的信任感和满意度。

在引导设计方面，我们基于前面的设计策略进行了AB方案的对比，并最终选择了B方案。这里详细说明一下选择的原因。

：

：

：

通过选择B方案，我们不仅提高了界面的直观性和易用性，还确保了用户能够更轻松地理解和执行操作，从而更好地实现我们的设计目标。

通过上述的设计策略和具体实施，我们不仅解决了现有平台中的诸多问题，还提升了用户体验和整体的一致性。从扩展应用能力、优化信息架构，到构建多维标准和品牌形象重塑，每一步都经过了精心规划和细致执行。特别是在业务场景下的情感化表达和引导设计上，我们通过选择更直观、易用的方案，确保用户能够更轻松地理解和操作。

未来，我们将继续关注用户反馈和业务需求的变化，不断迭代和优化我们的设计方案，以确保平台始终保持高效、一致和用户友好的特性。通过这些努力，我们有信心为用户提供一个更加完善和满意的使用体验～～