百度商桥

400-660-9989

uipower@uipower.com

大屏可视化规范总结

发布时间:2021-7-7 15:00:37

数据可视化是一种以图形描绘密集和复杂信息的表现形式,利用各类图形化的设计手段将复杂不直观的数据有逻辑地展现出来。

设计规范的意义有很多,比如:设计规范空考验设计团队的实例;减少设计出错率,提高工作效率;迭代与交接的更为方便等等。本文结合项目,和大家聊聊大屏可视化规范有哪些。

一、设计原则

1.数据转化要真实准确。

2.信息传达要明确,清晰的表达重要信息。

3.有条理性的表达内容,使用户在短时间内获取更多信息。

4.根据产品的需求,使用不同的元素进行设计(避免过度修饰)。

二、图表的形式展现

常见的图表有柱状图、折线图、条形图、面积图、仪表盘、饼图、等等。根据产品的需求,在选择图标是要理性,合理利用图表进行设计。例如:数据的统计、分析、对比、反映数据的差异可使用柱状图表示,柱状图又分,分组柱状图、堆叠柱状图、百分比柱状图等;数据实时变化可使用折线图,在折线图中,数据是递增还是递减等一些数据都可以清晰的反映出来;饼图则将数据转化为百分比的形式展现,使各项数据清晰易懂,饼图不适合用于数据量大分类很多的场景。所以数据可视化的第一步就是选择合适的图表类型,从而达到最好的效果。

UIPower案列-UIpower
UIPower案列-UIpower

三、屏幕分辨率

最为常见的就是黄金比例16:9 ,也就是1920*1080的分辨率,它是指显示器的宽高比,是由宽度除以高度所得的比例,根据人体工程学的研究,发现人的视野范围是长宽为16:9的长方形,所以根据这个黄金比例尺寸设计产品。

遇到较大分辨率可以按照16:9,长宽叠加的方式得到不同比例的拼接屏比例,例如32:9是由两个16:9拼接屏得到的比例。拼接屏的形式很多,主流的有无缝隙、3.8mm缝隙、3.5mm缝隙、1.8mm缝隙等等,按照基础要素,根据不同产品需求进行调整即可。

UIPower案列-UIpower

四、字体规范

可视化大屏中,字体优先选择系统默认字体,也可以选择苹方字体、思源黑体。英文字体和数字字体推荐使用:DIN、DIGITAL-7、DIN-PRO、ACENS,特殊字体可将字体打包发给开发进行嵌入程序。正常1080P的情况下,文字要求会比一般的要求大一些,16PX为正文字号,最小字号为14PX。字体颜色采用黑色100%、85%、65%、45%。

五、界面配色

配色上,保证达到信息传递、操作指引,凸显某一个重要信息的目的,主色使用深色为背景色,可减少拼缝带来的不适感,同时更容易突出主体,视觉效果更好。告警图配色采用色彩明度与饱和度对比明显的,突出数据的差异。渐变色的使用需慎重,因为大屏有色差,显示偏色,所以使用渐变时,应根据大屏反馈的色差进行调整。最后还是向大家推荐使用纯色-7、DIN-PRO、ACENS,特殊字体可将字体打包发给开发进行嵌入程序。正常1080P的情况下,文字要求会比一般的要求大一些,16PX为正文字号,最小字号为14PX。字体颜色采用黑色100%、85%、65%、45%。

孟子曰:不以规矩,不能成方圆。规范的约束使我们的生活能够正常运行,同样UI设计行业也是如此。正如前言所讲,设计规范是否完善,对整个产品起着关键性的作用。

最后希望本文能够帮助到从事这个行业的朋友们。