前言
本期分享城市GDP大屏数据可视化设计,通过设计让表格里杂乱的数据更好的可视化呈现;通过数据的背景定义设计主题;通过分类数据构图布局页面;通过黄金比例让元素间更有层次。
16年-18年北京GDP数据
通过梳理,数据可以分为“经济数据”和“人口数据”两大类,其中经济数据分为5项,人口数据分为3项,功能上要切换全国各个城市,所以考虑到了加全国地图,这样基本的布局就可以确定了,如下图所示。
设计流程到了这一步,就需要跟需求方确认,没问题再往下走,防止对需求、数据的理解偏差。
接下来就是设计阶段,设计风格上没有过于表现科技感。
因为国家城市GDP的数据展示需要一种和谐、稳定、冷静的感觉,重要的是安安静静地把数据呈现的客观合理,所以布局上也采用中规中矩左右平衡的版式,这样能体现一种平稳、和谐的展示画面。
看表设计图
最终设计稿
匹配合适的图表
图表一:
KPI图
直接把数据用文字的形式展示出来称为KPI图,一般用于关键业务指标的数据展示,比如总数据、结果数据等。
图表二:
环形图与面积图
图表三:
柱状图
页面的上方可切换年份,所以当用户切换到2018年时,需要重点突出2018年份数据,同理,切换到另一个年份也要突出选中的。
大屏的黄金比例技法
黄金比例0.618:1蕴藏着丰富的美学价值,在APP、Web的设计范畴内,有些时候是很难运用黄金比例设计,因为交互行为,不同分辨率适配问题,但大屏设计不一样,尺寸比例是固定的,所以大屏设计要善于运用黄金比例构图、留白、解决层次比例等。
构图布局中的黄金比例
上图运用黄金比例构图,使其画面看起来更有比例性、和谐性,同时也通过黄金比例强调了页面主次视觉,最最重要的是让设计更有理有据了。
元素间的黄金比例
黄金比例不用刻意精准的去计算,牢记0.618比例,时刻要有使用黄金比例的意识,例如布局两个元素,第一个100px,第二个首先要考虑尝试60px或160px,培养这种使用意识很重要。
上图,图标加边框,文字加背景是一种出彩设计技法,可以使画面更饱满,有效区分层次。
留白中的黄金比例
适当的留白可以让界面更有层次、呼吸感,黄金比例是留白的很好方式,上图的图标如果没有边框,跟临近的元素对比视觉上不平衡,图标放大又过于突兀,所以通过黄金比例留白给图标加边框,使其跟临近的元素找到视觉平衡感。
总结:
1、对数据的了解是数据可视化设计前的必修课;
2、寻找最有效的可视化方案,是设计数据可视化的核心价值;
3、大屏数据可视化设计要善于运用黄金比例。
差不多就写完了...大家觉得有帮助的话,记得点在赞和转发~