pic
原文发文日期:2021.11.18
一、风格探索
随着B端崛起,数据可视化设计越来越被重视,网上五花八门各种风格的设计,小伙伴一时不知道如何更好的去找对应的参考,是不是有一些风格分类呢?
那么数据可视化有没有风格的分类呢?
答案:必须有的!
在商业项目中遇到的一些可视化案例以及科幻可视化风格,我们总结了大体将其分为三大类:传统风格、HUD风格、FUI风格
| 传统风格
传统数据可视化, 就是将数据转换成图或表等,以一种更直观的方式展现和呈现数据。通过“可视化”的方式,我们看不懂的数据通过图形化的手段进行有效地表达,准确高效、简洁全面地传递某种信息,甚至我们帮助发现某种规律和特征,挖掘数据背后的价值。
其特点:· 页面杂糅,彷佛是由一块块图表堆砌而成 · 重色彩的运用,多色搭配,色彩一般具有特质
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2F30f9d87b-db86-462f-bf4f-3dfb204c542d%2FUntitled.jpeg?table=block&id=4be745de-d4f6-433c-bd99-bc711beeb70b)
▲(图片源于网络,侵删)
在传统可视化面前,页面的杂糅程度较强,彷佛是由一块块图表堆砌而成,比较注重色彩的运用,多色搭配,色彩一般具有特质。一般大多数可视化可以看到共同的点就是:配色/布局/构图,机械而又重复,彷佛一个流水线生产出来的。当然,现如今新基建乃是主流,人群对可视化大屏的认知和审美也在逐渐提升,设计师在以后的工作中还需要取长补短,多吸收一些好的东西去丰富我们具有中国特色的数据可视化大屏设计。
| HUD风格
平视显示器(Head Up Display),简称HUD,是一种机载光学显示系统,运用在飞机上的飞行辅助仪器,可以把飞机飞行信息(如飞行参数、姿态信息、导航信息等)投射到飞行员视野正前方的透视镜上,使飞行员保持平视状态时,在同一视野中兼顾仪表参数和外界目视参照物。
因为HUD的方便性以及能够提高飞行安全,民航机、汽车也开始安装。在一些游戏界面中,很多地方都会采用HUD的风格,比如射击类,格斗类,动作类游戏等等(赛博朋克,堡垒之夜,绝地求生)。
其特点:· 大量的图形元素,并辅以一定的装饰元素· 点线为主装饰,排版版式参考价值较强
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2Fc2b8d3ad-f6e6-41f8-b4b8-610a7344deb3%2FUntitled.gif?table=block&id=1268fd6e-bb01-4a88-8050-6b31f487af3f)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2Ffb5360f6-9947-425d-95cf-24d9917d484a%2FUntitled.gif?table=block&id=e187cca9-a07e-4b8a-8bcf-fdf69feaf58e)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2Fe718ba91-09cb-4f28-9773-8cdf67e98c17%2FUntitled.gif?table=block&id=ab2c3ff9-8189-47d7-891e-7a80a8886f77)
(图片源于网络,侵删)
| FUI风格
相对于当前流行的扁平化设计,FUI可谓是在Ul设计中独树一帜,设计风格十分鲜明,极具未来感和科技感。
其特点:· 图形装饰元素丰富,形式感很强· 使用大量的“异形”的图形元素,并辅以一定的装饰元素
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2Fdee7fec5-89c5-42c0-b1ba-b45b4f2e081d%2FUntitled.jpeg?table=block&id=0dadce20-61be-4f95-b33a-29e6095b7ad5)
(图片源于网络,侵删)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2Fbd672c90-2acf-4f60-af73-423f0babb773%2FUntitled.png?table=block&id=d0cb4aa8-e8bd-483b-a1cd-1cfe4c2b5517)
(图片源于网络,侵删)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2F75ca0abb-345f-4e36-817e-8f48f49cfd9b%2FUntitled.jpeg?table=block&id=05a1b6c3-b618-4c61-8e5e-1ee65607c21c)
(图片源于网络,侵删)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2F282f8700-1aa4-4830-b0c2-5e7dc418b2e9%2FUntitled.jpeg?table=block&id=71fafc5a-f8d2-4a88-8beb-a8163d632354)
(图片源于网络,侵删)
FUI的图形装饰元素可以说是极其丰富,形式感很强。在设计的细节当中使用大量的“异形”的图形元素,并辅以一定的装饰元素,但是一定程度上对于设计中繁琐的需求,需求层次上寻找设计灵感没有太多帮助。常用在科幻电影以及概念游戏等领域,落地较难。
二、基本工具库
介绍完了数据可视化的三种风格,下面给大家推荐数据可视化基本工具库:
| ·可视化图表生成(适合开发、工程师)
Highcharts
HighCharts 是一个用纯 JavaScript 编写的图表库, 能够简单便捷的在 Web 应用上添加交互性图表。这是在 Web 上使用最广泛的图表,企业使用需要购买商业授权。
· 纯 JavaScript 编写的图表库· 能在 Web 应用上添加交互性图表· 在 Web 上使用最广泛· 需要购买商业授权
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2Fc2af8c85-951b-44ca-8a20-8c57667c2b78%2FUntitled.png?table=block&id=cb2c5e4a-82f1-4cf7-bd36-6abdc60d4173)
(图片源于网络,侵删)
ECharts
· 纯Javascript的数据可视化库· 常用于软件产品开发或网页的统计图表模块· 可在Web端高度定制可视化图表· 图表种类多,动态可视化效 · 完全开源免费
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2F132ee9c8-c76a-4b3d-bc3e-fb22aa6c44ac%2FUntitled.png?table=block&id=b3a3f2df-cea3-459e-94d2-e16ac0cafd1d)
(图片源于网络,侵删)
AntV
AntV又是蚂蚁金服出品的一套数据可视化语法,国内第一个采用The grammar Of Graphics这套理论的可视化库。Antv带有一系列的数据处理API,简单数据的数据归类,分析的能力,被很多大公司用作自己BI平台的底层工具。
· 简单数据的数据归类,分析的能力· 被很多大公司用作自己BI平台的底层工具
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2F5494e677-72fd-4a59-bdf4-910155e3c9de%2FUntitled.png?table=block&id=de4eae76-44ab-486d-afec-4ae39cfaa086)
(图片源于网络,侵删)
| ·可视化报表类(适合报表开发、BI工程师)
FineReport
FineReport报表软件是一款纯Java编写的、集数据展示(报表)和数据录入(表单)功能于一身的企业级web报表工具,仅需简单的拖拽操作便可以设计复杂的中国式报表,搭建数据决策分析系统。
· 一款纯Java编写的、集数据展示(报表)和数据录入(表单)功能于一身的企业级web报表工具· 能简单设计报表、搭建数据决策分析系统
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2Fc6503640-51e5-40a9-a2ec-0b29a5ada72a%2FUntitled.png?table=block&id=5b0679a5-5b43-4eb8-bc99-34ea939c3669)
(图片源于网络,侵删)
| ·商业智能分析(适合BI工程师、数据分析师)
Tableau
Tableau是桌面系统中最简单的商业智能工具软件,没有强迫用户编写自定义代码,新的控制台也可完全自定义配置。在控制台上,不仅能够监测信息,而且还提供完整的分析能力。
· 桌面系统中最简单的商业智能工具软· 可完全自定义配置· 不仅能够监测信息,而且还提供完整的分析能力
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2F56e21375-514d-4899-adba-0163f63bbc77%2FUntitled.png?table=block&id=95dd305a-a2d6-4cfb-8bce-58b6af470a58)
(图片源于网络,侵删)
FineBI
FineBI是商业智能BI工具,与Tableau类似,都主张可视化的探索性分析,有点像加强版的数据透视表。上手简单,可视化库丰富。可以充当数据报表的门户,也可以充当各业务分析的平台。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2Fcb35cc39-c723-48c5-816b-b6f5a9fe12f0%2FUntitled.png?table=block&id=a2d30206-c844-4cf8-b104-85fb1deff804)
(图片源于网络,侵删)
阿里DataV
天猫双十一大屏就用DataV做的,是阿里云的拖拽式可视化工具,主要用于业务数据与地理信息融合的大数据可视化,像一些展览中心,企业管控中心用。不需要编程,通过简单的拖拽配置就能生成可视化大屏或者仪表盘。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2F7de09d7e-7814-458f-a62c-115d7bf8e658%2FUntitled.png?table=block&id=8cb75b3d-59c6-4ae2-a18a-598039cfbb37)
(图片源于网络,侵删)
| ·可视化大屏类
FineReport
· 这个工具它也能做可视化报表,也能做大屏。· 可以实时连接业务数据,做企业的一些经营数据展示,如:展览中心、BOSS驾驶舱,还有城市交通管控中心、交易大厅等
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2F957a30c2-2523-43e6-8001-80b9d238b6dd%2FUntitled.png?table=block&id=34178895-7504-40ec-a243-508f8ed3ac59)
(图片源于网络,侵删)
数字冰雹
· 专注于做数据图像、三维处理、数据分析等相关业务· 通过图像可视化方式呈现数据分析· 在智慧城市、工业监控用的比较多
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F0fe69d31-7317-47e6-b6b7-5c33f710d68c%2F87284787-e042-4f50-b73e-4fb6d2f63fa4%2FUntitled.png?table=block&id=242c9fe4-9a5f-4998-a36f-7894c8dd5702)
(图片源于网络,侵删)
欢迎大家来一起交流数据可视化~
参考资料
数据可视化基本信息内容来源:AYONG&九品自主研究