干货UI设计全书-之可视化屏幕设计尺寸

585 阅读3分钟

在工作中,经常被同事问到这样问题,applemm可视化屏计尺寸该如何设计呐?该遵守什么样设计规范呐?我查阅设计资料,看过一些可视化文章,转载一些原稿的图片与话语,自己整理小册。希望能和大家一起共同讨论这个在工作中遇到场景。下面带着大家详细了解可视化怎么确定尺寸的困扰。

有一次产品总监问我是否可以设计宽屏? 当然可以啦!

1. 首先要知道客户当前可视化展示屏幕是什么形式?(怎样确定尺寸)

可视化中常用的硬件设备一般有拼接屏LED投影等形式。不同硬件设备在设计尺寸时有共性,也存在不同的规则。

拼接屏方式

那么我们理清思路先说说拼接屏是什么,顾明思义就是很多屏幕按照一定拼接而成。其实可以理解成是有很多电视拼接而成。(常用的使用场景有指挥大厅、展厅、展会等等。)拼接方式取决于使用场景的需求,一般设计的可视化尺寸一屏幕为1920*1080的尺寸。下面看看这张图

001.jpg图中是3乘以5的拼接方式,如果我们要拼接3乘以5屏幕,转化成设计尺寸就是3240*9600,在PhotoshopCC2021 新建成如下图

image.png

但是像这种尺寸过大就不太合适,例如:卡顿,GPU压力过大,高负荷运行等等。

image.png

正常设计最好是保持在4K内,既保证流畅度又能在视觉上清晰阅读。设计时需要保持同样的规则。保持大屏的比例等比缩放即可,应该缩放到多少呢?缩放到输出像素尺寸即可(正常输出像素是和拼接后整体像素值是成比例关系的)

输出如下方式

image.png

image.png

image.png

注意事项注:最好是按照硬件的输出分辨率设计(关键),按照输出分辨率设计,一定不会出错。 以上方法仅供参考

LED方式

LED是现在大屏中常采用的硬件,LED的像素点计算及拼接方式与拼接屏有很大区别,那么针对LED屏幕如何确认设计尺寸呢?大家看看下面这张图,方法如拼接屏幕一样转化。

002.jpg

LED可以看成矩阵图,一个点为500mm乘以500mm的作为标准计算,每个单体模块像素点横竖都为128px,如图横向12块竖向6块,横向像素为128乘以12=1536px,竖向128乘以6=768px。可以使用横竖总像素去设计。此处规则和之前一样,如果超过4K像素时可以等比缩放,尽量保持在4k及以下。如有输出像素时按照输出像素设计。

投影方式

采用这种形式的大屏也经常见。在效果、清晰度画质等层面相比拼接屏,led会差很多。 特别大的内容会采用多投影融合而成,投影仪可投的像素值根据不同的设备会有所不同。例如:1920x1200、2048x1080等等,具体有一个简单了解即可。

图片

最后总结一下,以下都是个人理解建议,如有出入请批评指正

图片

(1)设计尺寸建议按照输出设备分辨率设计(重点) (2)总拼接后像素在4k左右可按照总和设计,设备不要超过4k(非固定,强烈建议) (3)了解硬件设备来考虑设备(拼接屏、LED、投影仪)尺寸方式,来转化成设计像素;