2019-7-1 资深UI设计者
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在大数据时代，数字化转型已经成为行业迫切的需求。2016-2018年金融、医疗、政府、安全等行业在大数据方向上的投入持续增加，大数据可视化的需求呈现爆发式增长，相关产品也纷纷推出：阿里 DataV 的「双十一的天猫可视化大屏」、360的数博会企业安全大屏、帆软的 BI系统。面对井喷式的市场需求和部门业务在 To G、To B 的拓展需求，需要快速储备大数据可视化的能力，作为一个 To C 的设计团队面临的挑战和责任都是巨大的。（编者注：由于本文动图太大，将近100M，为了不影响移动端读者的阅读体验，本文图片都是静态截图，动图文章链接戳：https://docs.qq.com/doc）
在过去一年中，潘洛斯（Penrose）团队参与了「灵鲲」态势感知系统、「麒麟」系统、「鹰眼」反电话诈骗系统等14个大数据可视化产品的设计。随着产品不断的探索和迭代，积累了一些行之有效的大数据可视化设计的心得和方法。基于「灵鲲」这个案例，分享一下我们在大数据可视化方向的设计和思考，希望能够给对大数据可视化感兴趣的同学提供一些思路。
「灵鲲」是 MIG 安全云部门与潘洛斯（Penrose）团队合作的，基于潘洛斯大数据可视化引擎衍生出的一款金融风险监控可视化产品。应北京与深圳金融办的需求，搭建灵鲲金融风险态势感知系统，实现事中风险控制，减少网络欺诈损失。
着手设计之前，我们需要了解：大数据市场规模和各行业投入有多大， 政企客户的大数据可视化产品的痛点是什么？对比深耕多年的竞品，我们设计的突破口在哪？——挖掘我们的机遇和发力点。
数据显示，2017年中国大数据产业规模为4700亿元。随着一系列政策的出台，大数据国家战略正在加速落地，大数据行业将持续增长，预计2018年中国大数据产业规模将达到6200亿元，增幅达32%。需求层面，预计2020年大数据应用市场需求中，仅政府需求就占比35%，另外包括医疗、交通、金融等多个行业在大数据和信息化建设投入也将持续增加。
除了旺盛的需求以外，我们还注意到很多政企内部数据基础很好，以宜昌为例，宜昌智慧办汇集了来自32个部门、60个系统的大量详尽的实施城市数据。与这些政企单位合作，易形成行业灯塔，便于规模复制。另外，针对大数据可视化，目前政企已不满足于「面子工程」，更多的希望大数据可视化与 AI 结合，呈现更复杂多样的数据，以辅助决策。
基于以上的市场潜在规模的考察和典型客户研究，在进行「灵鲲」产品能力规划时，我们主要考虑以下三类使用场景： 政府机构决策、展会展台及参观视察。
在金融局等相关政府机构的日常工作中，决策层和相关工作人员会基于实时金融平台数据，针对日常事务或紧急事件进行决策管理，监控大厅也就应运而生。基于这种工作方式，我们可以发现潘洛斯的产品特性非常契合监控大厅的使用场景。在监控大厅中，用户是通过两种不同的信息界面进行工作的，分别是综合数据可视化大屏（总屏）以及工作人员独立使用的电脑屏幕（分屏）。其中，在总屏上，呈现的内容通常是一些对于决策者来说至关重要的信息：正在发生的事件的状态和可能趋势（发生了什么）、值得注意的风险（需要团队做什么）以及风险的处理进度（团队做的怎么样）；而在分屏上，主要为工作人员提供数据分析及风险事件处理功能，帮助团队对事件迅速作出响应，协作。
不同于工作场景，灵鲲产品在展会中展台的主要受众是参会人士，除了一般民众外，更有价值的观众主要来自于媒体和潜在客户等。所以在这个场景中展示的内容与实际工作中的数据可视化内容有一定的区别，更多的是对产品能力的展示、产品的宣传以及社会价值的呈现。如何直观的呈现产品的能力，并使观众快速获得有价值的信息并留下深刻印象非常重要。这也决定了在这个场景中，用户不仅包括观众，也包括演讲者。我们需要考虑如何通过控制端让讲演者而流畅的完成产品介绍。
在金融局等政府机构，经常会有上级领导视察参观的接待活动。这些来访的贵宾往往希望了解关于机构更全面和具体的信息，包括但不限于工作流程、工作成绩等，所以我们认为这个场景综合了以上两种场景的主要特点。这里的用户包括来访人员，演示人员以及工作人员，展示的内容也往往不局限于金融风险大数据的可视化，还会包括工作方式和流程本身。
通过对阿里 DataV，AntV、360、帆软的大数据可视化产品的体验，我们从产品呈现、产品体验、产品技术、部署方式和商业模式几个维度的横向对比。阿里的技术对可视化效果的局限性很大，优点是产品实现模板化、系统实时可交互，用户可以快速搭建自己的可视化产品；360产品可视化呈现3D化，数据呈现效果和数据感知度较2D更优，但是系统非实时可交互，而且搭建周期长，成本较高；帆软的可视化是传统报表型，可视化效果呈现缺乏竞争力。
经过对比，我们不难发现3D化数据呈现能力和数据感知度是最高的。但是局限于目前的技术，项目成本高、研发周期长、难以满足业务的发展速度。
基于市场需求和竞品分析，我们从以下三个方面分别分析了产品的机会和突破点：
基于对灵鲲态势感知系统的使用场景、用户需求以及机会点的考虑，我们规划了未来产品的整体架构，包括大屏端、云端、客户管理端、小屏端以及虚屏端。大屏端基于本地端引擎进行大数据可视化呈现。客户管理端包括报表和配置管理等工具，帮助用户进行分析数据和策略管理。小屏端主要考虑操作控制和移动办公等移动使用场景，提供大屏控制、移动审批、监管、公众号等功能。以上三个端由云端拉取和更新数据。虚屏则提供差异化的大数据可视化体验，如增强现实等新奇有趣的玩法。由于大屏端在我们的规划里是态势感知系统的核心，且落地到合作方的模块，以下分享的内容将主要围绕大屏的内容设计展开，未来如果产品规划中的其他模块陆续上线，我们再做分享。
本地端引擎
早期我们设计的「麒麟」系统、「鹰眼」反电话诈骗系统在对外在大屏上展示主要是通过 web 端的方式去实现，虽然适配性尚可，但很多设计效果无法完全还原。我们也尝试性用 webGL 和 three.js 的方式把设计效果再做进一步提升，但迫于研发周期和实际性能的压力，最后也只能作罢。中期我们尝试使用3D工具输出视频的方式做过一些过渡，输出效果是没有问题，但如果在展会上遇到媒体采访，事情就会变得异常尴尬。媒体会询问展示内容的真实性，数据的实效性，甚至采访的时候需要停留在某一个画面，我方参会人员配合起来非常麻烦。后来我们也研究过竞品使用的工具，例如 Ventuz，工具最终输出的效果是不错，但是界面、操作极其复杂，相关教程和素材在网络上极少，授权费用也相当昂贵。最终经过我们内部商讨和研究，也请教了一些 IEG 专家的意见，决定使用游戏引擎作为本地端的显示引擎。
Unity 和 Unreal 我们也纠结过许久，甚至 Unity 上我们也出过可交互的 Demo，但最终选择了 Unreal 的原因主要有以下几个点：
色彩基调
为了打造灵鲲产品的可视化，在竞品中脱颖而出，我们从产品功能、用户、愿景三个维度发散，提炼出设计指南的关键词：智能、直观、未来，塑造独特的大数据可视化风格体系。
灵鲲金融态势感知系统内容架构分为数据维度和场景维度，数据是核心，场景是大数据呈现的承载体；场景使用具有金属质感的深青灰，符合理性的、冷静的、智能化产品的个性；数据色彩使用透明、发光、具有未来感的高亮色，和场景形成强对比，使数据更为突显、更具吸引力；为了强化客户对于风险的感知，通过颜色区分数据的风险等级，更直观的传达数据的含义。如：高风险的使用红色，红色让人联想到危险、警报。
呈现方式
在现有的产品和传统认知中，大数据产品内容是各种样式的图形和图表，主要以平面为主。我们从游戏、科幻电影中收集了一轮大数据可视化内容相关的案例，从视觉维度上看，主要有这几个特点：一、具有很强的空间感，支持多种数据同屏呈现，可交叉分析对比，承载性强；二、高精度的模型和材质，丰富的粒子、动效，更加贴近现实的光影呈现；三、互动性强，可交互，实时演算。
从大数据可视化的内容维度上看，梳理的3D架构，主要包括：数据维度>基础建设>交通运输>行政分区>自然条件。
数据维度层是最核心的部分，位于场景上方最突出的位置，能够更清晰的展示风险数据的分布、量级；行政区域和交通层是城市场景最基础的数据维度，方便用户进行区域的数据对比和分析；基础建设层包括城市的建筑、标志性建筑、照明、桥梁、等，还原城市独特风貌；通过突出城市的标志性建筑，强化城市、区域的识别性，辅助数据传达；自然条件层包括地形、河流、植被、展示真实的环境特征，用户更有代入感。
△ 北京场景
△ 鸟瞰视角、漫游视角自由切换，满足全局、街道、建筑的不同颗粒度的数据呈现，方便用户进行纵向的数据对比。
△ 场景整体风格图
数据表现
灵鲲的3D数据样式有柱状图和散点图。如何把司空见惯的数据样式，设计出产品的个性，是我们重点要解决的问题。为了体现大数据的力量感，使用科幻电影中的聚合能量、发光的能量石作为柱状图的主图形；同时把数据采集、融合、分析的过程具象为动态粒子网络，作为辅助图形。数据图形和结构中都融合了品牌 DNA 的三角图形，数据样式更具有品牌的个性。
△ 柱状图
△ 散点图
预见未来的功能创新
时间线：3D的维度基础上，我们增加了时间的维度，通过拖动时间线查看不同时间点的数据的变化趋势，由此对未来数据进行预测。为了强化用户对于时间感知，设计了白天和晚上两种风格，白天和夜晚随着时间变化而变化。
天气系统：天气是未来数据分析极其重要的一个因子，它会直接影响交通（例如人流、物流、航空）、医疗(例如疾病传播、医院就诊）等领域。所以我们设计了通用的天气系统组件，呈现实时天气情况，以辅助用户进行数据分析。
控制端：符合大屏使用场景和用户操作习惯，同时小屏控制端支持更复杂更精准的操作。
组件库搭建
为了提升产品搭建的效率，降低了研发周期和成本，产品功能模块实现了组件化，分为3D场景组件、3D数据组件、2D数据组件。任何一位设计师都可以根据产品需求，搭配组件模块，快速搭建大数据可视化产品。
数据内容的包装
通过该产品，一方面能够辅助金融局等政府机构领导把控整体金融平台风险、辅助做出平台整改指导决策意见，展示金融工作成绩；另一方面体现出腾讯大数据能力和公司的社会责任；最后，通过从更长远的眼光去包装产品，打造智慧监管标杆产品，从而推动与政府客户更深入广泛的合作。具体内容通过以下两条线进行组织：
横线：各个监管维度
灵鲲金融风险态势感知系统专注于呈现金融风险数据的呈现，主要分为公司层面和用户层面，综合体现潜在的风险趋势和实际影响的范围。除了灵鲲用于监管金融数据，整个监管平台还负责展示包括政治、生态、电信、消费在内的多个监管维度，这些维度与金融监管维度为同一个内容层级。我们考虑到腾讯的大数据能力可以帮助更多城市综合管理者了解整个网络社会的全局性风险，所以每个维度都是智慧监管必不可少的一部分，并且每个维度之间的横向交叉对比能够使智慧监管平台发挥出更大的社会价值。
纵线：监管颗粒度
灵鲲系统中观众可以从全局数据一直下钻到个体数据，实现不同颗粒度的监管目的。
具体来讲，全国的安全风险最终是以加权平均后的指数形式体现出来；再到具体的省份和城市，内容细化到具体风险事件的发生情况，如电信安全监管维度，呈现电信诈骗使用的伪基站的位置，以及发送诈骗短信的数量等；最后细化到城市中的机构和建筑，呈现具体机构的运行情况和具体高风险企业所在建筑进行实时监控。
https://v.qq.com/x/page/d0742kep4k1.html
潘洛斯团队是基于 DNA 设计中心下的大数据可视化团队，成员来自于 MIG 安全和医疗部门，早期专注于 To C 端的产品设计，过去一年里随着公司战略的变化和部门业务方向的变化，我们逐渐开始把产品设计的重心和思考放在了 To B、To G 领域，不断做着尝试和探索。以前做 To C 的时候我们关注的更多是 DAU、转化率、日活、满意度这些和产品体验相关联的指标，满足绝大多数互联网用户的诉求是我们首要去解决的问题。现在做 To B、To G 领域的设计，我们更多思考的是如何包装我们现有的业务能力，能够通过更加简单、直接、有效的方式触达给我们的客户，让他们更容易理解像腾讯这样拥有海量数据和算法能力的互联网公司如何帮助他们进一步提升他们的业务效率和产出，给这个社会创造更多的价值，这也是腾讯多年来想要承担的社会责任之一。
文章来源：优设
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。