新的角度看城市—— 智慧城市可视化界面设计的心得体会
作者: 发布时间:2020-10-09

新的角度看城市——

智慧城市可视化界面设计的心得体会


如何快速的了解一座城?

不是爱上那里的姑娘,而是去博物馆了解它的文化,去大街小巷了解人文,去CBD和菜市场了解GDP… ….

——知乎。

图片来源于网络


的确,这些都是好方法,同时这也意味着你必须投入时间、耗费精力去融入它,感受它,这样的体验,多了些烟火气,适合旅行,但却不能全面的、客观的、及时的了解这是一座怎样的城市。


图片来源于网络


本周可视化项目组的小伙伴为我们进行了一些智慧城市可视化界面设计案例分享,通过自身对可视化界面设计的理解,对一些案例进行了分析。


现今,科学技术飞速发展,特别是在人工智能、大数据、云计算、物联网等方面,极大地改变了整个世界的面貌,数字化、智能化使城市、生活迈进一个崭新的数字经济时代。城市的复杂性会产生庞大数量的数据,而数据的可视化比纯粹的统计汇总更有用,,更实时、更直观。通过视觉效果,将地理空间、时间序列、逻辑关系等不同维度串联起来,不同类型的数据以不一样的方式呈现出来,使数据背后蕴藏的价值、规律、趋势和关系得到体现,这就是数据可视化。城市数据,在可视化设计中属于比较复杂 、抽象的一类,如何通过可视化的形式来展示它们之间的关系和规律是所考虑的重点问题。而通过可视化的形式营造感知氛围,把数据背后的故事生动描绘,调动观众的情绪与感知,传达文化及价值,这是智慧城市可视化建设需要达到的目标。


本次为大家分享一些优秀的智慧城市可视化大屏界面设计界面案例,并对界面提出了一些修改的心得体会。


智慧城市数据可视化优秀设计

图片来源BIGDATAROOM


以智慧城市数据可视化优秀设计为例,这一版整体采用无边框设计,蓝色调,主要表现某市各个商圈以及重点单位附近的交通指数,拥堵指数以及拥堵时间,公共资源撒点等指标来展示智慧城市可视化。此处通过一个高精度的建筑模型作为主视觉,画面效果一下子就起来了,主建筑与其他区域的建筑相结合,详略得当,更能重点突出主视觉。主视觉弹框能够很明显的表现出当前医院的饱和拥堵程度,人流量等等的信息。左右两侧图表的数据展示则是整个画面的信息传达区域,当前视角下区域的综合态势,或者说是数据指标。小伙伴们觉得表现能力可以稍弱于主视觉,但不可太过简单,这样就失去了设计的意义了。


总之,是一个很棒的设计!


智慧城市数据可视化优秀设计

 图片来源BIGDATAROOM


而这一版设计整体风格大体上来看是没有什么问题,但是细看内容就会发现画面上下两侧和主视觉太亮了,由于亮度和色彩饱和度较高的原因,使得主视觉上的标记点被衬托得不是很明显,让人心理上就忽略了它存在的意义。但是左右两侧的图标,表现方式却很好,有细节,样式也够丰富, 让人能很容易分辨每一个板块的数据及内容。


所以,调整一下画面中心区的亮度及主视觉的色彩,就不会让人觉得很突兀,同时,将主视觉画面可以作为一个建筑群来展示它的各项指标,需要将医院重点单位的详细指标展示出来,通过弹框等方式,这样也能直接的点明标记点的作用。左右两侧,表现方式已经很好,可以将左右两侧的图表再适当加宽一点,比例协调一点画面效果会更好。并且可以将画面的白色文字用成纯白增强视觉的表现。


智慧城市数据可视化优秀设计

图片来源BIGDATAROOM


这个蓝紫色风格的设计,视觉色彩上就会让人眼前一亮,风格效果很好,不过模型展示不够完整,若主视觉能将屏幕铺满,效果应该能更好一些。


在做智慧城市的项目的时候,可以采用无边框设计,会使画面更整体,所以小伙伴们觉得可以将画面的边框去掉,采用无边框设计,左右图表叠加在画面两侧,从视觉上感受到画面的整体流畅。


再来就是主视觉画面的上下两侧添加一个深色蒙层将主视觉的感觉压一压会更好,并且主视觉可以用蓝绿高亮表现建筑,高亮显示。同时主视觉应该增加道路拥堵线条展示,不同的颜色代表不同的交通拥堵指数。 左右两侧图表可以想想其他的展示方式,尽量避免都是用柱状图和折线图,不同的图表样式会让画面变得丰富有趣。


智慧城市数据可视化优秀设计

 

图片来源BIGDATAROOM

 

这个设计风格真的让人非常舒服,主视觉给人感觉也很棒,线框模型确实是比白模给人的感觉更强烈,颜色也很高级,主视觉表现丰富。 两侧图表的表现方式以及样式又让人眼前一亮。小伙伴们觉得主视觉中如果能用颜色将交通的拥堵程度表现出来,内容上将会更丰满。主视觉医院的建筑再放大一些,将它在画面上明确的凸显出来这样层次感会更强。 而图表的地方可以再将两侧的图表宽度缩小一点,左中右比例可以是1:3:1(但不是一定就是这个比例),然后商区拥堵时间,此处的横向柱状图可以做的再精致一些。


智慧城市数据可视化优秀设计

 

图片来源BIGDATAROOM


这一个版本的设计第一眼看上去就让人能认知这是一个非常好的作品,效果好,主视觉突出,画面有细节,硬要说的话,就是地区交通可以着重表现一下,通过不同颜色的路线图来代表道路不同程度的拥挤。路线的不同颜色会让整个画面活了起来,中间地图区域也就不会让人感觉有点偏绿了。


以上案例可以看出,智慧城市相关的项目在设计的时候可以将画面四周压暗一点,便于左右两侧数据的展示,不选用高饱和度色彩的同时突出主视觉,加强整体画面效果,这样一来就算在此之上叠加信息也不会过于明显。


 图片来源于网络


智慧城市3D可视化有着它先天的优势,它的真实性源自于现实世界,较强的互动性更让人在心理与行为上有参与感,赋予了数据生命力,使得数据显示变得生动,从而构建完整的智慧城市3D可视化管理。