Web端数据管理平台的可视化界面设计研究

王广文，范佳悦，韩剑武

（河北工业大学，建筑与艺术设计学院，天津 300130）

引言

计算机、互联网和物联网等科技的发展，改变了人们的生活方式。互联网拥有海量的数据，人们通过互联网获取对自己有用的信息，需要对大量的信息进行筛选。可视化的数据信息因其直观性，能使用户快速识别哪些数据是有价值的，因此出现了对数据进行管理与视觉化处理的需求。基于这一需求，Web端数据管理平台的开发与使用为管理、分析、处理大量数据提供了新思路。Web端又称网页端。在Web端所建立的大部分的数据管理平台，主要是看重Web端的方便、快捷，能满足平台用户对使用便捷、节省内存、提高效率等的诉求；数据指管理平台中的图片、音频、文字以及交互功能等所有信息要素。如今，Web端数据管理平台中的数据可视化还存在一些问题。本文对数据在平台界面的数据可视化进行分析研究，找出数据可视化在界面中的设计原则。

一、管理平台存在的数据可视化问题

目前，Web端数据管理平台在设计时，没有一个统一的标准，导致管理平台界面的整体布局有多种的可视化方式，使管理平台整体视觉混乱，找不到平台布局规律，因此用户在使用管理平台时，存在整个使用过程不流畅、用户工作效率降低、影响工作进度等问题。针对上述问题，需要从用户角度出发，通过“构建心智模型”，使平台数据可视化的设计方式在一定的范围内使用相似的整体布局标准。

图1

现在Web端存在大量数据管理平台的功能按钮等内外部不统一、对于平台内的数据管理与处理的可视化设计不一致、数据信息传达不准确、页面之间相关性低下等一系列界面元素问题。通过“用户体验要素”中的框架层，从页面之间元素种类出发，统一管理平台的内部外部一致性等。

部分管理平台页面中的数据可视化，没有重点，存在难找到所需要的信息、数据信息传达模糊、数据排版样式及管理平台配色混乱等问题。使用“用户体验要素”中的框架层，从数据重要层级出发，决定各种数据在平台中的可视化的位置大小动态和平台配色。

二、构建心智模型理论

（一）基本概念

心智模型理论在上个世纪末就出现了，第一个对心智模型进行较全面概括的人是苏珊·凯里（Susan Carey）：心智模型展现的是一个人对于某样东西是如何运作的思考过程，例如一个人对于周遭世界的理解。心智模型是基于不全面的事实、过往的经验，甚至直觉。心智模型会帮助塑造行为举止。当人们处于复杂的环境中时，心智模型会影响人们关注什么，并且影响人们解决问题的方法和途径①。

在本文的管理平台数据可视化领域中，心智模型是指人们对于平台中的功能或数据的呈现方式的思考，这个思考主要包括在平台中怎样合适地对数据进行可视化，尽管人们脑海中的心智模型是复杂的，不断变化的，但设计师本身需要知道如何从复杂的心智模型中提取有用的信息，使设计师心中的模型无限接近用户心中的模型，让两者在心中建立的模型是相匹配的，这有助于设计师们在最终的设计平台上于一定范围内使用相似的标准。心智模型的建立，也有助于设计师对平台进行改进，对系统的升级迭代也具有指引的作用。

（二）设计原则

管理平台数据可视化与“心智模型”有着共通的逻辑，根据苏珊·凯里所概述的“心智模型”，梳理心智模型与平台数据可视化之间的关系，建立出适合于平台数据可视化的新的“心智模型”理念。通过图1中所举的例子，来解释新的“心智模型”理念，在本文的数据管理平台可视化领域中，心智模型是指在对平台中的功能或数据进行可视化设计时，设计师心中的模型呈现在平台上的样子和用户心中的模型是否匹配或相似。图中以“数据”举例，在设计师心中是图1（左）的模型样式，在用户心中是图1（右）的模型样式，最后在不考虑其他诉求的情况下，设计师通过对自身心中的模型和用户心中的模型进行信息提取与优化，最后设计出与用户心中的模型相同或相似的平台模型。

三、用户体验要素

（一）基本概念

《用户体验要素》②是一本有关设计思路的书，它清晰地解释了产品设计的工作内容，全书用简洁的语言系统诠释了“用户”“商业”“技术”三者之间错综复杂的关系，以及三者融合才是最重要的发展趋势。用户体验要素包含了战略层、范围层、结构层、框架层、表现层五个层面，全书主要讲述了用户体验为什么重要，如何认识这些要素以及要素的应用。比起工具或技术更关注于思路，最终提高体验的流程质量。

（二）结构层设计

通过对平台数据可视化与结构层和表现层中的方法理论进行综合分析总结，根据两者之间的互通点，找出符合平台数据可视化的设计原则，加以应用。通过分析，结构层中的界面外观、信息设计与平台数据可视化之间存在联系，总结得出设计原则（结构层）：考虑在Web端的平台上一些细节元素与其他软件存在不同之处，在此基础上，根据平台数据信息的内容，以及其希望达到的目的，选择正确且合适的界面元素，以及要统一不同界面之间相同或类似元素的一致性。对于复杂的文字数据，可先为数据分出层级，再根据产品及用户的诉求，使用合适的排版方式。

（三）表现层设计

通过分析，表现层中的视觉注意力和配色方案与平台数据可视化之间存在相关性，总结得出设计原则（表现层）：在了解人类视觉路线的基础上，基于删格线等方法，确定平台中数据可视化的位置大小等。根据平台所属公司或相关行业及用户诉求，决定平台主色相关辅助色，最终决定配色方案和排版样式。在对平台数据进行可视化设计时，通过使用以上的设计原则，最终统一管理平台内部外部数据可视化的一致性，决定平台的配色方案与排版方式，以及接下来平台数据可视化可能发展的方向。

四、设计原则可行性分析

以北京旷视科技公司中Data++团队的越影数据管理平台来论证该设计原则的可行性。根据设计原则对平台进行设计，首先，因平台用户为公司员工及与公司业务相关人员，所以对以上人群进行了用户调研，分析调研结果得出，用户最主要的诉求是希望平台可以使用简单，快捷，提升工作效率及相关功能效率，同时也希望平台不要太死板等。根据以上诉求，确定平台开发在使用快捷的Web端上。

结合设计原则第一条，设计师在心中规划平台整体模型，根据调研取得用户心中的平台模型，两者相互结合，如图2中的第一条所显示的，设计出更接近用户心中的平台模型，只有越接近用户心中的模型，设计出的平台在用户使用时，才能实现上手快，提高工作效率的目的。

图2

结合设计原则第二条，因Web端自带返回按钮并且平台页面层级不多，所以平台不必做返回按钮。平台目的是希望员工通过平台可以更快地完成工作，如图2中的第二条所显示的，减少了平台中的装饰元素，单纯以文字及文字颜色来促进用户更明确更快速地分辨功能作用和当前所在页面。平台中的文字数据信息进行了分层级处理，以左对齐的排版方式，使辨识度更高。

结合设计原则第三条，如图2中的第三条所显示的，以平台整体进度和阶段进度的数据为例，为使数据比重更清晰，数据进行饼状图可视化后，以人类的从上到下，从左到右的视觉路线为基础，以重要的整体进度数据放左，稍次一级的阶段进步数据在右，因阶段进步数据比整体进度数据更为复杂，在以一定程度上对数据进行了放大处理。

在设计原则的指导下，设计出一套越影数据管理平台界面，优化了平台的使用方式，提高平台的使用效率。论证了该设计原则的可行性。

五、结语

此研究对心智模型、用户体验要素结构层和表现层与Web端平台数据可视化的联系进行了分析总结，最终得出一套符合平台数据可视化的设计原则。并以北京旷视科技公司中Data++团队的越影数据管理平台为例子，讨论了此设计原则的可行性。然而这种设计原则只适用于Web端平台的数据可视化设计，在其他环境下，由于互联网界面的复杂性，导致设计原则无法适用于其他情况，因此还需要更进一步的研究。

注释：

①苏珊·凯里（Susan Carey）.《认知科学与科学教育》（Cognitive Scienceand Science Education），1986年.

② Jesse James Garrett.用户体验要素（中文版）[M].范晓燕，译.北京：机械工业出版社，2008.