❤️ 现在关注【前端修罗场】,后台回复【666】,即可获取【免费的优质学习资料】~

说起数据可视化设计,如今绝对是热门的设计之一,而真正懂数据可视化设计的设计师却不多,随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。很多UI设计师突然会接到公司数据可视化设计的需求,如果不了解数据可视化的设计,那么肯定是一头雾水,不知从何入手。

什么是数据可视化?

数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。简而言之就是把枯燥无味的数据,通过图形化设计表现,达到一种更加精准和高效的数据分析和表达。

下面要跟大家分享的是,我经手的一个真实数据可视化大屏项目改版,接下来会分享给大家一套全面的数据可视化技法,包括科学的运用图表、运用色彩、把控数据层级以及视觉层级,达到美学形式与功能需要齐头并进。

案例解析

首先看下线上旧版的设计,分析存在的问题。(长屏需要横屏观看)

问题
  • 1、左侧大面积文字导致视觉不平衡,且密集

  • 2、整体用色暗淡,图表用色没有规则

  • 3、图表运用不恰当,不能有效传达数据信息

  • 4、缺标题,数据信息优先级排列不恰当

结合这些问题作出了改版,(长屏需要横屏观看)

因为是改版所以能够看到线上真实的数据信息,这样旧版的数据呈现就能给到重要的设计参考价值,例如能够知道TOP10热门关键字大概是几个字,在设计图表时就会依据字数的长短来参考设计,也可以知道是否有极端数据,从而运用更适合的图表呈现等等。

下面依次对照新改的版本,解决旧版出现的问题。

问题一:

1、左侧大面积文字导致视觉不平衡,且密集

注解:

由于左半部分有大篇幅的文字,视觉上会显得密集,容易视觉疲劳右半部分大面积的色块图表使得整个界面视觉上不平衡

解决方案就是在把文字用排行榜图形分开,放到文字中间部分,这样就丰富了只有文字的单调设计,整体视觉较为平衡和谐,并且这样还能够突出强调重要数据信息。

问题二:

2、整体用色暗淡,图表用色没有规则

注解:

提取旧版的颜色,色彩很暗淡,对于深色背景来说,这样的配色方式并不会有好的视觉表现。

暗色背景通常用高饱和高明度的颜色,对比暗色背景更能聚焦视觉,突出数据可视化的表现亮丽的色彩能够让数据可视化设计的更加绚丽

数据可视化大屏设计慎用大面积的渐变色,小面积可尝试一般大屏都是拼接屏,品牌不一样色差会表现不一,所以初稿出来后可以先去大屏上看下效果

注解:

图表用色没有规则,上图三个图表都表现 “正面” “中立” “负面” 三个维度数据信息,但在**用色上没有一个统一的规则**,例如三个图表中黄色分别代表不同的维度信息,这样就无法建立观者的认知。

“负面”有警示的作用,运用红色调较为合理“中立”色彩情绪上适合黄色调,黄色会给人中性的感受,例如马路上的等待的黄灯,例如一片树叶从绿色到黄色再到枯萎灰色,给人一种过程中的中立情绪感受等,“正面”就是给人积极的一面,所以绿色或者主题色蓝色都是很恰当的。

问题三:

3、图表运用不恰当,不能有效传达数据信息

注解:

同一个界面中左侧文字TOP10属性类似的“核心媒体TOP10”展示形式最好能有共性。旧版运用了柱状图并不恰当,尤其是标题字数过多时候并不推荐使用柱状图文字倾斜的展示方式,改版后加上相同的排行榜图标,数据直接展示出来,TOP10的效果会更好。

注解:

数据需要对比分析,显然这个玫瑰图表并不能很好的说明对比,每个维度大小排列没有规律,实际数据分布不均匀,导致没有对比的效果,改版后突出总的数据,用条形图从大到小依次排列各维度数据,数据上有对比,视觉上更有主次

注解:

首先是旧版用色不恰当,最严重的问题是图表上没有任何数据,因为展示型的大屏,很少有交互行为,这样的设计是不可取的不能让观者去猜百分比数据数据可视化就要用图表数据的形式展示出来最直接的信息,除非是展示趋势并不是准确的数据

注解:

旧版用的条形堆积图,其实更适合百分比数据的对比呈现一个维度下面有若干个子项,比较适合分组柱状图(新改版为分组柱状图)或者分组条形图更为恰当。

注解:

旧版色彩搭配不和谐,趋势图需要突出趋势线,而不是体现数据的面积红框注释不够直接尤其在颜色过多时,更不好分辨各个颜色指向的维度,新版的设计则能够准确指出各个维度的趋势线。

问题四:

4、缺标题,数据信息优先级排列不恰当

注解:

新闻的标题跟转发数才是观者关注的,而来源和时间就是次要关注信息,所以视觉上要为观者分出层级,这样不仅能够使观者看着更舒适,视觉上也很有层次,不杂乱。

旧版标题、来源、时间、转发数、都是相对于内容居中的状态,这种排版是不符合表格排版规则的,简单的做法就是文字左对齐,数字右对齐,数字右对齐能够更快速识别数据量大小,跟其他数据的对比,文字左对齐则是根据人从左到右的阅读习惯。

注解:

设计数据可视化大屏时一定要考虑用户浏览数据的优先级的构架,例如要遵循先总后分,先具体后抽象的逻辑,上图旧版把趋势放到了页面的第一视觉位置,就有点宣兵夺主了,根据先具体后抽象,改版后具体数据放到第一视觉位置,趋势信息排后

旧版大屏没有标题,我是谁?我在干什么?我要去哪里?所以标题务必得有

总结:

说了这么多设计要点,新手可能还是不知道设计的切入点在哪里,所以总结一个数据可视化设计分三步走法。

  1. 第一步:了解数据要表达的本质。

拿到一组数据,先分析主次,这组数据要表达什么?展示数据,还是对比数据,或是实时监控数据,从而确定展示的优先级

  1. 第二步:确定使用图表。

通过了解数据要表达的本质后,选择适合他的图表,这时候就需要打开几个开源的图表网站找图表,记住你的图表用的是网站的哪一个,开发如果找不到就丢给他网址。

网站有:Fusion Design、蚂蚁数据可视化-AntV、ECharts Examples、Highcharts…等。

  1. 第三步:整体效果调整

功能性的数据展示都没问题,还要看下整体效果,例如用了过于多的柱状图,可能就会影响了整体的美感,图表尽可能多样性数据表达信息就要用不同的图表展示

最后

数据可视化设计核心就是,通过美学设计形式把数据精准和高效的分析和表达。

❤️ 现在关注【前端修罗场】,后台回复【666】,即可获取【免费的优质学习资料】~

数据可视化大屏设计经验分享相关推荐

  1. 大数据可视化大屏设计经验分享

    前言 大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的步伐学习 ...

  2. 数据可视化大屏设计经验分享 【进阶篇】

    前言 说起数据可视化设计,如今绝对是热门的设计之一,而真正懂数据可视化设计的设计师却不多,随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化.很多UI设计师突然会接到公司数据可视化设计的需求,如果 ...

  3. 思迈特软件Smartbi数据可视化大屏设计经验分享

    大数据时代,我们最常听到的一句话就是"用数据说话".但数据本身是冰冷的数字,它很难直接告诉我们哪些数据是有价值的信息.只有通过合适的可视化工具来进行数据的展示表达,才可以使传递给使 ...

  4. 大数据可视化大屏设计经验及案例分享

    今天要跟大家分享我一年多设计大数据可视化大屏的经验和观点,下面从UI设计.交互设计.动效设计三个方面来分享.    UI设计       设计大屏一样要谨记要以展示数据为核心,在任何炫酷屌炸天表现都要 ...

  5. 大数据可视化大屏设计经验,教给你!

     前言    大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的 ...

  6. 数据可视化大屏设计步骤,有3步流程

    数据可视化大屏设计步骤,有3步流程 大屏工程师经常碰到那样的窘境:竭力设计方案的大屏,数据精确.視覺酷炫,可是用户满意度一般.究竟哪些的大屏才算是客户必须的呢?回答是:重点突出.层级清楚.怎样设计那样 ...

  7. 11.11数据可视化大屏设计揭秘

    万众期待的京东11.11全球热爱季落下帷幕,巅峰狂欢中,多少人的购物车在这一天成为了GDP野马,创造的商业价值年年翻新,节节拔高,这背后的数据和流量,让消费者和企业更加直观.明确地捕捉到最新的消费风向 ...

  8. 数据可视化大屏设计-金螳螂项目管理指挥中心-大数据项目

    本次项目的难点在于除了把繁杂的数据图形化出来,还要结合场景,通过各台终端控制和指挥整个界面的交互呈现以及页面切换方式. 本次项目的分享,在于整理自己做可视化项目的思路以及在项目中遇到一些实际情况的处理 ...

  9. web页面大数据可视化大屏展示案例分享

    以下案例,亲测有效 温馨提示:直接运行工程文件夹中的index文件,即可看到大屏. 案例1: 案例二: 案例三: 案例四: 案例五: 案例六: 案例七: 案例八: 案例九: 案例十: 案例十一: 案例 ...

  10. 超全的数据可视化大屏设计组件库 sketch格式

    随着大屏可视化设计需求的发展,可视化sketch矢量素材变得越来越受欢迎,它可以为设计师提供丰富的设计元素,帮助他们更高效更快速的完成设计任务. 大屏可视化sketch数量素材是B端可视化设计师们最佳 ...

最新文章

  1. 各种Optimizer梯度下降优化算法回顾和总结
  2. linux docker 限制容器可用的 cpu
  3. Hadoop_23_MapReduce倒排索引实现
  4. spring mvc使用的一些注意事项
  5. EL之Bagging:利用Bagging算法实现回归预测(实数值评分预测)问题
  6. 如何使用 FFmpeg 减小视频大小
  7. git 修改远程仓库源
  8. 登陆 manager app显示不是私密链接_小米上线了一款靠指静脉识别开锁的私密箱,打造你的私人存储空间...
  9. Memo History Tracking History in Access 2007
  10. Linux系统管理(11)——linux下jdk的安装及环境变量配置
  11. plsql oracle client没有正确安装(plsql连接远程数据库)
  12. SpringBoot下实现PDF转word(Maven项目)
  13. (转自MBA智库百科)弗兰克·吉尔布雷斯
  14. 解决台式机麦克风不可用问题,只有音频输出,无音频输入
  15. 冯雪 手术机器人的应用_外科手术机器人发展及其应用
  16. 不会PS怎么抠图?这4个在线抠图工具,助你一键抠图
  17. 用u盘制作简易dos启动盘
  18. PostgreSQL in amp; = any (values|array)
  19. 阿里面试,我挂在了第四轮……
  20. latex的恒等于怎么写?

热门文章

  1. 字符串处理(六)atoi、atof、atol和atoll
  2. 安捷伦温度测试仪 软件,安捷伦34970A数据采集器温度测试仪是德科技34970A+34901A模块...
  3. Spring boot 集成极光推送
  4. Thinksystem ST550安装windows2008R2
  5. 【天池大数据竞赛】“数智教育”2019数据可视化竞赛亚军方案总结
  6. 浅谈融云即时通讯服务「日志优化」
  7. 树莓派4B配置远程桌面软件 Teamviewer(解决报错)
  8. 测试无损音乐软件,无损音乐一定靠谱?/无损检测方法
  9. 二维码生成器网站/解码网站
  10. antdesign 新增页面_ant design pro 新增页面