大屏可视化的设计尺寸定义,一直是很多设计师苦恼的一件事,很多时候大屏出现的问题,都是因为对设计尺寸没有一个正确的认识导致。
数据可视化大屏设计比如大屏内容呈现不全、拉伸、压缩、字号小的看不见等等,出现这样的问题就会浪费时间调整返工,本期我们就来认认真真的讨论一下大屏的设计尺寸。
我们设计的可视化大屏通常可以分为两类:一类是拼接屏,由46-55寸的液晶显示屏拼接而成,有一定的缝隙;
一类是L E D屏无缝隙,是由成千上万个L E D灯构成像素点,发光像素点之间的距离是L E D显示屏的规格,用P值表示,P值越小成像越优秀细腻,对大屏类别的了解,有助于计算设计尺寸及比例。
大屏成像原理几乎都是投屏,也就是把电脑屏幕通过有线信号投放到大屏上,电脑上呈现什么内容,大屏上就会呈现什么内容。
在电脑上的交互操作大屏会同步进行,这就是投屏,看下图所示,电脑上风景图投放到大屏上显示。
虽然投屏的原理没问题,但这样的展示换成可视化页面就会有问题,不知道你会不会发现,后面我们揭晓。
总结:
本章节只需要记住一句话“电脑上呈现什么内容,大屏上就会呈现什么内容”,所以电脑上出现滚条是绝对不可以的。
大屏和电脑同比例设计
首先要强调一点,不可以以大屏的分辨率定义设计稿尺寸,当大屏的比例和电脑屏幕的比例一样时,要结合电脑屏幕的分辨率来定设计稿尺寸。
比如电脑屏幕分辨率为1920*1080,那设计稿就可以是这个尺寸,当电脑屏幕是3840*2160(4K)屏时,可以用1920~3840*1080~2160同等比例任意数值。
当电脑是4k分辨率时,虽然设计稿用1920*1080的设计尺寸也可以实现,但最终在大屏的呈现画面清晰度不够高。
原因是开发人员用1920*1080适配了4k分辨率,这本身就是同比放大关系,再加上投放中的画质损失就会更明显,不过基本上也是可以接受的范围内。
虽然画质影响不大,但优先级上更推荐电脑本身的分辨率
3840*2160作为设计稿尺寸,这样1比1的呈现最能保证画面质量。
前端开发上只需要按尺寸固定写即可,下图为4k设计稿,中间的图像能相对更清晰。
4k设计稿(图片来源51W O R L D)
大分辨率的设计尺寸还有个优势就是可以呈现更多的内容,同时在设计上的字号也要相对更大,比如1920上面16p x字号,3840最好也能做到两倍左右的放大。
当然也完全可以用1920*1080设计尺寸设计,最后导出4k尺寸,也就是2倍图,包括切图也是导出2倍图。
总结:
当大屏电脑比例一致,电脑屏幕分辨率为1920*1080时,设计稿为电脑分辨率尺寸大小;
分辨率为3840*2160时设计稿优先级是3840*2160、
1920*1080、之间同比例数值,当小于电脑分辨率时开发方式要适应屏幕大小。
说完同比例的大屏电脑设计,接下来说不同比例的情况,一般的问题都出在了不同比例的设计上。
当大屏和电脑屏幕是不同比例时,牢记一点,一定要保证大屏的展示是正常的,这是必须的。