数据可视化是一门庞大系统的科学,本文对可视化设计中常用的硬件设备,及各种拼接形式的设计尺寸展开了全面的分析,与大家分享。

可视化设计中,如何确定尺寸?

数据可视化设计中尺寸的确定也是至关重要的,尺寸的准确性,将直接影响到后期的设计、开发、适配及视觉效果清晰度等。为了更加准确高效的完成设计目标,前期确定好设计尺寸很关键,也是设计开始的必备条件。

可视化设计中,如何确定尺寸?

图中是3*5的拼接方式,总之不同场景会有不同的拼接方法。不管怎样拼设计方法是一样的,本次针对3*5的拼接方式做分析。

应该怎样设计:

大多数屏幕分辨率是1920*1080。按上方排列方式横向分辨率为6*1920=11520px。竖向分辨率为3*1080=3240px。设计可以按照横竖计算后的总和作为设计尺寸。

但是像这种尺寸过大就不太合适,怎么判断什么时候可按照总和设计什么时候最好不要按照总和设计。这个地方有一个关键的节点4K,超过4K后现有硬件会产生很多问题,例如:卡顿,GPU压力过大,高负荷运行等等。

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

注意事项:

注:最好是按照硬件的输出分辨率设计(关键),按照输出分辨率设计,一定不会出错。

2. LED

LED也是现在大屏中常采用的硬件,他的像素点计算及拼接方式与拼接屏有很大区别,下面我们针对LED的实际情况分析应该怎样确定设计尺寸。LED可以看成是矩形点阵,具体拼接方式也会根据现场实际情况有所不同,拼接方式的不同直接影响到设计的尺寸规则。

可视化设计中,如何确定尺寸?

怎样定义设计尺寸:

LED大屏是由若干单体屏幕模块组成的,LED屏有很多规格,各规格计算方法相同,我们用单体为500mm*500mm的作为标准计算,每个单体模块像素点横竖都为128px,如图横向12块竖向6块,横向像素为128*12=1536px,竖向128*6=768px。可以使用横竖总像素去设计。此处规则和之前一样,如果超过4K像素时可以等比缩放,尽量保持在4k及以下。如有输出像素时按照输出像素设计。

3. 投影方式

采用这种形式的大屏也经常见。在效果、清晰度画质等层面相比拼接屏,led会差很多。

特别大的内容会采用多投影融合而成,投影仪可投的像素值根据不同的设备会有所不同。例如:1920×1200、2048×1080等等,具体有一个简单了解即可。

可视化设计中,如何确定尺寸?

怎样定义设计尺寸

首先确定投影像素,如果是多投影融合可采用长宽像素值相加,然后根据总尺寸设计。同时也可用设备输出像素作为设计尺寸。输出像素不一定和多投影融合的总尺寸相等,但是比例一定是相同的。(特殊情况请参照结尾重点总结部分第5条)

4. 电脑屏幕直接投屏形式

这个应用场景多数是会议室、展会、展厅上使用的较多。下面介绍下直接投屏的方式应该怎么设计。

同比投屏,电脑显示的内容会完整等比的投放到大屏上。以电脑分辨1920*1080等比投到2*2的的大屏上为例,(拼接屏每块分辨率为1080*1920),拼接屏和电脑为等比例。

拼接屏总尺寸为3840*2160(4K)。电脑输出只有1920*1080。虽然拼接屏达到4K由于输出像素不够,那投到4k拼接屏上也是1920*1080等比放大而已,等比关系不会变形。此时设计应该按照1920*1080设计,输出像素不够设计再大的尺寸也是无意义的。

可视化设计中,如何确定尺寸?

同理如果电脑显示是1920*1080。但是可以输出高分辨率,可以直接输出4K,那投到拼接屏上显示为3840*2160。这个取决于输出能力。此时设计应该按照3840*2160设计。这样既保证电脑上清晰也保证输出到拼接屏上是清晰的。此种情况不要用1920*1080的尺寸设计,清晰度会受损。

可视化设计中,如何确定尺寸?

5. 电脑屏幕非直接投屏

这个的应用场景在指挥大厅、会议室、展会、展厅上使用的较多。下面介绍下非直接投屏的方式应该怎么设计。

在实际场景中,会根据内容及拼接方式有所不同,例如:3*6、2*4等等各种都不同,这种情况下一般不会采用屏幕直投的形式,甚至用不到电脑的显示器,都是主机直接输出给拼接屏现场调试。

这种过程基本是通过软硬件配合完成最终实现大屏适配。电脑信号会通过软件及硬件处理后对接到大屏,本次只说明设计尺寸问题,软硬件暂时忽略。

这种情况不要考虑适配电脑屏幕又适配拼接屏,完全没有必要,也不可能一稿既适配电脑也适配大屏的。此种情况应用最多的是采用小屏控制大屏的形式设计,要针对性设计,这才是现阶段最佳的解决方法。

可视化设计中,如何确定尺寸?

通过多屏幕拼接的方式实现,面积大分辨率高,

设计时要关注以下几点:

(1)屏幕拼接方式

(2)单屏幕像素及拼接后像素

(3)输出像素

这些决定了设计尺寸、内容排布、拼接缝的规避等问题。

设计方式是文章开始描述的拼接屏的设计方法。

6. 小屏控大屏的尺寸定义

小屏控制大屏也是比较常见的一种情况。上面的设计尺寸方法了解了这个就比较简单了,大屏内容和小屏内容几乎是没有完全适配的,也是非常不现实的。针对这种情况,我们采用针对性设计。大屏尺寸已经没问题了,现在针对小屏幕介绍。

大屏弊端在于适合远距离观看,并不易操作,更多的采用小屏去控制,小屏幕更多的是操作性的东西。市面上常见的控制设备有:iPad、控制台、触控屏、红外线触控屏等等。控制端基本按照实际尺寸设计即可,这里就不过多展开说了。

可视化设计中,如何确定尺寸?

7. 多主机多信号形式

这种情况也是实际场景中会用到的。屏幕巨长并且内容可分割的情况下,由于单台主机无法达到超高的尺寸,会存在多个硬件主机输出。这种形式其实就类似于屏幕拼接。

总屏幕为2*6的拼接屏,单台主机可以输出为2*2的拼接屏像素总和。通过三台主机分别对2*6的拼接屏做信号输出,形成完成的一个大屏可视化。

可视化设计中,如何确定尺寸?

怎样定义设计尺寸:

一般这种屏幕分辨率总和都是超大的。例如上方每块屏幕分辨率1920*81080。横竖总和分别为11520px、2160px。无法直接用拼接屏横竖总像素作为设计尺寸,这种设计应该是采用三台输出像素总和作为设计尺寸,输出每台主机设备仅有1920*1080。设计尺寸为宽:1920*3=5760px,高:1080px。

重点总结:

(1)设计尺寸建议按照输出分辨率设计(重点)

(2)总拼接后像素在4k左右可按照总和设计

(3)结合设备不要超过4k(非固定,强烈建议)

(4)了解硬件及信号输入输出,确定设计尺寸

(5)特殊情况:输出比例和(拼接屏、LED、投影仪)的实际尺寸不同也不成比例。这类尺寸一律按照输出像素设计。

本文@聂永真 原创发布于人人都是产品经理,未经许可,不得转载。

题图来自Unsplash,基于CC0协议




阻力设计在产品中的应用

阻力设计在产品中的应用

阻力是指物体在流体中相对运动所产生与运动方向相反的力,不仅在自然间中常见,在互联网中也广泛存在。本文作者从五个角度,深入分析阻力设计在产品中的应用,希望对你...

2020-06-18
如何成为一个合格的数据架构师?

如何成为一个合格的数据架构师?

数据架构师在互联网行业中是个很重要的职位,是企业数据资产最重要的“奠基者”。那么,如何成为一个合格的数据架构师呢?本文作者基于自身经历,从三个方面展开介绍,推...

2020-06-18
倒推“抖音短视频”APP产品需求文档

倒推“抖音短视频”APP产品需求文档

文章是倒推“抖音短视频”APP产品需求文档,但由于作者是第一次写需求文档,所以仅对核心需求进行了需求分析与说明。一起来看看~ 目录: 一、文档综述 1.1文档属性 1.2产...

2020-06-18
微信“拍一拍”,真的是一个没什么用的功能吗?

微信“拍一拍”,真的是一个没什么用的功能吗?

昨天微信上线了“拍一拍”功能,用户点击2次头像,会产生头像抖动,震动反馈,且在聊天框中显示“XX拍了拍XX”。 这个功能推出后,很多微信群都在疯狂拍一拍,引起了一波拍...

2020-06-18
数据大屏设计师,我不信你没有这些困惑(上)

数据大屏设计师,我不信你没有这些困惑(上)

从事互联网行业的人,每天都在接收新知识,时常也会有迷惑的时候,尤其是数据大屏这样比较少有人踏足的领域。本文作者以自身经历出发,对数据大屏设计提出了自己的一点...

2020-06-18
客户关系管理的15个模型总结(下)

客户关系管理的15个模型总结(下)

对于ToB产品,仅仅基于用户需求来设计产品架构是远远不够的。B端产品服务的是有着几年,甚至几十年管理积淀的企业,必须依靠一定的理论知识来支撑系统的设计规划。本文...

2020-06-18
B端产品设计:价值主张与需求对应的价值

B端产品设计:价值主张与需求对应的价值

B端产品的需求来源于场景,产品经理通过满足客户需求从而产生价值。因此,SaaS产品经理面对扑面而来的需求时,应当更清晰理解并评判需求的价值。 01 2008年,著名商业...

2020-06-18
以知乎为例,探讨未来产品设计的几大变化

以知乎为例,探讨未来产品设计的几大变化

知乎作为一个典型的问答社区,它本身反映了内容社区产品的很多典型问题。本文以知乎为例,探讨社区类产品未来发展的一些变化,对内容社区感兴趣的童鞋不要错过。 前段...

2020-06-18
如何用产品思维打造线上课程?

如何用产品思维打造线上课程?

如何用产品思维来给自己打造一个线上课程呢?本文从市场调研、课程开发、运营推广、成交这几个方面分享如何打造自己的课程,希望对大家有所帮助~ “地摊经济”重出江湖,...

2020-06-18
「武侠连载」营销中心设计——优惠券

「武侠连载」营销中心设计——优惠券

优惠券是常见的一种营销推广的方式,但是你真的了解它吗?本文作者以武侠故事的形式,对优惠券展开了生动的分析,对优惠券感兴趣的童鞋不要错过哦。 (武侠情节接上文“...

2020-06-18
金融支付财务融合业务-实践分享1:订单、账单、交易流水、账套知识解构、原理解析

金融支付财务融合业务-实践分享1:订单、账单、交易流水、账套知识解构、原理解析

本文作者从实际工作实践出发,结合案例等分享了电商金融支付财务融合中的基本概念和相关原理解析,包括:订单、账单、交易流水和账知识解构,供大家一同参考和学习。 ...

2020-06-18
关于卡片设计的分析与思考

关于卡片设计的分析与思考

卡片是APP常见的设计形式,它既有好处也有弊端,因此需要根据场景和内容确定展现形式。本文从四个方面对卡片设计展开分析,推荐给对卡片设计感兴趣的童鞋阅读。 卡片是...

2020-06-17
内容型产品中,付费会员功能如何设计?

内容型产品中,付费会员功能如何设计?

付费会员制度让用户预付会员费,将钱留在平台,那么未来一定会有消费行为,那么会员制度要如何设计,才能激励用户付费呢? 01 为什么要做付费会员? 讨论这个问题之前...

2020-06-16
文字社区是否可以拥有弹幕?

文字社区是否可以拥有弹幕?

从社区产品的角度来思考,弹幕功能对于内容生产方,内容消费方以及平台方而言各自有什么意义?图文内容社区是否有机会拥有弹幕呢?如果可以发弹幕,用怎样的形式呢?本...

2020-06-16
FMS财务系统收支结算总结

FMS财务系统收支结算总结

本文按照FMS收支结算划分,结算流程分类及各系统交互,财务系统内部结算基础能力,收支结算整体结构的顺序来依次介绍,总结财务系统收支结算的结构,和一些作者的个人思...

2020-06-16
如何迅速提升用户好评?试试这三种方法

如何迅速提升用户好评?试试这三种方法

小编推荐:如何提高一个产品的用户评分,改变大家对这个产品的印象呢?本文作者给大家介绍了三个概念:用户体验地图、峰终定律和服务蓝图,并详细解释了该如何使用这三...

2020-06-16
对工具型产品易学习与易使用的思考

对工具型产品易学习与易使用的思考

小编推荐:易学习是指怎么让新用户的学习成本降低,能够很快地掌握产品的使用,它的前提是足够简单和容易理解。而易使用是指,如何让用户快速、高效地完成一项任务,达...

2020-06-16
比对象还懂你!推荐算法为啥这么准?

比对象还懂你!推荐算法为啥这么准?

信息过度和广告过多的社会中,推荐算法的使用也就显得理所当然,但是它是如何做到了解用户的呢?本文从用户画像的定义和设计出发,结合实际案例,深入浅出地阐述了基于...

2020-06-15
B端平台产品需要培养的4种意识

B端平台产品需要培养的4种意识

对于许多刚入行不久的产品经理来说,B端平台产品是比较有难度的一项工作。本文作者基于自己的工作经历,提出了四点关于B端平台产品需要培养的4种意识,希望对你有帮助。...

2020-06-15
广告系列:保留价

广告系列:保留价

在一次拍卖中如果所有买家的报价均小于卖家的估价时,则拍卖品不出售由卖家保留,此时卖家的估价就是保留价,也叫底价,全称市场保留价。对于卖家来说,保留价的设置保...

2020-06-15