说起数据可视化设计,如今绝对是热门的设计之一,而真正懂数据可视化设计的设计师却不多,随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。很多UI设计师突然会接到公司数据可视化设计的需求,如果不了解数据可视化的设计,那么肯定是一头雾水,不知从何入手。
什么是数据可视化?数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。简而言之就是把枯燥无味的数据,通过图形化设计表现,达到一种更加精准和高效的数据分析和表达。下面要跟大家分享的是,我经手的一个真实数据可视化大屏项目改版,接下来会分享给大家一套全面的数据可视化技法,包括科学的运用图表、运用色彩、把控数据层级以及视觉层级,达到美学形式与功能需要齐头并进。案例解析
首先看下线上旧版的设计,分析存在的问题。(长屏需要横屏观看)
问题
1、左侧大面积文字导致视觉不平衡,且密集
2、整体用色暗淡,图表用色没有规则
3、图表运用不恰当,不能有效传达数据信息
4、缺标题,数据信息优先级排列不恰当
结合这些问题作出了改版,(长屏需要横屏观看)
因为是改版所以能够看到线上真实的数据信息,这样旧版的数据呈现就能给到重要的设计参考价值,例如能够知道TOP10热门关键字大概是几个字,在设计图表时就会依据字数的长短来参考设计,也可以知道是否有极端数据,从而运用更适合的图表呈现等等。
下面依次对照新改的版本,解决旧版出现的问题。
问题一:
1、左侧大面积文字导致视觉不平衡,且密集
注解:
由于左半部分有大篇幅的文字,视觉上会显得密集,容易视觉疲劳,右半部分大面积的色块图表使得整个界面视觉上不平衡。
解决方案就是在把文字用排行榜图形分开,放到文字中间部分,这样就丰富了只有文字的单调设计,整体视觉较为平衡和谐,并且这样还能够突出强调重要数据信息。
问题二:
2、整体用色暗淡,图表用色没有规则
注解:
提取旧版的颜色,色彩很暗淡,对于深色背景来说,这样的配色方式并不会有好的视觉表现。
暗色背景通常用高饱和高明度的颜色,对比暗色背景更能聚焦视觉,突出数据可视化的表现,亮丽的色彩能够让数据可视化设计的更加绚丽。
数据可视化大屏设计慎用大面积的渐变色,小面积可尝试,一般大屏都是拼接屏,品牌不一样色差会表现不一,所以初稿出来后可以先去大屏上看下效果。
注解:
图表用色没有规则,上图三个图表都表现“正面”“中立”“负面”三个维度数据信息,但在用色上没有一个统一的规则,例如三个图表中黄色分别代表不同的维度信息,这样就无法建立观者的认知。
“负面”有警示的作用,运用红色调较为合理,“中立”色彩情绪上适合黄色调,黄色会给人中性的感受,例如马路上的等待的黄灯,例如一片树叶从绿色到黄色再到枯萎灰色,给人一种过程中的中立情绪感受等,“正面”就是给人积极的一面,所以绿色或者主题色蓝色都是很恰当的。
问题三:
3、图表运用不恰当,不能有效传达数据信息
注解:
同一个界面中左侧文字TOP10属性类似的“核心媒体TOP10”展示形式最好能有共性。旧版运用了柱状图并不恰当,尤其是标题字数过多时候并不推荐使用柱状图文字倾斜的展示方式,改版后加上相同的排行榜图标,数据直接展示出来,TOP10的效果会更好。
注解:
数据需要对比分析,显然这个玫瑰图表并不能很好的说明对比,每个维度大小排列没有规律,实际数据分布不均匀,导致没有对比的效果,改版后突出总的数据,用条形图从大到小依次排列各维度数据,数据上有对比,视觉上更有主次。
注解:
首先是旧版用色不恰当,最严重的问题是图表上没有任何数据,因为展示型的大屏,很少有交互行为,这样的设计是不可取的,不能让观者去猜百分比数据,数据可视化就要用图表数据的形式展示出来最直接的信息,除非是展示趋势并不是准确的数据。
注解:
旧版用的条形堆积图,其实更适合百分比数据的对比呈现,一个维度下面有若干个子项,比较适合分组柱状图(新改版为分组柱状图)或者分组条形图更为恰当。
注解:
旧版色彩搭配不和谐,趋势图需要突出趋势线,而不是体现数据的面积,红框注释不够直接尤其在颜色过多时,更不好分辨各个颜色指向的维度,新版的设计则能够准确指出各个维度的趋势线。
问题四:
4、缺标题,数据信息优先级排列不恰当
注解:
新闻的标题跟转发数才是观者的,而来源和时间就是次要信息,所以视觉上要为观者分出层级,这样不仅能够使观者看着更舒适,视觉上也很有层次,不杂乱。
旧版标题、来源、时间、转发数、都是相对于内容居中的状态,这种排版是不符合表格排版规则的,简单的做法就是文字左对齐,数字右对齐,数字右对齐能够更快速识别数据量大小,跟其他数据的对比,文字左对齐则是根据人从左到右的阅读习惯。
之前专门总结过一篇数据表格如何排版的文章,想了解的朋友,文章下面有数据可视化系列文章链接。
注解:
设计数据可视化大屏时一定要考虑用户浏览数据的优先级的构架,例如要遵循先总后分,先具体后抽象的逻辑,上图旧版把趋势放到了页面的第一视觉位置,就有点宣兵夺主了,根据先具体后抽象,改版后具体数据放到第一视觉位置,趋势信息排后。
旧版大屏没有标题,我是谁?我在干什么?我要去哪里?所以标题务必得有。
总结:说了这么多设计要点,新手可能还是不知道设计的切入点在哪里,所以总结一个数据可视化设计分三步走法。
第一步:了解数据要表达的本质。
拿到一组数据,先分析主次,这组数据要表达什么?是展示数据,还是对比数据,或是实时监控数据,从而确定展示的优先级。
第二步:确定使用图表。
通过了解数据要表达的本质后,选择适合他的图表,这时候就需要打开几个开源的图表网站找图表,记住你的图表用的是网站的哪一个,开发如果找不到就丢给他网址。
网站有:Fusion Design、蚂蚁数据可视化-AntV、ECharts Examples、Highcharts
第三步:整体效果调整
功能性的数据展示都没问题,还要看下整体效果,例如用了过于多的柱状图,可能就会影响了整体的美感,图表尽可能多样性,数据表达信息就要用不同的图表展示。
最后数据可视化设计核心就是,通过美学设计形式把数据精准和高效的分析和表达。
数据可视化设计是目前较为热门的设计工种,通过本文分享的项目迭代案例,希望能够让你对数据可视化有些许了解。
互联网设计帮(公众号)
作者:吴星辰
看了其他答主精彩的回答,终于轮到简立方上场了,对于大屏及数据可视化,我们有不一样的想法,请不要换台哦
最佳的大屏不只是页面炫酷,更应该具有明确易用的功能
先上一张简立方做的工业大屏图片,接下来我们将根据之前的实践经验讲一讲如何用数据大屏讲故事!
大屏主要应用与工业、安监及科研领域,那么对数据的即时获取掌控便显得尤为重要,因此数据可视化并不仅仅是展示各种酷炫的效果,更是要通过数据分析,发掘数据背后隐藏的故事,并用可视化的形式实现数据展示,表达出数据所需要传达的故事。简立方在与四川省安科院合作中,围绕安科院“一个门户,两项技术,三个示范”的需求思路,以树立一个统一的“感知门户”作为系统首页端口,着力突出展示“空天地一体化”和“北斗+”技术在矿山、危化、城市安全等领域的运用成效。
简立方从实际需求出发,深度调研关键问题根源痛点,从数字化建设战略上全盘考量系统数据规划,对整体页面数据进行系统化分级整理、统一每一层级数据规范,针对不同内容板块实现全体系整合重构。
用数据讲故事,做有温度的汇报设定数据“故事线”数据可视化的核心是用数据讲故事,简立方根据数据发生节点,梳理数据展示的“故事线”,有序的展示相应内容,同时让观者根据视觉顺序与每个互动板块进行互动,动态化的展示形式打破了冰冷数据说教式传导的束缚,以贴近观者自主需求的方式,为数据传播增加了更多维度的选择,让数据呈现更有温度。这样的数据处理方式,让大屏系统得以兼顾汇报展示和办公监控两大需求,实现极速无缝转换,从而大大节省了建设成本。
多元动效结合同时在布局数据脉络时,简立方在设计过程中将陌生的数据信息与观者所熟悉的事物进行关联比较,增强用户对可视化数据的理解,同时合理运用动效的隐喻作用,让界面自带解说词。
摆脱模式束缚,延展系统价值通过简立方对多系统的整合重构及可视化设计,安科院的态势感知与应急管理研判平台成功落地,持续在监管执法中发挥着数据监测研判、险情应急指挥的关键作用,为国家及社会的长治久安贡献自身力量。
在其他领域,大屏数据可视化技术同样也扮演着举足轻重的角色,随着其应用领域的广泛扩展,以往仅仅作为数据呈现端口的功能必将进行改变,相关设计思维也必然需要更有前瞻的扩展,需要设计者从不同场景出发,满足用户多元需求:
满足视察汇报需求,既可以对安全监管工作总览全局,又可以聚焦细节,针对性了解事件详情。
满足日常监控需求,可以利用全局监控、预警报警的能力,对突发事件进行监控研判。
满足系统集成需求,深入各部分原有系统,形成相互联系的总览门户,实现软硬件的轻薄化、智能化。
随着技术的深入发展,系统价值必将获得更广范围延展,简立方将增强数字化战略研究与用户体验设计技术建设,服务传统用户数字化转型,帮助企业实现互联网时代之下的新飞跃。
更多想法和交流欢迎查看
近几年,随着大数据产业的蓬勃发展,数据可视化大屏在各行各业中的应用越来越广泛,教育、医疗、政务、交通运输、能源等等,到处都能看到数据可视化大屏的身影。大面积、炫酷动效、丰富色彩是可视化大屏最为显著的特点,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。下面我们来看看5个经典的数据可视化大屏应用案例。
法院行政案件大数据分析系统包含了结案特征分析、当事人分析、实效分析和管辖改革成效。通过收案/结案的数量和增幅,分别用时间、领域、地区等维度分析案件变化趋势,从结构方式、矛盾化解情况、重点质效指标、舆情热点案件、败诉案件和败诉案件信息来分析结案特征,用信访案件变化趋势和分布情况针对机关滥用职权情况来特别分析。不同分析角度分析不同数据,实现案件大数据全方位解读。
智慧公安实战应用包括了智慧搜索、智慧建模、智慧服务、智慧监督、智慧标签、智慧小区、智慧管控以及智慧监测,实现个人档案的查询,同时关联社会关系和活动轨迹并绘制出关系网络图,通过建模显示各模型使用情况和资源访问量、访问趋势,进行在线业务分析,各类警务案件指标分析,根据标签标准生成人员画像,通过重点人员异常轨迹进行警情监测,根据热点追踪进行传播路径分析,实现公安智慧化管理。
为了展现学校的实力,分别从学校概况、师资队伍、教学资源、科学研究、学生发展、就业情况和日常运营的角度来展示。学校概况包括办学条件、师生情况、学科专业和师资力量,再通过荣誉称号、教师编制类别、教职工人数、研究生导师数、高层次人才、职称分布、最高学位分布等展示师资队伍,用教学用房面积、教学经费投入、教学科研仪器、图书资料等来表现教学资源,用著作成果、获奖成果、论文与专利等展现科学研究。
首页展示共享方式占比、共享属性占比、数据趋势、热门事项、和单位排名等,基础库包括人口库、法人库,支持搜索刷新,同时展示库的基本信息和申请动态,平台总体统计展示平台各类指标数据的访问、更新情况,数据服务动态展现区数据中心和市数据中心等的数据实时交互状况,实现数据全方位全时段把控。
用医师日均工作量、病床使用率、门诊病人次均诊疗费用、出院病人人均医药费用、急诊人次、出院人数来分析医疗服务情况,病人分布情况可通过数据联动实现对应地图刷新,从妇幼保健、计划免疫、卫生监督、案件查处分类、居民健康档案、历年建档人数、建档率、出院病人前十疾病的角度分析公共卫生,实现医疗卫生智慧化管理。
数据可视化大屏的应用远远不止以上几个方面,如果想要对数据可视化大屏做深入的了解,可以关注华宇智能数据将于9月17日20:00在微吼的直播《酷炫大屏如何SHOW到飞起?》,届时华宇资深可视化领域专家将围绕以下几个方面进行讨论与交流:
1、大屏的典型应用场景及价值
2、亿信多个行业大屏效果展示
3、教你制作出拍手称赞的大屏
4、大屏制作小能手之酷屏介绍
转载请注明:片头模版 » 数据可视化大屏案例(分享5个经典的数据可视化大屏应用案例)