• 今天是“人民日报”的七十岁生日吗?祝贺她生日快乐!虽然我们的祝福有点微不足道,还是祝福我们的人民日报越办越好! 2019-11-23
  • 中巴经济走廊提供了安全和稳定 2019-11-23
  • 北京市北京睿通伟业综合店【在线咨询】 2019-11-20
  • 统一标尺严把关口 防止留置权滥用 2019-11-07
  • 走近上合志愿者 “小浪花”为峰会增添一抹靓色 2019-11-07
  • 河北衡水:北方强对流扎堆  南方降雨频繁——遭遇冰雹  车窗被砸农作物受损 2019-11-05
  • 政府拆迁和商业拆迁有什么不同?当时错信了奸商,懊悔知道晚了! 2019-10-28
  • 实干树形象 实绩惠民生——“两学一做”特别关注 2019-10-28
  • 足球只不过是个娱乐项目,吃饭赚钱才是安身立命必须要做的,不要跟着那些戏子瞎起哄。 2019-10-20
  • 揭秘人民币制作过程 从“白纸”到钞票耗时1个月 2019-10-20
  • 女教师课上画高树讲高数 学生原来高数真是树! 2019-10-19
  • 揭秘人民币制作过程 从“白纸”到钞票耗时1个月 2019-10-19
  • 【理上网来·辉煌十九大】澳大利亚专家:一个强大自信的中国会给世界带来更多机遇 2019-09-03
  • 流行风向标 助你石博会上淘宝 春城壹网 七彩云南 一网天下 2019-09-03
  • 你千万别欺骗,你能欺骗的,都是相信你的人。 2019-08-23
  • 瑶瑶

    欢乐生肖十走势图:数据可视化大屏设计经验分享 【进阶篇】

    瑶瑶 项目总结 4978浏览

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

    什么是数据可视化?

    数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。简而言之就是把枯燥无味的数据,通过图形化设计表现,达到一种更加精准和高效的数据分析和表达。下面要跟大家分享的是,我经手的一个真实数据可视化大屏项目改版,接下来会分享给大家一套全面的数据可视化技法,包括科学的运用图表、运用色彩、把控数据层级以及视觉层级,达到美学形式与功能需要齐头并进。

    案例解析?

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

    问题

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

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

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

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

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

     

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

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

     

    问题一:

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

    注解:

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

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

     

    问题二:

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

    注解:

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

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

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

     

    注解:

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

     

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

     

    问题三:

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

    注解:

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

     

    注解:

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

     

    注解:

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

     

    注解:

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

     

    注解:

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

     

    问题四:

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

    注解:

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

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

    之前专门总结过一篇数据表格如何排版的文章,想了解的朋友,文章下面有数据可视化系列文章链接。

     

    注解:

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

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

     

    总结:

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

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

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

    第二步:确定使用图表。

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

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

    第三步:整体效果调整

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

     

    ?最后?

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

    数据可视化设计是目前较为热门的设计工种,通过本文分享的项目迭代案例,希望能够让你对数据可视化有些许了解。

     

    原文地址:互联网设计帮?(公众号)

    作者:吴星辰

    转载请注明:欢乐生肖彩票走势图 » 数据可视化大屏设计经验分享 【进阶篇】

    登录收藏
     
    你可能喜欢的:
    减少认知过载获得更好的用户体验减少认知过载获得更好的用户体验
    说这款银行APP不但省钱还体验很好,于是我们评测了一下说这款银行APP不但省钱还体验很好,于是我们评测了一下
    企业服务设计中的三要素企业服务设计中的三要素
    QQ亲密关系 | 从工具到情感再到认同QQ亲密关系 | 从工具到情感再到认同
    增加工作经验:双11‘全民合伙人’设计细节盘点增加工作经验:双11‘全民合伙人’设计细节盘点
    设计沉思录|租房业务全流程体验设计设计沉思录|租房业务全流程体验设计
    如何快速有效的设计字体LOGO如何快速有效的设计字体LOGO
    界面清单-帮你打开设计思路界面清单-帮你打开设计思路
    体系化设计流程与思路体系化设计流程与思路
    入门交互设计的4个步骤(6000字长文)入门交互设计的4个步骤(6000字长文)
    ?
  • 今天是“人民日报”的七十岁生日吗?祝贺她生日快乐!虽然我们的祝福有点微不足道,还是祝福我们的人民日报越办越好! 2019-11-23
  • 中巴经济走廊提供了安全和稳定 2019-11-23
  • 北京市北京睿通伟业综合店【在线咨询】 2019-11-20
  • 统一标尺严把关口 防止留置权滥用 2019-11-07
  • 走近上合志愿者 “小浪花”为峰会增添一抹靓色 2019-11-07
  • 河北衡水:北方强对流扎堆  南方降雨频繁——遭遇冰雹  车窗被砸农作物受损 2019-11-05
  • 政府拆迁和商业拆迁有什么不同?当时错信了奸商,懊悔知道晚了! 2019-10-28
  • 实干树形象 实绩惠民生——“两学一做”特别关注 2019-10-28
  • 足球只不过是个娱乐项目,吃饭赚钱才是安身立命必须要做的,不要跟着那些戏子瞎起哄。 2019-10-20
  • 揭秘人民币制作过程 从“白纸”到钞票耗时1个月 2019-10-20
  • 女教师课上画高树讲高数 学生原来高数真是树! 2019-10-19
  • 揭秘人民币制作过程 从“白纸”到钞票耗时1个月 2019-10-19
  • 【理上网来·辉煌十九大】澳大利亚专家:一个强大自信的中国会给世界带来更多机遇 2019-09-03
  • 流行风向标 助你石博会上淘宝 春城壹网 七彩云南 一网天下 2019-09-03
  • 你千万别欺骗,你能欺骗的,都是相信你的人。 2019-08-23
  • 摩臣娱乐群 双色球开奖结 河北时时彩群 甘肃十一选五一定牛走势图 北京单场20171023预测 广西快3360 中国体育彩票七星彩 舟山体彩飞鱼技巧 福彩七乐彩开奖结果 走路赚钱2019 广东36选7最新开奖查询下载 极速飞艇博彩 可乐十三水安卓版 手游贪玩传世能赚钱不 黑龙江36选7几点开奖结果查询 云南11选5前3直开奖结果