可视化⼤屏设计尺⼨_数据可视化⼤屏设计尺⼨怎么定？
⼤屏可视化的设计尺⼨定义，⼀直是很多设计师苦恼的⼀件事，很多时候⼤屏出现的问题，都是因为对设计尺⼨没有⼀个正确的认识导致。
⽐如⼤屏内容呈现不全、拉伸、压缩、字号⼩的看不见等等，出现这样的问题就会浪费时间调整返⼯，今天我就带⼤家来认认真真的讨论⼀下⼤屏的设计尺⼨。
⼤屏的类别及成像
我们设计的可视化⼤屏通常可以分为两类：⼀类是拼接屏，由46-55⼨的液晶显⽰屏拼接⽽成，有⼀定的缝隙;
⼀类是LED屏⽆缝隙，是由成千上万个LED灯构成像素点，发光像素点之间的距离是LED显⽰屏的规格，⽤P值表⽰，P值越⼩成像越优秀细腻，对⼤屏类别的了解，有助于计算设计尺⼨及⽐例。
⼤屏成像原理⼏乎都是投屏，也就是把电脑屏幕通过有线信号投放到⼤屏上，电脑上呈现什么内容，⼤屏上就会呈现什么内容。
在电脑上的交互操作⼤屏会同步进⾏，这就是投屏，看下图所⽰，电脑上风景图投放到⼤屏上显⽰。
虽然投屏的原理没问题，但这样的展⽰换成可视化页⾯就会有问题，不知道你会不会发现，后⾯我们揭晓。
总结：
本章节只需要记住⼀句话“电脑上呈现什么内容，⼤屏上就会呈现什么内容”，所以电脑上出现滚条是绝对不可以的。
⼤屏和电脑同⽐例设计
⾸先要强调⼀点，不可以以⼤屏的分辨率定义设计稿尺⼨，当⼤屏的⽐例和电脑屏幕的⽐例⼀样时，要结合电脑屏幕的分辨率来定设计稿尺⼨。
⽐如电脑屏幕分辨率为1920*1080，那设计稿就可以是这个尺⼨，当电脑屏幕是3840*2160(4K)屏时，可以⽤1920～3840*1080～2160同等⽐例任意数值。
当电脑是4k分辨率时，虽然设计稿⽤1920*1080的设计尺⼨也可以实现，但最终在⼤屏的呈现画⾯清晰度不够⾼。
原因是开发⼈员⽤1920*1080适配了4k分辨率，这本⾝就是同⽐放⼤关系，再加上投放中的画质损失就会更明显，不过基本上也是可以接受的范围内。
虽然画质影响不⼤，但优先级上更推荐电脑本⾝的分辨率3840*2160作为设计稿尺⼨，这样1⽐1的呈现最能保证画⾯质量。
前端开发上只需要按尺⼨固定写即可，下图为4k设计稿，中间的图像能相对更清晰。
4k设计稿(图⽚来源51WORLD)
⼤分辨率的设计尺⼨还有个优势就是可以呈现更多的内容，同时在设计上的字号也要相对更⼤，⽐如1920上⾯16px字号，3840最好也能做到两倍左右的放⼤。
当然也完全可以⽤1920*1080设计尺⼨设计，最后导出4k尺⼨，也就是2倍图，包括切图也是导出2倍图。
总结：
当⼤屏电脑⽐例⼀致，电脑屏幕分辨率为1920*1080时，设计稿为电脑分辨率尺⼨⼤⼩;
分辨率为3840*2160时设计稿优先级是3840*2160、1920*1080、之间同⽐例数值，当⼩于电脑分辨率时开发⽅式要适应屏幕⼤⼩。
⼤屏和电脑不同⽐例设计
说完同⽐例的⼤屏电脑设计，接下来说不同⽐例的情况，⼀般的问题都出在了不同⽐例的设计上。
当⼤屏和电脑屏幕是不同⽐例时，牢记⼀点，⼀定要保证⼤屏的展⽰是正常的，这是必须的。
分享⼀个反例，看下图，投屏电脑是由两块16:9的屏幕组成的32:9⽐例的显⽰屏，⼤屏⼤概是20:9的⽐例。
现在⼤屏的内容呈现是压瘪状，尤其饼图已经成椭圆形，问题不再开发，⽽是设计。
反⾯案例
原因是设计师的设计尺⼨按32:9设计，在电脑上呈现1:1没有任何问题，投放到⼤屏上⽐例压到20:9，因为投放关系页⾯上所有的元素都会呈现压瘪状态。
所以开篇图⽚投放案例，问题也出在不同⽐例的投放上，⼤屏上的图⽚被拉伸变形，视觉上不会太明显，但是可视化图表的呈现就会很难受，⽐如饼图被压瘪或拉伸。
改正的⽅法就是按⼤屏的⽐例设计，保证⼤屏的正常呈现，电脑上差点⽆关紧要。
本案例中两台显⽰器组成32:9的屏幕投放并⾮是最优的⽅案，接下来⽤⼀个案例来详细解析。
案例解析
⼀个4*7的拼接⼤屏，分⽐率13440*4320，⽐例为28:9，如何给配置最合适的电脑⽐例屏幕投屏?
其实能到28:9的最佳，但据我了解⽐较困难，我也咨询很多这⽅⾯的公司，没有定制显⽰器⽐例的服务。
所以就要最接近的这个⽐例的显⽰器，在某电商平台查了个遍，最常见的有以下⽐例显⽰器：
1、16:9(1920*1080)
2、16:9(3840*2160)
电脑显示器分屏3、16:10(1920*1200)
4、21:9(3440*1440)
其实根据我们上⾯的结论，UI设计中⼤屏可视化设计尺⼨指南⼤分辨率的电脑显⽰器扩展性更强，所以⾸先考虑4k⼤分辨率显⽰器，但16:9与28:9相差过⼤，如下图所⽰：
这样的⼀个压缩程度在操作会存在⼀些问题，例如有交互的⼤屏，很⼩的按钮就会被压的很瘪，导致
点击的精准度下降，影响操作体验。
下图所⽰，⽤两个屏幕组合成⼀个屏幕称为32:9的⽐例，这样是较为接近28:9，所以最为合适。
虽然两个16:10的显⽰器⽐例为29:9最为接近，但分辨率过低，没有很强的扩展性。
所以前⼀章节分享的反例，20:9的⼤屏⽤16:9的显⽰器更为合适，因为16:9更接近⼤屏的⽐例。
虽然理论上了我们可以到最优的⽅案，但现实⼯作中不⼀样，例如某个事业单位⼀直都是16:9电脑屏投放28:9的⼤屏，你⾮说⼈家这样不⾏，得加个显⽰器，没必要!
我们⾝为设计师出于对产品的负责，可以提出建议，但不要去争论，因为影响不是很⼤，我们把⼤屏的完美呈现保证好才是最终⽬的。
总结：
1、要以⼤屏的⽐例去定义设计稿，保证⼤屏完美呈现
2、4k分辨率电脑，优先使⽤⼤分辨率作为设计稿
3、使⽤最接近⼤屏分辨率的电脑屏幕⽐例投放
⼤屏设计稿分辨率的计算
拼接的每块⼩屏⼀般是16:9的⾼清屏，设计尺⼨可以把上下⾼度设定为1080px或更⼤的⾼度，我们以1080px为例，宽⾼按照拼接屏的数量⽐例算出设计尺⼨。
例如3乘5的⼀块⼤屏幕，⾼度3块屏设为1080，每块⾼就是360，360除9乘16等640，640就是⼀块屏幕的长度，640乘5块屏
=3200最后得出设计稿尺⼨就是：⾼1080px乘宽3200px
重要知识点解析
下⾯要讲的⾮常重要，就是⼤屏的字号使⽤问题，因为字号返⼯是⼀件⾮常恐怖的事(经验之谈)，可能需要改样式，甚⾄重新设计都不为过。
我们都知道⼤屏的开发本⾝就是基于web端，⽹页中最⼩字号为12px，但这个字号在⼤屏中会显的很⼩。
因为⼤屏本⾝很⼤，观者需要站在较远地⽅才能看全貌，所以在字号上最好能相对⼤⼀点。
当然也是针对重要信息的⽂字，⼀些图表刻度尺的数值，装饰性的⽂字，⼩⼀些没有关系。
当⼤屏的⽐例较⼤时，字号也应该相应加⼤，看下图：
当⼤屏⽐例更宽时，观者就需要站在更靠后的位置，近⼤远⼩，字号和有些⼩元素需要相应加⼤，当然这需要根据实际场景⽽定。
我⼀直认为⼤屏设计，设计师需要去现场查看使⽤场景，考察观看位置，定义字号⼤⼩的运⽤;
考察室内环境，当室内的光线较强或较弱，需要⽤不同的颜⾊明度饱和度去尝试;
清楚了解⼤屏偏⾊情况，不同的品牌呈现的⾊调往往也是不⼀样的，这样最终才能营造⼀个相对舒适的⼤屏使⽤环境。
总结：
1、⼤屏设计字号要相对使⽤⼤字号
2、当⼤屏⽐例更⼤时，要相应的调整字号
3、设计师对⼤屏的本⾝和使⽤环境考察
⼤屏的分屏设计
分屏是⼤屏很常见的展⽰⽅式，分屏⽅式⼀般有两种，⼀种是通过平板电脑软件控制分屏，在可视化的呈现领域中很少⽤到。
平板电脑软件控制⼤屏分屏
另⼀种⽅式与我们设计相关，是通过多个信号源控制⼤屏分屏，⼀个信号源连接⼀台电脑，所以在设计时，⼀台电脑的显⽰器就是⼀个设计稿。
这种情况通常出现在⾮常宽的⼤屏上，太宽的⼤屏就不太适⽤于多个电脑屏幕组成投屏，如下图由6个信号源组成的⼤屏。
总结：
每个信号源对应⼀张设计稿，n个信号源就是n张设计稿。
⼤屏的设计是⼀个新兴的设计学科，它同于APP设计，都需要考虑使⽤场景，不同于⽹页设计，需要结合它独有的特征，定义设计流程及规范。
最后，相信认真看完以上⽂章的你，对⼤屏的设计尺⼨会有⼀个更深刻的认识，并且当遇到类似问题，也能够迎刃⽽解。因此，您现在已经了解了与UI设计师的⼯作相关的主要技能。如果您想了解更多信息，请给我点个关注，我之后还会发包含有关在该领域⼯作的更多相关⽂章。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论