可视化大屏设计尺寸_UI设计中大屏可视化设计尺寸指南
大屏可视化的设计尺寸定义,一直是很多设计师苦恼的一件事,很多时候大屏出现的问题,都是因为对设计尺寸没有一个正确的认识导致。
比如大屏内容呈现不全、拉伸、压缩、字号小的看不见等等,出现这样的问题就会浪费时间调整返工,今天我就带大家来认认真真的讨论一下大屏的设计尺寸。
大屏的类别及成像
我们设计的可视化大屏通常可以分为两类:一类是拼接屏,由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设计中大屏可视化设计尺寸指南https://www.aaa-cg.com.cn/ui/2760.html大分辨率的电脑显示器扩展性更强,所以首先考虑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设计师的工作相关的主要技能。如果您想了解更多信息,请给我点个关注,我之后还会发包含有关在该领域工作的更多相关文章。
可视化大屏设计尺寸_UI设计中大屏可视化设计尺寸指南相关推荐
- c语言可视化学生管理系统,课程的设计C语言可视化程序学生成绩管理系统.doc
课程的设计C语言可视化程序学生成绩管理系统 C语言可视化程序 设计报告 行政班级 机械0805 姓名 魏永涛 学号 0806080524 指导老师 夏建芳 课题名称 学生成绩管理系统 C可视化程序设计 ...
- python 可视化大屏幕_如何用python搭建可视化看板?
可视化看板是指大屏 驾驶舱 dashboard这些吗,如果是,那不建议用python来做,不专业,目前没有见过哪个项目上的大屏是用python做的,它不是万能的 大屏的制作一般是这样的 先根据用户的需 ...
- 可视化大屏设计指南,附20份可直接套用的实用模板
如何开发一个可视化大屏? 现在很多公司对可视化大屏非常热衷,原因很简单,大多数公司都存储了很多原始数据,比如报表数据.业务数据.财务数据等,但是领导高层无法理解如此庞大的数据细节. 所以很多高层都喜欢 ...
- Flask+Echarts搭建全国疫情可视化大屏
Flask+Echarts搭建全国疫情可视化大屏 1.前言 2.实现 2.1 搭建flask应用 2.2 编写html及其对应css代码 2.3 可视化展示 2.3.1 左上角板块 2.3.2 中间上 ...
- 中嵌套的页面如何操作父页面_UI设计中签到页面如何设计
签到,是一种人类行为上的规束,常常被用于一些会议和活动的中,经常被用来作为奖惩的依据.今天我就针对UI设计中签到页面如何设计进行简单的说明. 虚拟世界中的签到 – 从游戏签到,以领虚拟奖励,到购物节签 ...
- 可视化大屏设计尺寸_可视化大屏设计_酷炫不是最高效的大屏展示的唯一标准...
目前市面上有众多做大屏的可视化BI工具,有的部分企业为了要实现其功能效果而令人感到枯燥乏味,或者是为了看上去绚丽多彩而显得极端复杂,从而实现对于相当复杂而又冗余数据的深入分析,让企业决策者难以理解数据 ...
- 拼接大屏数据展示_可视化大屏的UI设计是根据哪几个方面来进行?
随着大数据产业的发展,越来越多的公司开始意识到数据资源的管理和运用,特别是一些中.大型企业,在日常中会经常用到可视化大屏,这个时候就需要UI设计师能呈现出相应的视觉效果.下面,就给大家介绍一下可视化大 ...
- 大数据可视化大屏设计经验,教给你!
前言 大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的 ...
- 数据可视化大屏设计尺寸怎么定?
数据可视化大屏设计尺寸怎么定? 大屏可视化的设计尺寸定义,一直是很多设计师苦恼的一件事,很多时候大屏出现的问题,都是因为对设计尺寸没有一个正确的认识导致. 比如大屏内容呈现不全.拉伸.压缩.字号小的看 ...
最新文章
- /proc/meminfo详解 = /nmon analysis --MEM
- 问题集锦(36-40)
- 致敬各位10年阿里的前端开发
- ubuntu18.04系统下使用锐捷校园网两种方法:锐捷客户端登陆和Mentohust登陆方法
- Win10,Python 3.6环境下安装PyQt4
- js 计算个人所得税
- 基于WPA的暴力破解(JAVA实现破解WIFI)
- 使用CNN进行情感分析(Sentiment Analysis)
- 第1140期AI100_机器学习日报(2017-11-01)
- Spring5基础知识
- 美国VPS服务器选择贴士
- 链表之Reverselist
- mongodb持久化
- Java 获取疫情数据
- 「低功耗蓝牙模块」主从一体 蓝牙嗅探-助力智能门锁
- typec扩展坞hdmi没反应_TYPE-C用不溜,可能你缺一个扩展坞
- 饭谈:软件测试的下水道井盖为什么是圆的?
- 外校保研北大计算机,北大2018年本校保研率超53% 外校生多来自双一流名校
- mysql xa 序列化_MYSQL 的数据序列化Api接口详情
- 投资合伙人股份分配_两个股东,合伙人投资14万。这个股份应该怎么分配?纯利润应该 - 找法网(findlaw.cn)...
热门文章
- Channel 通道详解
- Redis学习笔记1-理论篇
- 计算机函数公式的英文表达式,Houdini Expression functions 函数表达式中英文对照(二)...
- 避风港暗流涌动,优衣库优势不再
- VO,PO,BO,QO, DAO ,POJO,的概念
- 老五苏-34:慧眼独具 比起“大哥”苏-27,苏-34的个子要高大一些。
- 高通滤波与低通滤波的简单理解
- vi打开文件提示Another program may be editing the same file
- 大数据部门的作用与大数据工程师的工作
- dva脚手架创建的项目目录结构分析