产品定位

实现各级应用系统结构化及非结构化数据的处理融合及统一组织管理；将各行业多源异构数据，进行统一标准的质检、分类转换和关联，为各部门提供统一的数据接口、规范的数据服务和功能服务，实现各级应用系统之间数据访问、共享和交换；满足各应用系统对应用模型、辅助决策模型及灵活多变的业务模型的需求。

目标用户

使用这个软件的用户是企业中的网管和工程师，专业人士。具有高度专业性，对设备及软件操作比较精通。使用场景较为单一，主要在特定办公场所及开会观看，配合其他管理系统使用，因此展示数据的选择要契合目标用户所需，表达清晰准确，直观易懂。

设计风格

该平台的设计采取了两种设计风格，第一部分给后台运行给内部人员使用的采用扁平风，更突出主要内容，减弱简便、高光等拟真效果对用户视觉感知的干扰，让用户更加专注于内容本身，更为简单易用提高工作效率。第二部分主要给进行数据展示或者给领导汇报时使用，采用深蓝色的科技风，把数据图形化更加清晰明了展现出来，同时炫酷的风格增加了页面的趣味性。

对业务深层理解，让用户在高效率的操作中，读到最有价值的信息

充分理解用户所需，优化交互，将原有数据重新整理归类，增加部分内容，选取合适的展现方式进行设计。并将一些“占比”、“利用率”等数据图形化展示，更加清晰美观。

告警事件除了原型中的时间线按顺序发生外，加了用户头像，已处理、待处理、紧急任务统计数字，让用户可以总览全局，做到对工作量心中有数。

所有的设计都是回到本质，思考用户是否需要多层次信息的统计分析，不同的纬度呈现结果。最终以感性、直观的方式视觉表达，并考虑到数据可视化的控件类型和实现难度。

从用户体验的角度思考 如何更精准恰当地将信息展示

数据中心信息，秉承着信息简单易懂，界面引导友好的理解，把信息分组，4个关键信息总数并列2排，设计了相应的拟物化图标，美观整理有秩序。在线和离线位数增加了表达当前比例的横向柱状图，用户从绿色和红色的区块长短中可以轻松感知，比原型的表达方式又多了一个纬度。

本机系统信息，将单个的数字转化为仪表盘，可以表现出高中低预警和正常的多重含义。通过轻拟物的表现手法，增强驾驶舱的沉浸式体验，营造中控管理氛围的真实感。

探寻用户行为习惯和细节需求，深度优化设计给用户带来了更高效的工作体验

改为以文字的形式放在基本信息标题的右侧，给基本信息给多展示空间。

资产信息横向排版不利于用户快速获取信息，所以将资产信息模块和其他模块信息并排在下边展示，这样不仅可以提高用户办公效率还使页面更加整洁舒朗。

流程处理进度部分，打破原来的传统表格，将事件按照时间线的方式设计，注重节奏和形式美，加入图标“对号”表达审批完毕，“沙漏”表达正在办理中，简约精致的视觉表达。

卡片的设计优化

每个服务器用卡片的形式展示，每一个卡片矩形承载的信息分为一个版块，可以使界面保持一致性，并且使整个界面看起来更加有序。

和原型相比将卡片内容进行主次处理，突出服务器名称、重要数据等，同时服务器的不同状态会通过卡片的颜色区分，使用户对目前服务器状态一目了然。

更加清晰的布局 易用的交互

分析问题：
    资产健康状况原型各个资产IP地址的切换和资产信息并排摆放。信息功能不突出，且布局不合理。

解决问题：
   我们设计的时候对这块信息进行优化，将IP地址的切换和“资产健康情况”标题并排摆放，并且添加显示更多的图标，考虑以后的拓展性。将“资产信息”和“资产类型占比”、“资产告警”并排展示，这样布局更合理，各模块功能区分明确且易与阅读。
   资产拓扑图重新手绘图标，图标更加优雅精致立体，赏心悦目，风格和页面的一致。美好事物总能带来愉悦的心情，我们不仅要把软件的功能做好，美观也是非常有必要的。

炫酷的页面风格，清晰的功能布局 让用户工作起来事半功倍

分析问题：
    通过对原型的梳理，主要存在的问题是页面单一，功能过于隐藏，用户进来后不能快速定位到自己需要操作。针对以上问题我们对页面重新思考。

解决问题：
    在设计过程中，我们整体背景采用深蓝色科技风并加入粒子元素使整个页面更加有空间感，按钮、标题等都加入科技感元素。为了使用户进入页面在没有任何操作下对机房有个初步了解，我们将本机房的几组重要数据单独提出来显示在页面上方。页面的主要功能操作按钮，在原型上是在页面右下角只有小小图标，过于隐蔽，用户通过逐一点击才能知道每个按钮的功能。重新设计使我们将这些功能按钮放在页面正下方，采用文字加图标方式展示，清晰明了。

3D立体效果与信息展示的巧妙结合，带来与众不同的视觉体验

服务器详情页是没有原型图的，在和客户初步沟通后，了解到这页是对服务器的详情展示，内容非常明确，需要进行交互和视觉设计。

这是一个弹出页，是点选机柜总图某个机柜后展示的服务器具体信息。每个服务器所要展示的信息内容有多有少。 为使页面不受内容影响，我们采用3D透视的方式（以html透视代码实现即可），目前效果是内容最多情况。当内容较少时，在机柜两边显示，页面也不会显得空洞。

3D透视的机柜也是由蓝蓝设计师插图绘制的。